/* ── Вхід і службові діалоги хмари (js/auth.js) + стан синхронізації в налаштуваннях ──
   Та сама картка стоїть у двох місцях: шаром поверх дашборда (.auth-gate) і вбудованою
   в лендинг (.lp-auth, css/landing.css дає їй скло). Тут — усе, що в них однакове. */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;               /* над картою активів, графом і модалками */
  display: none;
  padding: 24px 16px;
  background: var(--bg);
  overflow-y: auto;
}
.auth-gate.open { display: flex; }
body.auth-open { overflow: hidden; }

/* Старт: сторінку сховано, поки дані не на місці (клас ставить <head> у v3.html).
   visibility, а не display — модулі під час init() міряють верстку. */
html.booting body > :not(#authGate) { visibility: hidden; }

.auth-card {
  width: 100%;
  max-width: 400px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--text);
}

@media (min-width: 480px) {
  .auth-gate .auth-card {
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  }
}

/* Та сама марка, що в шапці й на лендингу (.lp-logo) */
.auth-brand {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ff7a00;
  text-transform: uppercase;
  line-height: 1;
}

/* Вхід / Реєстрація — сегмент: обидва шляхи видно одразу */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.auth-tab {
  min-height: 38px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-tab:hover { color: var(--text); }
.auth-tab[aria-selected="true"] {
  color: var(--text);
  background: var(--surface3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.auth-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Заголовок ближче до свого підзаголовка, ніж до кнопок під ним */
.auth-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.auth-sub,
.auth-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.auth-text { color: var(--text); }

.auth-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* Браузер прийшов зі старого стека (js/auth.js, W43): «увійдіть ще раз; з поштою — „Забули пароль“, той самий пароль».
   Текст — стиль .auth-text; плашка лише відділяє пояснення від заголовка й кнопок, без акценту */
.auth-moved {
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.auth-input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;             /* менше — і iOS Safari зумить сторінку при фокусі */
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input::placeholder { color: var(--muted); opacity: 0.55; }
.auth-input:hover { border-color: var(--border-hover); }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-20); }
/* Автозаповнення Chrome фарбує поле в жовте — повертаємо своє тло */
.auth-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--surface2) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

.auth-pw { position: relative; display: block; }
.auth-pw .auth-input { padding-inline-end: 48px; }

.auth-eye {
  position: absolute;
  inset-inline-end: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
}
.auth-eye:hover { color: var(--text); background: var(--surface3); }

.auth-btn {
  position: relative;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.auth-btn:hover { background: var(--surface3); border-color: var(--border-hover); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Один акцент на картку — основна дія. Темний текст: білий на помаранчевому не читається */
.auth-btn.primary {
  color: #1a1206;
  font-weight: 700;
  background: var(--accent);
  border-color: var(--accent);
}
.auth-btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }
.auth-btn.danger { color: var(--danger); }

/* Запит у дорозі: індикатор замість тексту в тій самій ширині */
.auth-btn.loading {
  color: transparent;
  pointer-events: none;
}
.auth-btn.loading > * { visibility: hidden; }
.auth-btn.loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-hover);
  border-top-color: var(--text);
  animation: auth-spin 0.8s linear infinite;
}
.auth-btn.primary.loading::after { border-color: rgba(26,18,6,0.25); border-top-color: #1a1206; }

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-link {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent2);
  cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }
.auth-forgot { align-self: flex-end; margin-top: -4px; }
.auth-back { align-self: flex-start; }

.auth-msg {
  font-size: 13px;
  line-height: 1.45;
  color: var(--danger);
  margin: 0;
}
.auth-msg:empty { display: none; }
.auth-msg.ok { color: var(--done); }

.auth-legal {
  align-self: center;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}
.auth-legal:hover { color: var(--text); text-decoration: underline; }

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.auth-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}

.auth-spin {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-hover);
  border-top-color: var(--accent);
  animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ── Новий акаунт: мова й країна (js/welcome.js) ──
   Обгортка лише носить lang і dir вибраної мови — у розкладці її немає, відступи картки (gap) діють як завжди.
   Обидва списки свої, не системні: під полем, у його ширину; поле — те саме .auth-input, що й у формі входу. */
.auth-welcome { display: contents; }

/* ── Видалення акаунта за посиланням з листа (js/delete-account.js) ──
   The wrapper only marks the card's state; its children lay out in the card's own column, as with .auth-welcome.
   The address is data: masked in privacy mode (privacy.css) */
.del-flow { display: contents; }
.del-email { font-weight: 600; overflow-wrap: anywhere; }
.auth-dd { position: relative; }
.auth-dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: start;
  cursor: pointer;
}
.auth-dd-btn:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-20); }
.auth-dd-btn[aria-expanded="true"] { border-color: var(--accent); }
.auth-dd-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-dd-chev { flex: none; color: var(--muted); transition: transform 0.15s; }
.auth-dd-btn[aria-expanded="true"] .auth-dd-chev { transform: rotate(180deg); }
.auth-dd-list {
  position: absolute;
  z-index: 2;
  top: calc(100% + 6px);
  inset-inline: 0;
  max-height: 248px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.auth-dd-list[hidden] { display: none; }
.auth-dd-o {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text);
  cursor: pointer;
  outline: none;
}
/* Підсвічений рядок (миша, ↑/↓) — тлом; уже вибраний — акцентом, як у списку валют */
.auth-dd-o.on,
.auth-dd-o:focus { background: var(--surface3); }
.auth-dd-o[aria-selected="true"] { color: var(--accent); }
.auth-dd-none { padding: 9px 10px; font-size: 14px; color: var(--muted); }

/* ── Пароль шифрування й ключ відновлення (js/vault.js) ── */

