/* SKM · слой Liquid Glass (по мотивам iOS 26): стекло только на функциональных элементах —
   шапка, навигация, кнопки, переключатели пульта, степпер, уведомления. Содержимое (панели, карточки,
   схема, плашки статуса) остаётся непрозрачным: «контент важнее стекла», «стекло не кладётся на стекло».
   Формы концентричны: капсула внутри капсулы. Подключается после app.css; убрать файл — вернётся прежний вид.
   Все значения стекла — переменные из tokens.css, поэтому «Меньше прозрачности» и «Повышенный контраст»
   работают как раньше (стекло становится сплошным). */

:root {
  --lg-radius: 999px;
  /* Блик сверху и тонкая светлая кромка — то, что отличает стекло от просто полупрозрачной заливки. */
  --lg-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0) 100%);
  --lg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  --lg-lift: 0 1px 2px rgba(0, 0, 0, 0.10), 0 6px 18px rgba(0, 0, 0, 0.10);
  --lg-well: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  /* Плавное торможение без перелёта: «пружина» с перелётом выглядела как подрагивание. */
  --lg-ease: cubic-bezier(.22, .8, .24, 1);
}
:root[data-theme="dark"] {
  --lg-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0) 100%);
  --lg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --lg-lift: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 22px rgba(0, 0, 0, 0.40);
  --lg-well: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---------- Шапка: плавающая стеклянная панель, контент уходит под неё ---------- */
.apphead {
  top: 8px;
  margin: 8px 12px 0;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: var(--glass-edge), var(--glass-shadow);
  background-image: var(--glass-highlight);
}

/* Навигация внутри шапки — без своего фона (не стекло на стекле); активный пункт — стеклянная линза. */
.nav { background: transparent; padding: 0; }
.nav a { transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.nav a:hover { background: var(--fill-3); }
.nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  background-image: var(--lg-sheen);
  color: var(--brand-text);
  box-shadow: var(--lg-edge), var(--lg-lift);
}
.user-badge { background: color-mix(in srgb, var(--brand) 14%, transparent); box-shadow: var(--lg-edge); }

/* ---------- Кнопки ---------- */
.btn, .icon-btn {
  background: var(--glass-regular-fill);
  background-image: var(--lg-sheen);
  -webkit-backdrop-filter: var(--glass-regular-blur); backdrop-filter: var(--glass-regular-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--lg-edge), var(--lg-lift);
  transition: transform .35s var(--lg-ease), box-shadow .25s ease, background-color .25s ease, filter .25s ease;
}
.btn:hover:not(:disabled), .icon-btn:hover { background-color: var(--glass-thick-fill); filter: brightness(1.03); }
.btn:active:not(:disabled), .icon-btn:active { transform: scale(var(--press-scale)); box-shadow: var(--lg-edge), var(--lg-well); transition-duration: .08s; }
/* Главная кнопка — тонированное стекло бренда (аналог .glassProminent). */
.btn-primary {
  background-color: var(--glass-brand-fill);
  border-color: color-mix(in srgb, var(--brand) 60%, white 0%);
  color: var(--label-on-brand);
}
.btn-primary:hover:not(:disabled) { background-color: var(--brand-strong); }
.btn-danger { background-color: color-mix(in srgb, var(--status-alarm) 92%, transparent); border-color: var(--status-alarm); }
/* Второстепенные: прозрачные, стекло только при наведении — не перегружаем экран стеклом. */
.btn-ghost, .btn-quiet { background-color: transparent; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.btn-ghost { border-color: transparent; }
/* Тихая кнопка («Сбросить аварии») сохраняет свою рамку, иначе на светлой панели её не видно как кнопку. */
.btn-quiet { border-color: var(--p-line, var(--separator)); }
.btn-ghost:hover:not(:disabled), .btn-quiet:hover:not(:disabled) { background-color: var(--fill-3); background-image: var(--lg-sheen); box-shadow: var(--lg-edge); }

/* ---------- Переключатели: утопленная капсула, выбранное — выпуклая стеклянная линза ---------- */
.seg, .pseg { border-radius: var(--lg-radius); box-shadow: var(--lg-well); border: 0; }
.seg button, .pseg button {
  border-radius: var(--lg-radius);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .35s var(--lg-ease);
}
.seg button:active:not(:disabled), .pseg button:active:not(:disabled) { transform: scale(.97); transition-duration: .08s; }
.seg button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--brand) 18%, var(--bg-elevated));
  background-image: var(--lg-sheen);
  color: var(--brand-text);
  box-shadow: var(--lg-edge), var(--lg-lift);
}
.seg button[aria-pressed="true"] img { filter: none; }
:root[data-theme="dark"] .seg button[aria-pressed="true"] img { filter: invert(1); }

