/* ════════════════════════════════════════════════════════════════════
   Answerly — спільний шар інтерфейсу для всіх сторінок: лендінг, «Замовити демо», «Вхід», кабінет.
   Тут лише те, що однакове на всіх сторінках: база, фокус, іконки, текст для читача екрана,
   кнопки (як на лендінгу), поля (за Input дизайн-системи), посилання-кнопка, моноширинні цифри, поява вмісту.
   Кольори, шрифти, тіні — токени дизайн-системи (_ds/…/tokens). Свої класи сторінки — зі своїм префіксом, у своєму файлі.
   Розмір тексту кнопок і полів задають змінні (--v-btn-fs, --v-label-fs, --v-input-fs, --v-hint-fs, --v-link-fs):
   лендінгова шкала — за замовчуванням, кабінетна — змінними на контейнері (див. .si-card у «Вході»).
   Змінюєш наявне правило — перевір лендінг, «Демо» і «Вхід»: вони мусять виглядати як раніше.
   ════════════════════════════════════════════════════════════════════ */

/* ── база ── */
body { margin: 0; background: var(--paper-50); color: var(--ink-900); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 3px; border-radius: 6px; }
.v-ico { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v-mono { font-family: var(--font-mono); font-size: 0.93em; font-weight: 500; letter-spacing: 0; }

/* ── кнопки: чорнильна — головна дія, контурна — друга; висота 44, велика — 54 ── */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font-family: var(--font-sans); font-size: var(--v-btn-fs, 15px); font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.v-btn:active { transform: scale(0.98); }
.v-btn[disabled] { cursor: default; transform: none; }
.v-btn-ink { background: var(--ink-900); color: var(--paper-50); }
.v-btn-ink:hover { background: #000; }
.v-btn-lg { height: 54px; padding: 0 28px; font-size: 16px; }
.v-btn-line { background: var(--white); color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--line-strong); }
.v-btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink-900); }

/* ── поля — за Input дизайн-системи: підпис, поле 44 (радіус 10, кільце фокусу), підказка або помилка (data-err) ── */
.v-label { display: block; margin: 0 0 7px; padding: 0; font-size: var(--v-label-fs, 13.5px); font-weight: 500; line-height: 1.3; color: var(--v-label-c, var(--ink-900)); }
.v-input { display: block; width: 100%; height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white);
  font-family: var(--font-sans); font-size: var(--v-input-fs, 15px); color: var(--ink-900); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.v-input::placeholder { color: var(--ink-300); opacity: 1; }
.v-input:hover { border-color: var(--ink-300); }
.v-input:focus, .v-input:focus-visible { outline: none; border-color: var(--ink-700); box-shadow: var(--ring); }
.v-input[aria-invalid="true"] { border-color: var(--red-500); }
.v-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16); }
.v-hint { margin: 6px 0 0; font-size: var(--v-hint-fs, 12.5px); line-height: 1.45; color: var(--ink-500); }
.v-hint[data-err="true"] { color: var(--red-500); }
/* кнопка, що виглядає як посилання: «Змінити», «Надіслати код ще раз» */
.v-link { flex: none; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font-family: var(--font-sans); font-size: var(--v-link-fs, 14px); font-weight: 600; color: var(--ink-900);
  text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color 160ms var(--ease-out); }
.v-link:hover { text-decoration-color: var(--ink-900); }

/* ── поява: вміст кроку чи розділу (.v-rise); після переходу між сторінками (html[data-arrived]) — по черзі (.v-enter, затримка --v-d).
   Поки триває перехід між сторінками (html[data-vt], ставить answerly-transitions.js), поява чекає ── */
.v-rise { animation: v-rise 320ms var(--ease-out) both; }
@keyframes v-rise { from { opacity: 0; transform: translateY(6px); } }
html[data-arrived] .v-enter { animation: v-enter 560ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--v-d, 0ms); }
@keyframes v-enter { from { opacity: 0; transform: translateY(12px); } }
html[data-vt] .v-rise, html[data-vt] .v-enter { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .v-rise, html[data-arrived] .v-enter { animation: none; }
}

/* телефон: поле вище, текст 16 px — iOS не збільшує сторінку під час введення */
@media (max-width: 599px) {
  .v-input { height: 48px; font-size: 16px; }
}

/* ── Додано для кабінету (30.09, лише нові правила — наявні не змінено) ──
   Кнопки: M 36 — тулбари й рядки списків, S 32 — компактні дії в картках; небезпечна (червоний текст) і тиха (без рамки);
   квадратна іконкова. Поля: список (.v-select) і багаторядкове (.v-textarea) — разом із .v-input.
   Чип стану — той самий, що в картці hero лендінгу (.v-chip у V19, значення дослівно), і тони кабінету:
   seat — за столом, done — завершено / скасовано, bad — не прийшли / пропущено, hold — тримаємо стіл. */
