/* Купол · «Glass Command» — візуальний шар: мереживо-фон, скло, плиток-статистика, рух,
   центр сповіщень і командна палітра. Підключається serve.py після theme.css; site/ не чіпается.
   Працює для всіх ролей і вкладок, бо править только класи банла, а не розмітку. */

/* ---------- 1. фон: власне зображення, зверху ским, мереживо і зерно ---------- */
:root body {
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(var(--cmd-grid) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, var(--cmd-grid) 1px, rgba(0, 0, 0, 0) 1px),
    var(--cmd-scrim),
    var(--cmd-photo),
    var(--l-grain) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  background-position: 0 0, 0 0, center top, center top, 0 0 !important;
  background-size: 34px 34px, 34px 34px, cover, cover, 140px 140px !important;
  background-attachment: fixed, fixed, fixed, fixed, scroll !important;
}

/* банлові «дихаючі» плями лишаємо як легкий відтінок поверх фото — інакше вони бʼють по контрасту */
:root .atmo__puff {
  opacity: .3 !important;
  filter: saturate(.85);
}

:root[data-theme="dark"] .atmo__puff {
  opacity: .22 !important;
}

@media (prefers-reduced-motion: reduce) {
  :root .atmo__puff {
    animation: none !important;
  }
}

/* ---------- 2. скло: спільний рецепт ---------- */
:root :is(.plate, .k-card, .k-panel, .k-sheet, .objmenu, .k-drop__menu, .legend, .maphead, .mapctl,
          .seg, .demobar, .plate--demo, .statv__tile, .typestat__row, .k-table, .tgt, .kupol-dock,
          .pickmap__canvas, .card--map, .mapbox) {
  background: var(--g-fill) !important;
  border-color: var(--g-border) !important;
  box-shadow: var(--g-shadow) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
}

/* плашка статусу — банл фарбує її у --bar-bg (lime/warn/crit/unknown).
   Скло тут не «зашічаємо» у нейтральне: тримаємо сигнал, робимо його напівпрозорим. */
:root .bar {
  background: color-mix(in srgb, var(--bar-bg, var(--lime)) 76%, transparent) !important;
  box-shadow: var(--el-2), var(--g-shadow) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
}

/* дрібний підпис (статус/таймер) банл бере напівпрозорим: на лаймі це 4.7, але на бурштині
   й червоному падає до 4.0/4.2 — нижче AA. Тримаємо відтінок чорнила й лише знімаємо прозорість. */
:root .bar {
  --bar-soft: color-mix(in srgb, var(--bar-ink, var(--ink)) 95%, transparent);
}

/* тости банла — olive-плашка з білим текстом; на склі білий зникає, тому задаємо пару фон/текст самі */
:root .k-toast {
  background: var(--g-fill-hi) !important;
  color: var(--ink) !important;
  border: 1px solid var(--g-border) !important;
  box-shadow: var(--el-3), var(--g-shadow) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
}

:root .k-toast[data-tone="bad"] {
  background: color-mix(in srgb, var(--crit) 16%, var(--g-fill-hi)) !important;
  border-color: color-mix(in srgb, var(--crit) 46%, transparent) !important;
}

:root .k-toast__x {
  color: var(--ink-3) !important;
}

/* верхній блиск на «плаваючих» плитках — той самий ефект матового скляного блока */
:root :is(.k-card, .statv__tile, .typestat__row, .maphead, .k-panel, .plate) {
  position: relative;
  isolation: isolate;
}

/* легенду чіпаємо лише ізоляцією: банл тримає її position:absolute з якірцем bottom:12px
   всередині .mapbox{overflow:hidden}. Примусити їй position:relative — і вона стає в потік
   над картою, де її верх відрізається тією ж overflow:hidden. */
:root .legend {
  isolation: isolate;
}

:root :is(.k-card, .statv__tile, .typestat__row, .legend, .maphead, .k-panel)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--cmd-sheen);
  pointer-events: none;
}

:root :is(.bar, .k-sheet, .k-panel, .legend, .maphead, .mapctl, .objmenu, .k-drop__menu, .plate) {
  border-radius: var(--g-radius-lg);
}

