/* «Цех» — общий стиль линейки по брендбуку 1.0 (09.10.2026): Комплект (закупки), Деталь (CAD), Обработка (CAM), Подряд, Цех ID.
   Файл одинаковый во всех репозиториях; источник — tender/apps/web/src/tseh.css (описание — tender/docs/TSEH.md).
   Копии: zakupki/static/tseh.css, cadcam/public/tseh.css, ID/public/tseh.css. Правите — копируйте во все.
   ЗНАЧЕНИЙ ЗДЕСЬ НЕТ: цвета, отступы, размеры, скругления, шрифт, тени — токены --t-* из /tseh/tokens.css (собирается из
   packages/tseh-ui/tokens/tokens.json, руками не править). tokens.css подключается раньше этого файла; без него стиль не работает.
   Файлы бренда (шрифт, значки, логотипы) — папка /tseh/ рядом (tender/apps/web/public/tseh, cadcam/public/tseh, zakupki/static/tseh).
   Продукт страницы — data-app на <html>: "zakupki" (Комплект) | "cad" (Деталь) | "cam" (Обработка) | "tender" (Подряд).
   Тема — data-theme="light" | "dark" на <html>; класс t-dark-auto без data-theme — по prefers-color-scheme («Авто»).
   Темы Vibe «Цех · 4 продукта» (tender/docs/brand/vibe): кнопки — в фирменном цвете продукта (--t-accent) по решению владельца,
   текст на кнопке (--t-accent-ink) — по контрасту: тёмный на оранжевом Комплекта и лаймовом Подряда, белый на синем и фиолетовом.
   Текстовые ссылки и активные пункты — --t-link (читаемый оттенок). Тени не используем. Статусы — свои цвета и всегда с подписью.
   Числа, оставшиеся ниже, — геометрия знаков и точек (24, 32, 7 px…), ширины меню и точки перелома; ритм — только токенами. */
@font-face {
  font-family: 'Golos Text';
  src: url('/tseh/GolosText-Variable.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* логотип в тёмной теме — вариант -inverse (селекторы темы — как в tokens.css) */
@media (prefers-color-scheme: dark) {
  :root.t-dark-auto:not([data-theme="light"]) .t-logo .t-l-light { display: none; }
  :root.t-dark-auto:not([data-theme="light"]) .t-logo .t-l-dark { display: block; }
}
:root[data-theme="dark"] .t-logo .t-l-light { display: none; }
:root[data-theme="dark"] .t-logo .t-l-dark { display: block; }

.t-num { font-variant-numeric: tabular-nums; }

/* ---------- логотип продукта (SVG из комплекта; буквы не набираем) ---------- */
.t-logo { display: inline-flex; align-items: center; flex: none; line-height: 0; text-decoration: none; }
.t-logo img { height: var(--t-logo); width: auto; display: block; }   /* минимум по брендбуку — плитка 32 px */
.t-logo .t-l-dark { display: none; }
.t-ico { width: 24px; height: 24px; flex: none; display: block; border-radius: 5px; }   /* малый значок продукта: 24–32 px в навигации */

/* ---------- переключатель продуктов (в шапке) ---------- */
.t-apps { position: relative; font-family: var(--t-font); }
.t-apps > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--t-space-1-5); padding: var(--t-space-1) var(--t-space-1-5) var(--t-space-1) var(--t-space-1); border-radius: var(--t-r-sm); }
.t-apps > summary::-webkit-details-marker { display: none; }
.t-apps > summary:hover, .t-apps[open] > summary { background: var(--t-surface-2); }
.t-apps > summary:focus-visible { outline: var(--t-focus-w) solid var(--t-focus-color); outline-offset: var(--t-focus-offset); }
.t-apps .t-chev { width: var(--t-ico-sm); height: var(--t-ico-sm); color: var(--t-ink-3); flex: none; transition: transform var(--t-dur); }
.t-apps[open] .t-chev { transform: rotate(180deg); }
.t-apps-menu { position: absolute; z-index: 1000; top: calc(100% + var(--t-space-1-5)); left: 0; width: 300px; max-width: calc(100vw - 24px); background: var(--t-surface); color: var(--t-ink); border: var(--t-border-w) solid var(--t-line); border-radius: var(--t-r-sm); box-shadow: var(--t-shadow-pop); padding: var(--t-space-2); }
.t-apps-menu .t-apps-h { display: flex; align-items: center; gap: var(--t-space-2); padding: var(--t-space-1-5) var(--t-space-2-5) var(--t-space-2); font-size: var(--t-fs-xs); color: var(--t-ink-3); }
.t-apps-menu .t-apps-h img { height: 18px; width: auto; }
.t-apps-menu a { display: grid; grid-template-columns: 32px 1fr; column-gap: var(--t-space-3); align-items: center; padding: var(--t-space-2) var(--t-space-2-5); border-radius: var(--t-r-sm); color: var(--t-ink); text-decoration: none; }
.t-apps-menu a:hover { background: var(--t-surface-2); }
.t-apps-menu a img { width: 32px; height: 32px; grid-row: span 2; border-radius: 7px; }
.t-apps-menu a b { font-weight: var(--t-fw-semibold); font-size: var(--t-fs-ui); line-height: var(--t-lh-sm); }
.t-apps-menu a span { grid-column: 2; font-size: var(--t-fs-xs); line-height: var(--t-lh-xs); color: var(--t-ink-2); }
.t-apps-menu a[aria-current="true"] { background: var(--t-accent-soft); }
.t-apps-menu a.off { opacity: var(--t-op-disabled); }
.t-apps-menu .t-apps-f { border-top: var(--t-border-w) solid var(--t-line-2); margin-top: var(--t-space-1-5); padding: var(--t-space-2-5) var(--t-space-2-5) var(--t-space-1); font-size: var(--t-fs-xs); color: var(--t-ink-3); }

