/* /app3/assets/css/tokens.css
 * Критичные глобальные стили поверх Tailwind CDN.
 * Всё что можно выразить utility-классами — в HTML, не здесь.
 */

/* Inter OpenType-features для более чистых цифр и текста */
html { font-feature-settings: "cv11", "ss01", "ss03"; }

/* Моно-цифры в таблицах/числах. В Tailwind 3 есть класс tabular-nums, но дублируем
   для читаемости в HTML модулей. */
.tabular { font-variant-numeric: tabular-nums; }

/* Минимальный кастомный скроллбар (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .12);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* Анимация подгрузки страниц */
.tab-pane { animation: fade .18s ease-out; }
@keyframes fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Индикатор активного пункта в sidebar */
.nav-link[data-active] .nav-indicator { opacity: 1; }
.nav-link[data-active] { color: var(--ink-900, #0A0B10); background: rgba(99, 102, 241, 0.06); }
.dark .nav-link[data-active] { color: #fff; background: rgba(99, 102, 241, 0.15); }

/* Контент-типографика для FAQ и руководства (help_faq, help_guide).
   Tailwind preflight обнуляет отступы тегов, а typography-плагина в CDN-сборке
   нет — возвращаем базовые стили только внутри .prose. */
.prose p { margin: 0 0 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 4px 0; }
.prose li > ul, .prose li > ol { margin: 4px 0; }
.prose b, .prose strong { font-weight: 600; color: var(--ink-900, #0A0B10); }
.dark .prose b, .dark .prose strong { color: #fff; }
.prose h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; color: var(--ink-900, #0A0B10); }
.dark .prose h3 { color: #fff; }
.prose code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}
.dark .prose code { background: rgba(99, 102, 241, 0.18); }
.prose blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid rgba(99,102,241,.4); }
.prose a { color: #4F52E0; text-decoration: underline; }
.dark .prose a { color: #A0A9FF; }
.prose img { max-width: 100%; border-radius: 10px; }

/* Скриншоты в руководстве */
.guide-shot { margin: 16px 0 20px; }
.guide-shot img {
    display: block;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}
.dark .guide-shot img { border-color: rgba(255, 255, 255, .1); }
.guide-shot figcaption { margin-top: 6px; font-size: 12px; color: #7E8191; text-align: center; }

/* Toast-анимация вход/выход (используется в app.js) */
.toast-enter { opacity: 0; transform: translateY(8px); }
.toast-enter-active { opacity: 1; transform: translateY(0); transition: opacity .22s ease-out, transform .22s ease-out; }
.toast-leave { opacity: 1; transform: translateY(0); }
.toast-leave-active { opacity: 0; transform: translateY(-8px); transition: opacity .18s ease-in, transform .18s ease-in; }