/* Механика из ds-screen; перекрашено под токены среднего прода (переменные --p-* — только геометрия, см. css/app.css). */
/* DEVIL-DS · Chrome behavior: прятки верхнего/нижнего меню. Двигаем свойством translate (не transform) — не конфликтует с чужими transform/transition. */
.screen .top-menu, .screen .sub-bar, .screen .sub-bottom-bar, .screen .bottom-bar,
.screen .date-switcher.unlock-sub { transition: translate .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease, visibility 0s; }
.screen .date-switcher.unlock-sub { transition: translate .25s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease, visibility 0s; }
.screen .date-switcher.unlock-sub.is-hidden { transition: none; }
/* верх: топ-меню уезжает вверх, саб-бар занимает его место сразу под статус-баром */
.screen.is-top-hidden .top-menu { translate: 0 -112px; opacity: 0; visibility: hidden; pointer-events: none; transition: translate .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease, visibility 0s .25s; }
.screen.is-top-hidden .sub-bar { translate: 0 calc(-1 * (var(--p-btn) + var(--p-gap))); }
/* низ: капсула уезжает вниз, саб-боттом-бар опускается на её место (над home indicator) */
.screen.is-bottom-hidden .bottom-bar { translate: 0 110px; visibility: hidden; pointer-events: none; transition: translate .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease, visibility 0s .25s; }
.screen.is-bottom-hidden .sub-bottom-bar, .screen.is-bottom-hidden .date-switcher { translate: 0 calc(var(--p-menu-h) + var(--p-sub-gap)); }
/* зоны жестов: горизонталь отдаём странице, вертикаль — браузеру */
.screen .sub-bottom-bar, .screen .bottom-bar, .dv-edge-zone { touch-action: pan-y; }
.dv-edge-zone { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; z-index: 6; }   /* страница с датами: полоса показа нижнего меню */
/* ручка: подсказка, когда нижнее меню спрятано */
.dv-handle { position: absolute; left: 50%; bottom: 24px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; pointer-events: none;
  background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim); backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  opacity: 0; transition: opacity .25s ease; }
.screen.is-bottom-hidden .dv-handle { opacity: 1; transition-delay: .12s; }
/* бейдж уведомления: GlassBadge v-danger sz-sm (классы среднего прода), здесь только позиция на кнопке */
.dv-badge { position: absolute; right: -4px; top: -4px; z-index: 3; min-width: 17px; padding: 0 5px; box-sizing: border-box; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .screen .top-menu, .screen .sub-bar, .screen .sub-bottom-bar, .screen .bottom-bar, .screen .date-switcher.unlock-sub, .dv-handle { transition: none !important; }
}
/* телефон (ширина <= 430): экран на всю ширину и высоту окна, без рамки; страница не скроллится, скроллится только контент */
@media (max-width: 430px) {
  :root { --p-screen-w: 100vw; --p-screen-h: 100dvh; --p-screen-radius: 0px; }
  html, html body { height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; }
  html body { display: block; background: var(--bg); }
  html .screen { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* жест «зажал — вверх-вниз»: ручка загорается и растёт по мере качания */
.dv-handle::before { content: ""; position: absolute; inset: -16px -28px; }   /* зона тапа по ручке */
.screen.is-bottom-hidden .dv-handle { pointer-events: auto; cursor: pointer; }
.dv-handle.is-hold { opacity: 1 !important; background-color: var(--text); width: calc(36px + 40px * var(--hz, 0)); margin-left: calc(-18px - 20px * var(--hz, 0)); transition: width .15s, margin-left .15s; }
.screen.is-gesture { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* след пальца при жесте */
.dv-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; opacity: 0; overflow: visible; }
.dv-trail polyline { fill: none; stroke: var(--text2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* быстрые команды: капсула с названием у пальца и тост «Назад некуда» (js/gestures.js) */
html .ms-cap.dv-gcap { position: absolute; z-index: 61; height: 36px; padding: 0 16px; border-radius: var(--r-pill); display: flex; align-items: center; white-space: nowrap; pointer-events: none; font: 600 12px/16px var(--font); letter-spacing: .08em; color: var(--text); opacity: 0; translate: 0 8px; }
html .ms-cap.dv-gcap.is-on { animation: dv-gcap .6s ease forwards; }
@keyframes dv-gcap { 0% { opacity: 0; translate: 0 8px; } 18% { opacity: 1; translate: 0 0; } 70% { opacity: 1; translate: 0 -2px; } 100% { opacity: 0; translate: 0 -6px; } }
html .ms-cap.dv-gtoast { position: absolute; z-index: 62; top: calc(var(--p-status) + 8px); left: 50%; height: 40px; padding: 0 18px; border-radius: var(--r-pill); display: flex; align-items: center; white-space: nowrap; pointer-events: none; font: 500 14px/18px var(--font); color: var(--text); opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s, transform .2s; }
html .ms-cap.dv-gtoast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  html .ms-cap.dv-gcap.is-on { animation: dv-gcap-r .6s steps(1, end) forwards; translate: 0 0; }
  @keyframes dv-gcap-r { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
  html .ms-cap.dv-gtoast { transition: none; transform: translate(-50%, 0); }
}

/* шпаргалка жестов (Аккаунт → Настройки → Жесты) */
.gs-list { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow-y: auto; }
.gs-item { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.gs-ico { flex: none; width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--glass-bg-nested); box-shadow: inset 0 0 0 1px var(--border); }
.gs-ico svg { width: 100%; height: 100%; display: block; }
.gs-ico .gs-p { fill: none; stroke: var(--text); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: gs-draw 2.4s ease-in-out infinite; }
.gs-ico .gs-d { fill: var(--text); }
.gs-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--font); }
.gs-tx b { font: 600 15px/20px var(--font); color: var(--text); }
.gs-tx span { font: 400 13px/18px var(--font); color: var(--text2); }
.gs-note { font: 400 12px/16px var(--font); color: var(--text2); padding: 4px 6px 0; }
@keyframes gs-draw { 0% { stroke-dashoffset: 1; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gs-ico .gs-p { animation: none; stroke-dashoffset: 0; } }