/* ---------- экран входа (одинаковый во всех продуктах) ---------- */
.t-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--t-space-6) var(--t-space-4); background: var(--t-bg); color: var(--t-ink); font: var(--t-fs-body)/var(--t-lh-body) var(--t-font); box-sizing: border-box; }
.t-login *, .t-login *::before, .t-login *::after { box-sizing: border-box; }
.t-login-card { width: min(408px, 100%); background: var(--t-surface); border: var(--t-border-w) solid var(--t-line-2); border-radius: var(--t-r); padding: var(--t-space-8) var(--t-space-8) var(--t-space-7); box-shadow: var(--t-shadow); display: flex; flex-direction: column; gap: var(--t-space-4); }
.t-login-card > .t-logo { margin-bottom: var(--t-space-2); }
.t-login-card > .t-logo img { height: var(--t-logo-lg); }
.t-login-card h1 { font: var(--t-fw-bold) var(--t-fs-h2)/var(--t-lh-h2) var(--t-font); margin: 0; letter-spacing: var(--t-ls-tight); }
.t-login-card p { margin: 0; color: var(--t-ink-2); font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); }
.t-login-card .t-hint { font-size: var(--t-fs-xs); line-height: var(--t-lh-xs); color: var(--t-ink-3); }
.t-login-card .t-hint a { color: var(--t-link); }
.t-field { display: flex; flex-direction: column; gap: var(--t-space-1-5); font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); font-weight: var(--t-fw-medium); color: var(--t-ink-2); }
.t-input { width: 100%; min-height: var(--t-ctl); font: var(--t-fs-body) var(--t-font); color: var(--t-ink); background: var(--t-surface); border: var(--t-border-w) solid var(--t-line); border-radius: var(--t-r-sm); padding: var(--t-input-py) var(--t-input-px); }
.t-input:focus { outline: var(--t-focus-w) solid var(--t-focus-color-in); outline-offset: var(--t-focus-offset-in); border-color: transparent; }
.t-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--t-space-2-5); min-height: var(--t-btn-md-h); padding: var(--t-input-py) var(--t-btn-md-px); border-radius: var(--t-btn-md-r); border: var(--t-btn-secondary-bw) solid var(--t-btn-secondary-line); background: var(--t-btn-secondary-bg); color: var(--t-btn-secondary-ink); font: var(--t-btn-fw) var(--t-btn-md-fs) var(--t-font); cursor: pointer; text-decoration: none; width: 100%; }
.t-btn:hover { background: var(--t-btn-secondary-hover); }
.t-btn:disabled { opacity: var(--t-op-disabled); cursor: default; }
.t-btn:focus-visible { outline: var(--t-focus-w) solid var(--t-focus-color); outline-offset: var(--t-focus-offset); }
.t-btn svg { width: var(--t-btn-md-ico); height: var(--t-btn-md-ico); flex: none; }
.t-btn-primary, .t-btn-sso { background: var(--t-btn-primary-bg); border-color: var(--t-btn-primary-bg); color: var(--t-btn-primary-ink); }
.t-btn-primary:hover, .t-btn-sso:hover { background: var(--t-btn-primary-hover); border-color: var(--t-btn-primary-hover); }
.t-btn-ghost { border-color: transparent; background: transparent; color: var(--t-btn-ghost-ink); font-size: var(--t-fs-sm); }
.t-btn .t-ico { width: var(--t-btn-md-ico); height: var(--t-btn-md-ico); }
.t-or { display: flex; align-items: center; gap: var(--t-space-2-5); font-size: var(--t-fs-xs); color: var(--t-ink-3); }
.t-or::before, .t-or::after { content: ''; flex: 1; height: var(--t-border-w); background: var(--t-line-2); }
.t-err { background: var(--t-danger-soft); color: var(--t-danger); border-radius: var(--t-r-sm); padding: var(--t-space-2-5) var(--t-space-3-5); font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); }
.t-err::before { content: '× '; font-weight: var(--t-fw-bold); }
.t-note { background: var(--t-surface-2); color: var(--t-ink-2); border-radius: var(--t-r-sm); padding: var(--t-space-2-5) var(--t-space-3-5); font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); }
.t-login-card form { display: flex; flex-direction: column; gap: var(--t-space-3-5); margin: 0; }
.t-login-card details > summary { list-style: none; cursor: pointer; text-align: center; font-size: var(--t-fs-sm); color: var(--t-ink-2); padding: var(--t-space-2); border-radius: var(--t-r-sm); }
.t-login-card details > summary::-webkit-details-marker { display: none; }
.t-login-card details > summary:hover { background: var(--t-surface-2); }
.t-login-card details[open] > summary { margin-bottom: var(--t-space-3); }
.t-login-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--t-space-3); margin-top: var(--t-space-1); padding-top: var(--t-space-4); border-top: var(--t-border-w) solid var(--t-line-2); font-size: var(--t-fs-xs); color: var(--t-ink-3); }
.t-login-foot img { height: 16px; width: auto; }

/* ---------- общая шапка Цеха (макет 10.10.2026, по мотивам Modal) ----------
   Строка 1 (--t-hd-h1 = 56 px, телефон --t-hd-h1-m = 52): значок продукта, крошки «Продукт ▾ / контекст», поиск ⌘K, индикатор, уведомления, настройки, аватар.
   Строка 2 (--t-hd-h2 = 44 px): разделы продукта; активный — текст --t-ink и полоска --t-tab-line цветом продукта. На телефоне — прокрутка без полосы.
   Кнопки внутри .t-hd/.t-pop/.t-cmdk ожидают сброса стилей кнопок продукта (в Подряде — styles.css, :where(.t-hd, …) button). */
.t-hd { position: sticky; top: 0; z-index: 20; background: var(--t-bar); border-bottom: var(--t-border-w) solid var(--t-line-2); font-family: var(--t-font); color: var(--t-ink); padding-top: env(safe-area-inset-top, 0px); }
.t-hd svg.t-i, .t-pop svg.t-i, .t-cmdk svg.t-i { width: var(--t-ico); height: var(--t-ico); flex: none; }
.t-hd-r1 { display: flex; align-items: center; gap: var(--t-space-1); height: var(--t-hd-h1); padding: 0 var(--t-hd-px); }
.t-hd-mark { width: var(--t-hd-mark); height: var(--t-hd-mark); border-radius: var(--t-r-mark); display: block; margin-right: var(--t-space-2-5); flex: none; }
.t-hd-crumb { display: inline-flex; align-items: center; gap: var(--t-space-1-5); height: var(--t-ctl-hd); padding: 0 var(--t-space-2-5); border-radius: var(--t-r-item); font-weight: var(--t-fw-medium); font-size: var(--t-fs-body); line-height: var(--t-lh-ui); white-space: nowrap; min-width: 0; color: var(--t-ink); text-decoration: none; }
button.t-hd-crumb:hover, .t-hd-crumb[aria-expanded="true"], a.t-hd-crumb:hover { background: var(--t-hover); text-decoration: none; }
.t-hd-crumb .t-chev { width: var(--t-ico-sm); height: var(--t-ico-sm); color: var(--t-ink-3); flex: none; }
.t-hd-crumb .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.t-hd-crumb.prod { flex: none; }
.t-hd-crumb.ctx { flex: 0 1 auto; }
.t-hd-crumb .muted { color: var(--t-ink-3); font-weight: var(--t-fw-regular); }
.t-hd-sep { color: var(--t-ink-3); font-size: 20px; font-weight: 300; padding: 0 var(--t-space-0-5); }
.t-hd-role { font-size: var(--t-fs-xs); line-height: var(--t-lh-sm); padding: 0 var(--t-space-2); border-radius: var(--t-r-pill); background: color-mix(in srgb, var(--t-accent) var(--t-role-mix), transparent); color: var(--t-acc-link); font-weight: var(--t-fw-medium); }
.t-hd-sp { flex: 1; min-width: var(--t-space-2); }
.t-hd-act { display: inline-flex; align-items: center; gap: var(--t-space-2); height: var(--t-ctl-hd); padding: 0 var(--t-space-2-5); border-radius: var(--t-r-item); color: var(--t-ink-2); white-space: nowrap; font-size: var(--t-fs-ui); }
.t-hd-act:hover, .t-hd-act[aria-expanded="true"] { background: var(--t-hover); color: var(--t-ink); }
.t-kbd { font-family: var(--t-font); font-size: var(--t-fs-xs); line-height: var(--t-lh-sm); padding: 0 var(--t-space-1-5); border-radius: var(--t-r-2xs); background: var(--t-chip); color: var(--t-ink-2); }
.t-cnt { font-size: var(--t-fs-xs); line-height: var(--t-lh-sm); min-width: 22px; text-align: center; padding: 0 7px; border-radius: var(--t-r-pill); background: var(--t-chip); color: var(--t-ink); font-variant-numeric: tabular-nums; }
.t-cnt.bad { background: var(--t-danger-soft); color: var(--t-danger); }
.t-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-ink-3); flex: none; }
.t-dot.live { background: var(--t-live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-live) 25%, transparent); }
.t-dot.hot { background: var(--t-hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-hot) 25%, transparent); }
.t-hd-ib { position: relative; width: var(--t-ctl-hd); height: var(--t-ctl-hd); display: grid; place-items: center; border-radius: var(--t-r-item); color: var(--t-ink-2); flex: none; }
.t-hd-ib:hover, .t-hd-ib[aria-expanded="true"] { background: var(--t-hover); color: var(--t-ink); }
.t-hd-ib .t-badge-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--t-danger); border: 2px solid var(--t-bar); box-sizing: content-box; }
.t-ava { flex: none; width: var(--t-ava); height: var(--t-ava); border-radius: 50%; display: grid; place-items: center; font-weight: var(--t-fw-semibold); font-size: var(--t-fs-sm); color: #fff; background: var(--t-ava-bg); margin-left: var(--t-space-1-5); }
.t-ava.lg { width: var(--t-ava-lg); height: var(--t-ava-lg); font-size: var(--t-fs-h4); margin: 0; }
.t-hd-r2 { display: flex; gap: var(--t-space-1); padding: 0 var(--t-hd-px); overflow-x: auto; scrollbar-width: none; }
.t-hd-r2::-webkit-scrollbar { display: none; }
.t-hd-tab { text-decoration: none; position: relative; height: var(--t-hd-h2); padding: 0 var(--t-tab-px); color: var(--t-ink-2); font-weight: var(--t-fw-medium); font-size: var(--t-fs-ui); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--t-space-1-5); flex: none; }
.t-hd-tab:hover { color: var(--t-ink); text-decoration: none; }
.t-hd-tab[aria-current="page"] { color: var(--t-ink); }
.t-hd-tab[aria-current="page"]::after { content: ""; position: absolute; left: var(--t-tab-px); right: var(--t-tab-px); bottom: calc(-1 * var(--t-border-w)); height: var(--t-tab-line); border-radius: var(--t-tab-line); background: var(--t-accent); }

