/* LDS OS: стандарт окна (спека design/lds-os-window-standard.md §3, §4, §6). Одна рама на все приложения.
   Материал по решению Р-2 Б: рама (строка заголовка, сайдбар, правая панель) - одно стекло --win-glass,
   центр - один плотный слой --win-content. Ровно два тона, цветных кромок нет.
   Колонки задаёт приложение переменными на .dex-window: --win-side-w (сайдбар, 0 если свёрнут) и
   --win-panel-w (правая панель, 0 если закрыта). Линии зон и плотный центр рисует рама, у приложения
   своих подложек нет. Окна без своих колонок - строка заголовка на стекле и плотное тело целиком.
   Токены - tokens.css, кнопки и вкладки - ui.css (зона A). Здесь только устройство окна. */

body[data-dex-mode="only"] .dex-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid var(--line-off);
  border-radius: var(--r-win);
  background: var(--win-glass);
  color: var(--tx-1);
  box-shadow: var(--shadow-win-off);
  backdrop-filter: var(--win-blur);
  -webkit-backdrop-filter: var(--win-blur);
  isolation: isolate;
  font: var(--type-ui);
  -webkit-font-smoothing: antialiased;
}
body[data-dex-mode="only"] .dex-window[hidden] { display: none !important; }
/* окно в фокусе - кромка и тень; без фокуса тише заголовок и выбор, содержимое не тускнеет (§3.10) */
body[data-dex-mode="only"] .dex-window[data-focused="true"] {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-win);
}
body[data-dex-mode="only"] .dex-window[data-focused="false"] { --fill-selected: var(--fill-selected-off); }
/* окно целиком под другим окном: размытие не считается, фон сплошной (§3.9, цена blur) */
body[data-dex-mode="only"] .dex-window[data-covered="true"] { background: var(--win-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ===== Строка заголовка 40: колонки совпадают с колонками окна (§3.4) ===== */
body[data-dex-mode="only"] .dex-window-titlebar {
  position: relative;
  display: flex;
  flex: 0 0 var(--h-titlebar);
  align-items: center;
  min-width: 0;
  height: var(--h-titlebar);
  padding: 0;
  border: 0;
  /* линии сайдбара и правой панели сквозные; под строкой линия только над содержимым и панелью */
  background:
    linear-gradient(var(--line), var(--line)) left calc(var(--win-side-w, 0px) - 1px) top 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) right calc(var(--win-panel-w, 0px) - 1px) top 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) left var(--win-side-w, 0px) bottom 0 / 100% 1px no-repeat;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: default;
}
/* над сайдбаром: сайдбар, назад, вперёд. Сайдбар свёрнут - кнопки встают в начало колонки содержимого */
body[data-dex-mode="only"] .dex-window-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-width: var(--win-side-w, 0px);
  height: 100%;
  padding: 0 8px;
}
body[data-dex-mode="only"] :is(.dex-window-nav, .dex-window-tabs, .dex-window-object)[hidden],
body[data-dex-mode="only"] .dex-window-icon:empty,
body[data-dex-mode="only"] .dex-window-actions:empty { display: none; }
/* над содержимым: иконка, раздел / объект, «демо», действия приложения, «Обсудить с EDEM» */
body[data-dex-mode="only"] .dex-window-identity {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 12px;
}
body[data-dex-mode="only"] .dex-window-icon { display: grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--tx-2); }
body[data-dex-mode="only"] .dex-window-icon svg { width: 16px; height: 16px; display: block; }
body[data-dex-mode="only"] .dex-window-title { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
/* длинное имя обрезается затуханием 24, без «…» (рама ставит data-clip, когда текст не влезает) */
body[data-dex-mode="only"] .dex-window-title[data-clip="true"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
body[data-dex-mode="only"] .dex-window-section { font-weight: 500; color: var(--tx-1); }
body[data-dex-mode="only"] .dex-window-object { color: var(--tx-2); }
body[data-dex-mode="only"] .dex-window-object::before { content: " / "; color: var(--tx-3); white-space: pre; }
body[data-dex-mode="only"] .dex-window-actions { display: flex; flex: none; align-items: center; gap: 4px; margin-left: auto; }
/* шеврон ⌄ после объекта: меню действий объекта (§3.4) */
body[data-dex-mode="only"] .dex-window-objmenu {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--tx-3);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
body[data-dex-mode="only"] .dex-window-objmenu[hidden] { display: none; }
body[data-dex-mode="only"] .dex-window-objmenu svg { width: 12px; height: 12px; display: block; }
body[data-dex-mode="only"] .dex-window-objmenu:is(:hover, [aria-expanded="true"]) { background: var(--fill-hover); color: var(--tx-1); }
body[data-dex-mode="only"] .dex-window-objmenu:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* над правой панелью: вкладки «EDEM · Контекст», справа кнопки окна */
body[data-dex-mode="only"] .dex-window-tabs {
  display: flex;
  flex: none;
  align-items: stretch;
  gap: 16px;
  box-sizing: border-box;
  width: var(--win-panel-w, 340px);
  height: 100%;
  padding-left: 12px;
}
body[data-dex-mode="only"] .dex-window-tabs > .ui-tab { height: 100%; }
/* кнопки окна справа: свернуть, развернуть, закрыть - порядок DOM совпадает с экраном, Tab слева направо */
body[data-dex-mode="only"] .dex-window-controls {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-right: 8px;
}
body[data-dex-mode="only"] .dex-window[data-chrome="std"]:not([data-panel-open="true"]) > .dex-window-titlebar > .dex-window-controls::before {
  content: "";
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--line);
}
body[data-dex-mode="only"] .dex-window[data-focused="false"] :is(.dex-window-section, .dex-window-object, .dex-window-icon, .dex-window-control) { color: var(--tx-3); }
/* заголовок получает фокус программно (точка возврата): без кольца, оно у кнопок */
body[data-dex-mode="only"] .dex-window:focus-visible,
body[data-dex-mode="only"] .dex-window-titlebar:focus-visible { box-shadow: none; outline: none; }

/* ===== Тело: плотный центр между линиями сайдбара и правой панели ===== */
body[data-dex-mode="only"] .dex-window-body {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(var(--line), var(--line)) left calc(var(--win-side-w, 0px) - 1px) top 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) right calc(var(--win-panel-w, 0px) - 1px) top 0 / 1px 100% no-repeat,
    linear-gradient(var(--win-content), var(--win-content)) left var(--win-side-w, 0px) top 0 / calc(100% - var(--win-side-w, 0px) - var(--win-panel-w, 0px)) 100% no-repeat;
  container-type: inline-size;
  container-name: dexbody;
}
/* приложение по стандарту рисует сетку колонок само, без полей и подложек */
body[data-dex-mode="only"] .dex-window[data-chrome="std"] .dex-window-body > .dx-screen {
  padding: 0 !important;
  overflow: hidden;
}

