/*
 * Navex — единая сетка и стиль (этап 141; макет docs/design-lab/ux-navex/css/grid-r14.css, SPEC §13.1, §13.6, §13.9 п.7).
 * Подключается во всех каркасах: layouts/app (и layouts/assistant поверх него), layouts/panel, layouts/guest (мастер).
 * Дашборд (control.*) этот файл не меняет: его страница (.td-root) живёт по своим правилам pages/today.css.
 *
 * Словарь g14-* (тот же, что в лаборатории):
 *   .g14-grid (объекты: 3 в ряд на 1440, 4 на 1920, 2 на 768–1279, 1 на телефоне) · .g14-grid--sm (маленькие: 4 в ряд на 1440)
 *   .g14-grid--2/3/4 (ровно 2/3/4 колонки) · .g14-split (2/3 + 1/3) · .g14-card (+ __head __ico __hgrp __title __sub __desc __body __foot __more)
 *   .g14-add (пунктирная «＋ Добавить …» последней в сетке) · .g14-sec (+ __head __h __n __hint __act) · .g14-field (поле ≤ 760)
 *   .g14-stat (карточка-цифра) · .g14-seg (сегменты)
 * Одна плавающая полоса «Сохранить» — .nx-svbar (public/js/save-bar.js, компонент x-save-bar): полосы страниц с атрибутом
 *   data-save-bar-src — «источники», при работающем скрипте их не видно.
 */
:root {
  --g14-gap: 16px; --g14-r: 28px; --g14-pad: 20px; --g14-pad-form: 24px;
  --g14-sec-gap: 32px; --g14-head-gap: 12px; --g14-under-head: 24px;
}
@media (max-width: 767.98px) { :root { --g14-gap: 12px; --g14-r: 20px; --g14-pad: 16px; --g14-pad-form: 16px; --g14-sec-gap: 24px; } }

/* ---------- сетки ---------- */
.g14-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--g14-gap); align-items: stretch; }
.g14-grid--sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.g14-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g14-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g14-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g14-grid--2, .g14-grid--3, .g14-grid--4, .g14-grid--sm { display: grid; gap: var(--g14-gap); }
.g14-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--g14-gap); align-items: start; }
@media (max-width: 1279.98px) { .g14-grid--3, .g14-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023.98px) { .g14-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .g14-grid, .g14-grid--2, .g14-grid--3, .g14-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .g14-grid--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- карточка: белая, 28 (телефон 20), поля 20 (форма 24), кнопки прижаты к низу ---------- */
.g14-card { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: var(--g14-pad); border-radius: var(--g14-r);
  background: var(--surface-raised, #fff); box-shadow: var(--hl-top), var(--shadow-1), 0 0 0 1px var(--line); color: var(--ink); }
.g14-card--form { padding: var(--g14-pad-form); }
.g14-card--soft { background: var(--surface-subtle); box-shadow: none; }
.g14-card--warn { box-shadow: var(--hl-top), var(--shadow-1), inset 0 0 0 1.5px rgb(224 161 0 / .55); }
.g14-card--bad { box-shadow: var(--hl-top), var(--shadow-1), inset 0 0 0 1.5px rgb(194 65 45 / .45); }
.g14-card--on { box-shadow: var(--hl-top), var(--shadow-1), inset 0 0 0 2px var(--ink); }
.g14-card__head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.g14-card__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--surface-subtle); color: var(--ink); }
.g14-card__ico .nx-icon { --nx-size: 22px; }
.g14-card__hgrp { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.g14-card > .g14-card__hgrp { flex: 0 0 auto; }
.g14-card__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.3 var(--font-text); letter-spacing: -.01em; }
.g14-card__sub { margin: 0; color: var(--ink-soft); font: 400 13px/1.35 var(--font-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g14-card__desc { margin: 0; color: var(--ink-soft); font: 400 14px/1.45 var(--font-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g14-card__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.g14-card__foot { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g14-card__foot > .btn { flex: 1 1 0; min-width: 0; }
.g14-card__foot--end { justify-content: flex-end; }
.g14-card__foot--end > .btn { flex: 0 0 auto; }
.g14-card__more { flex: none; margin-left: auto; }
.g14-card__corner { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 4px; z-index: 1; }
.g14-card .field:last-child, .g14-card .mz-field:last-child { margin-bottom: 0; }

/* ---------- «＋ Добавить …»: пунктирная карточка последней в сетке — на высоту ряда, на телефоне полоса 80 ---------- */
.g14-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 160px; margin: 0; padding: var(--g14-pad); border-radius: var(--g14-r);
  border: 1.5px dashed var(--ink-faint); background: transparent; color: var(--ink-soft); font: 500 15px/1.3 var(--font-text); text-decoration: none; text-align: center; cursor: pointer; }
.g14-add .nx-icon { --nx-size: 22px; }
.g14-add__plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-subtle); color: var(--ink); }
.g14-add small { color: var(--ink-faint); font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .g14-add:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-subtle); } }
.g14-add:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 767.98px) { .g14-add { min-height: 80px; flex-direction: row; } .g14-add__plus { width: 40px; height: 40px; } }

/* ---------- секция: заголовок 20 вне карточек + счётчик + «＋ Добавить …» справа; 12 до сетки, 32 между секциями ---------- */
.g14-sec { min-width: 0; }
.g14-sec + .g14-sec { margin-top: var(--g14-sec-gap); }
.g14-sec__head { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: var(--g14-head-gap); }
.g14-sec__h { margin: 0; font: 500 20px/1.25 var(--font-display); letter-spacing: -.015em; }
.g14-sec__n { color: var(--ink-faint); font: 500 16px/1 var(--font-text); }
.g14-sec__hint { color: var(--ink-soft); font: 400 14px/1.4 var(--font-text); }
.g14-sec__act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767.98px) { .g14-sec__head { flex-wrap: wrap; } .g14-sec__act { margin-left: 0; width: 100%; justify-content: flex-start; } }

