/* Дизайн-система кабинета (B9) — общий слой обоих направлений.

   1. Слой Telegram: --t-* = themeParams (переменные --tg-theme-*, их выставляет telegram-web-app.js) с фолбэками —
      палитрами Telegram iOS по умолчанию. data-lock="light|dark" на <html> (витрина, скриншоты) — фиксированная палитра
      вместо темы Telegram. Направления строят свои семантические токены поверх --t-*, а не поверх --tg-theme-*.
   2. Безопасные зоны: из переменных Telegram (--tg-safe-area-*, --tg-content-safe-area-*); core.js дублирует их по
      событиям safeAreaChanged / contentSafeAreaChanged. env(safe-area-inset-*) не используем: в Telegram на iOS он бывает 0.
   3. Механика общих компонентов (таб-бар, шторка, тост, превью главной кнопки вне Telegram), доступность, анимации.
   Внешний вид компонентов — в a.css / b.css. */

:root {
  --t-bg: var(--tg-theme-bg-color, #ffffff);
  --t-secondary-bg: var(--tg-theme-secondary-bg-color, #efeff3);
  --t-section-bg: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --t-header-bg: var(--tg-theme-header-bg-color, #f8f8f8);
  --t-bottom-bar-bg: var(--tg-theme-bottom-bar-bg-color, #f2f2f2);
  --t-text: var(--tg-theme-text-color, #000000);
  --t-hint: var(--tg-theme-hint-color, #8e8e93);
  --t-subtitle: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #8e8e93));
  --t-link: var(--tg-theme-link-color, #007aff);
  --t-button: var(--tg-theme-button-color, #007aff);
  --t-button-text: var(--tg-theme-button-text-color, #ffffff);
  --t-accent-text: var(--tg-theme-accent-text-color, var(--tg-theme-link-color, #007aff));
  --t-section-header: var(--tg-theme-section-header-text-color, #6d6d72);
  --t-separator: var(--tg-theme-section-separator-color, #c8c7cc);
  --t-destructive: var(--tg-theme-destructive-text-color, #ff3b30);

  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-left: calc(var(--tg-safe-area-inset-left, 0px) + var(--tg-content-safe-area-inset-left, 0px));
  --safe-right: calc(var(--tg-safe-area-inset-right, 0px) + var(--tg-content-safe-area-inset-right, 0px));
  --tabbar-h: 56px;
  --mainbutton-h: 0px;
  color-scheme: light;
}
:root[data-scheme="dark"] { color-scheme: dark; }
:root[data-scheme="dark"]:not([data-lock]) {
  --t-bg: var(--tg-theme-bg-color, #000000);
  --t-secondary-bg: var(--tg-theme-secondary-bg-color, #1c1c1d);
  --t-section-bg: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #2c2c2e));
  --t-header-bg: var(--tg-theme-header-bg-color, #1a1a1a);
  --t-bottom-bar-bg: var(--tg-theme-bottom-bar-bg-color, #1d1d1d);
  --t-text: var(--tg-theme-text-color, #ffffff);
  --t-hint: var(--tg-theme-hint-color, #98989e);
  --t-subtitle: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #98989e));
  --t-link: var(--tg-theme-link-color, #3e88f7);
  --t-button: var(--tg-theme-button-color, #3e88f7);
  --t-button-text: var(--tg-theme-button-text-color, #ffffff);
  --t-accent-text: var(--tg-theme-accent-text-color, var(--tg-theme-link-color, #3e88f7));
  --t-section-header: var(--tg-theme-section-header-text-color, #8d8e93);
  --t-separator: var(--tg-theme-section-separator-color, #545458);
  --t-destructive: var(--tg-theme-destructive-text-color, #eb5545);
}
/* витрина и скриншоты: фиксированные палитры Telegram iOS (дневная и ночная) вместо текущей темы */
:root[data-lock="light"] {
  --t-bg: #ffffff; --t-secondary-bg: #efeff3; --t-section-bg: #ffffff; --t-header-bg: #f8f8f8;
  --t-bottom-bar-bg: #f2f2f2; --t-text: #000000; --t-hint: #8e8e93; --t-subtitle: #8e8e93; --t-link: #007aff;
  --t-button: #007aff; --t-button-text: #ffffff; --t-accent-text: #007aff; --t-section-header: #6d6d72;
  --t-separator: #c8c7cc; --t-destructive: #ff3b30;
}
:root[data-lock="dark"] {
  --t-bg: #000000; --t-secondary-bg: #1c1c1d; --t-section-bg: #2c2c2e; --t-header-bg: #1a1a1a;
  --t-bottom-bar-bg: #1d1d1d; --t-text: #ffffff; --t-hint: #98989e; --t-subtitle: #98989e; --t-link: #3e88f7;
  --t-button: #3e88f7; --t-button-text: #ffffff; --t-accent-text: #3e88f7; --t-section-header: #8d8e93;
  --t-separator: #545458; --t-destructive: #eb5545;
}

/* ---------- сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; min-height: var(--tg-viewport-height, 100dvh); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--focus, var(--t-link)); outline-offset: 2px; border-radius: 4px; }
svg.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---------- каркас ---------- */
.app { min-height: inherit; padding-left: var(--safe-left); padding-right: var(--safe-right); }
.screen { padding-top: calc(var(--safe-top) + 8px);
  padding-bottom: calc(var(--safe-bottom) + var(--mainbutton-h) + 32px); }
.has-tabs .screen { padding-bottom: calc(var(--safe-bottom) + var(--tabbar-h) + 32px); }

.tabbar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--tabbar-h); position: relative; }

/* превью главной кнопки Telegram — только вне Telegram (скриншоты, браузер): в Telegram её рисует сам клиент */
.mainbutton-preview { display: none; }
.outside-tg .mainbutton-preview { display: block; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
  padding: 8px calc(16px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(16px + var(--safe-left));
  background: var(--t-bottom-bar-bg); }
.outside-tg .mainbutton-preview span { display: flex; align-items: center; justify-content: center; height: 50px;
  border-radius: 12px; background: var(--main-color, var(--t-button)); color: var(--main-text-color, var(--t-button-text));
  font: 600 17px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.outside-tg.has-main { --mainbutton-h: 66px; }

/* тост */
.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--safe-bottom) + var(--tabbar-h) + 16px);
  max-width: min(92vw, 420px); transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2, 200ms) ease, transform var(--dur-2, 200ms) ease; }
.is-nested .toast { bottom: calc(var(--safe-bottom) + var(--mainbutton-h) + 16px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* шторка снизу */
.sheet-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2, 200ms) ease; }
.sheet { position: fixed; z-index: 51; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto;
  padding-bottom: calc(var(--safe-bottom) + 12px); transform: translateY(100%); visibility: hidden;
  transition: transform var(--dur-3, 300ms) cubic-bezier(.2, .8, .2, 1), visibility 0s linear var(--dur-3, 300ms); }
.sheet.open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
@media (min-width: 720px) {
  .sheet { left: 50%; right: auto; width: 440px; bottom: 50%; transform: translate(-50%, 60%); opacity: 0;
    pointer-events: none; transition: transform var(--dur-2, 200ms) ease, opacity var(--dur-2, 200ms) ease; }
  .sheet.open { transform: translate(-50%, 50%); opacity: 1; pointer-events: auto; }
}

.hscroll { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scroll-padding-inline: var(--hscroll-pad, 16px);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: none; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* обложка: картинка или сгенерированная (типографическая), пропорции из данных книги */
.cover { position: relative; container-type: inline-size; aspect-ratio: var(--ratio, .6667); overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* анимации: уважаем «меньше движения» и слабые Android (класс perf-low ставит core.js по User-Agent) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
.perf-low *, .perf-low *::before, .perf-low *::after { animation: none !important; transition: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }