/*! Navex design-lab · shared/lab.css v1 · 2026-10-08
   Два слоя в одном файле:
   (1) ДОКУМЕНТ — подключается в <head> страницы: скрытие альтернатив/состояний и место плашки.
   (2) SHADOW DOM — lab.js подключает этот же файл внутрь своей теневой панели; стили варианта туда не проникают,
       а стили панели не влияют на вёрстку варианта. Не дизайн продукта — нейтральная служебная панель. */

/* ================= (1) ДОКУМЕНТ ================= */
[data-nx-off] { display: none !important; }      /* lab.js скрывает неактивные альтернативы и чужие состояния */
#nx-lab {
  position: fixed; z-index: 2147483647;
  left: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  width: auto; height: auto; margin: 0; padding: 0;
}
@media (max-width: 767.98px) {
  #nx-lab { left: auto; bottom: auto; top: calc(6px + env(safe-area-inset-top)); right: 6px; }
}
:root[data-lab-embed] #nx-lab { display: none !important; }
@media print { #nx-lab { display: none !important; } }

/* ================= (2) ВНУТРИ SHADOW DOM (всё под .nxlab — в документе не срабатывает) ================= */
:host {
  all: initial;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #f4f4f5; -webkit-font-smoothing: antialiased;
  --lab-bg: rgb(20 20 22 / .86); --lab-line: rgb(255 255 255 / .12); --lab-soft: rgb(255 255 255 / .62);
  --lab-on: #f4f4f5; --lab-on-ink: #141416; --lab-hi: rgb(255 255 255 / .08);
}
.nxlab *, .nxlab, .nxlab *::before, .nxlab *::after { box-sizing: border-box; }
.nxlab button, .nxlab select, .nxlab input { font: inherit; color: inherit; }
.nxlab :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.nxlab .pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px;
  border: 1px solid var(--lab-line); border-radius: 999px; background: var(--lab-bg); color: var(--lab-on);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px -8px rgb(0 0 0 / .5); cursor: pointer; opacity: .78;
  transition: opacity .15s ease, scale .1s ease;
}
.nxlab .pill:hover, .nxlab .pill:focus-visible { opacity: 1; }
.nxlab .pill:active { scale: .96; }
.nxlab .pill svg { width: 16px; height: 16px; flex: none; }
.nxlab .pill b { font-weight: 600; }
.nxlab .pill span { color: var(--lab-soft); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nxlab .panel {
  position: absolute; left: 0; bottom: 0; width: 340px; max-height: calc(100dvh - 24px);
  display: flex; flex-direction: column;
  border: 1px solid var(--lab-line); border-radius: 16px; background: var(--lab-bg); color: var(--lab-on);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .6); overflow: hidden;
  transform-origin: 0 100%; animation: lab-in .18s cubic-bezier(.23, 1, .32, 1);
}
.nxlab .panel[hidden] { display: none; }
@keyframes lab-in { from { opacity: 0; scale: .96; } }
@media (prefers-reduced-motion: reduce) { .nxlab .panel { animation: none; } .nxlab .pill { transition: none; } }

.nxlab .head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--lab-line); }
.nxlab .head .t { flex: 1; min-width: 0; }
.nxlab .head .t b { display: block; font-size: 13px; }
.nxlab .head .t span { display: block; color: var(--lab-soft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxlab .x { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; display: grid; place-items: center; }
.nxlab .x:hover { background: var(--lab-hi); }
.nxlab .x svg { width: 16px; height: 16px; }

.nxlab .body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 12px; }
.nxlab .sec { padding: 10px 0; border-bottom: 1px solid var(--lab-line); }
.nxlab .sec:last-child { border-bottom: 0; }
.nxlab .lbl { display: block; margin: 0 0 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--lab-soft); }
.nxlab .sub { display: block; margin: 8px 0 4px; font-size: 12px; color: var(--lab-soft); }
.nxlab .sub:first-of-type { margin-top: 0; }

.nxlab .pages { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.nxlab .pages a {
  display: block; padding: 5px 8px; border-radius: 8px; color: var(--lab-on); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px;
}
.nxlab .pages a:hover { background: var(--lab-hi); }
.nxlab .pages a[aria-current="page"] { background: var(--lab-on); color: var(--lab-on-ink); font-weight: 600; }

.nxlab .seg { display: flex; flex-wrap: wrap; gap: 4px; }
.nxlab .seg button {
  min-height: 30px; padding: 0 10px; border: 1px solid var(--lab-line); border-radius: 999px;
  background: transparent; cursor: pointer; font-size: 12.5px;
}
.nxlab .seg button:hover { background: var(--lab-hi); }
.nxlab .seg button[aria-pressed="true"] { background: var(--lab-on); color: var(--lab-on-ink); border-color: var(--lab-on); font-weight: 600; }

.nxlab select {
  width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--lab-line); border-radius: 8px;
  background: rgb(255 255 255 / .06); color: var(--lab-on);
}
.nxlab select option { color: #111; background: #fff; }
.nxlab .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.nxlab .sw { position: relative; width: 36px; height: 20px; flex: none; appearance: none; -webkit-appearance: none; margin: 0;
  border-radius: 999px; background: rgb(255 255 255 / .2); cursor: pointer; transition: background .15s ease; }
.nxlab .sw::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: translate .15s ease; }
.nxlab .sw:checked { background: #4ade80; }
.nxlab .sw:checked::before { translate: 16px 0; }

.nxlab .foot { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--lab-line); }
.nxlab .foot button { flex: 1; min-height: 30px; border: 1px solid var(--lab-line); border-radius: 8px; background: transparent; cursor: pointer; font-size: 12.5px; }
.nxlab .foot button:hover { background: var(--lab-hi); }
.nxlab .empty { color: var(--lab-soft); font-size: 12px; }

/* Телефон: свёрнуто — только кружок 40×40 (зона 44×44) сверху справа; развёрнуто — панель от правого края */
@media (max-width: 767.98px) {
  .nxlab .pill { width: 44px; height: 44px; padding: 0; justify-content: center; background: transparent; border: 0; box-shadow: none; opacity: .7; }
  .nxlab .pill::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--lab-bg); border: 1px solid var(--lab-line); z-index: -1;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .nxlab .pill { position: relative; isolation: isolate; }
  .nxlab .pill b, .nxlab .pill span { display: none; }
  .nxlab .panel { left: auto; right: 0; top: 0; bottom: auto; width: calc(100vw - 12px); max-height: 82dvh; transform-origin: 100% 0; }
  .nxlab .pages a { padding: 8px; }
  .nxlab .seg button { min-height: 36px; }
}