/* ===== Управление окнами (§4) ===== */
/* ресайз: 4 края по 6 px и 4 угла по 12 px, видимой ручки нет; у развёрнутого окна краёв нет */
body[data-dex-mode="only"] .dex-window-edge { position: absolute; z-index: 3; touch-action: none; }
body[data-dex-mode="only"] .dex-window-edge:is([data-edge="n"], [data-edge="s"]) { left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
body[data-dex-mode="only"] .dex-window-edge:is([data-edge="e"], [data-edge="w"]) { top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
body[data-dex-mode="only"] .dex-window-edge[data-edge="n"] { top: 0; }
body[data-dex-mode="only"] .dex-window-edge[data-edge="s"] { bottom: 0; }
body[data-dex-mode="only"] .dex-window-edge[data-edge="e"] { right: 0; }
body[data-dex-mode="only"] .dex-window-edge[data-edge="w"] { left: 0; }
body[data-dex-mode="only"] .dex-window-edge:is([data-edge="ne"], [data-edge="nw"], [data-edge="se"], [data-edge="sw"]) { width: 12px; height: 12px; }
body[data-dex-mode="only"] .dex-window-edge[data-edge="ne"] { top: 0; right: 0; cursor: nesw-resize; }
body[data-dex-mode="only"] .dex-window-edge[data-edge="nw"] { top: 0; left: 0; cursor: nwse-resize; }
body[data-dex-mode="only"] .dex-window-edge[data-edge="se"] { bottom: 0; right: 0; cursor: nwse-resize; }
body[data-dex-mode="only"] .dex-window-edge[data-edge="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
body[data-dex-mode="only"] .dex-window[data-maximized="true"] .dex-window-edge { display: none; }

/* тащишь окно - текст под ним не выделяется, тело окна не ловит мышь */
body.is-dragging, body.is-dragging * { user-select: none !important; -webkit-user-select: none !important; }
body[data-dex-mode="only"] .dex-window[data-moving="true"] { will-change: transform; transition: none !important; }
body[data-dex-mode="only"] .dex-window[data-moving="true"] .dex-window-body { pointer-events: none; }
/* развернуть и прилипнуть - одна кривая системы, 200 мс */
body[data-dex-mode="only"] .dex-window[data-animating="true"] {
  transition: left var(--dur-snap) var(--ease), top var(--dur-snap) var(--ease), width var(--dur-snap) var(--ease), height var(--dur-snap) var(--ease);
}

/* подсказка прилипания: появляется через 120 мс, форма будущего окна */
.dex-snap {
  position: fixed;
  z-index: 11;
  border: 1px solid var(--snap-edge);
  border-radius: var(--r-win);
  background: var(--snap-fill);
  pointer-events: none;
  animation: dex-snap-in var(--dur-pop) var(--ease) 120ms both;
  transition: left var(--dur-snap) var(--ease), top var(--dur-snap) var(--ease), width var(--dur-snap) var(--ease), height var(--dur-snap) var(--ease);
}
.dex-snap[hidden] { display: none; }
@keyframes dex-snap-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body[data-dex-mode="only"] .dex-window[data-animating="true"], .dex-snap { transition: none !important; }
}

/* ===== Переключатель окон ⌥` (§4 п.13): полоса по центру, плитки 72x72, живых миниатюр нет ===== */
.os-switcher {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--z-palette);
  display: flex;
  gap: 4px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--pop-glass);
  box-shadow: var(--shadow-pop);
  backdrop-filter: var(--pop-blur);
  -webkit-backdrop-filter: var(--pop-blur);
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-select: none;
}
.os-switcher__tile {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 72px;
  height: 72px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tx-2);
  cursor: pointer;
}
.os-switcher__tile[aria-selected="true"] { background: var(--fill-selected); color: var(--tx-1); }
.os-switcher__icon svg { width: 32px; height: 32px; display: block; }
.os-switcher__name { max-width: 100%; overflow: hidden; font: var(--type-meta); white-space: nowrap; text-overflow: clip; }

/* ===== Список сочетаний ⌘/ (поповер ui.js) ===== */
.os-keys-help { padding: 4px 8px 8px; font: var(--type-ui); color: var(--tx-1); }
.os-keys-help__head { display: flex; align-items: flex-end; height: 28px; padding-bottom: 4px; font: var(--type-meta); font-weight: 500; color: var(--tx-3); }
.os-keys-help__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 28px; }