/* выпадающие меню шапки */
.t-pop { position: absolute; z-index: 56; min-width: 280px; max-width: calc(100vw - 16px); background: var(--t-surface); color: var(--t-ink); border: var(--t-border-w) solid var(--t-line); border-radius: var(--t-r-pop); box-shadow: var(--t-shadow-pop); padding: var(--t-pop-pad); font: var(--t-fs-ui)/var(--t-lh-ui) var(--t-font); box-sizing: border-box; }
.t-pop hr { border: 0; border-top: var(--t-border-w) solid var(--t-line-2); margin: var(--t-pop-pad) calc(-1 * var(--t-pop-pad)); }
.t-pop-h { font-size: var(--t-fs-xs); line-height: var(--t-lh-xs); letter-spacing: var(--t-ls-caps); text-transform: uppercase; color: var(--t-ink-3); padding: var(--t-space-2) var(--t-space-2-5) var(--t-space-1-5); font-weight: var(--t-fw-semibold); }
.t-mi { display: flex; align-items: center; gap: var(--t-mi-gap); width: 100%; padding: var(--t-mi-py) var(--t-mi-px); border-radius: var(--t-r-item); text-align: left; color: var(--t-ink); text-decoration: none; font-size: var(--t-fs-ui); line-height: var(--t-lh-ui); box-sizing: border-box; }
.t-mi:hover, .t-mi.sel { background: var(--t-hover); text-decoration: none; }
.t-mi > .t-i { color: var(--t-ink-2); }
.t-mi .r { margin-left: auto; display: inline-flex; align-items: center; gap: var(--t-space-1-5); color: var(--t-ink-3); font-size: var(--t-fs-caption); white-space: nowrap; }
.t-mi b { font-weight: var(--t-fw-semibold); }
.t-mi small { display: block; color: var(--t-ink-3); font-size: var(--t-fs-caption); line-height: var(--t-lh-caption); }
.t-mi img { width: 32px; height: 32px; border-radius: var(--t-r-mark); flex: none; }
.t-mi.cur { background: var(--t-hover); }
.t-mi.off { opacity: .55; cursor: default; }
.t-mi.off:hover { background: none; }
.t-mi .t-mi-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t-chk { color: var(--t-acc-link); }
.t-who { display: flex; gap: var(--t-space-3-5); align-items: center; padding: var(--t-space-2-5) var(--t-space-2-5) var(--t-space-3); }
.t-who b { display: block; font-weight: var(--t-fw-semibold); }
.t-who > div > span { color: var(--t-ink-2); font-size: var(--t-fs-sm); }
.t-tg { font-size: var(--t-fs-xs); line-height: var(--t-lh-sm); padding: 0 var(--t-space-2); border-radius: var(--t-r-pill); background: var(--t-chip); color: var(--t-ink-2); }
.t-tg.on { background: var(--t-ok-soft); color: var(--t-ok); }
.t-seg { display: flex; gap: var(--t-space-1); padding: var(--t-space-1); margin: var(--t-space-0-5) var(--t-space-1) var(--t-space-1-5); background: var(--t-surface-2); border-radius: var(--t-r-item); }
.t-seg button { flex: 1; height: var(--t-ctl-sm); border-radius: var(--t-r-xs); color: var(--t-ink-2); font-size: var(--t-fs-sm); display: inline-flex; align-items: center; justify-content: center; }
.t-seg button[aria-pressed="true"] { background: var(--t-surface); color: var(--t-ink); box-shadow: 0 0 0 var(--t-border-w) var(--t-line); }
.t-srch { display: flex; align-items: center; gap: var(--t-space-2); margin: var(--t-space-1) var(--t-space-1) var(--t-space-1-5); padding: 0 var(--t-space-2-5); height: 38px; border: var(--t-border-w) solid var(--t-line); border-radius: var(--t-r-item); color: var(--t-ink-3); }
.t-srch:focus-within { border-color: var(--t-focus-color-in); }
.t-srch input { border: 0; outline: 0 !important; background: none; color: var(--t-ink); font: inherit; flex: 1; min-width: 0; padding: 0; height: 100%; }
.t-notif { padding: var(--t-space-2-5); border-radius: var(--t-r-item); display: flex; gap: var(--t-space-2-5); color: var(--t-ink); text-decoration: none; }
.t-notif:hover { background: var(--t-hover); text-decoration: none; }
.t-notif p { margin: 0; font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); }
.t-notif small { color: var(--t-ink-3); font-size: var(--t-fs-xs); }
.t-notif .nd { width: 8px; height: 8px; border-radius: 50%; background: var(--t-accent); margin-top: var(--t-space-1-5); flex: none; }
.t-notif .nd.read { background: transparent; }
.t-pop-empty { padding: var(--t-space-2-5); color: var(--t-ink-3); font-size: var(--t-fs-sm); }

