/* ============================================================
   DKN Hub — дизайн-токены + базовые утилиты (бэклог E2, шаг 1).

   Канон значений: oklch-блок board.html (шахматка) + _appbar.html.
   Дизайн-система утверждена владельцем: IBM Plex + один акцент
   «янтарь» oklch(0.685 0.158 52); navy — главные кнопки.

   ⚠️ Шрифты IBM Plex грузит _appbar.html (Google Fonts <link>) —
   здесь ТОЛЬКО var-объявления, БЕЗ @import (не дублировать загрузку).

   ⚠️ Никакого агрессивного глобального ресета: всё утилитарное — под
   классами (.btn/.chip/.input), не тэгами, чтобы подключение dkn.css
   не задевало немигрированные страницы.
   ============================================================ */
:root {
  /* type */
  --sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* surfaces (холодный нейтральный, hue 248) */
  --bg:          oklch(0.984 0.004 248);
  --surface:     #ffffff;
  --surface-2:   oklch(0.976 0.005 248);
  --surface-3:   oklch(0.965 0.006 248);

  /* lines */
  --line:        oklch(0.912 0.006 248);
  --line-soft:   oklch(0.945 0.005 248);
  --line-strong: oklch(0.86 0.009 248);

  /* ink-шкала (hue 256). ink-3/ink-4 пере-тиерованы под WCAG AA (a11y-эпик,
     2026-07-16): было 4.19:1 / 2.67:1 на белом — приглушённый текст (.muted,
     плейсхолдеры, meta) не читался. Теперь 5.50:1 / 5.06:1 на белом и ≥4.5:1
     даже на surface-3 (пилюли st-dismissed/p-3). Иерархия сохранена: ink-3
     темнее ink-4. Гард: tests/web/test_a11y_guard.py (oklch→sRGB→контраст). */
  --ink:   oklch(0.27 0.022 256);
  --ink-2: oklch(0.44 0.018 256);
  --ink-3: oklch(0.52 0.014 256);
  --ink-4: oklch(0.54 0.012 256);

  /* brand: акцент «янтарь» (утверждён) + navy для главных кнопок */
  --accent:      oklch(0.685 0.158 52);
  --accent-ink:  oklch(0.5 0.16 50);
  --accent-soft: oklch(0.96 0.04 62);
  --accent-line: oklch(0.84 0.1 58);
  --navy:        oklch(0.29 0.052 258);
  --navy-2:      oklch(0.36 0.05 258);

  /* семантика: ok(158) / warn(38–42) / danger(25) — триады fill/line/ink */
  --ok-fill:     oklch(0.9 0.075 158);
  --ok-line:     oklch(0.72 0.105 158);
  --ok-ink:      oklch(0.34 0.095 158);
  --warn-fill:   oklch(0.95 0.06 38);
  --warn-line:   oklch(0.82 0.13 42);
  --warn-ink:    oklch(0.52 0.16 38);
  --danger-fill: oklch(0.96 0.03 25);
  --danger-line: oklch(0.84 0.09 25);
  --danger-ink:  oklch(0.55 0.18 25);

  /* geometry */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px oklch(0.4 0.03 256 / 0.06), 0 1px 1px oklch(0.4 0.03 256 / 0.04);
  --shadow-md: 0 8px 24px -8px oklch(0.35 0.04 256 / 0.22), 0 2px 6px oklch(0.35 0.04 256 / 0.08);
  --shadow-pop: 0 18px 48px -12px oklch(0.3 0.05 256 / 0.32), 0 4px 12px oklch(0.3 0.05 256 / 0.1);
}

/* ── Кнопки ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
/* Каркас раздела «Настройки» (`.settings-page`) живёт НЕ здесь, а в
   `templates/_settings_tabs.html`. Причина: «Доступы» и «Команда» этот файл не
   подключают вовсе (вторая вообще на Tailwind), и правило до них не доезжало —
   первая попытка положить каркас сюда растянула «Доступы» на всю ширину.
   Каркас едет вместе с полосой вкладок: страница не может получить одно без
   другого. */