.v-btn-m { height: 36px; padding: 0 16px; }
.v-btn-s { height: 32px; padding: 0 12px; gap: 6px; font-size: 13px; }
.v-btn-danger { background: var(--white); color: var(--red-500); box-shadow: inset 0 0 0 1px var(--line-strong); }
.v-btn-danger:hover { box-shadow: inset 0 0 0 1px var(--red-500); }
.v-btn-ghost { background: transparent; color: var(--ink-700); }
.v-btn-ghost:hover { background: rgba(13, 13, 13, 0.05); color: var(--ink-900); }
.v-btn-icon { width: 44px; padding: 0; }
.v-btn-m.v-btn-icon { width: 36px; }
.v-btn-s.v-btn-icon { width: 32px; }
.v-input.v-select { padding-right: 34px; cursor: pointer; background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b6b67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
.v-input.v-textarea { height: auto; min-height: 92px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.v-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.v-chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.v-chip[data-tone="wait"] { background: var(--paper-50); border-color: var(--line-strong); color: var(--ink-700); }
.v-chip[data-tone="wait"]::before { border: 1.5px dashed var(--ink-400); width: 8px; height: 8px; }
.v-chip[data-tone="ok"] { background: var(--green-100); color: var(--green-500); }
.v-chip[data-tone="ok"]::before { background: var(--green-500); }
.v-chip[data-tone="out"] { background: var(--white); border-color: var(--ink-300); color: var(--ink-900); }
.v-chip[data-tone="out"]::before { background: var(--ink-900); }
.v-chip[data-tone="seat"] { background: var(--ink-900); color: var(--paper-50); }
.v-chip[data-tone="seat"]::before { background: var(--paper-50); }
.v-chip[data-tone="done"] { background: var(--paper-100); color: var(--ink-500); }
.v-chip[data-tone="done"]::before { background: var(--ink-300); }
.v-chip[data-tone="bad"] { background: var(--red-100); color: var(--red-500); }
.v-chip[data-tone="bad"]::before { background: var(--red-500); }
.v-chip[data-tone="hold"] { background: var(--white); border-color: var(--line-strong); color: var(--ink-900); }
.v-chip[data-tone="hold"]::before { width: 8px; height: 8px; border: 1.5px solid var(--ink-900); }

/* ── Стани дії (02.10, стандарт деталей — landing/UI-STANDARD.md; лише нові правила) ──
   Вимкнено (disabled чи aria-disabled) — видно: приглушено. Йде запит (aria-busy="true" разом із disabled) — замість
   тексту спінер посередині, ширина й висота кнопки не змінюються, повторний натиск нічого не робить; іконки ховаються.
   Колір спінера — колір тексту кнопки цього виду. У посилання-кнопки (.v-link) спінер — ::before (::after у кабінеті
   розширює зону натиску). */
.v-btn:disabled:not([aria-busy="true"]), .v-btn[aria-disabled="true"]:not([aria-busy="true"]) { opacity: 0.45; cursor: default; }
.v-btn[aria-busy="true"] { position: relative; color: transparent !important; cursor: progress; transform: none; }
.v-btn[aria-busy="true"] > * { visibility: hidden; }
.v-btn[aria-busy="true"]::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid var(--ink-900); border-right-color: transparent; animation: v-spin 700ms linear infinite; }
.v-btn-ink[aria-busy="true"]::after { border-color: var(--paper-50); border-right-color: transparent; }
.v-btn-danger[aria-busy="true"]::after { border-color: var(--red-500); border-right-color: transparent; }
.v-btn-s[aria-busy="true"]::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.v-link:disabled:not([aria-busy="true"]), .v-link[aria-disabled="true"]:not([aria-busy="true"]) { opacity: 0.45; cursor: default; text-decoration-color: var(--ink-300); }
.v-link[aria-busy="true"] { position: relative; color: transparent; text-decoration-color: transparent; cursor: progress; }
.v-link[aria-busy="true"]::before { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid var(--ink-900); border-right-color: transparent; animation: v-spin 700ms linear infinite; }
/* інші елементи, що запускають запит (іконкова кнопка, плитка, пункт меню), — клас .v-busy + aria-busy="true": спінер кольору тексту */
.v-busy[aria-busy="true"] { position: relative; cursor: progress; }
.v-busy[aria-busy="true"] > * { visibility: hidden; }
.v-busy[aria-busy="true"]::before { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: v-spin 700ms linear infinite; }
@keyframes v-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .v-btn[aria-busy="true"]::after, .v-link[aria-busy="true"]::before, .v-busy[aria-busy="true"]::before { animation-duration: 1.8s; }
}