/* поиск ⌘K */
.t-cmdk-wrap { position: fixed; inset: 0; z-index: 60; background: var(--t-overlay); display: grid; place-items: start center; padding: 12vh var(--t-space-4) var(--t-space-4); }
.t-cmdk { width: min(620px, 100%); background: var(--t-surface); color: var(--t-ink); border: var(--t-border-w) solid var(--t-line); border-radius: var(--t-r-dialog); box-shadow: var(--t-shadow-pop); overflow: hidden; font: var(--t-fs-ui)/var(--t-lh-ui) var(--t-font); }
.t-cmdk .t-srch { margin: 0; border: 0; border-bottom: var(--t-border-w) solid var(--t-line-2); border-radius: 0; height: var(--t-ctl-lg); padding: 0 var(--t-space-4); }
.t-cmdk-list { padding: var(--t-pop-pad); max-height: 50vh; overflow: auto; }
.t-cmdk-list .t-pop-h { padding-top: var(--t-space-2-5); }

/* статусы — «таблетки» со значком и подписью */
.t-st { display: inline-flex; align-items: center; gap: var(--t-space-1-5); font-size: var(--t-fs-caption); line-height: var(--t-st-h); padding: 0 var(--t-space-2-5) 0 var(--t-space-2); border-radius: var(--t-r-pill); font-weight: var(--t-fw-medium); white-space: nowrap; background: var(--t-chip); color: var(--t-ink-2); }
.t-st svg { width: 15px; height: 15px; flex: none; }
.t-st.ok { background: var(--t-ok-soft); color: var(--t-ok); }
.t-st.warn { background: var(--t-warn-soft); color: var(--t-warn); }
.t-st.bad { background: var(--t-danger-soft); color: var(--t-danger); }
.t-st.info { background: var(--t-info-soft); color: var(--t-info); }

@media (max-width: 760px) {
  .t-hd-r1 { padding: 0 var(--t-space-2) 0 var(--t-space-3); height: var(--t-hd-h1-m); }
  .t-hd-mark { margin-right: var(--t-space-1); width: var(--t-hd-mark-m); height: var(--t-hd-mark-m); }
  .t-hide-m { display: none !important; }
  .t-hd-crumb { padding: 0 var(--t-space-1-5); font-size: var(--t-fs-ui); }
  .t-hd-crumb.ctx .t { max-width: 34vw; }
  .t-hd-r2 { padding: 0 var(--t-space-1-5); }
  .t-pop { left: var(--t-space-2) !important; right: var(--t-space-2) !important; min-width: 0; width: auto !important; }
}
@media (min-width: 761px) { .t-show-m { display: none !important; } }
@media (prefers-reduced-motion: no-preference) { .t-pop, .t-cmdk { animation: t-pin var(--t-dur-pop) var(--t-ease); } }
@keyframes t-pin { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Выпадающий список (select): без системного меню ОС ----------
   Chromium 135+ (Chrome, Edge, Яндекс Браузер, Opera) — appearance: base-select: раскрытый список рисуется стилем Цеха
   (поверхность, линия, тень меню, скругление, галочка у выбранного), стрелка — шеврон цвета текста. Safari и Firefox
   так пока не умеют — у них остаётся системный список. Рамку, отступы и ширину поля задаёт продукт. Поле в одну строку
   и не уже выбранного пункта (но не шире контейнера): иначе длинный текст выталкивает стрелку — многоточие у base-select
   не работает. Список с выбором нескольких (multiple, size) и поля с appearance: none в продукте не трогаем. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]) { appearance: base-select; align-items: center; gap: var(--t-space-1-5); white-space: nowrap; cursor: pointer;
    min-inline-size: calc-size(max-content, min(size, 100%)); }
  select:not([multiple]):not([size]):disabled { cursor: default; }
  select:not([multiple]):not([size])::picker-icon { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; opacity: .6; transition: rotate var(--t-dur);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
  select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select; margin-block: var(--t-space-1); padding: var(--t-space-1); min-inline-size: anchor-size(inline); max-inline-size: min(480px, calc(100vw - 16px)); max-block-size: min(360px, 60vh); overflow-y: auto;
    background: var(--t-surface); color: var(--t-ink); border: var(--t-border-w) solid var(--t-line); border-radius: var(--t-r-sm); box-shadow: var(--t-shadow-pop);
  }
  select:not([multiple]):not([size]) option { white-space: normal; min-block-size: 0; padding: 7px var(--t-space-2-5); line-height: 1.3; gap: var(--t-space-2); border-radius: var(--t-r-xs); color: var(--t-ink); background: transparent; }
  select:not([multiple]):not([size]) option:hover, select:not([multiple]):not([size]) option:focus-visible { background: var(--t-surface-2); outline: none; }
  select:not([multiple]):not([size]) option:checked { font-weight: var(--t-fw-semibold); }
  select:not([multiple]):not([size]) option:disabled { color: var(--t-ink-3); background: transparent; cursor: default; }
  select:not([multiple]):not([size]) option::checkmark { order: 1; margin-inline-start: auto; color: var(--t-link); }
  select:not([multiple]):not([size]) optgroup { font-weight: var(--t-fw-semibold); color: var(--t-ink-3); padding-block-start: var(--t-space-1); }
  select:not([multiple]):not([size]) optgroup option { font-weight: var(--t-fw-regular); color: var(--t-ink); }
  select:not([multiple]):not([size]) optgroup option:checked { font-weight: var(--t-fw-semibold); }
}

/* Запасной вид для браузеров без base-select (Safari, Firefox, Chromium до 135): вместо системного поля macOS/Windows с
   градиентом и стрелками «вверх-вниз» — плоское поле Цеха с шевроном. Раскрытый список остаётся системным.
   Рамка, скругление и цвет — с нулевой специфичностью (:where): продукт переопределяет их своими правилами. */
@supports not (appearance: base-select) {
  :where(select:not([multiple]):not([size])) { border: var(--t-border-w, 1px) solid var(--t-line); border-radius: var(--t-r-sm); background-color: var(--t-surface); color: var(--t-ink); }
  select:not([multiple]):not([size]) { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 30px; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 10px; }
  select:not([multiple]):not([size]):disabled { cursor: default; opacity: .6; }
}