:root :is(.k-card, .statv__tile, .typestat__row, .tgt, .k-toast, .chip) {
  border-radius: var(--g-radius);
}

/* ---------- «ніде не ріже» ----------
   На вузьких контейнерах банл перемикатися у горизонтальні стрічки з overflow:auto — 
   остання KPI-плитка й пункти легенди просто зникають за країм (на десктопі прокрутки не видно).
   Скляний шар повертає перенос замість прокрутки: вміст лишається цілим на будь-якій ширині. */
:root :is(.k-stats, .legend, .seg, .chips) {
  flex-wrap: wrap;
  overflow: visible;
}

:root :is(.k-stat, .legend__item, .seg__btn, .chip) {
  flex: 0 1 auto;
  min-width: 0;
}

/* у мобільній гілці банл малює на легенді «затухаючий» хвіст — натяк на прокрутку.
   Роз ми переносимо вміст, хвіст прибери, інакше він висить окремим плямним блоком. */
:root .legend::after {
  content: none;
}

/* док: довгі підписи («Мої записи») тиснемо многоточям, але ВСЕРЕДИНІ текстового вузла.
   Якщо обрізати саму пілюлю (overflow:hidden на button), зникає абсолютно позиціонований
   бейдж лічильника подій, що висить на її куті — саме він і «обрізався». */
:root .kupol-dock :is(button, a) {
  max-width: 168px;
  overflow: visible;
}

:root .kupol-dock :is(.cmd-bell, .cmd-dock-toggle) > span:not(.cmd-badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root .kupol-dock > a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* мапа під склом не повинна світитися білим у темній темі */
:root[data-theme="dark"] :is(.card--map, .mapbox, .pickmap__canvas) {
  background: var(--g-fill) !important;
}

/* ---------- 3. статистика як командні плитки ---------- */
:root :is(.statv, .k-num, .bar__headline, .seg__count, .htab__count, .drill__count, .k-table, .history, .typestat__row) {
  font-variant-numeric: tabular-nums;
}

:root .statv__tile {
  padding: 12px 14px;
  transition: transform .2s var(--l-ease), box-shadow .2s var(--l-ease);
}

:root .statv__tile:hover,
:root .k-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-2), 0 1px 0 rgba(255, 255, 255, .5) inset !important;
}

:root :is(.seg__count, .htab__count, .drill__count) {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-mute) !important;
  box-shadow: 0 0 0 1px var(--line-soft);
  font-size: 11px;
  letter-spacing: .02em;
}

/* ---------- 4. чипи, пілюлі, маркери ---------- */
:root :is(.chip, .k-pill--ok, .k-pill--warn, .schip__ic) {
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line-soft), var(--el-1);
}

:root .chip[aria-pressed="true"],
:root .ob-chip[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--cmd-ring), var(--el-1);
}

:root :is(.mk__ic, .nav__dot) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--level, var(--lime)) 26%, transparent),
              0 0 0 6px color-mix(in srgb, var(--level, var(--lime)) 12%, transparent);
}

:root [data-level="black"] .mk__ic,
:root [data-status="danger"] .mk__ic {
  animation: kupol-cmd-pulse 1.5s var(--l-ease) infinite;
}

@keyframes kupol-cmd-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 77, 77, .34), 0 0 0 7px rgba(255, 77, 77, .14); }
  50% { box-shadow: 0 0 0 6px rgba(255, 77, 77, .3), 0 0 0 14px rgba(255, 77, 77, .08); }
}

/* ---------- 5. сегменти й кнопки ---------- */
:root .seg {
  padding: 4px;
  border-radius: 999px;
}

:root :is(.seg__btn, .k-btn, .report-btn, .soundbtn, .langbtn, .nav__btn) {
  border-radius: 999px;
}

:root .seg__btn.is-on,
:root .seg__btn[aria-selected="true"],
:root .drill__tab.is-on {
  background: var(--g-fill-hi) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 1px var(--cmd-ring), var(--el-1);
}

:root :is(.seg__btn.is-on, .drill__tab.is-on) .seg__count,
:root .seg__btn.is-on .drill__count {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-2) !important;
}

