/* ═══════════════════════════════════════════════════════════════════
   ЗІН-ДИЗАЙН-СИСТЕМА · БАЗА (ds/base.css)
   Усе — під .ui-z. Виняток — два службові правила .z-only / .z-hide нижче:
   вони потрібні саме для того, щоб нова розмітка не була видна без прапорця.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Службові перемикачі розмітки ----------
   .z-only — елемент нового дизайну: без прапорця його немає (display:none).
   .z-hide — старий елемент, якого в новому дизайні немає (під .ui-z ховається). */
html:not(.ui-z) .z-only { display: none !important; }
html.ui-z .z-hide { display: none !important; }

/* ---------- Атрибут hidden і клас .hidden — завжди ховають ----------
   Раніше author-правило з display:flex перебивало hidden (баг B2), а для .hidden
   були лише точкові правила. Під .ui-z — глобально. */
.ui-z [hidden],
.ui-z .hidden { display: none !important; }

/* ---------- Документ ---------- */
html.ui-z {
    font-family: var(--font-ui);
    background: var(--paper);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
/* Розмір тексту body лишаємо старим (14px): нові компоненти задають свій розмір самі,
   а старі екрани до міграції не «розпливаються». */
.ui-z body {
    font-family: var(--font-ui);
    font-weight: var(--fw-body);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Контроли успадковують шрифт і колір (було: кнопки — Arial, чорний текст у темній).
   :where() — нульова специфічність: замінює лише типові стилі браузера,
   а будь-яке наявне правило з розміром шрифту лишається сильнішим. */
:where(.ui-z) :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
}
:where(.ui-z) :where(button, [role="button"], summary, label[for]) { cursor: pointer; }
:where(.ui-z) :where(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }

/* Математика в інтерфейсних текстах (не KaTeX) — Gelasio; сам інтерфейс — Onest (великі числа — Unbounded, див. --font-display) */
:where(.ui-z) :where(.z-math) { font-family: var(--font-math); font-weight: 600; font-variant-numeric: lining-nums; }

/* ---------- Фокус (лише клавіатурний, :focus-visible) ---------- */
.ui-z :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* ---------- Виділення тексту, прокрутка ---------- */
.ui-z ::selection { background: var(--sage-tint); color: var(--ink); }
:where(.ui-z) { scrollbar-color: var(--muted-2) transparent; }
/* Контейнер, що гортається сам (вкладки оболонки, шторки): прокрутка не «протікає» на сторінку */
.ui-z .z-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
/* Відкрита шторка чи діалог (DS.openOverlay у ds/ds.js): сторінка під ними не гортається */
html.ui-z.z-lock,
.ui-z.z-lock body { overflow: hidden; }
/* Поле у фокусі не ховається під липкою шапкою чи клавіатурою (scrollIntoView / фокус) */
:where(.ui-z) :where(input, textarea, select, [contenteditable="true"]) { scroll-margin-block: 96px; }

/* ---------- Зменшений рух ---------- */
@media (prefers-reduced-motion: reduce) {
    .ui-z *,
    .ui-z *::before,
    .ui-z *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Доступність ---------- */
.ui-z .z-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}