/* `hidden` обязан скрывать. В браузере это всего лишь `display:none` из
   таблицы стилей самого браузера, и ЛЮБОЕ авторское правило с `display` его
   перебивает — а `.btn` объявляет `inline-flex`. Итог: кнопка честно помечена
   скрытой, скрипт отработал верно, проверка `el.hidden` показывает true — и
   человек всё равно видит кнопку. Поймано глазами на «Собрать из выложенного»;
   та же болезнь была у «＋ Эпик» и жила незамеченной.
   `!important` здесь уместен: это восстановление поведения браузера, а не спор
   со стилями. Правило узкое — только .btn, без глобального ресета. */
.btn[hidden] { display: none !important; }
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn:disabled { opacity: .55; cursor: default; }

.btn.primary {
  background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600;
}
.btn.primary:hover { background: var(--navy-2); border-color: var(--navy-2); }

.btn.secondary {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink);
}
.btn.secondary:hover { border-color: var(--accent); }

.btn.danger {
  background: var(--danger-fill); border-color: var(--danger-line); color: var(--danger-ink);
}
.btn.danger:hover { border-color: var(--danger-ink); }

/* ── Чипы-статусы ───────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  color: var(--ink-2); background: var(--surface-3);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 1.5px 8px; white-space: nowrap;
}
.chip.ok     { background: var(--ok-fill);     border-color: var(--ok-line);     color: var(--ok-ink); }
.chip.warn   { background: var(--warn-fill);   border-color: var(--warn-line);   color: var(--warn-ink); }
.chip.danger { background: var(--danger-fill); border-color: var(--danger-line); color: var(--danger-ink); }
.chip.accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }

/* ── Поля формы ─────────────────────────────────────────────── */
.input, .select {
  font: inherit; font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 5px 8px;
}
.input:focus, .select:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Обёртка широких таблиц + подсказка скролла ─────────────── */
/* Горизонтальный скролл живёт у таблицы, НЕ у страницы (body со скроллом
   ломает навигацию на мобиле). Класс has-scroll ставит JS
   (DKN.scrollHints() после каждого рендера) — CSS сам overflow не видит:
   тень на правом крае = «дальше есть колонки». Канон — tickets.html,
   вынесено в ядро a11y-эпиком 2026-07-16. */
.tbl-wrap { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; }
.tbl-wrap.has-scroll::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: 18px; pointer-events: none;
  background: linear-gradient(to left, rgba(15, 23, 42, .12), transparent);
}

/* ── Тост (создаётся лениво в DKN.toast) ────────────────────── */
.dkn-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  z-index: 200; max-width: min(92vw, 480px);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: #fff; background: var(--navy);
  border-radius: var(--r); padding: 9px 16px; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.dkn-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dkn-toast.err { background: var(--danger-ink); }

/* Заглушка неудачного первого чтения страницы (DKN.loadFailed).
   Живёт внутри рабочей области, а не вместо всей страницы: меню и навигация
   обязаны остаться — иначе будничная истёкшая сессия выглядит как полная
   поломка системы и человеку некуда идти. */
.dkn-fail { padding: 40px 24px; text-align: center; color: #475569;
            font-family: "IBM Plex Sans", system-ui, sans-serif; }
.dkn-fail-t { font-size: 17px; font-weight: 650; color: #0f172a; margin-bottom: 6px; }
.dkn-fail-h { font-size: 13.5px; margin-bottom: 14px; }
.dkn-fail-btn { display: inline-block; font: inherit; font-size: 13.5px; font-weight: 600;
                padding: 7px 16px; border-radius: 8px; border: 1px solid #cbd5e1;
                background: #fff; color: #334155; cursor: pointer; text-decoration: none; }
.dkn-fail-btn:hover { border-color: #94a3b8; }
.dkn-fail-c { margin-top: 12px; font-size: 11.5px; color: #94a3b8; }