/* Навигация Цеха (макет «Навигация Цеха», 11.10.2026; основа — бэклог #21). Три паттерна:
   1) боковая панель .t-sb — разделы продукта группами (.t-sb-g, подпись .t-sb-gl), вложенные пункты (.t-sb-kids), счётчики, «Ещё» и
      «Настроить меню» (окно .t-dlg со строками .t-cz), поиск ⌘K, внизу индикатор продукта (.t-sb-card) и учётная запись; свёртка в значки —
      data-min (помнит localStorage tseh.sb = min|max, клавиша «[»); на телефоне (до 760 px) — выезжает слева (data-open) поверх затемнения .t-sb-scrim;
   2) второй уровень .t-sb2 — колонка рядом у разделов со сложной структурой (на телефоне — чипы .t-chip в .t-sb2-chips под нав-баром);
   3) нав-бар страницы .t-nb — «раздел / выбранное / контекст ▾ · ⋯», действия справа, ниже при необходимости вкладки .t-nb-tabs;
   и дровер .t-dr — карточка справа поверх содержимого, ширина тянется за левый край .t-dr-grip (помнит localStorage tseh.drawer.w).
   Меню панели — .t-pop / .t-mi / .t-seg (z-index выше панели и дровера); в свёрнутой панели открываются сбоку от кнопки, меню аккаунта — вверх.
   Занятое слева место — --sb-w на <html>: панель ставит <html data-sb="max|min">, отсюда --t-sb-w / --t-sb-w-min, на телефоне 0.
   Кнопки внутри сброшены через :where() (специфичность 0) — классы пунктов их всегда перебивают. Разметка-эталон — компоненты @tseh/ui
   (Sidebar, SubNav, SubNavChips, NavBar, Drawer, NavCustomize; tender/packages/tseh-ui). */
:root[data-sb] { --sb-w: var(--t-sb-w); }
:root[data-sb="min"] { --sb-w: var(--t-sb-w-min); }
@media (max-width: 760px) { :root[data-sb] { --sb-w: 0px; } }
:where(.t-sb, .t-sb2, .t-nb, .t-dr, .t-dlg) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(.t-sb, .t-sb2, .t-nb, .t-dr, .t-dlg) a { text-decoration: none; }
.t-sb *, .t-sb2 *, .t-nb *, .t-dr *, .t-dlg * { box-sizing: border-box; }
.t-sb svg.t-i, .t-sb2 svg.t-i, .t-nb svg.t-i, .t-dr svg.t-i, .t-dlg svg.t-i { width: var(--t-ico-sm); height: var(--t-ico-sm); flex: none; }
/* фокус — рамкой внутрь (не обрезается прокруткой панели); специфичность 0,4,0 (:focus-visible дважды) — общий фокус продукта
   (у Vibe — 0,3,0, бандл грузится после tseh.css) его не перебивает */