:root :is(.k-btn--primary, .report-btn:not(.report-btn--ghost)) {
  background: color-mix(in srgb, var(--lime) 78%, transparent) !important;
  color: var(--on-lime) !important;
  box-shadow: 0 0 0 1px var(--cmd-ring), 0 10px 26px color-mix(in srgb, var(--lime) 24%, transparent);
}

:root :is(button.k-btn, .report-btn, .soundbtn, .langbtn, .seg__btn):active {
  transform: translateY(1px) scale(.99);
}

:root :is(.k-row__head, .k-drop__opt) {
  border-radius: var(--g-radius-sm);
}

/* ---------- 6. таблиці консолі ---------- */
:root .k-table {
  overflow: hidden;
}

:root .k-table__head {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-3) !important;
  background: var(--g-fill-hi) !important;
}

:root .k-row {
  border-bottom: 1px solid var(--line-soft);
}

:root .k-row:hover {
  background: color-mix(in srgb, var(--surface-mute) 70%, transparent) !important;
}

/* ---------- 7. вхід ---------- */
:root .plate--login,
:root .ob-gate__card {
  box-shadow: var(--el-3), var(--g-shadow) !important;
}

:root .ident__veil {
  backdrop-filter: blur(3px);
}

/* ---------- 8. рух ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes kupol-cmd-rise {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
  @keyframes kupol-cmd-slide {
    from { opacity: 0; transform: translateX(22px); }
    to { opacity: 1; transform: none; }
  }
  :root :is(.k-sheet, .objmenu, .k-drop__menu, .k-card, .statv__tile, .legend) {
    animation: kupol-cmd-rise .24s var(--l-ease) both;
  }
  .cmd-toast {
    animation: kupol-cmd-slide .22s var(--l-ease) both;
  }
}

/* ---------- 9. центр сповіщень ---------- */
.cmd-bell {
  position: relative;
}

.cmd-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--crit);
  color: var(--on-fill);
  font: 600 10px/17px var(--font, system-ui, sans-serif);
  text-align: center;
  box-shadow: 0 0 0 2px var(--plate-solid);
}

.cmd-badge[data-empty="1"] {
  display: none;
}

.cmd-stack {
  position: fixed;
  right: 16px;
  /* стек живе НАД смугою (demobar + док), інакше перший тост накриває кнопку доку
     — клік тоді припадає на тост (у нього pointer-events:auto), а не на кнопку */
  bottom: calc(var(--cmd-bottom, 120px) + 10px);
  /* і над модальною панеллю подій: новий тост не повинен зникати за відкритою стрічкою */
  z-index: 2147483647;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.cmd-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 10px;
  padding: 10px 12px 10px 0;
  border-radius: var(--g-radius);
  background: var(--g-fill-hi);
  border: 1px solid var(--g-border);
  box-shadow: var(--el-3), var(--g-shadow);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  color: var(--ink);
  font: 500 13px/1.35 var(--font, system-ui, sans-serif);
}

.cmd-toast__bar {
  border-radius: var(--g-radius) 0 0 var(--g-radius);
  background: var(--unknown);
}

.cmd-toast[data-severity="danger"] .cmd-toast__bar { background: var(--crit); }
.cmd-toast[data-severity="threat"] .cmd-toast__bar { background: var(--warn); }
.cmd-toast[data-severity="calm"] .cmd-toast__bar { background: var(--ok); }
.cmd-toast[data-severity="info"] .cmd-toast__bar { background: var(--cmd-accent-2); }

.cmd-toast__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.cmd-toast__body {
  color: var(--ink-2);
  font-size: 12px;
  margin-top: 2px;
}

.cmd-toast__acts {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.cmd-toast__acts button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font: 500 12px/1 var(--font, system-ui, sans-serif);
  cursor: pointer;
  transition: transform .16s var(--l-ease), background-color .16s var(--l-ease);
}

.cmd-toast__acts button:hover {
  transform: translateY(-1px);
  background: var(--surface-hi);
}

.cmd-toast__x {
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}

/* панель подій */
.cmd-veil {
  position: fixed;
  inset: 0;
  /* затемнення має накривати й накладки Glass Command (док, підказку конструктора),
     інакше вони світяться яскравіше за «модальне» тло */
  z-index: 2147483645;
  background: rgba(6, 9, 14, .5);
  backdrop-filter: blur(2px);
}

