/* ═══════════════════════════════════════════════════════════════════
   «Як користуватися» (guide.js): будова екскурсії для обох виглядів + класичний вигляд (html:not(.ui-z)).
   Зін (html.ui-z) малює ds/guide.css — токени ds/tokens.css. Оверлей fixed поверх усього (самоперевірка — 10000,
   тост і конфеті — 9999), тож розмітка сторінки не зсувається. Позиції карти й рамок ставить guide.js (transform).
   ═══════════════════════════════════════════════════════════════════ */
.nmt-guide { position: fixed; inset: 0; z-index: 10050; touch-action: none; -webkit-tap-highlight-color: transparent; --nmt-guide-r: 14px; }
.nmt-guide [hidden] { display: none; }
.nmt-guide__safe {
    position: fixed; inset: 0; visibility: hidden; pointer-events: none;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.nmt-guide__dim { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.nmt-guide__ring { position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: var(--nmt-guide-r); pointer-events: none; }
.nmt-guide__card {
    position: absolute; left: 0; top: 0; box-sizing: border-box;
    width: min(360px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
    touch-action: auto; outline: none; text-align: left;
}
.nmt-guide__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.nmt-guide__step { margin: 0; }
.nmt-guide__title, .nmt-guide__text { overflow-wrap: anywhere; }
.nmt-guide__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* крапки в один рядок: коли кроків багато, а кнопки широкі («Готово»), крапки стискаються, а не переносяться */
.nmt-guide__dots { display: flex; flex: 1 1 auto; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.nmt-guide__dot { flex: 0 1 7px; min-width: 3px; height: 7px; border-radius: 999px; }
.nmt-guide__dot.is-current { flex: 0 0 16px; }
.nmt-guide__nav { display: flex; gap: 8px; flex: none; }
.nmt-guide__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: no-preference) {
    .nmt-guide__card { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
    .nmt-guide__ring { transition: transform .22s cubic-bezier(.2, .8, .2, 1), width .22s cubic-bezier(.2, .8, .2, 1), height .22s cubic-bezier(.2, .8, .2, 1); }
}

/* ── Класичний вигляд (.ui-v2 і старий): спокійна картка, шавлія й помаранчевий акцент ── */
html:not(.ui-z) .nmt-guide__dim path { fill: rgba(22, 19, 16, .62); }
html:not(.ui-z) .nmt-guide__ring { border: 3px solid #ef8748; box-shadow: 0 0 0 3px rgba(255, 253, 251, .55); }
html:not(.ui-z) .nmt-guide__ring--also { border-style: dashed; }
html:not(.ui-z) .nmt-guide__card {
    padding: 14px 16px 14px; border-radius: 18px;
    background: var(--surface, #fffdfb); color: var(--ink, #2a2622);
    border: 1px solid var(--border, #e5ddd5); box-shadow: 0 18px 50px rgba(20, 14, 4, .32);
    font-family: var(--font-ui, 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif);
}
html:not(.ui-z) .nmt-guide__step { font-size: 11px; line-height: 1.3; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink, #42604b); }
html:not(.ui-z) .nmt-guide__skip {
    min-height: 36px; padding: 0 8px; margin-right: -8px; border: 0; border-radius: 10px; background: none; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2, #5c544c);
}
html:not(.ui-z) .nmt-guide__skip:hover { color: var(--ink, #2a2622); text-decoration: underline; }
html:not(.ui-z) .nmt-guide__title { margin: 4px 0 4px; font-size: 18px; line-height: 1.25; font-weight: 800; color: var(--ink, #2a2622); }
html:not(.ui-z) .nmt-guide__text { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--ink-2, #5c544c); }
html:not(.ui-z) .nmt-guide__extra:not(:empty) { margin-top: 12px; }
html:not(.ui-z) .nmt-guide__foot { margin-top: 14px; }
html:not(.ui-z) .nmt-guide__dot { background: var(--border, #e5ddd5); }
html:not(.ui-z) .nmt-guide__dot.is-done { background: var(--sage, #7c9d85); }
html:not(.ui-z) .nmt-guide__dot.is-current { background: var(--ink, #2a2622); }
html:not(.ui-z) .nmt-guide__btn,
html:not(.ui-z) .nmt-guide__act {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 0 16px;
    border-radius: 12px; border: 2px solid var(--ink, #2a2622); cursor: pointer; text-decoration: none;
    font: inherit; font-size: 14.5px; font-weight: 800; line-height: 1.2;
}
html:not(.ui-z) .nmt-guide__btn--next { background: var(--ink, #2a2622); color: var(--paper, #f5f0ec); }
html:not(.ui-z) .nmt-guide__btn--back { background: transparent; color: var(--ink, #2a2622); border-color: var(--border, #e5ddd5); }
html:not(.ui-z) .nmt-guide__btn:disabled { opacity: .4; cursor: default; }
html:not(.ui-z) .nmt-guide__act { width: 100%; background: #ef8748; color: #2a2622; border-color: #2a2622; }
html:not(.ui-z) .nmt-guide__card :focus-visible { outline: 3px solid #227840; outline-offset: 2px; }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__dim path { fill: rgba(0, 0, 0, .72); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__ring { box-shadow: 0 0 0 3px rgba(0, 0, 0, .45); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__card { background: var(--surface, #262320); color: var(--ink, #f5f0ec); border-color: var(--border, #3b3733); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__title { color: var(--ink, #f5f0ec); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__text { color: var(--ink-2, #cfc7bc); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__step { color: var(--sage, #a8d8b0); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__skip { color: var(--ink-2, #cfc7bc); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__skip:hover { color: var(--ink, #f5f0ec); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__dot { background: var(--border, #3b3733); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__dot.is-done { background: var(--sage, #a8d8b0); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__dot.is-current { background: var(--ink, #f5f0ec); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__btn--next { background: var(--ink, #f5f0ec); color: var(--paper, #1c1a18); border-color: var(--ink, #f5f0ec); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__btn--back { color: var(--ink, #f5f0ec); border-color: var(--border, #3b3733); }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__act { border-color: #1c1a18; }
html[data-theme="dark"]:not(.ui-z) .nmt-guide__card :focus-visible { outline-color: #8fd6a6; }