/* НОВЫЙ ВИД КАРТОЧЕК — ОБЩЕЕ (#1395, макет «Экраны платформы v2»,
   экраны «Карточка декларации» и «Карточка контрагента»).

   Подключается v2-шаблонами `v2/card.html` и `v2/company_page.html` в
   блоке `head_extra`; своё у каждой карточки — в
   `kartochka-deklaracii.css` (nvd-*) и `kartochka-kontragenta.css`
   (nvc-*). Здесь только то, что нужно обеим: токены макета и детали,
   из которых карточки собираются.

   ВСЁ ВНУТРИ `.nv-kartochka`. Шапку, меню, подвал и баннер лесенки
   рисует общий `base.html` — их этот файл не трогает: прежний вид и
   соседние страницы от нового не меняются. По той же причине токены
   объявлены на `.nv-kartochka`, а не на `:root`, и называются `--nv-*`:
   у Tailwind свои `--color-*`, и совпадение имён перекрасило бы всю
   платформу.

   ШИРИНЫ: телефон — до 640, планшет — 640–1079, ПК — от 1080 (как
   рамки макета: 400, 820, 1280). Правила для узкого экрана идут первыми,
   шире — media-блоками ниже; пар `sm:`/`shell:` здесь нет (грабля
   Tailwind из platform/CLAUDE.md).

   С #1403 карточки рисуются только в ТЁМНОМ виде (кнопка «Тёмный» у
   админа): тёмные значения токенов `--nv-*` подставляет
   `static/v2/tyomnyy.css` на той же `.nv-kartochka`. Здесь — светлые
   значения макета: файл остаётся верным и без тёмного вида.

   Макросы `partials/ui.html` (стена контактов, заметка, звезда,
   «поделиться», окно входа) рисуются своими классами Tailwind и
   продолжают работать как есть — здесь им подправлены только размеры
   там, где они стоят рядом с кнопками макета (`.nv-deystviya`). */

.nv-kartochka {
  --nv-display: "Unbounded", system-ui, sans-serif;
  --nv-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nv-plum: #5a2278;
  --nv-plum-deep: #2f1440;
  --nv-plum-hover: #431a5c;
  --nv-violet: #a855f7;
  --nv-gold: #d9a441;
  --nv-page: #fefbff;
  --nv-area: #f4eff8;
  --nv-card: #ffffff;
  --nv-wash: #f7f1fb;
  --nv-lilac: #e2cdf2;
  --nv-fog: #ece8ef;
  --nv-carbon: #1c1622;
  --nv-charcoal: #4a4550;
  --nv-mid: #6b6572;
  --nv-faint: #9a94a3;
  --nv-ok-bg: #edf7f1;
  --nv-ok-fg: #1f6b40;
  --nv-ok-dot: #2f9e63;
  --nv-warn-bg: #fdf4e6;
  --nv-warn-fg: #8a5a08;
  --nv-bad-bg: #fbeef1;
  --nv-bad-fg: #9c1f45;
  --nv-info-bg: #eef2fd;
  --nv-info-fg: #2b4bb0;
  --nv-band: #2f1440;
  --nv-sh: 0 0 32px 0 rgba(47, 20, 64, .10);

  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  font-family: var(--nv-ui);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--nv-carbon);
  -webkit-font-smoothing: antialiased;
}
.nv-kartochka *, .nv-kartochka *::before, .nv-kartochka *::after { box-sizing: border-box; }
/* Ссылки — сливовые и без подчёркивания, как в макете. Только ссылки
   без своих классов: у макросов и кнопок цвет свой. */
.nv-kartochka a:not([class]) { color: var(--nv-plum); text-decoration: none; }
.nv-kartochka a:not([class]):hover { color: var(--nv-plum-hover); text-decoration: underline; }

