/* ControlDesk — мягкое движение и новые элементы (клавиатура, оформление).
   Принцип: нажатие отзывается сразу, но тихо (кнопка мягко «проседает»), а смена состояния — плавное перетекание цвета, а не щелчок.
   Возврат после нажатия идёт с лёгкой пружиной. Скорость выбирается в «Оформление и отклик»: Мягкая / Обычная / Минимум. */

:root {
  --m-ease: cubic-bezier(0.32, 0.72, 0, 1);       /* плавное замедление в конце, без отскока */
  --m-spring: cubic-bezier(0.34, 1.32, 0.64, 1);  /* возврат с едва заметной пружиной */
  --m-press: 240ms;      /* проседание под пальцем */
  --m-release: 620ms;    /* возврат */
  --m-state: 340ms;      /* перетекание цвета при смене состояния */
  --m-slide: 520ms;      /* скольжение «таблеток» и шторок */
}
:root[data-motion="normal"] { --m-press: 130ms; --m-release: 340ms; --m-state: 200ms; --m-slide: 320ms; }
:root[data-motion="reduced"] { --m-press: 0ms; --m-release: 0ms; --m-state: 0ms; --m-slide: 0ms; }
@media (prefers-reduced-motion: reduce) { :root { --m-press: 0ms; --m-release: 0ms; --m-state: 120ms; --m-slide: 0ms; } }

/* ---------- нажатия: кнопки, плитки, клавиши, пункты ---------- */
.btn, .tool, .key, .tab, .seg button, .theme-card, .switch-row, .chip, .top-btn {
  transition:
    transform var(--m-release) var(--m-spring),
    background-color var(--m-state) var(--m-ease),
    color var(--m-state) var(--m-ease),
    box-shadow var(--m-state) var(--m-ease),
    opacity var(--m-state) var(--m-ease),
    filter var(--m-state) var(--m-ease);
  will-change: transform;
}
.btn:active, .tool:active, .key:active, .tab:active, .seg button:active, .theme-card:active, .top-btn:active {
  transform: scale(0.955);
  filter: brightness(0.94);
  transition:
    transform var(--m-press) ease-out,
    background-color var(--m-state) var(--m-ease),
    color var(--m-state) var(--m-ease),
    box-shadow var(--m-state) var(--m-ease),
    filter var(--m-press) ease-out;
}
.btn-primary:active { filter: brightness(0.9); }
.key:active { transform: scale(0.93); }
.tab:active { transform: scale(0.94); background-color: transparent; }
.seg button:active { transform: scale(0.97); }
@media (hover: hover) { .btn:hover, .tool:hover, .key:hover { filter: brightness(1.06); } }

/* ---------- скользящие «таблетки»: переключатель и нижние разделы ---------- */
.seg { position: relative; isolation: isolate; }
.seg-thumb {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none; opacity: 0;
  border-radius: var(--g-r-pill, 999px); background: var(--accent);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform-origin: 50% 50%; will-change: transform;
  /* положение и размер ведёт пружина в glide-ui.js (кадры только пока капля движется) */
  transition: opacity var(--m-state) var(--m-ease), box-shadow var(--m-state) var(--m-ease);
}
.seg button { position: relative; z-index: 1; }
.seg button[aria-checked="true"], .seg button[aria-checked="true"]:active { background: transparent; box-shadow: none; color: var(--accent-ink); }
.seg button[aria-checked="true"] .ico { color: var(--accent-ink); }

#tabbar { position: relative; isolation: isolate; }
.tab-thumb {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none; opacity: 0;
  border-radius: 999px; background: color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low);
  transform-origin: 50% 50%; will-change: transform;
  transition: opacity var(--m-state) var(--m-ease), box-shadow var(--m-state) var(--m-ease), background-color var(--m-state) var(--m-ease);
}
.tab { position: relative; z-index: 1; }
.tab[aria-selected="true"], .tab[aria-selected="true"]:active { background: transparent; box-shadow: none; }
.tab .ico { transition: transform var(--m-slide) var(--m-spring), color var(--m-state) var(--m-ease); }
.tab[aria-selected="true"] .ico { transform: translateY(-1px) scale(1.08); }

/* ---------- разделы: сдвиг с пружиной (glide-ui.js, Web Animations), шторки появляются мягко ---------- */
#views { overflow: hidden; }                 /* въезжающий раздел не даёт горизонтальной прокрутки */
.view-leaving { pointer-events: none; z-index: 0; }