.cmd-events {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* вище за підказку конструктора (2147483002) і будь-яку поверхню сторінки: панель модальна,
     інакше «Події» відкриваються під нею і виглядають як «ззаду всіх вікон» */
  z-index: 2147483646;
  width: min(430px, 100vw);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  padding: 16px;
  background: var(--plate-solid);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(6, 9, 14, .35);
  color: var(--ink);
  font: 500 13px/1.4 var(--font, system-ui, sans-serif);
  overflow: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .cmd-events { animation: kupol-cmd-slide .26s var(--l-ease) both; }
}

.cmd-events__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cmd-events__head h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: .02em;
}

.cmd-events__tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cmd-filter {
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 12px/1 var(--font, system-ui, sans-serif);
  cursor: pointer;
}

.cmd-filter[aria-pressed="true"] {
  color: var(--ink);
  background: var(--surface-hi);
  box-shadow: 0 0 0 1px var(--cmd-ring);
}

.cmd-events__list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.cmd-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--g-radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}

.cmd-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--unknown);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.cmd-item[data-severity="danger"] .cmd-item__dot { background: var(--crit); }
.cmd-item[data-severity="threat"] .cmd-item__dot { background: var(--warn); }
.cmd-item[data-severity="calm"] .cmd-item__dot { background: var(--ok); }
.cmd-item[data-severity="info"] .cmd-item__dot { background: var(--cmd-accent-2); }

.cmd-item__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cmd-item__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-item__meta {
  color: var(--ink-3);
  font-size: 11px;
}

.cmd-item__go {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-hi);
  color: var(--ink);
  font: 500 12px/1 var(--font, system-ui, sans-serif);
  cursor: pointer;
  white-space: nowrap;
}

.cmd-empty {
  color: var(--ink-3);
  padding: 18px 4px;
}

/* ---------- 10. командна палітра ---------- */
.cmd-palette {
  position: fixed;
  left: 50%;
  top: 14vh;
  transform: translateX(-50%);
  z-index: 2147483646;
  width: min(620px, calc(100vw - 32px));
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--g-radius-lg);
  background: var(--g-fill-hi);
  border: 1px solid var(--g-border);
  box-shadow: var(--el-3);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  color: var(--ink);
  font: 500 14px/1.4 var(--font, system-ui, sans-serif);
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .cmd-palette { animation: kupol-cmd-rise .2s var(--l-ease) both; }
}

.cmd-palette input {
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 16px/1.2 var(--font, system-ui, sans-serif);
  outline: none;
}

.cmd-palette__list {
  max-height: 52vh;
  overflow: auto;
  padding: 0 8px 10px;
}

.cmd-palette__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--g-radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cmd-palette__row[data-active="1"],
.cmd-palette__row:hover {
  background: var(--surface-mute);
  box-shadow: 0 0 0 1px var(--cmd-ring);
}

.cmd-palette__kind {
  color: var(--ink-2);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cmd-palette__foot {
  display: flex;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-3);
  font-size: 11px;
}

kbd {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  font: 600 10px/1.5 ui-monospace, monospace;
}

/* ---------- 11. дрібниці ---------- */
:root ::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

:root ::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

:root ::-webkit-scrollbar-track {
  background: transparent;
}

:root[data-theme] :focus-visible {
  outline: 2px solid var(--cmd-accent);
  outline-offset: 2px;
  border-radius: 10px;
}

.cmd-statusbar-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: .03em;
}

/* ---------- 12. пін «прибрати з карти» ---------- */
/* span[role=button], а не button: картка SPA — це <button>, вкладений button ламає гідацію */
.cmd-x {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--g-border);
  background: var(--g-fill-hi);
  color: var(--ink-2);
  font: 600 14px/1 var(--font, system-ui, sans-serif);
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s var(--l-ease), background-color .16s var(--l-ease), color .16s var(--l-ease);
}

.k-card:hover .cmd-x,
.k-card:focus-within .cmd-x,
.ob-card:hover .cmd-x,
.ob-card:focus-within .cmd-x,
.cmd-x[data-state="armed"],
.cmd-x:focus-visible { opacity: 1; }