/* «Логін» для менеджера паролів: у формі є, на екрані й у Tab — ні */
.vault-user {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Ключ відновлення: вісім груп по чотири, по чотири в рядку — щоб переписати руками без пропусків.
   Цифри однакової ширини; клік виділяє весь ключ */
.vault-code {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 6px 18px;
  padding: 16px 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  user-select: all;
}
.vault-code-input { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.vault-code-input::placeholder { letter-spacing: 0.06em; }

/* Дві дії поруч, кожна по ширині свого підпису; не влазять удвох (довгі назви в de, fr, hi) — друга переходить
   рядком нижче й обидві тягнуться на всю ширину. Підпис у кнопці не ламається ніколи */
.vault-acts,
.vault-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vault-acts .auth-btn,
.vault-row .auth-btn { flex: 1 1 auto; width: auto; white-space: nowrap; }
.vault-acts .auth-btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.vault-row { margin-top: 4px; }

/* Своя галочка: під нею — справжній checkbox, тож фокус, пробіл і читалка екрана працюють як завжди */
.vault-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  cursor: pointer;
}
.vault-check input {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.vault-box {
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  color: transparent;
  background: var(--surface2);
  border: 1.5px solid var(--border-hover);
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vault-check:hover .vault-box { border-color: var(--accent); }
.vault-check input:checked + .vault-box { color: #1a1206; background: var(--accent); border-color: var(--accent); }
.vault-check input:focus-visible + .vault-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* «Готово», поки ключ не позначено збереженим: видно, що кнопка є, і видно, що вона ще не діє */
.auth-btn:disabled:not(.loading) { opacity: 0.45; cursor: not-allowed; }
.auth-btn:disabled:not(.loading):active { transform: none; }
.auth-btn.primary:disabled:not(.loading):hover { background: var(--accent); border-color: var(--accent); }

/* Пояснення, яке не можна пропустити (шифрування щойно ввімкнули деінде; «Почати з нуля») */
.vault-warn {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.vault-lost { margin-top: -8px; }

/* Режим приватності (Ctrl+M): ключ — секрет, як і дані */
body.privacy .vault-code { -webkit-text-security: square; }

/* ── Налаштування → Акаунт ── */

/* Картка: адреса й стан синхронізації ліворуч, «Вийти» праворуч */
.sett-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sett-account-info { flex: 1; min-width: 0; }
.sett-account-email {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sett-sync {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.sett-sync-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--done);
}
.sett-sync[data-state="pending"] .sett-sync-dot,
.sett-sync[data-state="busy"] .sett-sync-dot { background: var(--accent); }
.sett-sync[data-state="offline"] .sett-sync-dot,
.sett-sync[data-state="error"] .sett-sync-dot,
.sett-sync[data-state="auth"] .sett-sync-dot,
/* quota, quota_new, quota_server; rate — paused until a time; value_big — one entry stays on the device */
.sett-sync[data-state^="quota"] .sett-sync-dot,
.sett-sync[data-state="rate"] .sett-sync-dot,
.sett-sync[data-state="value_big"] .sett-sync-dot { background: var(--danger); }

/* Шифрування: замок і що він означає, під ним — що ми не зберігаємо, і дві дії */
.sett-crypt { margin-top: 10px; }
.sett-crypt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}
.sett-crypt-head svg { flex: none; width: 16px; height: 16px; color: var(--done); }
.sett-crypt .settings-note { margin-top: 4px; }
.sett-crypt-acts { flex-wrap: wrap; margin-top: 10px; }
.sett-crypt-msg, .sett-del-msg { margin-top: 8px; color: var(--done); }
.sett-crypt-msg.bad, .sett-del-msg.bad { color: var(--danger); }

/* Шестірня мовчить, коли все гаразд, і позначається, коли зміни не доходять */
#btnSettings { position: relative; }
#btnSettings.sync-warn::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
}

/* ── Демо (/demo): розділ у налаштуваннях і плашка, що плаває над сторінкою ── */

.sett-demo-text {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
/* «Створити акаунт» — посилання на лендинг у вигляді кнопки налаштувань */
a.modal-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* Плашка демо [ДЕМО | ? Довідка | ⎋ Вийти] (v3.html, #demoBar; settings.js, setupDemo) — не в шапці, а над сторінкою,
   внизу посередині екрана (просили: «болк демо ненадо встривать в интерфейс он должен как бы парить и найди ему более
   удачное место»; до того вона стояла в шапці за датою, ще раніше — в правому нижньому куті). Угорі місця немає ніде:
   шапка, назви місяців, панелі «Стратегії» й календаря. Низ посередині — звідки вміст і так виїжджає прокруткою, а під
   кінцем сторінок для неї є запас (нижче). Чужорідна навмисно (просили: «чтобы сразу бросалось в глаза, что это
   инородный элемент»): жовта, з темним текстом і жовтим свіченням довкола (просили: «убери полоски слева и добавь
   свечение» — до того на її початку були чорні косі смуги, як на огороджувальній стрічці). Ні цього жовтого, ні
   свічення більше ніде в дашборді немає, на обох темах. Над сторінкою, але під усім, що відкривається поверх неї:
   спливними пікерами (30), нотатками «Стратегії», що виїжджають з рейки (40), панеллю колокольчика (60), модалками
   (1000), шухлядами телефона (98–99). Граф (200) і карта активів (210) — виняток: це цілі екрани, і вона над ними, на
   тому самому місці (нижче) */
.demo-bar {
  --demo-bg: #ffcc00;
  --demo-ink: #17150f;
  position: fixed;
  inset-inline: 0;
  bottom: 24px;
  z-index: 29;
  width: max-content;
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--demo-bg);
  color: var(--demo-ink);
  /* Світлий край, ближнє й широке свічення, а під ними — тінь, що відриває плашку від сторінки */
  box-shadow:
    0 0 0 1px rgba(255, 220, 77, 0.6),
    0 0 14px rgba(255, 204, 0, 0.45),
    0 0 44px 4px rgba(255, 204, 0, 0.2),
    0 12px 28px -12px rgba(0, 0, 0, 0.8);
  /* Виринає знизу, коли сторінка вже на екрані; backwards — після кінця анімація нічого не тримає */
  animation: demoBarIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards;
  transition: opacity 0.15s;
}
[data-theme="light"] .demo-bar {
  box-shadow:
    0 0 0 1px rgba(214, 163, 0, 0.45),
    0 0 14px rgba(255, 196, 0, 0.55),
    0 0 40px 4px rgba(255, 196, 0, 0.28),
    0 10px 24px -12px rgba(23, 21, 15, 0.35);
}
@keyframes demoBarIn { from { opacity: 0; translate: 0 16px; } }
.demo-bar[hidden] { display: none; }
.demo-bar-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: none;
  background: none;
  color: inherit;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
.demo-bar-btn:hover { background: rgba(23, 21, 15, 0.1); }
.demo-bar-btn:active { background: rgba(23, 21, 15, 0.17); }
/* Риска між кнопками — на початку наступної: схована кнопка (довідка на телефоні) забирає свою з собою */
.demo-bar-btn + .demo-bar-btn::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(23, 21, 15, 0.28);
}
/* Крайні кнопки — з полем трохи ширшим, ніж між кнопками: заокруглений кут забирає частину місця */
.demo-chip { padding-inline: 16px 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.demo-bar-btn:last-child { padding-inline-end: 16px; }
.demo-bar-btn svg { display: block; width: 16px; height: 16px; flex: none; }
/* Стрілка виходу дивиться до краю, куди «йдуть» — у RTL до лівого */
[dir="rtl"] .demo-exit svg { transform: scaleX(-1); }
.demo-bar-btn:focus-visible { outline: 2px solid var(--demo-ink); outline-offset: -5px; border-radius: 8px; }

/* «Довідка» пульсує завжди (просили: «справка должна пульсировать и привлекать внимание», потім «всегда» — спершу
   вона замовкала, щойно довідку раз відкрили, і здавалось, що пульсує то так, то ні): від значка розходиться темне
   кільце, а за кнопкою дихає світла пляма. Пляма — під текстом (z-index −1 у шарі плашки) і за замовчуванням світиться: зі
   «Зменшенням руху» анімації немає, і кнопка просто лишається підсвіченою */
.demo-help svg { border-radius: 50%; animation: demoHelpPing 1.6s ease-out infinite; }
.demo-help::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  opacity: 0.85;
  pointer-events: none;
  animation: demoHelpGlow 1.6s ease-in-out infinite;
}
@keyframes demoHelpPing {
  0% { box-shadow: 0 0 0 0 rgba(23, 21, 15, 0.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(23, 21, 15, 0); }
}
@keyframes demoHelpGlow {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.85; }
}
/* Поки щось перетягують — ледь видна й не ловить мишу: під нею може бути місце, куди кидають */
body:is(.board-dnd, .dnd-on) .demo-bar { opacity: 0.2; pointer-events: none; }

/* Карта активів і граф (повноекранні шари, 210 і 200): плашка — над ними (просили: на карті її не було видно), але під
   модалками (1000), і на тому самому місці, що й скрізь, — унизу посередині вікна (просили: «блок демо не должен менять
   своё положение в зависимости от страницы»). Нижній рядок карти (.am-hint) стає над нею; рядок підказок графа вона
   накриває посередині — так обрали замість підняти підказки. Поки відкритий редактор блока чи району — ледь видна й
   пропускає мишу: редактор може відкритись і внизу. Довідку карти не перекриває */
body:has(:is(#assetMap, #nodeView):not(.hidden)) > .demo-bar { z-index: 211; }
body:has(.am-gedit.on) > .demo-bar { opacity: 0.2; pointer-events: none; }
body:has(#amHelp:not(.hidden)) > .demo-bar { visibility: hidden; }   /* не display: з ним, закривши довідку, вона б виринала знову */
body:has(> .demo-bar:not([hidden])) .am-hint { bottom: 74px; }       /* 24 + 40 плашки + 10 */

/* Плашка лежить над кінцем сторінки — під останнім вмістом стільки місця, щоб догорнути його вище за неї. Календар — без:
   ширше 860 px сторінка там не гортається взагалі, а свій кінець (пів вікна під груднем) він має у власному вікні */
body:has(> .demo-bar:not([hidden])) :is(.page-board, .merged-content:not(:has(> .calendar-view:not(.hidden))))::after {
  content: '';
  display: block;
  height: 48px;
}

/* Телефон: над нижньою навігацією (60 px). Довідки тут немає, як і в налаштуваннях: її сцени — миша й клавіші */
@media (max-width: 768px) {
  .demo-bar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Карта тут закінчується над навігацією (60 px): верх плашки — 112 px від низу вікна, тобто 52 px від низу карти */
  body:has(> .demo-bar:not([hidden])) .am-hint { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .demo-help { display: none; }
  body:has(> .demo-bar:not([hidden])) :is(.page-board, .merged-content:not(:has(> .calendar-view:not(.hidden))))::after {
    height: 56px;
  }
}