/* ============================================================
   VKUS — слой вкуса поверх Nova, весь сайт.

   Редакция 08.09.2026, вторая. Ориентир — gumloop.com (замер:
   design-system/donors/gumloop.com/2026-09-08/), облик собран моделью
   muse-spark 1.2 и разобран на приёмы: output/radar-vhod-final/index.html.
   Взята система, не бренд: ни шрифтов, ни разметки, ни картинок донора.

   Что изменилось против первой редакции (донор serro.ai): сайт был угольный,
   стал светлый. Причина не в моде — рабочая часть это таблицы, статусы и
   числа, а плотный интерфейс на бумаге читается спокойнее: на угле каждая
   пилюля и каждая линия сами просятся в глаза, и панель превращается в рябь.

   Подключается ПОСЛЕДНИМ, после sayt.css: здесь только переопределения
   токенов и вида, ни одной новой раскладки. Снять слой = убрать одну строку
   из base.html, облик вернётся заводским.
   ============================================================ */

.nv-body{
  /* Бумага тёплая, чернила — уголь с лёгкой теплотой. Чистых #000/#fff нет
     ни в фоне, ни в тексте: нейтрал с нулевой цветностью читается плоско
     (наш же чек-лист, и приёмка ловит его отдельной проверкой). */
  --nv-bg:#FCFBF8;
  --nv-bg-deep:#F6F5F1;
  --nv-surface:#FFFFFE;
  --nv-surface-2:#F6F8FA;
  --nv-text:#1C1A19;

  /* Два уровня приглушённого. Донорский серый #B8B8C0 в роли ТЕКСТА даёт 1.97
     при норме 4.5 — у него роль подписи на плите, а не текста на бумаге. Роль
     цвета не переносится вместе со значением: та же ошибка была и в прошлой
     редакции, только зеркально (серый фона донора в роли текста давал 3.1). */
  --nv-text-muted:#4B4A50;
  --nv-text-dim:#6E6E78;

  /* Единственный акцент. Держим редким: в таблице и списке ссылка опознаётся
     подчёркиванием, цвет включается на наведении (см. ниже). */
  --nv-accent:#5B5FC7;
  --nv-accent-glow:rgba(91,95,199,.18);

  /* Заливка основной кнопки на шаг темнее акцента: белая надпись на #5B5FC7
     даёт 4.9, но на мелком кегле кнопки запас нужен больше. */
  --nv-surface-ink:#4A4EB0;
  --nv-on-ink:#FFFFFF;

  /* Статусные цвета пересобраны под бумагу. Заводские значения Nova и значения
     прошлой редакции подобраны под тёмный фон: на светлом «одобрена» и
     «отклонена» давали 2.2–3.0, то есть хуже соседнего текста — а именно их
     ищут глазами. */
  --nv-success:#2F7D4F;
  --nv-warning:#8A5A12;
  --nv-danger:#C0392B;

  --nv-field:#FFFFFE;

  /* Рамка вместо тени: глубина читается краем. */
  --nv-border:rgba(28,26,25,.13);
  --nv-border-strong:rgba(28,26,25,.24);

  --nv-r:12px;
  --nv-r-sm:10px;

  /* Кривая на весь сайт одна — она же снята с ориентира замером движения
     (cubic-bezier(.16,1,.3,1)) и совпала с нашей полкой ховеров. Длительности
     крупные только на появлении; мелочи под рукой остаются быстрыми. */
  --nv-ease:cubic-bezier(.16,1,.3,1);
  --nv-dur-1:160ms;
  --nv-dur-2:280ms;
  --nv-dur-3:900ms;

  background:var(--nv-bg);
  color:var(--nv-text);
}