@media (hover: none) {
  /* на тачі hover-у немає — іконка видно завжди, інакше кнопка недоступна */
  .cmd-x { opacity: .85; }
}

.cmd-x:hover {
  background: var(--surface-mute);
  color: var(--ink);
}

.cmd-x span { display: block; }

.cmd-x[data-state="armed"] {
  width: auto;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--crit);
  border-color: var(--crit);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

:root[data-theme="dark"] .cmd-x[data-state="armed"] {
  background: var(--crit-on-ink);
  border-color: var(--crit-on-ink);
  color: #15120f;
}

.cmd-x[data-state="armed"] span { display: none; }
.cmd-x[data-state="armed"]::after { content: "прибрати?"; }
.cmd-x[data-state="busy"]::after { content: "…"; }
.cmd-x[data-state="gone"]::after { content: "✓"; }

.k-card,
.ob-card { position: relative; }

.k-card[data-gone="1"],
.ob-card[data-gone="1"] {
  opacity: 0;
  transform: scale(.97) translateY(-3px);
  transition: opacity .24s var(--l-ease), transform .24s var(--l-ease);
  pointer-events: none;
}

/* ---------- 13. прибрані з карти ---------- */
.cmd-hidden {
  position: fixed;
  left: 50%;
  top: 16vh;
  transform: translateX(-50%);
  z-index: 2147483646;
  width: min(620px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  padding: 16px 18px 18px;
  border-radius: var(--g-radius-lg);
  background: var(--g-fill-hi);
  border: 1px solid var(--g-border);
  box-shadow: var(--el-3);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  color: var(--ink);
  font: 500 14px/1.4 var(--font, system-ui, sans-serif);
}

@media (prefers-reduced-motion: no-preference) {
  .cmd-hidden { animation: kupol-cmd-rise .2s var(--l-ease) both; }
}

.cmd-hidden__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cmd-hidden__head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}

.cmd-hidden__note {
  margin: 0;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.45;
}

.cmd-hidden__list {
  display: grid;
  gap: 6px;
  max-height: 46vh;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.cmd-hidden__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--g-radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}

.cmd-hidden__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.cmd-hidden__id {
  color: var(--ink-3);
  font: 400 10.5px/1.4 ui-monospace, SFMono-Regular, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 15ch;
}

.cmd-restore {
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--cmd-ring);
  background: var(--surface-hi);
  color: var(--cmd-accent);
  font: 600 12px/1 var(--font, system-ui, sans-serif);
  cursor: pointer;
  white-space: nowrap;
}

.cmd-restore:hover { background: var(--cmd-accent); color: #fff; }
:root[data-theme="dark"] .cmd-restore:hover { color: #12161f; }

/* ---------- 14. режим плиток ---------- */
.kupol-dock .cmd-tiles-btn[hidden] { display: none; }

body.cmd-tiles-on.cmd-page-grid .page { gap: 14px; }

.cmd-tile { position: relative; }

body.cmd-tiles-on .cmd-tile {
  outline: 1px dashed var(--cmd-ring);
  outline-offset: 3px;
  cursor: grab;
}

body.cmd-tiles-on .cmd-tile:hover { outline-style: solid; }
body.cmd-tiles-on .cmd-tile.is-drag { opacity: .5; cursor: grabbing; }

/* приховані плитки у режимі редагування ледь примарні, але на місці — інакше їх не повернути */
body.cmd-tiles-on .cmd-tile[data-cmd-hidden="1"] {
  opacity: .34;
  outline-color: var(--crit);
}

body.cmd-dragging,
body.cmd-dragging * { cursor: grabbing !important; }

.cmd-tile__ctl {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 999px;
  background: var(--g-fill-hi);
  border: 1px solid var(--g-border);
  box-shadow: var(--shadow-float);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
}

.cmd-tile__btn {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: 600 12px/1 var(--font, system-ui, sans-serif);
  cursor: pointer;
}

.cmd-tile__btn:hover { color: var(--ink); border-color: var(--cmd-ring); background: var(--surface-hi); }
.cmd-tile__btn[hidden] { display: none; }
.cmd-tile__btn[data-t="wide"][data-on="1"] { color: var(--cmd-accent); border-color: var(--cmd-accent); }

.cmd-tile__grip {
  padding: 0 3px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1;
  cursor: grab;
  user-select: none;
}

/* підказка режиму — щоб «готово» не шукали по всьому екрану */
.cmd-tiles-hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--cmd-strip, 84px) + 10px);
  transform: translateX(-50%);
  z-index: 2147483001;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--g-fill-hi);
  border: 1px solid var(--g-border);
  box-shadow: var(--el-3);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  color: var(--ink);
  font: 500 12.5px/1.35 var(--font, system-ui, sans-serif);
  max-width: min(720px, calc(100vw - 28px));
}