/* ── ЗАГОЛОВКИ И ЧИСЛА: Unbounded 400 ── */
.nv-h1, .nv-h2, .nv-h3 {
  margin: 0;
  font-family: var(--nv-display);
  font-weight: 400;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--nv-carbon);
}
.nv-h1 { font-size: 19px; line-height: 1.25; }
.nv-h2 { font-size: 16px; line-height: 1.3; letter-spacing: -.008em; }
.nv-h3 { font-size: 15px; line-height: 1.3; letter-spacing: -.008em; }
/* Номер документа рядом с крупным заголовком — обычным шрифтом, мелко. */
.nv-h1 .nv-pripiska {
  display: inline-block;
  font-family: var(--nv-ui);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--nv-mid);
  font-variant-numeric: tabular-nums;
}
.nv-num {
  font-family: var(--nv-display);
  font-weight: 400;
  letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
}
.nv-num-krupno { font-size: 15px; }
.nv-tab { font-variant-numeric: tabular-nums; }

/* ── МЕЛКИЙ ТЕКСТ ── */
.nv-dim { color: var(--nv-mid); font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.nv-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--nv-mid); }
.nv-lead { margin: 0; font-size: 14px; color: var(--nv-charcoal); }
.nv-zam { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--nv-mid); }
/* Подпись капителью над значением («РАЗМЕР ПАРТИИ», «ЗА НЕДЕЛЮ»). */
.nv-nadpis {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .057em;
  color: var(--nv-mid);
}
.nv-ryad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }

/* ── НАВИГАЦИЯ НАД КАРТОЧКОЙ: «← Назад к ленте» и листание ── */
.nv-navigaciya {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.nv-navigaciya a:not([class]) { color: var(--nv-plum); }

/* ── ШАПКА: слева заголовок и строки под ним, справа действия ── */
.nv-shapka {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 24px;
  min-width: 0;
}
.nv-shapka-tekst { min-width: 0; max-width: 780px; flex: 1 1 320px; }
.nv-deystviya { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.nv-deystviya form { margin: 0; display: inline-flex; }
/* Звезда избранного и «Поделиться» — макросы ui.html. Здесь они встают
   в ряд с кнопками макета: та же высота и тот же угол. Состояние звезды
   держит `aria-pressed`, его переключает app.js. */
.nv-deystviya [data-fav],
.nv-deystviya [data-share] {
  height: 40px;
  min-width: 40px;
  border-radius: 4px;
  border: 1px solid var(--nv-lilac);
  background: var(--nv-card);
  color: var(--nv-plum);
  font-family: var(--nv-ui);
  font-size: 13.5px;
  font-weight: 700;
}
.nv-deystviya [data-fav]:hover,
.nv-deystviya [data-share]:hover { border-color: var(--nv-plum); background: var(--nv-wash); }
.nv-deystviya [data-fav][aria-pressed="true"] { background: var(--nv-wash); border-color: var(--nv-plum); }

/* ── РАЗДЕЛ-КАРТОЧКА: белая, угол 16, лиловая рамка ── */
.nv-razdel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--nv-lilac);
  border-radius: 16px;
  background: var(--nv-card);
}
/* Заголовок раздела слева, ссылка («Все в ленте →») справа. */
.nv-razdel-shapka {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}
.nv-razdel-shapka a:not([class]) { font-size: 12.5px; font-weight: 700; }
.nv-razdel-telo { margin-top: 6px; }
/* Подраздел внутри карточки — отбит линией сверху. */
.nv-podrazdel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nv-fog); }

/* ── СЕТКИ: две колонки и полоса из четырёх плиток ── */
.nv-dve { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.nv-stolbec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nv-plitki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }

/* ── ПЛИТКИ ── */
/* Тёмная сливовая с золотым числом — главное число карточки. */
.nv-plitka-temnaya {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--nv-band);
  color: #fff;
}
.nv-plitka-temnaya .nv-nadpis { color: rgba(255, 255, 255, .55); }
.nv-plitka-chislo {
  margin-top: 4px;
  font-family: var(--nv-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: var(--nv-gold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.nv-plitka-chislo small {
  margin-left: 4px;
  font-family: var(--nv-ui);
  font-size: 11px;
  color: rgba(255, 255, 255, .6);
}
.nv-plitka-temnaya .nv-sub { color: rgba(255, 255, 255, .6); }
/* Светлая — раздел-карточка с подписью, значением и пояснением. */
.nv-plitka {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--nv-lilac);
  border-radius: 16px;
  background: var(--nv-card);
}
.nv-plitka-znachenie {
  margin-top: 4px;
  font-family: var(--nv-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* Плашки — маленькие светлые плитки внутри раздела («За неделю», «За
   30 дней»): серая заливка, угол 4. */
.nv-plashki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.nv-plashka {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--nv-fog);
  border-radius: 4px;
  background: var(--nv-wash);
}
.nv-plashka-chislo {
  margin-top: 3px;
  font-family: var(--nv-display);
  font-weight: 400;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.nv-plashka-chislo small {
  margin-left: 4px;
  font-family: var(--nv-ui);
  font-size: 11.5px;
  color: var(--nv-mid);
}

/* ── СТРОКИ «ПОДПИСЬ — ЗНАЧЕНИЕ» ── */
.nv-kv {
  display: grid;
  grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
  gap: 2px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--nv-fog);
  font-size: 13px;
}
.nv-kv:first-child { border-top: 0; }
.nv-kv-k { padding-top: 1px; font-size: 12px; color: var(--nv-mid); }
.nv-kv-v { min-width: 0; overflow-wrap: anywhere; }
.nv-kv-v b { font-weight: 700; }
/* То же списком определений — плотнее, без линий (реквизиты). */
.nv-dl {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: 7px 12px;
  margin: 10px 0 0;
  font-size: 13px;
}
.nv-dl dt { padding-top: 1px; font-size: 12px; color: var(--nv-mid); }
.nv-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── ЧИПЫ КУЛЬТУР ── */
.nv-chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--nv-lilac);
  border-radius: 4px;
  background: var(--nv-wash);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nv-charcoal);
  white-space: nowrap;
}
.nv-chip-mal { padding: 3px 8px; font-size: 11.5px; }
.nv-chip b { font-family: var(--nv-display); font-weight: 400; font-size: 12.5px; color: var(--nv-plum); }

/* ── МЕТКИ СТАТУСА ── */
/* Плашка («Действует», «на тарифе «Трейдер»»). */
.nv-metka {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  background: var(--nv-fog);
  color: var(--nv-mid);
}
.nv-metka-ok { background: var(--nv-ok-bg); color: var(--nv-ok-fg); }
.nv-metka-warn { background: var(--nv-warn-bg); color: var(--nv-warn-fg); }
.nv-metka-bad { background: var(--nv-bad-bg); color: var(--nv-bad-fg); }
.nv-metka-info { background: var(--nv-info-bg); color: var(--nv-info-fg); }
.nv-metka-plum { background: var(--nv-wash); color: var(--nv-plum); border: 1px solid var(--nv-lilac); }
/* Точка с подписью — статус в строке таблицы. */
.nv-bejdzh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nv-ok-fg);
  white-space: nowrap;
}
.nv-bejdzh::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--nv-ok-dot); }
.nv-bejdzh-warn { color: var(--nv-warn-fg); }
.nv-bejdzh-warn::before { background: var(--nv-gold); }
.nv-bejdzh-bad { color: var(--nv-bad-fg); }
.nv-bejdzh-bad::before { background: var(--nv-bad-fg); }
.nv-bejdzh-off { color: var(--nv-mid); }
.nv-bejdzh-off::before { background: var(--nv-faint); }
/* Подпись капителью над плиткой («Производитель зерна»). */
.nv-znak-tipa {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--nv-plum);
}