:is(.t-sb, .t-sb2, .t-nb, .t-dr, .t-dlg) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible:focus-visible { outline: var(--t-focus-w) solid var(--t-focus-color-in); outline-offset: var(--t-focus-offset-in); }
.t-sb { position: fixed; z-index: 47; left: 0; top: 0; bottom: 0; width: var(--t-sb-w); display: flex; flex-direction: column; background: var(--t-bar); border-right: var(--t-border-w) solid var(--t-line-2); font-family: var(--t-font); font-size: var(--t-fs-ui); line-height: var(--t-lh-ui); color: var(--t-ink); box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); transition: width var(--t-dur) var(--t-ease); }
.t-sb:focus { outline: 0; }
.t-sb-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--t-hd-h1); padding: 0 var(--t-space-2) 0 var(--t-space-4); }
.t-sb-wm { display: block; height: var(--t-ico-lg); width: auto; color: var(--t-ink); }
.t-sb-ib { position: relative; flex: none; width: var(--t-ctl-sm); height: var(--t-ctl-sm); display: inline-grid; place-items: center; border-radius: var(--t-r-xs); color: var(--t-ink-2); }
.t-sb-ib:hover, .t-sb-ib[aria-expanded="true"] { background: var(--t-hover); color: var(--t-ink); }
.t-sb-ib .t-sb-dot { position: absolute; top: var(--t-space-1-5); right: var(--t-space-1-5); width: var(--t-space-2); height: var(--t-space-2); border-radius: 50%; background: var(--t-danger); box-shadow: 0 0 0 var(--t-focus-w) var(--t-bar); }
.t-sb-pad { flex: none; display: flex; flex-direction: column; gap: var(--t-space-1); padding: 0 var(--t-space-2); }
.t-sb-prod { display: flex; align-items: center; gap: var(--t-space-3); width: 100%; min-width: 0; height: var(--t-ctl-lg); padding: 0 var(--t-space-2); border-radius: var(--t-r-sm); text-align: left; }
.t-sb-prod:hover, .t-sb-prod[aria-expanded="true"] { background: var(--t-hover); }
.t-sb-prod img { width: var(--t-ico-lg); height: var(--t-ico-lg); border-radius: var(--t-r-xs); display: block; flex: none; }
.t-sb-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-sb-pt b { font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); font-weight: var(--t-fw-semibold); }
.t-sb-pt small { font-size: var(--t-fs-xs); line-height: var(--t-lh-xs); color: var(--t-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sb-prod .t-chev { flex: none; color: var(--t-ink-3); }
.t-sb-search { display: flex; align-items: center; gap: var(--t-space-2-5); width: 100%; height: var(--t-ctl-hd); margin-top: var(--t-space-1); padding: 0 var(--t-space-2) 0 var(--t-space-3); border: var(--t-border-w) solid var(--t-line-2); border-radius: var(--t-r-sm); background: var(--t-surface); color: var(--t-ink-3); text-align: left; }
.t-sb-search:hover { border-color: var(--t-line); color: var(--t-ink-2); }
.t-sb-search > span { flex: 1; }
.t-sb-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--t-space-2) var(--t-space-2) var(--t-space-4); scrollbar-width: thin; }
.t-sb-g + .t-sb-g { margin-top: var(--t-space-4); }
.t-sb-gl { display: flex; align-items: center; height: var(--t-ctl-xs); padding: 0 var(--t-space-2-5); font-size: var(--t-fs-xs); font-weight: var(--t-fw-medium); letter-spacing: var(--t-ls-caps); text-transform: uppercase; color: var(--t-ink-3); }
.t-sb-item { position: relative; display: flex; align-items: center; gap: var(--t-space-3); width: 100%; height: var(--t-ctl-hd); padding: 0 var(--t-space-2-5); border-radius: var(--t-r-xs); color: var(--t-ink-2); font-weight: var(--t-fw-regular); text-align: left; white-space: nowrap; text-decoration: none; }
.t-sb-item:hover { background: var(--t-hover); color: var(--t-ink); text-decoration: none; }
.t-sb-item[aria-current="page"] { background: var(--t-accent-soft); color: var(--t-ink); font-weight: var(--t-fw-medium); }
.t-sb-item[aria-current="page"] > svg.t-i { color: var(--t-acc-link); }
.t-sb-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t-sb-cnt { flex: none; min-width: var(--t-st-h-sm); height: var(--t-st-h-sm); padding: 0 var(--t-space-2); border-radius: var(--t-r-pill); background: var(--t-chip); color: var(--t-ink-2); font-size: var(--t-fs-xs); line-height: var(--t-st-h-sm); font-weight: var(--t-fw-medium); text-align: center; font-variant-numeric: tabular-nums; }
.t-sb-item[aria-current="page"] .t-sb-cnt { background: color-mix(in srgb, var(--t-accent) 26%, transparent); color: var(--t-ink); }
.t-sb-cnt.bad { background: var(--t-danger-soft); color: var(--t-danger); }
.t-sb-tag { flex: none; height: var(--t-st-h-sm); padding: 0 var(--t-space-2); border-radius: var(--t-r-2xs); background: var(--t-info-soft); color: var(--t-info); font-size: var(--t-fs-xs); line-height: var(--t-st-h-sm); font-weight: var(--t-fw-medium); }
.t-sb-ch { flex: none; display: inline-grid; color: var(--t-ink-3); transition: transform var(--t-dur) var(--t-ease); }
.t-sb-item[aria-expanded="false"] .t-sb-ch { transform: rotate(-90deg); }
.t-sb-kids { display: flex; flex-direction: column; gap: var(--t-border-w); margin: var(--t-space-0-5) 0 var(--t-space-0-5) calc(var(--t-space-2-5) + var(--t-ico-sm) / 2); padding-left: var(--t-space-3); border-left: var(--t-border-w) solid var(--t-line); }
.t-sb-kids .t-sb-item { height: var(--t-ctl-sm); font-size: var(--t-fs-sm); }
.t-sb-more { color: var(--t-ink-3); }
.t-sb-foot { flex: none; display: flex; flex-direction: column; gap: var(--t-space-2); padding: var(--t-space-2); border-top: var(--t-border-w) solid var(--t-line-2); }
.t-sb-card { display: flex; flex-direction: column; gap: var(--t-space-2); padding: var(--t-space-3); border-radius: var(--t-r-sm); background: var(--t-surface-2); }
.t-sb-cap { display: flex; align-items: center; gap: var(--t-space-2); font-size: var(--t-fs-xs); font-weight: var(--t-fw-medium); letter-spacing: var(--t-ls-caps); text-transform: uppercase; color: var(--t-ink-3); }
.t-sb-live { width: var(--t-space-2); height: var(--t-space-2); border-radius: 50%; background: var(--t-ok); box-shadow: 0 0 0 var(--t-space-1) color-mix(in srgb, var(--t-ok) 22%, transparent); }
.t-sb-live.bad { background: var(--t-danger); box-shadow: 0 0 0 var(--t-space-1) color-mix(in srgb, var(--t-danger) 22%, transparent); }
.t-sb-val { font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); font-weight: var(--t-fw-semibold); }
.t-sb-cbtn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: var(--t-btn-sm-h); border: var(--t-border-w) solid var(--t-line); border-radius: var(--t-btn-sm-r); background: var(--t-surface); color: var(--t-ink); font-size: var(--t-btn-sm-fs); font-weight: var(--t-btn-fw); text-decoration: none; }
.t-sb-cbtn:hover { background: var(--t-hover); text-decoration: none; }
.t-sb-me { display: flex; align-items: center; gap: var(--t-space-2); min-width: 0; }
.t-sb-ava { flex: none; width: var(--t-ctl-sm); height: var(--t-ctl-sm); border-radius: 50%; display: grid; place-items: center; background: var(--t-ava-bg); color: #fff; font-size: var(--t-fs-sm); font-weight: var(--t-fw-semibold); line-height: 1; }
.t-sb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; text-align: left; }   /* stretch — иначе сброс кнопок продукта (align-items: center) центрирует имя и ломает многоточие */
.t-sb-who b { font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); font-weight: var(--t-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sb-who small { font-size: var(--t-fs-xs); line-height: var(--t-lh-xs); color: var(--t-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sb-scrim { display: none; }
/* свёрнутая панель: только значки, подсказка — title; счётчик — точкой; подписи групп — линией */
@media (min-width: 761px) {
  .t-sb[data-min] { width: var(--t-sb-w-min); }
  .t-sb[data-min] .t-sb-top { justify-content: center; padding: 0; }
  .t-sb[data-min] :is(.t-sb-wm, .t-sb-pt, .t-chev, .t-sb-search > span, .t-sb-search kbd, .t-sb-l, .t-sb-cnt, .t-sb-tag, .t-sb-ch, .t-sb-kids, .t-sb-card, .t-sb-who, .t-sb-mo) { display: none; }
  .t-sb[data-min] :is(.t-sb-prod, .t-sb-item, .t-sb-search) { justify-content: center; padding: 0; }
  .t-sb[data-min] .t-sb-search { border-color: transparent; background: none; }
  .t-sb[data-min] .t-sb-gl { height: 0; margin: var(--t-space-2) var(--t-space-2); padding: 0; font-size: 0; border-top: var(--t-border-w) solid var(--t-line-2); }
  .t-sb[data-min] .t-sb-g + .t-sb-g { margin-top: 0; }
  .t-sb[data-min] .t-sb-item[data-n]::after { content: ""; position: absolute; top: var(--t-space-1-5); right: var(--t-space-2); width: var(--t-space-2); height: var(--t-space-2); border-radius: 50%; background: var(--t-acc-link); }
  .t-sb[data-min] .t-sb-item[data-kid-cur] { background: var(--t-accent-soft); color: var(--t-ink); }
  .t-sb[data-min] .t-sb-item[data-kid-cur] > svg.t-i { color: var(--t-acc-link); }
  .t-sb[data-min] .t-sb-me { flex-direction: column; }
  .t-sb[data-min] .t-sb-foot { align-items: center; }
}
@media (max-width: 760px) {
  .t-sb { width: min(var(--t-sb-w-m), 86vw); transform: translateX(-102%); transition: transform var(--t-dur-toast) var(--t-ease); }
  .t-sb[data-open] { transform: none; box-shadow: var(--t-shadow-pop); }
  .t-sb[data-open] ~ .t-sb-scrim, .t-sb-scrim[data-open] { display: block; position: fixed; inset: 0; z-index: 46; background: var(--t-overlay); }
  .t-sb .t-sb-rail, .t-sb-search kbd { display: none; }
}

/* второй уровень: колонка рядом с панелью; продукт ставит её в раскладку страницы (обычно — слева от содержимого, на всю высоту) */
.t-sb2 { width: var(--t-sb2-w); flex: none; min-width: 0; display: flex; flex-direction: column; background: var(--t-bg); border-right: var(--t-border-w) solid var(--t-line-2); font-family: var(--t-font); font-size: var(--t-fs-ui); line-height: var(--t-lh-ui); color: var(--t-ink); }
.t-sb2-h { flex: none; display: flex; align-items: center; gap: var(--t-space-2); height: var(--t-hd-h1); padding: 0 var(--t-space-2) 0 var(--t-space-4); border-bottom: var(--t-border-w) solid var(--t-line-2); }
.t-sb2-h b { flex: 1; min-width: 0; font-weight: var(--t-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-sb2-f { flex: none; padding: var(--t-space-3) var(--t-space-3) var(--t-space-2); }
.t-sb2-q { display: flex; align-items: center; gap: var(--t-space-2); height: var(--t-ctl-sm); padding: 0 var(--t-space-3); border: var(--t-border-w) solid var(--t-line-2); border-radius: var(--t-r-xs); background: var(--t-surface); color: var(--t-ink-3); }
.t-sb2-q:focus-within { border-color: var(--t-focus-color-in); }
.t-sb2-q input { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: none !important; padding: 0 !important; height: auto !important; min-height: 0 !important; box-shadow: none !important; font-size: var(--t-fs-sm); color: var(--t-ink); }
.t-sb2-l { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--t-space-2) var(--t-space-4); }
.t-sb2-l .t-sb-gl { margin-top: var(--t-space-2); }
.t-sb2-i { display: flex; align-items: center; gap: var(--t-space-2); width: 100%; min-height: var(--t-ctl-sm); padding: var(--t-space-1) var(--t-space-2-5); border-radius: var(--t-r-xs); color: var(--t-ink-2); text-align: left; text-decoration: none; }
.t-sb2-i:hover { background: var(--t-hover); color: var(--t-ink); text-decoration: none; }
.t-sb2-i[aria-current="true"], .t-sb2-i[aria-current="page"] { background: var(--t-accent-soft); color: var(--t-ink); font-weight: var(--t-fw-medium); }
.t-sb2-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-sb2-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-sb2-t b { font-weight: var(--t-fw-semibold); font-variant-numeric: tabular-nums; }
.t-sb2-t small { font-size: var(--t-fs-xs); line-height: var(--t-lh-xs); color: var(--t-ink-3); font-weight: var(--t-fw-regular); }
.t-sb2-c { flex: none; font-size: var(--t-fs-xs); color: var(--t-ink-3); font-variant-numeric: tabular-nums; }
.t-sb2-e { padding: var(--t-space-3) var(--t-space-2-5); color: var(--t-ink-3); font-size: var(--t-fs-sm); }
.t-sb2-chips { display: none; }
@media (max-width: 760px) {
  .t-sb2 { display: none !important; }
  .t-sb2-chips { display: flex; gap: var(--t-space-2); overflow-x: auto; padding: 0 var(--t-space-4) var(--t-space-3); scrollbar-width: none; }
  .t-sb2-chips::-webkit-scrollbar { display: none; }
}
/* чип: второй уровень на телефоне (.t-sb2-chips), фильтры над таблицей; выбранный — aria-current / aria-pressed / .on */
.t-chip { flex: none; display: inline-flex; align-items: center; gap: var(--t-space-1-5); height: var(--t-ctl-sm); padding: 0 var(--t-space-3); border: var(--t-border-w) solid var(--t-line-2); border-radius: var(--t-r-pill); background: var(--t-surface); color: var(--t-ink-2); font-family: var(--t-font); font-size: var(--t-fs-caption); line-height: var(--t-lh-caption); font-weight: var(--t-fw-regular); white-space: nowrap; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.t-chip:hover { color: var(--t-ink); border-color: var(--t-line); text-decoration: none; }
.t-chip b { color: var(--t-ink); font-weight: var(--t-fw-semibold); font-variant-numeric: tabular-nums; }
.t-chip[aria-current="true"], .t-chip[aria-current="page"], .t-chip[aria-pressed="true"], .t-chip.on { border-color: var(--t-acc-link); color: var(--t-ink); font-weight: var(--t-fw-medium); }

/* нав-бар страницы: заменяет шапку; продукт кладёт его сверху области справа от панели (sticky) */
.t-nb { flex: none; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--t-bg); border-bottom: var(--t-border-w) solid var(--t-line-2); font-family: var(--t-font); font-size: var(--t-fs-ui); line-height: var(--t-lh-ui); color: var(--t-ink); }
.t-nb-r { display: flex; align-items: center; gap: var(--t-space-2); height: var(--t-hd-h1); padding: 0 var(--t-space-4) 0 var(--t-space-5); }
.t-nb-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--t-space-2); }
.t-nb-t { flex: 0 1 auto; display: inline-flex; align-items: center; gap: var(--t-space-2); min-width: 0; font-size: var(--t-fs-h4); line-height: var(--t-lh-h4); font-weight: var(--t-fw-semibold); white-space: nowrap; color: var(--t-ink); text-decoration: none; }
.t-nb-t > span { overflow: hidden; text-overflow: ellipsis; }
.t-nb-t > svg.t-i { color: var(--t-ink-3); width: var(--t-ico); height: var(--t-ico); }
a.t-nb-t:hover { text-decoration: none; color: var(--t-ink); }
.t-nb-sub { flex: 0 100 auto; font-size: var(--t-fs-ui); font-weight: var(--t-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--t-ink); text-decoration: none; }
a.t-nb-sub:hover { text-decoration: underline; }
.t-nb-sep { color: var(--t-line); flex: none; }
.t-nb-ctx { flex: 0 30 auto; display: inline-flex; align-items: center; gap: var(--t-space-2); min-width: 0; height: var(--t-ctl-sm); padding: 0 var(--t-space-2-5); border: var(--t-border-w) solid var(--t-line-2); border-radius: var(--t-r-xs); background: var(--t-surface); font-size: var(--t-fs-sm); }
.t-nb-ctx > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-nb-ctx:hover, .t-nb-ctx[aria-expanded="true"] { border-color: var(--t-line); }
.t-nb-ib { flex: none; width: var(--t-ctl-sm); height: var(--t-ctl-sm); display: inline-grid; place-items: center; border-radius: var(--t-r-xs); color: var(--t-ink-2); }
.t-nb-ib:hover, .t-nb-ib[aria-expanded="true"] { background: var(--t-hover); color: var(--t-ink); }
.t-nb-r .t-nb-burger { display: none; }
.t-nb-a { flex: none; display: flex; align-items: center; gap: var(--t-space-2); }
.t-nb-tabs { display: flex; gap: var(--t-space-0-5); padding: 0 var(--t-space-4); overflow-x: auto; scrollbar-width: none; }
.t-nb-tabs::-webkit-scrollbar { display: none; }
.t-nb-tab { display: inline-flex; align-items: center; gap: var(--t-space-2); height: var(--t-hd-h2); padding: 0 var(--t-space-3); border-bottom: var(--t-tab-line) solid transparent; color: var(--t-ink-2); font-size: var(--t-fs-sm); white-space: nowrap; text-decoration: none; }
.t-nb-tab:hover { color: var(--t-ink); text-decoration: none; }
.t-nb-tab[aria-selected="true"], .t-nb-tab[aria-current="page"] { color: var(--t-ink); border-bottom-color: var(--t-accent); font-weight: var(--t-fw-medium); }
@media (max-width: 760px) {
  .t-nb-r { padding: 0 var(--t-space-3) 0 var(--t-space-2); }
  .t-nb-r .t-nb-burger { display: inline-grid; }
  .t-nb-t { font-size: var(--t-fs-body); }
  .t-nb-ctx { max-width: 40vw; }   /* контекст (проект) на телефоне остаётся — с многоточием; места мало — первым уходит .t-nb-sub */
  .t-nb-crumb:has(.t-nb-ctx) .t-nb-sub, .t-nb-crumb:has(.t-nb-ctx) .t-nb-sep:has(+ .t-nb-sub) { display: none; }
  .t-nb .t-hide-m { display: none !important; }
}

/* дровер: карточка справа поверх содержимого; ширина — style.width (от --t-dr-w-min до ширины окна), по умолчанию --t-dr-w */
.t-dr-scrim { position: fixed; inset: 0; z-index: 54; background: color-mix(in srgb, var(--t-bg) 40%, transparent); }
.t-dr { position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; box-sizing: border-box; width: var(--t-dr-w); min-width: min(var(--t-dr-w-min), 100vw); max-width: 100vw; display: flex; flex-direction: column; background: var(--t-surface); border-left: var(--t-border-w) solid var(--t-line); box-shadow: var(--t-shadow-pop); font-family: var(--t-font); font-size: var(--t-fs-ui); line-height: var(--t-lh-ui); color: var(--t-ink); padding-top: env(safe-area-inset-top, 0px); }
.t-dr:focus { outline: 0; }
.t-dr-grip { position: absolute; left: calc(-1 * var(--t-space-1-5)); top: 0; bottom: 0; width: var(--t-space-3); z-index: 1; display: grid; place-items: center; cursor: col-resize; touch-action: none; }
.t-dr-grip::before { content: ""; width: var(--t-space-1); height: var(--t-ctl-md); border-radius: var(--t-r-pill); background: var(--t-line); transition: background var(--t-dur) var(--t-ease), height var(--t-dur) var(--t-ease); }
.t-dr-grip:hover::before, .t-dr-grip:focus-visible::before, .t-dr[data-drag] .t-dr-grip::before { background: var(--t-acc-link); height: var(--t-space-16); }
.t-dr .t-dr-grip:focus-visible:focus-visible { outline: 0; }
.t-dr[data-drag], .t-dr[data-drag] * { user-select: none; cursor: col-resize; }
.t-dr-h { flex: none; display: flex; align-items: center; gap: var(--t-space-2); height: var(--t-hd-h1); padding: 0 var(--t-space-3) 0 var(--t-space-5); border-bottom: var(--t-border-w) solid var(--t-line-2); }
.t-dr-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-dr-tt b { font-weight: var(--t-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-dr-tt small { font-size: var(--t-fs-xs); line-height: var(--t-lh-xs); color: var(--t-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-dr-b { flex: 1; min-height: 0; overflow: auto; padding: var(--t-space-5); }
.t-dr-f { flex: none; display: flex; justify-content: flex-end; gap: var(--t-space-2); padding: var(--t-space-3) var(--t-space-5); border-top: var(--t-border-w) solid var(--t-line-2); }
@media (max-width: 760px) { .t-dr { width: 100vw !important; min-width: 0; } .t-dr-grip { display: none; } }

/* окно поверх затемнения .t-ov (без React-библиотеки окон — «Настроить меню…» и т. п.): .t-dlg — заголовок и пояснение .t-dlg-h,
   прокручиваемое тело .t-dlg-b, кнопки .t-dlg-f (.t-btn, главная — .t-btn-primary, справа); строка настройки меню — .t-cz:
   значок, название, сегмент .t-seg «Показывать / В «Ещё»» (кнопки aria-pressed). */
.t-ov { position: fixed; inset: 0; z-index: 58; display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--t-space-4) var(--t-space-4); background: var(--t-overlay); box-sizing: border-box; }
.t-dlg { width: min(520px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--t-surface); color: var(--t-ink); border: var(--t-border-w) solid var(--t-line); border-radius: var(--t-r-dialog); box-shadow: var(--t-shadow-pop); font-family: var(--t-font); font-size: var(--t-fs-ui); line-height: var(--t-lh-ui); }
.t-dlg-h { flex: none; padding: var(--t-space-4) var(--t-space-5) var(--t-space-1-5); }
.t-dlg-h b, .t-dlg-h h2 { display: block; margin: 0; font-size: var(--t-fs-h4); line-height: var(--t-lh-h4); font-weight: var(--t-fw-semibold); }
.t-dlg-h p { margin: var(--t-space-1) 0 0; color: var(--t-ink-3); font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); }
.t-dlg-b { flex: 1; min-height: 0; overflow: auto; padding: var(--t-space-1-5) var(--t-space-3) var(--t-space-3); }
.t-dlg-b .t-sb-gl { margin-top: var(--t-space-2); }
.t-dlg-f { flex: none; display: flex; justify-content: flex-end; gap: var(--t-space-2); padding: var(--t-space-3) var(--t-space-5); border-top: var(--t-border-w) solid var(--t-line-2); }
.t-dlg-f .t-btn { width: auto; min-height: var(--t-btn-sm-h); padding: 0 var(--t-space-4); font-size: var(--t-btn-sm-fs); border-radius: var(--t-btn-sm-r); }
.t-cz { display: flex; align-items: center; gap: var(--t-space-2-5); min-height: var(--t-ctl-md); padding: 0 var(--t-space-1-5); color: var(--t-ink-2); }
.t-cz > span { flex: 1; min-width: 0; color: var(--t-ink); font-size: var(--t-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-cz .t-seg { flex: none; margin: 0; }
.t-cz .t-seg button { flex: none; padding: 0 var(--t-space-2-5); font-size: var(--t-fs-xs); }
@media (max-width: 760px) { .t-ov { padding-top: var(--t-space-8); } }
@media (prefers-reduced-motion: no-preference) { .t-dlg { animation: t-pin var(--t-dur-pop) var(--t-ease); } }

/* Пустое состояние (бэклог #26, 10.10.2026) — один шаблон во всех продуктах: короткий заголовок (.t-empty-t), строка «что сделать»
   (.t-empty-x), одна основная кнопка (.t-empty-a). Без пунктирной рамки, надписей-«айбровов» и извинений. В React — EmptyState из tseh-ui (те же значения). */
.t-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--t-space-2); padding: var(--t-space-12) var(--t-space-6); color: var(--t-ink-2); }
.t-empty.sm { padding: var(--t-space-6) var(--t-space-4); }
.t-empty-t { margin: 0; font-weight: var(--t-fw-semibold); font-size: var(--t-fs-h4); line-height: var(--t-lh-h4); color: var(--t-ink); }
.t-empty-x { margin: 0; max-width: 420px; font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); }
.t-empty-a { display: flex; gap: var(--t-space-2); margin-top: var(--t-space-3); flex-wrap: wrap; justify-content: center; }
/* Разметка с иллюстрацией (бэклог #12): <div class="t-empty"><svg class="t-empty-ill">…</svg><h3>…</h3><p>…</p><div class="acts">…</div></div>; цвета иллюстрации — из токенов. */
.t-empty-ill { width: 160px; max-width: 100%; height: auto; margin-bottom: var(--t-space-2); color: var(--t-ink-3); }
.t-empty.sm .t-empty-ill { width: 112px; }
.t-empty-ill .ill-f { fill: var(--t-surface-2); }
.t-empty-ill .ill-s { stroke: var(--t-ink-3); }
.t-empty-ill .ill-a { fill: var(--t-accent); }
.t-empty-ill .ill-p { stroke: var(--t-accent-ink); }
.t-empty h3 { margin: 0; font: var(--t-fw-semibold) var(--t-fs-h4)/var(--t-lh-h4) var(--t-font); color: var(--t-ink); }
.t-empty p { margin: 0; max-width: 420px; font-size: var(--t-fs-sm); line-height: var(--t-lh-sm); }
.t-empty .acts { display: flex; gap: var(--t-space-2); margin-top: var(--t-space-3); flex-wrap: wrap; justify-content: center; }
.t-empty .acts .t-btn { width: auto; }