/* Пульт: цвет линзы — состояние прибора (работа, зима, лето, стоп), как и раньше. */
.pseg button[aria-pressed="true"] { background-image: var(--lg-sheen); }
.pseg-run[aria-pressed="true"], .pseg-auto[aria-pressed="true"] { box-shadow: var(--lg-edge), var(--lg-lift), inset 0 0 0 1px var(--p-ok-line); }
.pseg-winter[aria-pressed="true"] { box-shadow: var(--lg-edge), var(--lg-lift), inset 0 0 0 1px var(--p-win-line); }
.pseg-summer[aria-pressed="true"] { box-shadow: var(--lg-edge), var(--lg-lift), inset 0 0 0 1px var(--p-sum-line); }
.pseg-stop[aria-pressed="true"] { box-shadow: var(--lg-edge), var(--lg-lift), inset 0 0 0 1px var(--p-stop-line); }

/* ---------- Степпер уставки: капсула, «−» и «+» — круглые стеклянные кнопки ---------- */
.stepper { border-radius: var(--lg-radius); border: 0; box-shadow: var(--lg-well); padding: 4px; }
.stepper-btn {
  width: 44px; min-height: 44px; border-radius: 50%;
  background: var(--glass-regular-fill); background-image: var(--lg-sheen);
  box-shadow: var(--lg-edge), var(--lg-lift); color: var(--label);
  transition: transform .35s var(--lg-ease), box-shadow .25s ease;
}
.stepper-btn:active:not(:disabled) { transform: scale(.92); box-shadow: var(--lg-edge), var(--lg-well); transition-duration: .08s; }
.stepper-row .btn-primary { border-radius: var(--lg-radius); }

/* ---------- Поля ввода и выпадающие списки: капсулы, как поиск ---------- */
.search input, .input, .select { box-shadow: var(--lg-well); }

/* ---------- Плавающие элементы: уведомления и окна ---------- */
.toast {
  background: var(--glass-thick-fill); background-image: var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-thick-blur); backdrop-filter: var(--glass-thick-blur);
  border-color: var(--glass-border); border-radius: 22px;
  box-shadow: var(--glass-edge), var(--shadow-3);
}

/* Вход: главная кнопка — то же тонированное стекло, светлое на красной карточке. */
.login-submit {
  background-image: var(--lg-sheen);
  box-shadow: var(--lg-edge), var(--lg-lift);
  transition: transform .35s var(--lg-ease), filter .2s ease;
}
.login-submit:active { transform: scale(var(--press-scale)); transition-duration: .08s; }

/* ---------- Живая линза: меню в шапке, сегменты, дерево групп (js/glass-lens.js) ----------
   Выбранный пункт показывает стеклянная линза, которая переезжает между пунктами и едет за пальцем/мышью. */
.lg-host { position: relative; isolation: isolate; touch-action: pan-y; }
.lg-host > :not(.lg-lens), .lg-host .gnode, .lg-host a, .lg-host button { position: relative; z-index: 1; }
.lg-host a, .lg-host button, .lg-host .gnode { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.lg-host img { -webkit-user-drag: none; pointer-events: none; }
/* Пункты больше не закрашиваются сами — иначе под линзой была бы вторая подложка. */
.lg-host :is(a, button, .gnode)[aria-current="page"],
.lg-host :is(a, button, .gnode)[aria-current="true"],
.lg-host :is(a, button, .gnode)[aria-pressed="true"] { background: transparent; box-shadow: none; background-image: none; }
.lg-host :is(a, button, .gnode):is([aria-current="page"], [aria-current="true"], [aria-pressed="true"]),
.lg-host .lg-target { color: var(--brand-text); }
.lg-host .lg-target img, .lg-host :is([aria-pressed="true"]) img { filter: none; }
:root[data-theme="dark"] .lg-host :is(.lg-target, [aria-pressed="true"]) img { filter: invert(1); }
.lg-host .gnode:hover, .lg-host.nav a:hover, .seg.lg-host button:hover:not(:disabled) { background: var(--fill-3); }

.lg-lens {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0;
  border-radius: var(--lg-radius);
  background: color-mix(in srgb, var(--brand) 18%, var(--bg-elevated));
  background-image: var(--lg-sheen);
  box-shadow: var(--lg-edge), var(--lg-lift);
  opacity: 0; pointer-events: none;
  transition: transform .38s var(--lg-ease), width .38s var(--lg-ease), height .38s var(--lg-ease),
              opacity .2s ease, box-shadow .2s ease, background-color .2s ease, scale .25s var(--lg-ease);
  will-change: transform;
}
.lg-lens-on { opacity: 1; }
/* В местах с линзой сами пункты при нажатии не сжимаются: движение показывает линза, двойное движение дрожит. */
.lg-host :is(a, button, .gnode):active:not(:disabled) { transform: none; }
.lg-lens { backface-visibility: hidden; }
/* Нажали — линза «приподнимается»: чуть больше, светлее, глубже тень, как стекло под пальцем. */
.lg-lens-lift { scale: 1.04; background-color: color-mix(in srgb, var(--brand) 12%, var(--bg-elevated)); box-shadow: var(--lg-edge), 0 10px 28px rgba(0, 0, 0, .28); }
/* Ведут указателем — линза идёт за ним без задержки (ширина — плавно, под пункт под указателем). */
.lg-lens-drag { transition: width .25s var(--lg-ease), height .25s var(--lg-ease), opacity .2s ease, scale .25s var(--lg-ease); }
/* Увели за пределы — линза бледнеет: если отпустить, ничего не выберется. */
.lg-lens-out { opacity: .45; }

/* ---------- Выпадающие списки (js/glass-select.js): поле-капсула и стеклянное меню ---------- */
.lg-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; }
.lg-select {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--size-target); max-width: 100%; padding: 0 var(--space-3) 0 var(--space-4);
  border: 1px solid var(--glass-border); border-radius: var(--lg-radius);
  background: var(--glass-regular-fill); background-image: var(--lg-sheen);
  -webkit-backdrop-filter: var(--glass-regular-blur); backdrop-filter: var(--glass-regular-blur);
  box-shadow: var(--lg-edge), var(--lg-lift); color: var(--label); font: inherit; text-align: left; cursor: pointer;
  transition: transform .35s var(--lg-ease), box-shadow .25s ease;
}
.field .lg-select { width: 100%; }
.lg-select:active:not(:disabled) { transform: scale(.98); transition-duration: .08s; }
.lg-select:disabled { opacity: .55; cursor: not-allowed; }
.lg-select[aria-expanded="true"] { box-shadow: var(--lg-edge), 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); }
.lg-sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lg-sel-chev { flex: none; color: var(--label-2); transition: transform .3s var(--lg-ease); }
.lg-select[aria-expanded="true"] .lg-sel-chev { transform: rotate(180deg); }