/* Вторая поверхность — для полос внутри страницы: бумага, плита, бумага.
   Раньше этот класс переключал светлое на угольном сайте; теперь сайт светлый
   целиком, и класс задаёт ступень плотности, а не смену темы. Разметка
   `_rasskaz.html` его использует, поэтому имя сохранено.

   Мост слоя данных (data.css) пересчитывается здесь заново: он объявлен на
   `.nv-body` и считается один раз от токенов тела, а смена поверхности на
   секции его не догоняет — секция получала бы чужие цвета таблицы (долг 59). */
.vk-bumaga{
  --nv-bg:#F6F5F1;
  --nv-bg-deep:#EFEEE8;
  --nv-surface:#FFFFFE;
  --nv-surface-2:#F6F8FA;

  --dt-bg:var(--nv-bg); --dt-surface:var(--nv-surface); --dt-surface-2:var(--nv-bg-deep);
  --dt-text:var(--nv-text); --dt-muted:var(--nv-text-muted); --dt-dim:var(--nv-text-dim);
  --dt-border:var(--nv-border); --dt-border-strong:var(--nv-border-strong);
  --dt-accent:var(--nv-accent);

  background:var(--nv-bg);
  color:var(--nv-text);
}

/* Шапка сайта — на бумаге, отделена линией, а не тенью. */
.shapka{ background:var(--nv-bg); border-bottom:1px solid var(--nv-border); }

/* ---------- Липкая навигация панели (09.09.2026) ----------
   Панель длинная, и до менеджеров приходилось прокручивать всю таблицу заявок. Полоса
   липнет к верху окна: шапка сайта не липкая, поэтому `top:0` ничем не перекрыт.
   Фон непрозрачный намеренно — под полосой едет таблица, и полупрозрачность превратила
   бы её в кашу из двух слоёв. */
.panel-nav{
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; gap:4px;
  margin:0 0 14px; padding:8px 0;
  background:var(--nv-bg);
  border-bottom:1px solid var(--nv-border);
}
.panel-nav a{
  padding:6px 12px; border-radius:999px;
  font-size:14px; font-weight:500; text-decoration:none;
  color:var(--nv-text);
}
@media (hover:hover){
  .panel-nav a:hover{ background:var(--nv-accent-glow); color:var(--nv-surface-ink); }
}
/* Якорь не должен уезжать под липкую полосу — отступ равен её высоте с запасом. */
#ishody, #kompanii, #menedzhery{ scroll-margin-top:64px; }

/* На телефоне три пункта переносились в две строки и съедали 88 px из 812 — на липкой
   полосе это заметная доля экрана. Кегль и поля ужимаются до одной строки (замер
   09.09.2026 на 375 px), отступ якоря едет следом. */
@media (max-width:520px){
  .panel-nav{ gap:2px; padding:6px 0; }
  .panel-nav a{ padding:5px 9px; font-size:13px; }
  #ishody, #kompanii, #menedzhery{ scroll-margin-top:52px; }
}

/* ---------- Заголовки-сортировки (09.09.2026) ----------
   Заголовок обязан читаться как заголовок и при этом быть нажимаемым: цвет и вес берём у
   обычной шапки таблицы, а признак нажимаемости даёт подчёркивание на наведении, не
   синева — иначе шапка превращается в полосу ссылок и перестаёт быть шапкой.
   Ссылка растянута на всю ячейку: попадать надо в заголовок, а не в семь букв внутри. */
.nv-table th.sort{ padding:0; }
.nv-table th.sort a{
  display:block; padding:10px 12px;
  color:inherit; text-decoration:none; white-space:nowrap;
}
@media (hover:hover){
  .nv-table th.sort a:hover{ text-decoration:underline; text-underline-offset:3px; }
}
/* Место под знак держится всегда: иначе шапка дёргается при каждой смене порядка. */
.sort__zn{ display:inline-block; width:1em; color:var(--nv-surface-ink); }
.nv-table th.sort--tek a{ color:var(--nv-surface-ink); }