/* ---------- одиночное поле — не шире 760 ---------- */
.g14-field { max-width: 760px; }
.g14-field--400 { max-width: 400px; }

/* ---------- цифра ---------- */
.g14-stat { display: grid; gap: 4px; align-content: start; margin: 0; padding: 16px 18px; border-radius: 22px; background: var(--surface-raised, #fff); box-shadow: var(--hl-top), var(--shadow-1), 0 0 0 1px var(--line); text-decoration: none; color: inherit; min-width: 0; }
.g14-stat b { font: 400 30px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.g14-stat span { color: var(--ink-soft); font: 400 13px/1.35 var(--font-text); }

/* ---------- сегменты (на телефоне ≥ 44) ---------- */
.g14-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.g14-seg > button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface-subtle); color: var(--ink); font: 500 14px/1 var(--font-text); cursor: pointer; }
.g14-seg > button[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse, #fff); }
@media (max-width: 767.98px) { .g14-seg > button { min-height: 44px; } }

/* ---------- шапка страницы: одна для всех — надзаголовок 14, h1 32 (телефон 26), 24 до содержимого ---------- */
/* Дашборд (.td-root) — свой вид, не трогаем */
body[data-shell] .app-main .page:not(:has(> .td-root)) .page__title { font-size: 32px; }
body[data-shell] .app-main .page:not(:has(> .td-root)) .page__header { margin-bottom: var(--g14-under-head); }
@media (max-width: 767.98px) { body[data-shell] .app-main .page:not(:has(> .td-root)) .page__title { font-size: 26px; } }

/* ---------- ширина: содержимое всегда от левого до правого края шапки (1112 на 1440, 1440 на 1920) во всех оболочках ---------- */
@media (min-width: 768px) {
  body[data-shell] .page { margin-inline: auto; max-width: calc(var(--content-max) + var(--page-pad) + var(--space-2)); }
  body[data-shell] .topbar__bar { margin-inline: auto; max-width: var(--content-max); }
  body[data-shell] .mz-banners { width: 100%; margin-inline: auto; max-width: calc(var(--content-max) + var(--page-pad) + var(--space-2)); }
}

/* ---------- одна полоса «Сохранить» (public/js/save-bar.js) ---------- */
/* полосы страниц — источники: пока скрипт работает, их не видно (без скрипта — обычные кнопки формы) */
:root[data-svb] [data-save-bar-src] { display: none !important; }
.nx-svsrc { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--g14-gap); }
.nx-svbar { position: fixed; z-index: calc(var(--z-sticky, 10) + 50); right: 24px; bottom: 16px; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--surface-raised, #fff); color: var(--ink);
  box-shadow: 0 12px 32px rgb(17 17 17 / .16), 0 0 0 1px var(--line); animation: nx-svbar-in .2s var(--ease, ease-out); }
.nx-svbar[hidden] { display: none; }
.nx-svbar__t { color: var(--ink); font: 500 14px/1.3 var(--font-text); white-space: nowrap; margin-right: 4px; }
.nx-svbar .btn { min-height: 44px; }
@keyframes nx-svbar-in { from { opacity: 0; translate: 0 8px; } }
:root[data-motion="reduce"] .nx-svbar { animation: none; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .nx-svbar { animation: none; } }
:root[data-svb-on] .app-main .page { padding-bottom: 96px; }
:root[data-svb-on] .nx-toaster { bottom: calc(88px + env(safe-area-inset-bottom) + var(--nx-bottom-ui, 0px)); }
/* при полосе плашка «Установите Navex» (этап 139) не показывается */
:root[data-svb-on] .nx-ib { display: none !important; }
@media (max-width: 767.98px) {
  .nx-svbar { left: 12px; right: 12px; bottom: calc(var(--nx-bottom-ui, 84px) + 12px + env(safe-area-inset-bottom, 0px)); border-radius: 22px; padding: 6px 6px 6px 14px; gap: 4px; }
  .nx-svbar__t { flex: 1; min-width: 0; white-space: normal; font-size: 13px; line-height: 1.25; }
  .nx-svbar .btn { padding-left: 14px; padding-right: 14px; }
  .nx-svbar .nx-svbar__undo { padding-left: 10px; padding-right: 10px; }
  :root[data-svb-on] .app-main .page { padding-bottom: 150px; }
}
@media (max-width: 374.98px) { .nx-svbar__t { font-size: 12px; } .nx-svbar .btn { padding-left: 12px; padding-right: 12px; } }

/* ---------- эталон: «Мои ИИ-агенты», «Мои ассистенты» (дефекты §13.1) ---------- */
.mz-agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--g14-gap); align-items: stretch; }
@media (max-width: 767.98px) { .mz-agrid { grid-template-columns: minmax(0, 1fr); } }

/* §13.7: сегменты и чипы на телефоне ≥ 44 px (общий случай) */
@media (max-width: 767.98px) {
  body[data-shell] .segmented > button, body[data-shell] .segmented > [role="tab"] { min-height: 44px; }
}

/* ---------- формы настроек: одиночное поле — не шире 760 (SPEC §13.1), пока карточки-формы в 2 колонки не сделаны (этапы 142, 145) ---------- */
:is(.mz-tabsframe, .asst-body .page) :is(.field, .mz-field, .form-group) > :is(input.input, input.mz-input, textarea, select, .select, .mz-select, .input-group, .mz-input-wrap, .ux-phone) { max-width: 760px; }
:is(.mz-tabsframe, .asst-body .page) :is(.field, .mz-field, .form-group) > :is(.field__hint, .mz-field__hint, .hint) { max-width: 760px; }