/* ---------- «капля»: зажать выбранную вкладку или пункт и вести пальцем (как в TanVelor) ---------- */
#tabbar { touch-action: none; }              /* ряд не прокручивается: палец целиком принадлежит жесту */
.seg { touch-action: pan-y; }                /* вертикальная прокрутка страницы работает, вдоль ряда — жест */
#tabbar, .seg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-scrubbing] > .tab-thumb { background: color-mix(in srgb, var(--text) 20%, transparent); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low), 0 8px 22px -10px rgba(0, 0, 0, 0.7); }
[data-scrubbing] > .seg-thumb { box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
[data-away] > .tab-thumb, [data-away] > .seg-thumb { opacity: 0.45; }   /* палец ушёл за ряд: отпустите — ничего не изменится */
[data-scrubbing] .tab:active, [data-scrubbing] .seg button:active { transform: none; filter: none; }
#tabbar[data-scrubbing] .tab[aria-selected="true"] { color: var(--text-2); }
#tabbar[data-scrubbing] .tab[aria-selected="true"] .ico { color: var(--text-2); transform: none; }
#tabbar .tab[data-scrub] { color: var(--text); }
#tabbar .tab[data-scrub] .ico { color: var(--accent); transform: translateY(-1px) scale(1.08); }
.seg[data-scrubbing] button[aria-checked="true"], .seg[data-scrubbing] button[aria-checked="true"] .ico { color: var(--text-2); }
.seg button[data-scrub], .seg button[data-scrub] .ico { color: var(--accent-ink); }

.scrim { animation: fade calc(var(--m-slide) * 0.7) var(--m-ease); transition: opacity calc(var(--m-slide) * 0.6) var(--m-ease); }
.sheet { animation: sheet-in var(--m-slide) var(--m-ease) both; transition: transform var(--m-slide) var(--m-ease), opacity var(--m-state) var(--m-ease); }
.sheet-dock { animation-name: dock-in; }
@keyframes sheet-in { from { transform: translateY(46px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dock-in { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet.closing { transform: translateY(104%) !important; opacity: 0; pointer-events: none; animation: none; transition: transform calc(var(--m-slide) * 0.55) cubic-bezier(0.5, 0, 0.75, 0), opacity calc(var(--m-slide) * 0.5) ease-in; }
.scrim.closing { opacity: 0; pointer-events: none; animation: none; }

.toast { animation: toast-in calc(var(--m-slide) * 0.9) var(--m-spring) both; }
@keyframes toast-in { from { transform: translateY(14px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.tap-ripple { animation: ripple-soft 0.8s var(--m-ease) forwards; }
@keyframes ripple-soft { from { transform: scale(0.35); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }

/* смена темы перетекает, а не мигает */
html.theme-fade, html.theme-fade * { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, fill 0.5s ease, stroke 0.5s ease !important; }

/* выключатель: ползунок едет с пружиной */
.switch-ui { transition: background-color var(--m-state) var(--m-ease); }
.switch-ui::after { transition: transform var(--m-slide) var(--m-spring), width var(--m-press) ease-out; }

/* ---------- шапка: кнопка оформления ---------- */
#topbar .pc { flex: 1; }
.top-btn { flex: none; width: 40px; min-width: 40px; min-height: 40px; height: 40px; border-radius: 50%; }

/* ---------- оформление ---------- */
.sheet-sub { font-size: var(--fs-s); font-weight: 600; color: var(--text-2); letter-spacing: 0.02em; margin-top: var(--sp-1); }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.theme-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--sp-2); border: 0; border-radius: 20px; text-align: left; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge-low), inset 0 1px 0 var(--glass-edge); }
.theme-card small { font-size: var(--fs-xs); line-height: 1.25; }
.theme-card[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent), inset 0 1px 0 var(--glass-edge); }
.theme-swatch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; height: 54px; padding: 8px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.3); }
.theme-swatch .sw-bar { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px; border-radius: 8px; }
.theme-swatch .sw-bar i { display: block; height: 6px; width: 60%; border-radius: 3px; }
.theme-swatch .sw-bar b { display: block; height: 4px; width: 85%; border-radius: 2px; opacity: 0.55; }
.hotkeys { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-3); align-items: center; }
.hotkeys dd { margin: 0; color: var(--text-2); font-size: var(--fs-s); }
.hotkeys dt { margin: 0; }
kbd { display: inline-block; min-width: 24px; padding: 2px 8px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line-strong), inset 0 0 0 1px var(--line); font: 600 12px/1.5 var(--font-mono); text-align: center; white-space: nowrap; }

/* ---------- клавиатура ПК ---------- */
.kb-page { display: flex; flex-direction: column; gap: var(--sp-2); flex: none; }   /* не сжимать: иначе строки вылезали за край и наезжали на соседей */
.kb-page[hidden] { display: none; }
.kb-row .key { min-width: 48px; padding: 0 var(--sp-3); }
.kb-row .key-wide { min-width: 84px; }
.kb-row .key-mod { min-width: 64px; }
.kb-count { font-size: var(--fs-xs); align-self: center; }
.live-field { min-height: 72px; resize: none; }
.live-field:focus { box-shadow: 0 0 0 2px var(--ok), inset 0 2px 6px rgba(0, 0, 0, 0.12); }
.live-state { margin: 0; }
.sheet-dock .sheet-body { max-height: min(46vh, 400px); }
.key[aria-pressed="true"] { background-color: var(--accent); color: var(--accent-ink); }

/* ---------- фокус для клавиатуры: хорошо виден, но не резкий ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; transition: outline-offset 160ms var(--m-ease); }
.tab:focus-visible, .seg button:focus-visible { outline-offset: -2px; }

/* узкий телефон: в переключателе режимов только подписи, чтобы «Старт/Стоп» и настройки умещались в одну строку */
@media (max-width: 420px) { .bar .seg .ico { display: none; } .bar .seg button { padding: 0 var(--sp-3); } }

/* сетка клавиш: ровные клавиши во всю ширину, как на экранной клавиатуре телефона */
.kb-row.kb-grid { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 5px; margin: 0; padding: 0; scroll-snap-type: none; }
.kb-grid .key { flex: 0 0 calc((100% - 45px) / 10); min-width: 0; padding: 0; }
.kb-mods { position: sticky; bottom: -1px; z-index: 2; margin: 0 calc(var(--sp-4) * -1); padding: var(--sp-2) var(--sp-4) 2px; background: linear-gradient(to bottom, transparent, var(--glass-strong) 35%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hotkeys dd { text-align: left; }
.theme-card { font: inherit; color: inherit; }
.kb-grid[aria-label="Знаки"] .key { flex-basis: calc((100% - 50px) / 11); }

/* клавиатура: не растягивается на широком экране, не даёт горизонтальной прокрутки, панель модификаторов не перекрывает строки */
.sheet-dock { max-width: 640px; margin-left: auto; margin-right: auto; }
.sheet-dock .sheet-body { overflow-x: hidden; }
.kb-mods { flex: none; }
.kb-grid .key { height: var(--touch); }