.lg-menu {
  position: fixed; z-index: 400; overflow: auto; padding: 6px;
  border: 1px solid var(--glass-border); border-radius: 22px;
  background: var(--glass-thick-fill); background-image: var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-thick-blur); backdrop-filter: var(--glass-thick-blur);
  box-shadow: var(--glass-edge), var(--shadow-3); color: var(--label);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top center;
  transition: opacity .18s ease, transform .3s var(--lg-ease);
  overscroll-behavior: contain;
}
.lg-menu-up { transform-origin: bottom center; transform: translateY(6px) scale(.97); }
.lg-menu-in { opacity: 1; transform: none; }
.lg-opt {
  display: flex; align-items: center; gap: var(--space-3); min-height: 42px; padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--lg-radius); cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none;
}
.lg-opt-active { background: color-mix(in srgb, var(--brand) 14%, transparent); background-image: var(--lg-sheen); box-shadow: var(--lg-edge); }
.lg-opt[aria-selected="true"] { color: var(--brand-text); font-weight: var(--weight-semibold); }
.lg-opt[aria-disabled="true"] { opacity: .45; cursor: default; }
.lg-opt-text { overflow: hidden; text-overflow: ellipsis; }
/* Круглая отметка выбранного пункта. */
.lg-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--label-3); }
.lg-opt[aria-selected="true"] .lg-radio { border-color: var(--brand); box-shadow: inset 0 0 0 4px var(--bg-elevated); background: var(--brand); }

/* ---------- Галочки и переключатели: круглые, в цвет приложения ---------- */
input[type="checkbox"]:not([role="switch"]), input[type="radio"] {
  -webkit-appearance: none; appearance: none; margin: 0;
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--label-3); background: var(--bg-elevated);
  box-shadow: var(--lg-well); cursor: pointer; display: inline-grid; place-content: center;
  transition: background-color .2s ease, border-color .2s ease, transform .3s var(--lg-ease);
}
.switch input[type="checkbox"], .switch input[type="radio"] { width: 1px; height: 1px; }
input[type="checkbox"]:not([role="switch"]):active, input[type="radio"]:active { transform: scale(.9); }
input[type="checkbox"]:not([role="switch"]):checked {
  background: var(--brand) no-repeat center / 14px 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--brand); box-shadow: var(--lg-edge);
}
input[type="radio"]:checked { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 4px var(--bg-elevated); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Вход на страницу (js/page-enter.js): блоки мягко «всплывают» волной сверху вниз ---------- */
@keyframes lg-enter {
  from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.lg-enter { animation: lg-enter .5s var(--lg-ease) both; animation-delay: var(--enter-delay, 0ms); }

/* ---------- Доступность ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn, .seg button, .pseg button, .stepper-btn, .nav a, .login-submit, .lg-lens, .lg-select, .lg-menu, .lg-sel-chev { transition: none; }
  .lg-enter { animation: none; }
}
:root[data-motion="reduce"] :is(.btn, .icon-btn, .seg button, .pseg button, .stepper-btn, .nav a, .login-submit, .lg-lens, .lg-select, .lg-menu, .lg-sel-chev) { transition: none; }
:root[data-motion="reduce"] .lg-enter { animation: none; }
/* «Меньше прозрачности»: блики и размытие убираем полностью, остаются сплошные поверхности. */
:root[data-transparency="reduce"] { --lg-sheen: none; }
@media (prefers-reduced-transparency: reduce) { :root:not([data-transparency="allow"]) { --lg-sheen: none; } }
/* Повышенный контраст: чёткие границы вместо мягких теней. */
@media (prefers-contrast: more) {
  .btn, .icon-btn, .stepper-btn, .seg button[aria-pressed="true"], .pseg button[aria-pressed="true"] { border: 1px solid var(--separator-strong); background-image: none; }
}