/* Правки шапки и палитры по клиентскому макету 10.09. */
:root {
  --k-nav-active: #FFD400;
  --k-nav-active-bg: transparent;
  --k-brand-ink: var(--k-on);
}

/* Выделенный раздел различим и по цвету, и по подчёркиванию. */
.knav__i.is-on {
  color: var(--k-nav-active);
  background: var(--k-nav-active-bg);
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.kbrand__t { color: var(--k-brand-ink); }
/* min-height 44px на всех ширинах: без рублиКов (раздел выключен) в окошке одна строка «0 ₽», кнопка была 41 px */
.kbalbox { border-radius: 12px; min-width: 110px; min-height: 44px; align-content: center; }
.kbalbox b, .kbalbox span { white-space: nowrap; }
.kbalbox span { font-weight: 700; }
.kbar__balance, .kmin__balance { border-radius: 14px; }
/* плашка «баланс» вида minimal — 43 px на широком экране, добрана до 44 на всех ширинах */
.kmin__balance { min-height: 44px; }

/* Навигация покупателя делит колонки с поиском, поэтому четыре торговых
   раздела остаются точно под строкой поиска при изменении ширины окна. */
.knav__group { display: flex; align-items: center; gap: 2px; }
.knav__group--2 { justify-content: center; }
.knav__group--3 { justify-content: flex-end; }
@media (min-width: 1361px) {
  body.k-classic .kbar--wide {
    grid-template-columns: auto minmax(max-content, 1fr) auto auto auto;
    column-gap: clamp(14px, 2vw, 34px);
    padding: 0 20px;
  }
  body.k-classic .kbar__main {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding-left: 0;
    padding-right: 0;
  }
  body.k-classic .knav { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
  body.k-classic .knav--grouped { display: grid; grid-template-columns: subgrid; }
  .knav--grouped .knav__group--1 { grid-column: 1; }
  .knav--grouped .knav__group--2 { grid-column: 2; }
  .knav--grouped .knav__group--3 { grid-column: 3 / -1; }
}
@media (max-width: 1360px) {
  .knav--grouped { justify-content: space-between; gap: 6px 12px; }
  .knav__group { flex-wrap: wrap; }
  .knav__group--2 { flex: 1 1 auto; }
}

/* П5 (29.09): пункт «Доставка» удлинил меню на одну вкладку (замер на демо со всеми разделами): классика на 1181–1360 px
   переносила меню во вторую строку. Меню с «Доставкой» плотнее по полям, шрифт тот же (на 1181–1279 px — на полпикселя
   мельче). */
@media (min-width: 1181px) and (max-width: 1360px) {
  body.k-classic .knav:has([data-act="delivery"]) .knav__i { padding-left: 4px; padding-right: 4px; }
  body.k-classic .knav--grouped:has([data-act="delivery"]) { column-gap: 8px; }
}
@media (min-width: 1181px) and (max-width: 1279px) {
  body.k-classic .knav:has([data-act="delivery"]) .knav__i { padding-left: 3px; padding-right: 3px; font-size: 12.5px; }
}

/* Контраст прежних схем: порядок номеров в PDF отличается от ключей prefs. */
/* №20 (13.09): голубая как синяя — без прямоугольников. Неактивные разделы тёмные (#07384D на #1CA4DB 4,4:1).
   Белый выбранный давал 2,84:1, поэтому выбранный ещё темнее (#03202C ≈ 5,9:1) с толстым подчёркиванием. */
[data-accent="3"] {
  --k-nav-active: #03202C;
  --k-nav-active-bg: transparent;
  --k-brand-ink: #fff;
}
[data-accent="3"] .knav__i:not(.is-on) { color: #07384D; }
[data-accent="3"] .knav__i.is-on { text-decoration-thickness: 3px; }
[data-accent="12"] {
  --k-nav-active: #351347;
  --k-nav-active-bg: #FFE69B;
}
[data-accent="7"] { --k-nav-active: #111; --k-on: #111; }
[data-accent="2"] { --k-nav-active: #fff; --k-nav-active-bg: #684300; }
[data-accent="1"] { --k-nav-active: #7A162B; }
[data-accent="5"] {
  --k-nav-active: #fff;
  --k-nav-active-bg: #851044;
  --k-brand-ink: #fff;
}
[data-accent="10"] {
  --k-on: #fff;
  --k-brand-ink: #FFFF00;
  --k-nav-active: #FFFF00;
  --on-accent: #fff;
  --on-brand: #fff;
}
[data-accent="10"] .mark__k { color: #FFFF00; }
/* Белые надписи на голубом и розовом имеют тёмную подложку и чёткий контур. */
[data-accent="5"] .knav__i:not(.is-on) {
  color: #fff;
  background: rgba(0, 0, 0, .3);
  border-radius: 5px;
}
:is([data-accent="3"], [data-accent="5"]) .kbrand__t {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.kside__item.is-on, .krail__i.is-on {
  background: #fff;
  color: #242424;
  box-shadow: inset 4px 0 0 currentColor;
}

/* Дополнительные графитовые схемы: тёмная шапка, светлое содержимое,
   цветные логотип, поиск и активный раздел, как в четырёх новых макетах. */
[data-accent="graphite-yellow"] { --k-highlight: #FFFF00; }
[data-accent="graphite-cyan"] { --k-highlight: #00B0E8; }
[data-accent="graphite-pink"] { --k-highlight: #FF46B8; }
[data-accent="graphite-lime"] { --k-highlight: #9CF600; }
[data-accent^="graphite-"] {
  --k-accent: #404040;
  --k-on: #fff;
  --k-bar: var(--k-highlight);
  --k-onbar: #111;
  --k-brand-ink: var(--k-highlight);
  --k-nav-active: var(--k-highlight);
  --k-th: #404040;
  --k-th2: #535353;
  --brand: #404040;
  --on-brand: #fff;
  --accent: var(--k-highlight);
  --on-accent: #111;
}
[data-accent^="graphite-"] :is(.kpill, .kplace--kpill .kplace__role, .ksrch__row .kbtn--dark, .ksearch .kbtn--dark) {
  background: var(--k-highlight);
  border-color: var(--k-highlight);
  color: #111;
}
[data-accent^="graphite-"] :is(.kside__logo, .mark__k) { color: var(--k-highlight); }
[data-accent^="graphite-"] .klogo { color: #404040; }
[data-accent^="graphite-"] :is(.kside__item.is-on, .krail__i.is-on) {
  background: var(--k-highlight);
  color: #111;
}
[data-accent^="graphite-"] .ktable th { color: #fff; }
[data-accent^="graphite-"] .kshop .ktable th { color: #fff; }
[data-accent^="graphite-"] .kregion .kmini { color: inherit; }

/* Плитки выбора цветовой схемы (.colorpick…, образцы .sw-…) — в colorpick.css: тот же файл подключает страница входа
   (правки 04.10, В2). */
@media (max-width: 860px) {
  .kfoot__acts { display: flex; flex-wrap: wrap; }
  .ksearch { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ksearch .kbar__search { min-width: 0; width: 100%; }
  .ksearch .kbar__user { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 760px) {
  .kstrip { padding: 8px 12px; gap: 8px; }
  .kstrip__brand { flex-wrap: wrap; gap: 6px 12px; }
  .kbar__main { padding: 12px; gap: 12px; }
  .kbrand__t { font-size: 23px; }
  .ksrch { grid-column: 1 / -1; grid-row: 2; }
  .kwho { grid-column: 1 / -1; text-align: left; }
  .knav { padding: 0 12px 12px; }
  .knav__group--2 { justify-content: flex-start; flex-basis: 100%; order: 1; }
  .knav__group--3 { justify-content: flex-start; flex-basis: 100%; order: 2; }
  .knav__i { min-height: 38px; }
  /* П3 (29.09), У10: на телефоне тёмная шапка заняла бы треть экрана — она прилипает отрицательным top и уезжает вверх,
     на месте остаётся только меню: лента разделов с линией под ней (classic). Высоты — skins/common.js
     wirePin. Современный вид: шапка не закреплена, прилипает лента плиток (она закреплена при любой ширине, ниже) */
  .khead { top: calc(var(--k-keep-h, 0px) - var(--k-head-h, 0px)); }
  .appbar { position: relative; z-index: auto; }
}
/* П3: режим «меню» — телефон и шапка выше трети окна (узкое окно компьютера, планшет): остаётся только меню, верхняя строка
   minimal и шапка современного вида не закреплены (признак <html data-kstick="menu"> ставит skins/common.js wirePin) */
[data-kstick="menu"] .khead { top: calc(var(--k-keep-h, 0px) - var(--k-head-h, 0px)); }
[data-kstick="menu"] :is(.appbar, .kmin__top) { position: relative; z-index: auto; }
/* П3 (обзор круга 1А): меню современного вида — лента плиток #sections — закреплена при любой ширине, как меню остальных
   видов: на компьютере — под фирменной шапкой (top — её высота; слой ниже шапки: список уведомлений из шапки остаётся над
   лентой), в режиме «меню» — у верха окна, шапка уезжает вверх. Прилипшая лента сжимается в строку (класс is-slim,
   skins/common.js wirePin): плитки без подписей, не ниже 44 px. Нижний отступ --k-slim-gap возвращает высоту, на которую
   лента стала ниже: содержимое под ней не прыгает. Вверху страницы плитки — полные, как были */
.sections { position: sticky; top: var(--k-head-h, 0px); z-index: 29; }
[data-kstick="menu"] .sections { top: 0; z-index: 30; }
.sections.is-slim {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
  padding-top: 8px; padding-bottom: 8px; margin-bottom: var(--k-slim-gap, 0px);
}
.sections.is-slim .section { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border-radius: var(--r-panel); }
.sections.is-slim .section__t { white-space: nowrap; }
.sections.is-slim .section__s { display: none; }
/* до 1100 px — лента, как на телефоне: плитки по ширине подписи в одну строку, лента прокручивается вбок (открытая плитка
   выводится в ленту, wirePin). Шире плитки делят строку: подпись переносится по словам, вбок — только если и так не помещается */
@media (min-width: 1101px) {
  .sections.is-slim .section { flex: 1 1 auto; }
  .sections.is-slim .section__t { white-space: normal; }
}
/* невидимый слой с копиями ленты для замера высот сжатой и полной (wirePin): вне потока, не перехватывает нажатия */
.kslim-probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.kslim-probe > .sections { position: static; margin: 0; }
/* П3: цели самой закреплённой шапки стоят в зоне html scroll-padding-top (app.css), и фокус на них — Tab, возврат фокуса на
   колокол и «Доставку» по Esc — прокручивал страницу на сотни пикселей. scroll-margin сдвигает их рамку прокрутки вниз на
   ту же величину: браузер видит цель в окне и страницу не двигает, ленты меню вбок прокручиваются как прежде. Только у той
   части, что прилипла: вся шапка (у CRM — строка поиска, колонка стоит сбоку и в зону почти не заходит), в режиме «меню» —
   само меню; уехавшая вверх часть шапки прокручивается к себе как обычно */
:root { --k-pin-shift: calc(var(--k-stuck-h, 0px) + 8px); }
:root:not([data-kstick="menu"]) :is(.khead, .kmin__top, .appbar) *, [data-kstick="menu"] .khead [data-kkeep] * {
  scroll-margin-top: calc(0px - var(--k-pin-shift)); scroll-margin-bottom: var(--k-pin-shift);
}
@media (min-width: 1101px) {
  .ksearch * { scroll-margin-top: calc(0px - var(--k-pin-shift)); scroll-margin-bottom: var(--k-pin-shift); }
  /* колонка CRM выше строки поиска в зону заходит только верхним пунктом: сдвиг лишь верхней границы рамки — нижние пункты
     колонки (баланс, «Выход») не выталкиваются за низ окна, скрытые прокруткой самой колонки по-прежнему к себе её прокручивают */
  .kside * { scroll-margin-top: calc(0px - var(--k-pin-shift)); }
}
@media (max-width: 1100px) { .kside__nav * { scroll-margin-top: calc(0px - var(--k-pin-shift)); scroll-margin-bottom: var(--k-pin-shift); } }
/* лента плиток современного вида закреплена при любой ширине (выше) */
#sections * { scroll-margin-top: calc(0px - var(--k-pin-shift)); scroll-margin-bottom: var(--k-pin-shift); }

/* П5 (29.09): «Доставка» в меню — окно с условиями (skins/common.js, placeDelivery). Слой fixed в конце корня вида, вне лент
   меню; место и пределы размера ставит скрипт свойствами --drop-*. Окно тёмное, как на слайде 29-05: иконки слева, строки
   справа. Выше разделов, рельсы минимала (20) и шапки, ниже окон (60) и тоста (70). Кнопок внутри нет. */
.kdeliv-pop {
  position: fixed; z-index: 50; box-sizing: border-box;
  top: var(--drop-top, 8px); left: var(--drop-left, 8px);
  width: max-content; max-width: var(--drop-w, calc(100vw - 16px)); max-height: var(--drop-h, calc(100vh - 16px));
  overflow: auto; overscroll-behavior: contain;
  padding: 12px 20px 12px 14px; border-radius: 10px;
  background: #333333; color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.kdeliv-pop[hidden] { display: none; }
.kdeliv { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kdeliv__i { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 16px; line-height: 1.35; }
.kdeliv__i > .ic { justify-self: center; }
.kdeliv__i > span { min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.kdeliv__i strong { font-weight: 700; }
/* открытое окно — кнопка выглядит нажатой (как при наведении в своём виде) */
.knav__i[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 4px; }
.kside__item[aria-expanded="true"] { background: rgba(0, 0, 0, .12); }
.krail__i[aria-expanded="true"] { background: var(--k-dark); color: #fff; }
.mini[aria-expanded="true"] { background: var(--on-brand); color: var(--brand); box-shadow: none; }

/* Телефон: шапка кабинета занимала весь первый экран (у продавца рабочая область
   начиналась ниже 560px). Каркас тот же, меняется только укладка: разделы — одной
   строкой с прокруткой, бренд-блок и карточка пользователя плотнее. Все кнопки ≥44px. */
@media (max-width: 600px) {
  /* ---- Классический и Папки: полоса 1 ---- */
  /* строки полосы — через 8 px: город и роль (П1, П4) идут отдельной строкой над служебными пилюлями */
  .kstrip { padding: 6px 12px; gap: 8px; }
  .kstrip__brand { gap: 2px 10px; }
  .kstrip__acts { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 8px; margin-left: 0; }
  .kpill { flex: 0 0 auto; min-height: 44px; padding: 3px 14px; white-space: nowrap; }
  /* город и роль — 44 px во всех видах; длинный город сжимается с многоточием, а не уводит строку за край */
  .kplace { max-width: 100%; }
  .kplace .kplace__city { flex: 0 1 auto; min-height: 44px; padding-left: 12px; padding-right: 12px; }
  .kplace__role { min-height: 44px; padding: 3px 12px; }
  /* смена кабинета (шаг В.13) — тоже 44 px; не помещается в строку с городом и ролью — уходит на следующую */
  .kplace .kplace__mode { min-height: 44px; padding-left: 12px; padding-right: 12px; }

  /* ---- полоса 2: бренд (с «На рынке с …») и баланс в одну строку; город и роль — в полосе 1 ---- */
  .kbar__main {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand bal bell" "srch srch srch" "who who who";
    padding: 10px 12px; gap: 8px;
  }
  .kbar__main .ksrch { display: contents; }
  .kbar__main .kbrand { grid-area: brand; align-self: center; }
  .kbar__main .kbrand__t { font-size: 20px; }
  .kbar__main .ksrch__row { grid-area: srch; }
  .kbar__main .ksrch__row > * { min-height: 44px; }
  .kbar__main .kwho {
    grid-area: who; display: flex; flex-wrap: wrap; align-items: center;
    gap: 0 12px; text-align: left;
  }
  /* min-width 44px: без рублиКов (раздел площадки выключен, 17.09) в окошке только «0 ₽» — цель не уже 44 px */
  .kbar__main .kbalbox { grid-area: bal; min-width: 44px; min-height: 44px; padding: 4px 10px; gap: 0; }
  .kbar__main .kbalbox b { font-size: 15px; }
  .kbar__main .kbell { grid-area: bell; align-self: center; }
  .kbar__badge { min-width: 44px; height: 44px; }

  /* ---- полоса 3: разделы одной прокручиваемой строкой ---- */
  /* промежутки между пунктами — 8 px (правило 8; было 2 px), «Выход» отодвинут от соседнего пункта ещё на 16 px */
  .knav, .knav--grouped { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 0 12px 6px; gap: 8px; }
  .knav__group, .knav__group--2, .knav__group--3 { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; }
  .knav__gap, .knav__gap:nth-of-type(2) { flex: 0 0 8px; min-width: 8px; }
  /* min-width: короткий пункт «API» (раздел «Подключение программы») без него был 43 px в ширину.
     flex: 0 0 auto (проверка 26.09, H4): пункт в ленте не сжимается. С flex-shrink 1 пункт сжимался до min-width 44 px,
     подпись вылезала на соседей, и нажатие по подписи «Персональные данные» попадало в «Выход» */
  .knav__i { flex: 0 0 auto; min-height: 44px; min-width: 44px; }
  :is(.knav, .knav__group) > [data-act="exit"] { margin-left: 16px; }
  .kbar__rule { height: 6px; }
  body.k-classic #kwork { margin-top: 12px; }

  /* ---- CRM: колонка становится шапкой в три строки ---- */
  .kshell { padding: 6px; gap: 6px; }
  /* лента разделов — нижней строкой: она одна остаётся на месте закреплённой шапки (П3, skins.css) */
  .kside {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo bal" "svc svc" "nav nav";
    align-items: center; gap: 8px; padding: 6px 0;
  }
  /* логотип и «На рынке с …» (П2) — одной строкой в области logo */
  .kside__brand { grid-area: logo; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0 12px; }
  .kside__logo { font-size: 22px; }
  .kside__nav { grid-area: nav; display: flex; overflow-x: auto; min-width: 0; gap: 8px; }
  .kside__grp, .kside__grp--tail { display: flex; flex: 0 0 auto; margin: 0; border: 0; padding: 0; overflow: visible; gap: 8px; }
  .kside__item { width: auto; flex: 0 0 auto; min-height: 44px; min-width: 44px; white-space: nowrap; }
  .kside__foot { display: contents; }
  .kside__foot .kbar__balance { grid-area: bal; justify-self: end; width: auto; min-height: 44px; padding: 5px 12px; margin-right: 10px; }
  .kside__svc { grid-area: svc; flex-wrap: nowrap; padding: 0 10px; gap: 8px; }
  .kside__svc > [data-act="exit"] { margin-left: 16px; }
  /* город и роль (П1, П4) — своей строкой во всю ширину, колокол — рядом с карточкой пользователя */
  .ksearch {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "q go" "place place" "user bell";
    gap: 8px; padding: 8px;
  }
  .ksearch > .kbar__search { grid-area: q; min-height: 44px; }
  .ksearch > [data-act="search"] { grid-area: go; min-height: 44px; }
  .ksearch > .kplace { grid-area: place; justify-self: start; }
  /* блок города и роли — своей строкой во всю ширину: предел 340 px (skins.css, шаг В.13) здесь не нужен */
  .ksearch > .kplace--mode { max-width: 100%; }
  .ksearch > .kbell { grid-area: bell; justify-self: end; }
  .ksearch .kbar__user { grid-area: user; padding: 4px 8px; gap: 1px; text-align: left; }
  /* две панели рядом в 370px нечитаемы (правило «1fr 1fr» для CRM перебивало перенос) */
  body.k-crm .kwork--2 { grid-template-columns: minmax(0, 1fr); }

  /* ---- Минимал: рельса не меняется, мелкие цели верхней строки добраны до 44px ---- */
  .kmin__top { gap: 8px; }
  .krail__i[data-act="exit"] { margin-top: 8px; }
  .kmin__top .klogo { font-size: 26px; }
  .kmin__balance { min-height: 44px; }

  /* ---- Современный ---- */
  .appbar { padding: 10px 14px 12px; }
  .appbar__row { gap: 8px; }
  .mark { flex-direction: row; align-items: baseline; gap: 10px; min-height: 44px; align-content: center; flex-wrap: wrap; }
  .mark__k { font-size: 24px; line-height: 44px; }
  .mark__s { margin-top: 0; }
  /* знак и «На рынке с …» — одной строкой; город и роль (П1, П4) — 44 px */
  .appbar__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .kplace--mini > :is(.kplace__city, .kplace__role) { min-height: 44px; }
  .appsearch input, .appsearch .btn { min-height: 44px; }
  .who__row { gap: 2px 10px; }
  .appbar__acts { gap: 8px; }
  .appbar__acts .mini { min-height: 44px; min-width: 44px; justify-content: center; }
  .appbar__acts > #btnExit { margin-left: 8px; }
  /* лента плиток — строка меню современного вида: на телефоне закреплена она, а не шапка (П3, У10; закрепление — выше) */
  .sections { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 10px 14px 0; }
  .section { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; }
  .section__s { white-space: nowrap; }
  .win__head { padding: 8px 14px; }
  .win__tabs { flex-wrap: nowrap; overflow-x: auto; }
  .wtab { flex: 0 0 auto; white-space: nowrap; }

  /* ---- окно «Доставки»: строки мельче, окно во всю ширину с полями 8 px ---- */
  .kdeliv-pop { padding: 10px 14px 10px 10px; }
  .kdeliv__i { font-size: 14px; gap: 10px; }
}