.cmd-tiles-hint b { font-weight: 700; }
.cmd-tiles-hint button {
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--cmd-ring);
  background: var(--surface-hi);
  color: var(--ink);
  font: 600 12px/1 var(--font, system-ui, sans-serif);
  cursor: pointer;
  white-space: nowrap;
}
.cmd-tiles-hint button:hover { background: var(--cmd-accent); color: #fff; }
:root[data-theme="dark"] .cmd-tiles-hint button:hover { color: #12161f; }

/* ---------- 15. знак «Купол»: власна маска замість банлового svg ---------- */
/* Малюнок лежить у local/brand.svg, колір дає градієнт теми — тому знак читається і на світлому, і на темному склі. */
:root .brand__mark svg { display: none !important; }

:root .brand__mark {
  width: 30px;
  height: 30px;
  position: relative;
  display: block;
}

:root .brand__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(148deg, var(--cmd-accent), var(--cmd-accent-2) 78%);
  -webkit-mask: url("/kupol-local/brand.svg") center / contain no-repeat;
  mask: url("/kupol-local/brand.svg") center / contain no-repeat;
}

:root .plate--brand:hover .brand__mark::after {
  filter: drop-shadow(0 0 6px var(--cmd-ring));
}

/* ---------- 16. дем-панель банла і наш док: більше не накладаються ---------- */
/* .demobar і .kupol-dock обидва fixed у тій самій смузі над смугою статусу.
   Команду ставимо вище фактичного верхнього краю demobar (placeDock у command.js),
   а смугу знизу резервуємо через --cmd-bottom — інакше журнал подій і мапа їдуть під накладки. */
:root .demobar {
  z-index: 40;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-style: solid !important;
  border-radius: var(--g-radius-lg) !important;
  max-width: calc(100vw - 16px);
  background: var(--g-fill-hi);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}

/* усі перемикачі — в один рядок. Смуга має width:max-content, тому на широкому екрані
   просто стає довшою; коли місця бракує — звужується значення («Лише сервер» → крапки),
   а не переносить рядок. Меню списків при цьому не обрізаємо: overflow лишається visible. */
:root .demobar > * {
  flex: 0 1 auto;
  min-width: 0;
}

:root .demobar .k-drop__btn {
  gap: 5px;
  padding: 0 10px;
  white-space: nowrap;
}

:root .demobar .k-drop__label {
  flex: none;
  opacity: .7;
}

/* на телефоні в один рядок фізично не влазить — там повертаємо перенос */
@media (max-width: 719px) {
  :root .demobar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    row-gap: 6px;
  }
}

:root .kupol-dock {
  bottom: calc(var(--statusbar-h, 40px) + 108px);
  border-radius: var(--g-radius-lg);
  max-width: min(560px, calc(100vw - 24px));
}

/* без demobar (прод-збірка) док сідає нижче — на звичне місце над смугою статусу */
:root body:not(.cmd-demobar) .kupol-dock {
  bottom: calc(var(--statusbar-h, 40px) + 14px);
}

/* ---------- 16b. док ховається в одну кнопку ----------
   Смуга команд (Події / Конструктор / Обʼєкти / Керування / джерело) перекриває контент
   внизу сторінки. Згорнута — лишень кнопка з лічильником у правому куті; розгортається кліком.
   Елементи не видаляємо (їх створили ми), а лише ховаємо — порядок DOM і слухачі стабільні. */