/* ── СТРОКИ ПРОВЕРКИ: значок, вывод, подробность, откуда ── */
.nv-prov {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 10px 0;
  border-top: 1px solid var(--nv-fog);
}
.nv-prov:first-child { border-top: 0; }
.nv-prov-t { font-size: 13px; font-weight: 700; line-height: 1.35; }
.nv-prov-d { grid-column: 2; font-size: 12.5px; color: var(--nv-charcoal); overflow-wrap: anywhere; }
.nv-prov-src { grid-column: 2; font-size: 11.5px; color: var(--nv-mid); }
.nv-znachok {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--nv-fog);
  color: var(--nv-mid);
}
.nv-znachok svg { width: 13px; height: 13px; }
.nv-znachok-ok { background: var(--nv-ok-bg); color: var(--nv-ok-fg); }
.nv-znachok-warn { background: var(--nv-warn-bg); color: var(--nv-warn-fg); }

/* ── ТАБЛИЦА ── */
/* Рамка держит угол 16 и прокрутку вбок: на телефоне пять столбцов в
   400 px не помещаются, и страница не должна ехать вбок целиком. */
.nv-tablica-ramka {
  min-width: 0;
  border: 1px solid var(--nv-lilac);
  border-radius: 16px;
  background: var(--nv-card);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.nv-tablica { width: 100%; border-collapse: collapse; font-size: 13px; }
.nv-tablica th {
  height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid var(--nv-lilac);
  background: var(--nv-wash);
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .057em;
  color: var(--nv-mid);
  white-space: nowrap;
}
.nv-tablica td { padding: 10px 12px; border-bottom: 1px solid var(--nv-fog); vertical-align: top; }
.nv-tablica tbody tr:last-child td { border-bottom: 0; }
.nv-tablica .nv-r { text-align: right; }
.nv-tablica .nv-tn { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-tablica .nv-tab { white-space: nowrap; }
/* Строка, которая целиком открывает карточку (обработчик — в разметке
   строки, как в прежнем виде). */
.nv-tablica tr.nv-stroka-ssylka { cursor: pointer; }
.nv-tablica tr.nv-stroka-ssylka:hover td { background: #faf7fd; }
.nv-tablica td a:not([class]) { color: var(--nv-carbon); font-weight: 600; }
.nv-tablica td a:not([class]):hover { color: var(--nv-plum); }

/* ── СТРОКА ССЫЛОК («Поставщики этой культуры: … · … · все →») ── */
.nv-ssylki { margin: 0; font-size: 13px; line-height: 1.6; color: var(--nv-mid); }
.nv-ssylki a:not([class]) { font-weight: 600; }

/* ── КНОПКИ ── */
.nv-knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  font-family: var(--nv-ui);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s, color .2s;
}
.nv-knopka svg { width: 15px; height: 15px; flex: none; }
.nv-knopka-glavnaya { background: var(--nv-plum); color: #fff; }
.nv-knopka-glavnaya:hover { background: var(--nv-plum-hover); color: #fff; }
.nv-knopka-kontur { background: transparent; color: var(--nv-plum); box-shadow: inset 0 0 0 1px var(--nv-lilac); }
.nv-knopka-kontur:hover { background: var(--nv-wash); box-shadow: inset 0 0 0 1px var(--nv-plum); color: var(--nv-plum); }
.nv-knopka-mal { height: 34px; padding: 0 12px; font-size: 12.5px; }
.nv-knopka-blok { width: 100%; }
.nv-knopka:focus-visible { outline: 2px solid var(--nv-violet); outline-offset: 2px; }

/* Серый блок внутри раздела (замок контактов, пояснение). */
.nv-zalivka {
  padding: 12px 14px;
  border-radius: 4px;
  background: var(--nv-wash);
  font-size: 13px;
}

/* ── ПЛАНШЕТ: 640–1079 ── */
@media (min-width: 640px) {
  .nv-kartochka { gap: 16px; font-size: 14px; }
  .nv-h1 { font-size: 24px; line-height: 1.2; }
  .nv-kv { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
  .nv-dl { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }
  .nv-dve, .nv-stolbec { gap: 16px; }
  .nv-plitki { gap: 12px; }
}

/* ── ПК: от 1080 ── */
@media (min-width: 1080px) {
  .nv-dve { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nv-plitki { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .nv-knopka { transition: none; }
}