/* ---------- Свёрнутый хвост списка ----------
   Переключатель — настоящий чекбокс, спрятанный без `display:none`: иначе он выпадает
   из последовательности фокуса и раскрыть список с клавиатуры нельзя. */
.rb-perekl{
  position:absolute; width:1px; height:1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.rb-perekl:not(:checked) ~ .tabl .rb-hvost{ display:none; }
.rb-perekl:checked ~ .rb-esche .rb-esche-razvernut{ display:none; }
.rb-perekl:not(:checked) ~ .rb-esche .rb-esche-svernut{ display:none; }
.rb-esche{ margin-top:10px; cursor:pointer; }
.rb-perekl:focus-visible ~ .rb-esche{ outline:2px solid var(--nv-accent); outline-offset:2px; }

/* «Как это работает» — единственный акцент в меню (решение человека 08.09.2026).
   С публичного входа снят весь рассказ, и эта ссылка стала единственной дверью к
   объяснению: она стоит первой и окрашена тем же акцентом, что слово «приёмная» в
   логотипе. Правило про редкий акцент выше не нарушено — цветная ссылка в меню ровно
   одна, и она перестанет быть заметной, если тем же цветом покрасить соседей.
   Адресуемся по href, а не по `:first-child`: порядок пунктов ещё будет меняться, а
   смысл «ссылка на рассказ» — нет. */
.nav a[href$="/kak-eto-rabotaet/"]{
  /* Не `--nv-accent`, а тон темнее: на бумаге акцент даёт 5.2, но поверх собственной
     подложки — 4.08, ниже нормы 4.5 (замер 08.09.2026 в браузере, композит прозрачности
     на глаз не виден). `--nv-surface-ink` для того и заведён. */
  color:var(--nv-surface-ink);
  font-weight:600;
  /* Одного цвета мало: в ряду из пяти пунктов синее слово читается как «ссылка среди
     ссылок». Подложка выносит его из ряда, оставаясь тише кнопки — заливки нет, только
     светлая тень акцента. */
  background:var(--nv-accent-glow);
  padding:5px 10px;
  border-radius:999px;
}
@media (hover:hover){
  .nav a[href$="/kak-eto-rabotaet/"]:hover{
    color:var(--nv-on-ink);
    background:var(--nv-surface-ink);
  }
}

/* ---------- Пилюли: шум против сигнала ----------
   На панели их одиннадцать на экран — фильтры, «проходит», «новая»,
   «одобрена», «админ». Все в рамке и капсом, и глазу негде остановиться: это
   ровно тот случай, когда акцент занимает ничтожную площадь, но работает как
   рябь (наблюдение 07.09.2026, подтверждено на живом сайте).

   НОРМА («проходит», «одобрена», «админ») — тихая: ни рамки, ни фона, только
   цвет и капс. ИСКЛЮЧЕНИЕ («ниже порога», «отклонена», «ошибка») остаётся
   заметным — его и ищут глазами. Решение прошлой редакции, оно верное. */
.nv-panel .nv-pill,
main .nv-pill{
  border-color:transparent;
  background:transparent;
  padding-left:0; padding-right:0;
  /* Тень снимается вместе с фоном. У `.nv-pill` в Nova она двойная и рассчитана
     на тёмный фон, где её не видно; на бумаге прозрачная пилюля оставляла
     висеть серое пятно с обрезанным краем — поймано глазами на панели после
     переодевания 08.09.2026, замер цвета этого не показывает. */
  box-shadow:none;
}
main .nv-pill--warning,
main .nv-pill--danger{
  border-color:currentColor;
  padding-left:9px; padding-right:9px;
}

/* ---------- Поле и кнопка одной высоты ----------
   Заводские размеры расходятся на 4–8 px (46 против 50 и 46 против 42), и в
   одной строке это читается как чужая кнопка. */
main .nv-input,
main .nv-btn{ height:46px; }
main textarea.nv-input{ height:auto; }
main .nv-input--sm,
main .nv-btn--sm,
.shapka .nv-btn--sm{ height:34px; }

/* ============================================================
   Строй рабочих страниц — по тому же образу, что и вход.
   Меняется ПОДАЧА, наполнение остаётся: те же числа, те же слова, те же
   действия. Разметку почти не трогаем намеренно — тесты режут её по классам
   и тегам (панель проверяется куском от `class="itogi"` до `</p>`), и правка
   строя ради вида сломала бы проверки, которые стерегут смысл.
   ============================================================ */

/* Служебная метка над заголовком: мельче всего на странице, капсом. Она
   отвечает «где я и что здесь» раньше, чем прочитан заголовок. */
.rb-metka{
  display:block; margin-bottom:6px;
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:500; color:var(--nv-text-dim);
}

/* Шапка секции — флекс, и добавленная обёртка «метка + заголовок» в нём
   схлопывалась: форма поиска наезжала на заголовок. Обёртке нужен свой рост и
   право сжиматься, шапке — перенос и зазор. */
.nv-panel__head{ flex-wrap:wrap; gap:12px 18px; align-items:center; }
.nv-panel__head > div{ flex:1 1 auto; min-width:0; }

/* ---------- Показатели плитками ----------
   «Исходы касаний» были строкой текста, где числа тонули среди слов. Стали
   плитками: метка мелким капсом, число крупно. Данные те же — переверстана
   только подача, каждая пара «метка — <b>N</b>» осталась в своём `span`. */
.itogi{
  display:grid; gap:10px; margin:14px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
}
.itogi span{
  display:flex; flex-direction:column; gap:5px;
  align-items:center; text-align:center;
  padding:12px 14px;
  border:1px solid var(--nv-border); border-radius:var(--nv-r-sm);
  background:var(--nv-surface);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:500; color:var(--nv-text-dim); line-height:1.3;
}
.itogi b{
  font-size:26px; line-height:1; letter-spacing:-.025em; font-weight:600;
  color:var(--nv-text); text-transform:none;
}

/* Шапка панели: заголовок крупно, служебное вокруг — мелко. Средний диапазон
   кеглей и делал страницу вялой. */
.panel-shapka h1{ font-size:clamp(26px,3vw,34px); letter-spacing:-.02em; }
.panel-shapka > p{ color:var(--nv-text-muted); font-size:14px; }
.panel-shapka > p b{ color:var(--nv-text); }

/* ---------- Фильтры полосой, а не россыпью пилюль ----------
   Одиннадцать пилюль в рамках на экран — та самая рябь. Здесь они читаются
   как ряд ярлыков, активный подчёркнут: подчёркивание дешевле заливки и не
   съедает акцент, который нужен кнопкам. */
.filtry{ display:flex; flex-wrap:wrap; gap:2px 18px; margin-top:16px;
         border-top:1px solid var(--nv-border); padding-top:12px; }
.filtry .nv-pill{
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color:var(--nv-text-dim);
  padding:6px 0; border:0; background:transparent; box-shadow:none;
  border-bottom:2px solid transparent; border-radius:0;
}
.filtry .nv-pill:hover{ color:var(--nv-text); }
.filtry .nv-pill--success{
  color:var(--nv-text); background:transparent;
  border-bottom-color:var(--nv-accent);
}
/* На телефоне восемь статусов переносились в три рваные строки разной длины —
   перечень читался как россыпь. Строка одна, лишнее уезжает прокруткой внутри
   блока: вбок скроллит лента, а не документ. */
@media (max-width:700px){
  .filtry{
    flex-wrap:nowrap; overflow-x:auto; gap:16px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .filtry .nv-pill{ white-space:nowrap; flex:none; }
}

/* ---------- Столбец «Решение»: один блок, а не три обломка ----------
   Кнопка «Одобрить», поле причины и «Отклонить» лежат в двух разных формах и
   потому расходились по ячейке ступеньками. Ставим их в один столбик: кнопки
   одной ширины, поле причины во всю ширину под ними. Разметку не трогаем —
   формы обязаны остаться раздельными, они шлют разные действия. */
/* Ячейка остаётся ячейкой: `display:grid` на `<td>` вынимает её из таблицы —
   строка перестаёт расти под содержимым, и кнопки наезжают на соседние ряды
   (проверено прогоном 08.09.2026, выглядело хуже исходного). Раскладку держат
   блоки внутри ячейки. */
.nv-table td[data-st="Решение"]{ vertical-align:top; min-width:230px; }

/* Обёртка внутри ячейки, а не сама ячейка: `display:grid` на `<td>` вынимает её
   из таблицы — строка перестаёт расти под содержимым, и кнопки наезжают на
   соседние ряды (проверено прогоном 08.09.2026). */
.rb-reshenie{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:start; }
/* Осталось одно действие — оно занимает всю ширину: половинка рядом с пустотой
   читается как обрезанная. */
.rb-reshenie form.inline:only-child{ grid-column:1 / -1; }

.rb-reshenie form.inline{
  display:flex; flex-direction:column; gap:8px;
  margin:0; width:100%; min-width:0;
  /* У формы отклонения в sayt.css стоит `max-width:170px` — из-за него кнопка
     «Отклонить» была на 97 px уже «Одобрить» (замер: 267 против 170). */
  max-width:none;
}
/* В форме отклонения кнопка идёт ПЕРЕД полем: так «Отклонить» встаёт вровень с
   «Одобрить», а причина остаётся под ней — она нужна только при отклонении. */
.rb-reshenie form.otklonit{ flex-direction:column-reverse; }

/* `min-width:0` обязателен: у флекс-элемента он по умолчанию `auto`, поле не
   сжимается ниже своего содержимого, и кнопка уезжала за край таблицы. */
.rb-reshenie .nv-btn,
.rb-reshenie .nv-input{ width:100%; min-width:0; }
.rb-reshenie .nv-btn{ justify-content:center; }

/* На узком экране таблица становится карточками — там половинки не нужны. */
@media (max-width:700px){
  .rb-reshenie{ grid-template-columns:1fr; }
}

/* ---------- Таблица: служебная шапка, воздух в строках ----------
   Заголовки столбцов — не текст наравне с данными, а метки: мельче, капсом,
   приглушённые. Тогда взгляд идёт по числам, а не по подписям. */
.nv-table thead th{
  font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:500; color:var(--nv-text-dim);
  padding-top:12px; padding-bottom:12px;
}
.nv-table tbody td{ padding-top:14px; padding-bottom:14px; }
.nv-table tbody tr{ border-top:1px solid var(--nv-border); }
.nv-table tbody tr:hover{ background:var(--nv-bg-deep); }

/* Заголовок группы городов в таблице менеджеров — та же служебная метка. */
.nv-table tr.gorod th{
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--nv-text); background:var(--nv-bg-deep);
  padding-top:14px; padding-bottom:10px;
}

/* Панели-плиты: рамка и радиус образа, тень снята — глубина читается краем. */
.nv-card, .nv-panel{
  border:1px solid var(--nv-border);
  border-radius:16px;
  box-shadow:none;
  background:var(--nv-surface);
}

/* Ссылка внутри таблицы и панели опознаётся подчёркиванием, а не цветом:
   акцент работает, пока он редкий. Цвет появляется на наведении — то есть
   тогда, когда ссылка одна и на неё смотрят. */
.nv-table a:not(.nv-btn),
.nv-panel a:not(.nv-btn){
  color:inherit;
  text-decoration-color:color-mix(in srgb,currentColor 38%,transparent);
  text-underline-offset:2px;
}
.nv-table a:not(.nv-btn):hover,
.nv-panel a:not(.nv-btn):hover{
  color:var(--nv-accent);
  text-decoration-color:currentColor;
}