:root .kupol-dock .cmd-dock-toggle {
  position: relative;
  height: 34px;
  padding: 0 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

:root body:not(.cmd-dock-open) .kupol-dock > :not(.cmd-dock-toggle) {
  display: none;
}

:root body:not(.cmd-dock-open) .kupol-dock {
  gap: 0;
  padding: 5px;
  bottom: calc(var(--statusbar-h, 40px) + 14px);
}

:root body.cmd-dock-open .cmd-dock-toggle {
  background: var(--g-fill-hi);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--cmd-ring);
}

/* смуга прикріплена до правого краю, тому перемикач у розгорнутому стані йде в кінець:
   кнопка не стригає з-під курсора при кліку — і відкрити, і закрити можна в тому ж місці */
:root body.cmd-dock-open .cmd-dock-toggle {
  order: 9;
}

/* знак ⟷: у згорнутому стані — ⌘, у розгорнутому — ✕ (обираємо CSS-ом, щоб JS малював один раз) */
.cmd-dock-toggle__mark--open {
  display: none;
}

:root body.cmd-dock-open .cmd-dock-toggle__mark {
  display: none;
}

:root body.cmd-dock-open .cmd-dock-toggle__mark--open {
  display: inline;
}

/* у розгорнутому стані лічильник живе на «Подіях», дубль на кнопці лише заважає */
:root body.cmd-dock-open .cmd-dock-toggle .cmd-badge {
  display: none;
}

/* контент: банл резервує 92/140px знизу, нам потрібен фактичний вимір смуги */
:root body:has(.demobar) .page,
:root .page {
  padding-bottom: max(calc(40px + var(--statusbar-h, 40px)), var(--cmd-bottom, 120px));
}

:root body:has(.demobar) .k-toasts {
  bottom: calc(var(--cmd-bottom, 140px) + 8px);
}

/* ---------- 17. конструктор дашборда: одна вільна сітка для обох ролей ---------- */
/* Поки користувач нічого не налаштував — банловий layout не чіпаємо.
   Команда керує плитками через data-атрибути, щоб медіа-запит на вузьких екранах міг скасувати span.
   Смуги-обгортки (.k-stats, .k-split, .grid/.col/.stats) розчиняємо display:contents — їхні картки
   стають елементами сітки .page, тож любую плитку можна поставити в будь-яке місце дашборда. */
body { --cmd-unit: calc(var(--cmd-row, 148px) / 2); }

/* все, що не плитка (шапка, смужка стану, висувний журнал) — на весь рядок */
:is(body.cmd-built, body.cmd-tiles-on) .page > * { grid-column: span 12; }

:is(body.cmd-built.cmd-page-grid, body.cmd-tiles-on.cmd-page-grid) .page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  grid-auto-flow: dense;
  align-items: stretch;
  height: auto;
}

/* обгортки смуг зникають, їхні картки успадковують сітку .page */
:is(body.cmd-built, body.cmd-tiles-on) .page > :is(.k-stats, .k-split, .grid),
:is(body.cmd-built, body.cmd-tiles-on) .page > .grid > .col,
:is(body.cmd-built, body.cmd-tiles-on) .page > .grid > .col > .stats { display: contents; }

/* плитки тягаються між собою (order 0..N), тому структурні вузли привʼязуємо до країв */
:is(body.cmd-built, body.cmd-tiles-on) .page > .hud { order: -100; }
:is(body.cmd-built, body.cmd-tiles-on) .page > .k-drillbox { order: 100; }

/* типові ширини без pref-у — максимально близько до того, як зробив застосунок */
:is(body.cmd-built, body.cmd-tiles-on) .bar-slot:not([data-cmd-w]) { grid-column: span 12; }
:is(body.cmd-built, body.cmd-tiles-on) .k-stat:not([data-cmd-w]) { grid-column: span 2; }
/* пʼять KPI по дві колонки лишають дірку в 2 колонки — останні дві розтягуємо на неї */
:is(body.cmd-built, body.cmd-tiles-on) .k-stat:not([data-cmd-w]):nth-last-child(-n+2) { grid-column: span 3; }
:is(body.cmd-built, body.cmd-tiles-on) .card--map:not([data-cmd-w]) { grid-column: span 8; }
:is(body.cmd-built, body.cmd-tiles-on) .card--ident:not([data-cmd-w]) { grid-column: span 4; }
:is(body.cmd-built, body.cmd-tiles-on) .k-split > .k-panel:not([data-cmd-w]) { grid-column: span 4; }
:is(body.cmd-built, body.cmd-tiles-on) .stats > .stat:not([data-cmd-w]) { grid-column: span 6; }

:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-w="2"] { grid-column: span 2; }
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-w="3"] { grid-column: span 3; }
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-w="4"] { grid-column: span 4; }
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-w="6"] { grid-column: span 6; }
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-w="8"] { grid-column: span 8; }
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-w="12"] { grid-column: span 12; }

/* висота: рядки сітки авто-розмірні, тому зріст задаємо самій плитці */
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-h="1"] { grid-row: span 1; min-height: var(--cmd-unit); }
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-h="2"] { grid-row: span 2; min-height: calc(var(--cmd-unit) * 2 + var(--gap, 12px)); }
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-h="3"] { grid-row: span 3; min-height: calc(var(--cmd-unit) * 3 + var(--gap, 12px) * 2); }
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-h="4"] { grid-row: span 4; min-height: calc(var(--cmd-unit) * 4 + var(--gap, 12px) * 3); }
:is(body.cmd-built, body.cmd-tiles-on) [data-cmd-h="6"] { grid-row: span 6; min-height: calc(var(--cmd-unit) * 6 + var(--gap, 12px) * 5); }

/* мапі потрібен власний зріст: у банлі її рядок мав фіксованих 520px, тепер рядки рахуються від вмісту */
:is(body.cmd-built, body.cmd-tiles-on) .card--map:not([data-cmd-h]) { min-height: calc(var(--cmd-unit) * 6 + var(--gap, 12px) * 5); }

/* на вузькому екрані spanи згорають — інакше плитки вилізають за край */
@media (max-width: 900px) {
  :is(body.cmd-built, body.cmd-tiles-on) .page > * { grid-column: span 12; }
  /* !important: типові spanи без pref-у мають вищу специфічність, інакше б не скасувались */
  :is(body.cmd-built, body.cmd-tiles-on) .page :is([data-cmd-w], .k-stat, .card--map, .card--ident, .k-panel, .stat, .bar-slot) {
    grid-column: span 12 !important;
  }
  :is(body.cmd-built, body.cmd-tiles-on) .page [data-cmd-h] { grid-row: auto; }
}

/* висока плитка не повинна різати свій вміст */
:is(body.cmd-built, body.cmd-tiles-on) .page [data-cmd-h] { overflow: visible; }
:is(body.cmd-built, body.cmd-tiles-on) .page .card--map { overflow: hidden; }

/* підсвітка комірки, куди летить плитка */
body.cmd-tiles-on .cmd-tile.cmd-drop-aim {
  outline: 2px solid var(--cmd-accent) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--cmd-accent) 18%, transparent);
}

body.cmd-tiles-on .cmd-tile[data-cmd-pin="1"] {
  outline-color: var(--cmd-accent-2);
  cursor: default;
}

/* панель команди — зрушується вгору, щоб не сісти на demobar */
.cmd-tiles-hint { z-index: 2147483002; }

.cmd-tiles-hint .cmd-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface-mute);
}

.cmd-tiles-hint .cmd-seg button {
  height: 22px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: 600 11.5px/1 var(--font, system-ui, sans-serif);
}

.cmd-tiles-hint .cmd-seg button[aria-pressed="true"] {
  background: var(--cmd-accent);
  color: #fff;
}

:root[data-theme="dark"] .cmd-tiles-hint .cmd-seg button[aria-pressed="true"] { color: #12161f; }

/* лічильники на кнопках плитки показують поточний розмір — не треба вгадувати, що «⤢» означає */
.cmd-tile__btn b {
  font: 700 9.5px/1 var(--font, system-ui, sans-serif);
  letter-spacing: 0;
  color: var(--cmd-accent);
}

.cmd-tile__btn[data-on="1"] { color: var(--cmd-accent); border-color: var(--cmd-accent); }