/* ── Додано 02.10: скелет, зона натиску, посилання в рядку дій (стандарт деталей — UI-STANDARD.md; лише нові правила, наявні не змінено) ── */

/* Скелет першого завантаження (UI-STANDARD §3.1) — форму вмісту показуємо, поки даних немає. Вид і перелив — тут, розмір (width, height)
   і місце — сторінка, так, щоб дані сіли рівно на місце скелета. .v-skel — основа (радіус 7); .v-skel-line — рядок тексту (14 px);
   .v-skel-block — блок: слот, кнопка, поле, картка (радіус 10, висоту задає сторінка); .v-skel-circle — коло: аватар, вузол кроку.
   Скелет — aria-hidden; що йде завантаження, сторінка каже читачу екрана сама (.v-sr з role="status"). Зменшений рух — без переливу. */
.v-skel { display: block; border-radius: 7px; background: linear-gradient(90deg, var(--paper-100) 0%, var(--paper-200) 50%, var(--paper-100) 100%);
  background-size: 200% 100%; animation: v-skel 1.4s ease-in-out infinite; }
.v-skel-line { height: 14px; }
.v-skel-block { border-radius: 10px; }
.v-skel-circle { border-radius: 50%; aspect-ratio: 1; }
@keyframes v-skel { to { background-position: -200% 0; } }

/* Посилання-кнопка <a class="v-link"> у рядку з кнопками (підвал картки, рядок дій): текст по центру висоти, як у <button class="v-link">.
   Без модифікатора <a> у flex-рядку стає блоком і тримає текст угорі своїх 32 px — на 5–6 px вище за центр сусідньої кнопки.
   Лише модифікатором: «посилання як текст» у рядку тексту (UI-STANDARD §1.6) лишається рядковим. */
.v-link.v-link-row { display: inline-flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .v-skel { animation: none; }
}

/* Зона натиску на телефоні — не менше 44 × 44 (UI-STANDARD §5.4), вигляд той самий: невидиме поле довкола посилання-кнопки
   (.v-link — ::after; її спінер «йде запит» — ::before) і малих кнопок (.v-btn-m 36, .v-btn-s 32 — ::before; їхній спінер — ::after).
   Поле — по центру елемента й виступає лише настільки, щоб вийшло 44, і не більше ніж на 6 px з кожного боку: стандартні .v-link (32),
   .v-btn-m, .v-btn-s дістають рівно 44, більші — без змін, «посилання як текст» (без висоти) — лише +6 px, щоб не накривати сусідні рядки.
   position: relative — з нульовою вагою (:where): правило сторінки, що ставить кнопку absolute чи fixed, лишається в силі; своє поле
   сторінки (точніший селектор з inset) — так само. Сусіди ближче за 6 px: поле накриє їхній край — тримайте відступ від 8 px. */
@media (max-width: 767px) {
  :where(.v-link, .v-btn-m, .v-btn-s) { position: relative; }
  .v-link::after, .v-btn-m::before, .v-btn-s::before { content: ''; position: absolute;
    top: max(-6px, min(0px, (100% - 44px) / 2)); bottom: max(-6px, min(0px, (100% - 44px) / 2));
    left: max(-6px, min(0px, (100% - 44px) / 2)); right: max(-6px, min(0px, (100% - 44px) / 2)); }
}

/* «Скасувати» в тості відкладеної дії (AnswerlyUI.later, UI-STANDARD §1.4, 03.10). Тост темний (адмінка .ad-toast, кабінет
   .cb-toast) — кнопка світла; відлік — тонка смужка внизу тосту, що тане за --v-undo-ms; --v-undo-d — уже минуло (від’ємна
   затримка: смужка продовжує з того місця, де була, навіть коли тост перемалювали). Зменшений рух — смужка стоїть. */
.v-undo { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; margin: -6px -10px -6px 4px; padding: 0 12px; border: 0;
  border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background-color 140ms ease; }
.v-undo:hover { background: rgba(255, 255, 255, 0.24); }
.v-undo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v-undo kbd { font: inherit; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.v-undo-bar { position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; pointer-events: none; }
.v-undo-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.72); transform-origin: left center;
  animation: v-undo var(--v-undo-ms, 5000ms) linear var(--v-undo-d, 0ms) forwards; }
@keyframes v-undo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 767px) { .v-undo { height: 36px; } .v-undo kbd { display: none; } }
@media (prefers-reduced-motion: reduce) { .v-undo-bar::after { animation: none; } }