/* Рабочий стол парфюмера — раскладка стола на ките ERP (Елена 11.11.2026, «1 а»: стол берёт стили ERP).
 * Цвета, шрифт, кнопки, поля, чипы, таблицы, тост — из /lab/kit/tokens.css и kit.css (brandbook ERP, правила 11–13);
 * здесь только раскладка экранов стола на токенах кита. Монохром: металл — только чертой «где я» и под ссылкой,
 * красный и зелёный — у статусов. Рамок, скруглённых коробок и подложек-карточек нет: блоки делит линия и отступ.
 * Скруглений нет нигде (Елена 11.11: «убираем все округлости»): кит не правим — перекрываем для стола ниже.
 * Имена классов кита (.side, .chip, .pair, .toast, .tab, .st, .row, .rows, .field, .check, .btn, .tbl, .page, .card)
 * стол берёт по назначению кита; свои классы с такими именами переименованы (.t5, .nst, .arow).
 * Хвост Л1, дизайн (Елена 11.11: «фон какой-то непонятный и дизайна и выделения элементов нет», «более чёрные заголовки»):
 * своего фона нет ни у страниц, ни у строк — только --paper; серые подложки (строка, выбранная в конструкторе; столбики
 * «по годам» сплошным серым) сняты. Выделение — как ERP: «где я» — чертой металла, включённый чип и сортировка — чёрным
 * 500 с чертой металла, строка-ссылка под мышью — --card, фокус с клавиатуры — линия. Таблицы — 13 px, как .rt ERP.
 * Лист (карточка склада) — как лист ERP: затемнение под ним, на телефоне снизу; «Назад», Esc и затемнение его закрывают.
 * 13.11 (её «дизайн не по бб — фон не белый»): фон белый у самого документа и только светлая схема — как meta color-scheme
 * ERP (тёмная тема системы и «тёмные сайты» браузера стол не перекрашивают); таблицы — реестр ERP (.rt): сетка «как в
 * Excel» --line, поля ячеек 8 px, строка названий 44 px. */

/* фон — белый у документа, не только у body; светлая схема — как <meta name="color-scheme" content="light"> ERP */
:root { color-scheme: only light; }
html { background: var(--paper); }

/* без скруглений — у кнопок, выбранного чипа, полей, окон, тоста, полос «по годам» */
.app *, .ai, .ai *, .drawer, .drawer *, .toast, .login *, .rt-menu, .rt-menu * { border-radius: 0 !important; }   /* меню колонки — вне .app, у body */

/* фокус с клавиатуры у полей стола — их линия чернеет; черта металла кита под полем не нужна */
:is(input, select, textarea):focus-visible { box-shadow: none; }

.hidden { display: none !important; }
.none { color: var(--ink-3); }
.up { color: var(--ok-ink); }
.down { color: var(--bad-ink); }
.have { color: var(--ok-ink); font-weight: 500; }
.have.lnk { cursor: pointer; }
button.have { padding: 0 4px; border: 0; background: none; font: inherit; font-weight: 500; }

/* ---------- каркас: меню слева 240 px, содержимое по сетке 8 px, поля 20 px телефон / 40 px комп ---------- */

.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; overflow-x: clip; }
.app > .side { position: sticky; top: 0; align-self: start; }
.side-logo svg, .login-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.mbtn { display: none; }
.main { min-width: 0; padding: 32px var(--gutter) 64px; }

.hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: 0 0 24px; }
.hdr .page-title { margin: 0; }
.hdr .aihdr { margin-left: auto; }
.meta { color: var(--ink-2); }
.desc { max-width: 960px; margin: 0 0 8px; }
.accs { color: var(--ink-2); }

/* название блока — кикер ERP: 11 px капсом, 500, чёрным */
.sec {
  margin: 40px 0 16px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--caps);
  text-transform: uppercase;
  color: var(--kicker);
}
.sec-sub { margin-top: 8px; }

.fbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 16px; }

/* поиск над списком — поле кита, одной строкой */
.lsearch { max-width: 440px; }
#a-chips:not(:empty), .lchips { margin-bottom: 16px; }

/* включённый чип — чёрным 500 с чертой металла под словом, без заливки: квадратная чёрная плашка кита без скругления
   читалась коробкой (её 11.11: «убираем все округлости»; диспетчер стола: «черта металлом под включённым фильтром или чипом») */
.chip input:checked + span {
  background: none;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--metal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* широкие таблицы листаются вбок внутри своей обёртки, полос нет */
.wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.wrap::-webkit-scrollbar { display: none; }
/* таблица влезает (.is-fit, colmenu.js) — у обёртки нет своей прокрутки, строка названий прилипает к верху окна, как в
   реестрах ERP; шире окна и справа есть ещё колонки (.is-more) — правый край растворяется: обрывка буквы у края нет
   (UX Л4 11.11: «на телефоне у правого края шапки торчат 2 px буквы», «шапка не прилипает») */
.wrap.is-fit { overflow: visible; }
.wrap.is-fit .tbl thead th { position: sticky; top: 0; z-index: 3; background: var(--paper); }   /* таблица — separate: линия под названиями прилипает вместе с ними */
/* шире окна — строка названий держится у верха окна сдвигом --th-y (colmenu.js, как .rt ERP: --rt-head-y); sticky здесь —
   только чтобы названия лежали поверх строк (z-index), прилипание внутри прокрутки вбок не работает */
.wrap:not(.is-fit) > .tbl > thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); transform: translateY(var(--th-y, 0px)); }
.wrap.is-more {   /* is-: имя кита (.rt-wrap.is-more); голое .more — серое «ещё» карточки, красило всю таблицу */
  -webkit-mask-image: linear-gradient(to left, transparent, #000 24px);
  mask-image: linear-gradient(to left, transparent, #000 24px);
}
/* фокус с клавиатуры на названии колонки — линия металла по низу ячейки (линия фокуса кита), а не черта под словом:
   черта под словом — знак отсортированной или отфильтрованной колонки (UX Л4 11.11) */
:is(.thb, .rt-head):focus-visible { box-shadow: none; }
th:has(> :is(.thb, .rt-head):focus-visible) { box-shadow: inset 0 -2px 0 var(--metal); }
/* «+» (добавить) — значок кита по краю текста, как «Больше» в ERP */
.btn-plus { justify-content: flex-start; width: auto; min-width: var(--tap); font-size: 24px; line-height: 1; }

/* таблицы стола — реестр ERP (.rt кита, брендбук: правило 14, «Таблица: строка названий»): текст 13 px; сетка «как в
   Excel» — линии --line между строками и колонками, без рамки вокруг; поля ячеек 8 px, как .rt-fit ERP на компе;
   строка названий — 44 px, слово по середине, чёрная линия под ней. Названия колонок — 11 px капсом кита, как .rt-fit
   (12 px расширяли широкие таблицы аналитики за край окна 1440) */
.tbl { border-collapse: separate; border-spacing: 0; }
.main .tbl { font-size: var(--t-nav); }
.tbl :is(th, td) { padding-left: 8px; padding-right: 8px; }
.tbl :is(th, td):last-child { padding-right: 0; }   /* у последней колонки поля справа нет (брендбук ERP, «Список») */
.main :where(.tbl) td { padding-top: 8px; padding-bottom: 8px; }   /* :where — свои поля таблиц ниже (.rtab, .ftab) не теряются */
.tbl td { border-bottom-color: var(--line); }
.tbl :is(th, td) + :is(th, td) { border-left: 1px solid var(--line); }
.tbl th { height: var(--tap); padding-top: 0; padding-bottom: 0; vertical-align: middle; }
/* строка под мышью — подсветка только у строки-ссылки, как в реестрах ERP (кит красит любую строку .tbl); под открытым
   листом строки не подсвечиваются — нажатие туда только закрывает лист */
@media (hover: hover) {
  .main .tbl tbody tr:hover { background: none; }
  html:not(.is-sheet-open) .main .tbl tbody tr:is(.strow, .frow, .arow.x, .rrow):hover td { background: var(--card); }
}
.frow { cursor: pointer; }
.tbl tbody tr[tabindex] { cursor: pointer; }
.tbl tbody tr[tabindex]:focus-visible { box-shadow: none; }
.tbl tbody tr[tabindex]:focus-visible > td { box-shadow: inset 0 -2px 0 var(--metal); }
/* сортировка — кнопка в названии колонки (Tab с клавиатуры); нажимается вся ячейка названия — 44 px; слово по середине,
   на одной линии с названиями несортируемых колонок. Колонка, по которой отсортировано, — чёрным 500 с чертой металла,
   как включённая колонка ERP (.rt-head.is-on) */
.thb {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  vertical-align: middle;
  cursor: pointer;
}
th.on .thb {
  padding-right: 12px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--metal);
  text-underline-offset: 4px;
}
/* стрелка — в поле справа от слова, только у отсортированной колонки: соседнее название она не задевает */
.tha { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
/* состояние экрана «не загрузилось» — заголовок и «Повторить»; на компе — по левому краю, как содержимое (брендбук ERP) */
@media (min-width: 1024px) {
  .main .st { text-align: left; }
}

/* ---------- задания и ароматы: без рамок, разделены линией и отступом ---------- */

.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(224px, 100%), 1fr)); gap: 0 24px; }
.task {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  text-decoration: none;
}
.task .code { font-size: var(--t-btn); letter-spacing: var(--caps); color: var(--ink-2); }
.task b { font-weight: 500; }
.task .small { font-size: var(--t-btn); color: var(--ink-2); }
.task .tf { font-size: var(--t-btn); color: var(--ink-3); }
.task.done .tf { color: var(--ok-ink); }
@media (hover: hover) {
  .task:hover b { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
}

/* ссылка в ячейке и карточке — черта металла */
.ing { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; cursor: pointer; }
.ing:hover { text-decoration-thickness: 2px; }

/* ---------- карточка флакона: формулы ---------- */

.fcard { border-top: 1px solid var(--line-soft); }
.fcard:last-child { border-bottom: 1px solid var(--line-soft); }
/* сведения формулы переносятся внутри своей строки, стрелка ▾/▴ всегда справа в первой строке */
.fhead { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 16px; min-height: var(--tap); padding: 12px 0; cursor: pointer; }
.fmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; flex: 1 1 auto; min-width: 0; }
.fhead .fn { font-weight: 500; }
.fd, .fnum { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fs { color: var(--ink-2); }
.fhead .arr { flex: none; margin-left: auto; color: var(--ink-3); }
.fbody { display: none; padding: 0 0 24px; }
.fcard.open .fbody { display: block; }

.ftab td { padding-top: 8px; padding-bottom: 8px; }
.fcard .ftab td { vertical-align: middle; }
.ftab .g { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ftab .pc { text-align: right; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* граммы в строке формулы — тоже линия, без рамки; 16 px — iOS не увеличивает страницу */
.ftab input {
  width: 112px;
  height: 36px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 400 var(--field-font) var(--font);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ftab input:focus { outline: none; border-bottom-color: var(--ink); }
.ntag { display: inline-block; margin: 0 12px 2px 0; color: var(--ink-2); }
.ntag.n { color: var(--ink-3); }
/* значок ✕ в карточке (span, ячейка) — серым; строка аналитики tr.arow.x («разворачивается») — не он: голое .x красило
   всю строку в --ink-3, и таблицы аналитики читались погашенными (UX 11.11, хвост Л1) */
:is(span, td).x { color: var(--ink-3); }
.x[data-delline]:hover { color: var(--bad-ink); }

/* строки ряда — по верху: красная строка «Введите сырьё» под полем растит только его; кнопка 48 px — по линии полей */
.add { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 24px; margin-top: 8px; }
.add .field { margin: 0 0 8px; }
.add .btn { margin-top: 12px; }
.add .add-name { flex: 1 1 260px; }
.add .add-g { width: 128px; }

.tot { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 24px; }
.tot div { font-size: var(--t-label); font-weight: 500; letter-spacing: var(--caps); text-transform: uppercase; color: var(--kicker); }
.tot b {
  display: block;
  margin-top: 4px;
  font-size: var(--t-title);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- карточка флакона: идея ---------- */

#top5 { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.t5 { display: inline-flex; align-items: baseline; gap: 6px; }
.t5 .r { font-weight: 500; }
.t5 .n { font-size: var(--t-btn); color: var(--ink-3); }
.wrap-plan { margin-top: 16px; }
.plan { min-width: 1000px; table-layout: fixed; }
.plan th { white-space: normal; }
.plan :is(th, td):first-child { padding-right: 0; }
.plan tr.tier td {
  padding: 24px 0 8px;
  border-bottom: 0;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--caps);
  text-transform: uppercase;
  color: var(--kicker);
}
.nm { font-weight: 500; text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.nst { display: block; margin-top: 4px; font-size: var(--t-btn); color: var(--ink-2); }
.stk .stsub { display: none; }       /* бренд · поставщик под названием — только на телефоне */
/* комп: склад и каталог сырья — по ширине содержимого, как «Сырьё» ERP (.rt, 2.98: «зачем на десктоп растягивать
   таблицы до конца, если данных нет») */
@media (min-width: 1024px) {
  .main :is(.stk, .mtl) { width: auto; min-width: 720px; }   /* «ничего не нашлось» — строка названий не сжимается в обрывок */
}
.stk tr.strow { cursor: pointer; }    /* строка склада целиком открывает карточку позиции */
/* склад и каталог — значение по середине строки, как «Сырьё» ERP (.rt): остаток и единица — напротив названия с подписью */
:is(.stk, .mtl) td { vertical-align: middle; }
.nst b { font-weight: 500; color: var(--ink); }
.pos3 { display: block; margin-top: 2px; font-size: var(--t-btn); color: var(--ink-3); }
.infm { display: block; margin-top: 8px; font-size: var(--t-btn); color: var(--ink-2); }
.infm b { font-weight: 500; color: var(--ink); }
.mini, .mat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 8px; font-size: var(--t-nav); line-height: 1.3; }
.mini .t, .mat .t { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.mini .r { font-weight: 500; }
.mini .cnt { color: var(--ink-2); }
.mat a.t { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.mat.sel, .mini.sel { font-weight: 500; }
/* «+» — знак без рамки и подложки */
.plus { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; font-weight: 500; cursor: pointer; }
.plus[data-addnote] { cursor: default; }
@media (hover: hover) {
  .plus[data-pick]:hover { text-decoration: underline; text-decoration-color: var(--metal); text-underline-offset: 4px; }
}
.more { font-size: var(--t-btn); color: var(--ink-2); cursor: pointer; user-select: none; }

/* выбранное для формулы — строка у низа экрана, без рамки: край даёт линия */
.tray {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 16px;
  padding: 8px 0;
  background: var(--paper);
  box-shadow: 0 -1px 0 var(--line);
}
.tray.show { display: flex; }
.tray .tt { font-weight: 500; }
.tray .ti { display: inline-flex; align-items: center; gap: 8px; }
.tray .ti span { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: var(--tap); color: var(--ink-3); cursor: pointer; }
.tray .btn { margin-left: auto; }

details.fix { margin-top: 40px; border-top: 1px solid var(--line-soft); }
details.fix > summary { min-height: var(--tap); padding: 12px 0; font-weight: 500; cursor: pointer; }
details.fix .in { padding: 0 0 16px; }
.fixsel { margin: 0 0 16px; }

select {
  height: 40px;
  padding: 4px 24px 4px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 400 var(--field-font) var(--font);
}
select:focus { outline: none; border-bottom-color: var(--ink); }
textarea {
  width: 100%;
  min-height: 72px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 400 var(--field-font)/1.5 var(--font);
  resize: vertical;
}
textarea::placeholder { color: var(--ink-3); }
textarea:focus { outline: none; border-bottom-color: var(--ink); }

/* ---------- окна справа: карточка склада и ИИ — без рамки, край даёт тень; на телефоне во всю ширину ---------- */

.drawer, .ai {
  position: fixed;
  top: 0;
  right: 0;
  max-width: 100%;
  height: 100dvh;
  background: var(--paper);
  box-shadow: -8px 0 32px rgba(0, 0, 0, .06);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.drawer:not(.show), .ai:not(.show) { box-shadow: none; }
.drawer.show, .ai.show { transform: none; }
.drawer { z-index: 20; width: 420px; padding: 24px 40px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
/* лист как ERP (.drawer.esheet): затемнение под ним — как .sheet-scrim (--scrim), страница под листом читается фоном,
   а не продолжением листа; на телефоне — снизу. Включает класс esheet, потому что закрытие по затемнению, Esc и «Назад»
   делает скрипт страницы (list.js); лист карточки аромата (card.js) — прежний, пока его скрипт этого не умеет */
.drawer.esheet.show { box-shadow: -8px 0 32px rgba(0, 0, 0, .06), 0 0 0 100vmax var(--scrim); }
button.cls { padding: 0; border: 0; background: none; font-family: inherit; line-height: 1; }
.drawer::-webkit-scrollbar { display: none; }
.drawer h3 { margin: 0 0 8px; padding-right: 40px; font-size: var(--t-title); font-weight: 500; overflow-wrap: anywhere; }
.drawer .k { margin-top: 16px; font-size: var(--t-label); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
.drawer .v { margin-top: 4px; overflow-wrap: anywhere; }
.drawer .sec { margin: 0 0 8px; }
.cls {
  position: absolute;
  top: 12px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--ink-2);
  font-size: 18px;
  cursor: pointer;
}
.cls:hover { color: var(--ink); }

.ai { z-index: 25; display: flex; flex-direction: column; width: 460px; }
.ai .top { position: relative; padding: 24px 24px 16px; border-bottom: 1px solid var(--line); }
.ai .top h3 { margin: 0; padding-right: 40px; font-size: var(--t-title); font-weight: 500; }
.ai .ctx { margin-top: 8px; }
.ai .qp { display: flex; flex-direction: column; margin-top: 8px; }
.ai .qp span { padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-nav); color: var(--ink-2); cursor: pointer; }
.ai .qp span:hover { color: var(--ink); }
.ai .msgs { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 16px 24px; overflow-y: auto; scrollbar-width: none; }
.ai .msgs::-webkit-scrollbar { display: none; }
.ai .m { max-width: 90%; white-space: pre-wrap; }
.ai .m.u { align-self: flex-end; text-align: right; font-weight: 500; }
.ai .m.s { align-self: flex-start; color: var(--ink-3); }
.ai .m.a { align-self: flex-start; max-width: 100%; }
.ai .m .small { font-size: var(--t-btn); font-weight: 400; }
.ai .inp { display: flex; align-items: flex-end; gap: 16px; padding: 12px 24px 24px; border-top: 1px solid var(--line); }
.ai .inp textarea { flex: 1; min-height: 64px; max-height: 200px; }

/* ---------- шаблоны аккордов (№ 275): реестр «Шаблон · Источник», фильтры — меню на названиях колонок, группы по типу
   заголовком над своими строками; формула — в листе ---------- */

.rtbl td:last-child { color: var(--ink-2); }
.rtbl .rc1 { width: 68%; }
.rtbl .rc2 { width: 32%; }
.rtbl tr.rmore td { padding: 4px 0 8px; border-bottom: 0; }
/* комп: таблица не во всю ширину (2.98: «зачем на десктоп растягивать таблицы до конца»), но постоянной ширины —
   «Источник ▾» не прыгает при смене фильтра (UX № 275: x 665 → 472 → 722) */
@media (min-width: 1024px) {
  .main .rtbl { width: min(100%, 880px); table-layout: fixed; }
}
/* заголовок группы («База», «Аккорд», «Формула целиком») — кикер ERP над своими строками; линия под ним серая —
   чёрная линия только под строкой названий, иначе две чёрные читались двойной шапкой (UX № 275) */
.rtbl tr.rgroup td {
  padding: 24px 0 8px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--caps);
  text-transform: uppercase;
  color: var(--kicker);
}
.rtbl tbody tr.rgroup:first-child td { padding-top: 16px; }
/* заголовки групп и уровней над строками — по краю текста ячеек (поле 8 px, как у ячеек реестра) */
.tbl tr:is(.rgroup, .rmore, .rtier, .tier) td { padding-left: 8px; padding-right: 8px; }
.rwarn { color: var(--bad-ink); cursor: help; }
.drawer .rsrc-l { margin: 0 0 16px; }

/* меню названия колонки (colmenu.js, кит .rt-head/.rt-menu): вид кита — слово и ▾ по середине строки названий 44 px;
   на телефоне меню — над низом экрана (нижней панели у стола нет) */
@media (max-width: 1023px) {
  .rt-menu { bottom: calc(8px + var(--safe-bottom)); max-height: min(60dvh, calc(100dvh - 80px)); }
}

.rtab { width: auto; min-width: 0; }
.rtab td { padding: 4px 8px; }   /* поле 8 px — граммы не прилипают к линии колонки (сетка реестра, UX 13.11) */
.rtab td.g { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rtab tr.rtier td {
  padding: 16px 8px 4px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--caps);
  text-transform: uppercase;
  color: var(--kicker);
}
.rtab tr.rtier:first-child td { padding-top: 8px; }

/* ---------- аналитика ---------- */

.atab { min-width: 900px; }
/* телефон и узкий экран — по содержимому: «Все ароматы» и «Ноты по годам» не растягиваются до 900 px пустыми колонками
   (адаптив 14.11) */
@media (max-width: 1023px) {
  .atab { min-width: 0; }
}
/* комп: таблица аналитики — в ширину окна, как .rt-fit ERP: название колонки переносится по пробелам, а не растягивает
   таблицу за край («Верх · сердце · база, %», «Характерные аккорды») */
@media (min-width: 1024px) {
  .atab th { white-space: normal; hyphens: manual; }
}
.atab th.srt { cursor: pointer; user-select: none; }
.atab th.n, .atab td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atab td { font-size: var(--t-nav); }
.atab tr.arow.x { cursor: pointer; }
.atab tr.arow.open td { border-bottom-color: transparent; }
.atab .ac { display: inline-block; margin: 0 12px 4px 0; white-space: nowrap; }
.atab .ac i { font-style: normal; font-size: var(--t-btn); color: var(--ink-3); }
.atab .ac b { font-size: var(--t-btn); font-weight: 500; }
.atab.small { min-width: 0; }
/* «Инсайты»: строки — как у остальных таблиц (8 px), строка названий — 44 px; названия колонок переносятся по пробелам —
   на телефоне таблица без обёртки, в экран (UX 13.11: колонка ★ уходила за край 390) */
.atab.small th { white-space: normal; hyphens: manual; }
@media (max-width: 600px) {
  /* шесть колонок «Растущих» и «Уходящих аккордов» с полями 8 + 8 шире экрана на 16 px — поля 6 px, вбок не листается */
  .atab.small :is(th, td) { padding-left: 6px; padding-right: 6px; }
  .atab.small :is(th, td):last-child { padding-right: 0; }
}
/* узкий Android (360): «Растущие аккорды» шире экрана на 24 px — поля 4 px, у «#» слева без поля (адаптив 14.11) */
@media (max-width: 374px) {
  .atab.small :is(th, td) { padding-left: 4px; padding-right: 4px; }
  .atab.small :is(th, td):first-child { padding-left: 0; }
  .atab.small :is(th, td):last-child { padding-right: 0; }
}
.atab tr.exp .sk { margin: 4px 0; }
/* раскрытая строка не двигает колонки: её содержимое в расчёт ширин не входит и встаёт во всю ячейку («Все ароматы» на
   компе: «#» 53 → 30 px, «Аромат» 670 → 679 при раскрытии; адаптив 14.11) */
.atab tr.exp td[colspan] > * { width: 0; min-width: 100%; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; }
/* названия блоков в развёрнутой строке — кикер ERP: чёрным 500, не серым (её 11.11: «более чёрные заголовки») */
.exp .k { margin-top: 12px; font-size: var(--t-label); font-weight: 500; letter-spacing: var(--caps); text-transform: uppercase; color: var(--kicker); }
.exp .k:first-child { margin-top: 0; }
.exp .v { max-width: 760px; margin-top: 4px; }
.plist { margin: 8px 0 0; padding-left: 20px; }
.plist li { margin: 4px 0; }
/* ароматов по годам — столбики металлом (первая серия графика, брендбук ERP 08.11.2026), под мышью — чёрный; сплошной
   светло-серый блок читался подложкой, а не графиком (её 11.11: «фон какой-то непонятный») */
.bars { display: flex; align-items: flex-end; gap: 1px; height: 120px; margin-top: 8px; border-bottom: 1px solid var(--ink); }
.bars span { flex: 1; min-width: 2px; background: var(--metal); }
.bars span:hover { background: var(--ink); }
.bars-ax { display: flex; justify-content: space-between; margin: 4px 0 16px; font-size: var(--t-btn); color: var(--ink-3); }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 0 40px; margin-top: 8px; }
.ib { padding: 16px 0 24px; border-top: 1px solid var(--line-soft); }
.ib h4 { margin: 0 0 8px; font-size: var(--t-body); font-weight: 500; }

/* ---------- конструктор ---------- */

.crow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 760px; min-height: var(--tap); padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.crow select { min-width: 220px; }
/* пусто — название поля «Аккорд» серым, как название внутри поля кита; выбранный аккорд — чёрным */
.crow select.empty { color: var(--ink-3); }
.crow select option { color: var(--ink); }
/* «Вес» вплотную перед ползунком, «×1» и «×» — одной строкой, не отрываются друг от друга и на телефоне */
.cwg { flex: 1 1 260px; display: flex; align-items: center; min-width: 0; }
.crow .cwl { flex: none; margin-right: 8px; font-size: var(--t-nav); color: var(--ink-2); }
.crow .cwv { flex: none; min-width: 40px; margin-left: 8px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.crow .cx { flex: none; display: inline-flex; align-items: center; justify-content: flex-start; width: var(--tap); height: var(--tap); margin-left: 24px; padding: 0; border: 0; background: none; color: var(--ink-3); font-family: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.crow .cx:hover { color: var(--bad-ink); }
/* ползунок «Вес»: трек — линия 2 px, бегунок — чёрный квадрат 14×14, без скругления */
.crow .cw {
  flex: 1;
  min-width: 100px;
  height: 24px;
  margin: 0;
  background: transparent;
  accent-color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.crow .cw::-webkit-slider-runnable-track { height: 2px; border: 0; border-radius: 0; background: var(--line); }
.crow .cw::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6px; border: 0; border-radius: 0; background: var(--ink); -webkit-appearance: none; appearance: none; }
.crow .cw::-moz-range-track { height: 2px; border: 0; border-radius: 0; background: var(--line); }
.crow .cw::-moz-range-progress { height: 2px; background: var(--line); }
.crow .cw::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 0; background: var(--ink); }
#con-add-accord { margin-top: 8px; }
.cfil { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 24px; margin-top: 24px; }
.cfil .field { width: 136px; margin: 0 0 8px; }
.cfil .cf-q { width: 224px; }
.cfil .chips { flex-basis: 100%; margin: 0 0 8px; }   /* «Позиция» — своей строкой и на телефоне, не между полями */
.cempty { padding: 32px 0; }
.chead { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin: 16px 0 8px; }
.cbar { display: flex; height: 10px; min-width: 2px; overflow: hidden; }
.cbar span { display: block; height: 100%; }
.ctab td:nth-child(5) { width: 170px; min-width: 120px; }
.ctab td { vertical-align: middle; }   /* флажок, полоса распределения и числа — по середине строки */
/* выбранная строка — чёрный флажок, без серой подложки строки (своего фона у строк нет) */
/* флажок строки — квадрат 16×16 без рамки: пустой серый, отмеченный чёрный с белой галочкой */
.ctab input.pk {
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: var(--control-off) no-repeat center / 16px 16px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.ctab input.pk:checked {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}
/* флажок в названии колонки: выбрана часть строк — чёрный с белой чертой, как «часть выбрана» флажка кита */
.ctab input.pk:indeterminate {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}
.ctag { display: inline-block; margin: 0 12px 4px 0; font-size: var(--t-btn); white-space: nowrap; }

/* ---------- вход — раскладка входа ERP (.login, .login-box, .login-logo кита); поле — линия, название внутри ---------- */

.login .f { position: relative; display: block; margin: 0 0 16px; }
.login .f input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 22px 0 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 400 var(--field-font)/1.25 var(--font);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur) var(--ease);
}
.login .f input::placeholder { color: transparent; }
.login .f input:focus { outline: none; border-bottom-color: var(--ink); }
.login .f input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--paper) inset; }
.login .f span {
  position: absolute;
  left: 0;
  top: 16px;
  font-size: var(--t-body);
  line-height: 1.2;
  color: var(--ink-3);
  pointer-events: none;
  transition: top var(--dur) var(--ease), font-size var(--dur) var(--ease);
}
.login .f input:focus + span, .login .f input:not(:placeholder-shown) + span, .login .f input:-webkit-autofill + span {
  top: 7px;
  font-size: var(--t-label);
  letter-spacing: var(--caps);
  text-transform: uppercase;
}
.login .f.bad input { border-bottom-color: var(--bad); }
.login .err { margin: -10px 0 16px; font-size: var(--t-btn); color: var(--bad-ink); }
.login .net { margin-top: 6px; font-size: var(--t-btn); color: var(--bad-ink); }
.login .note { margin-bottom: 16px; font-size: var(--t-btn); color: var(--ink-2); }

/* ---------- телефон и узкий экран: меню — под кнопкой «Меню», окна — во всю ширину, таблицы — вбок в обёртке ---------- */

@media (max-width: 1023px) {
  .app { display: block; }
  .app > .side {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    padding: 8px var(--gutter);
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .side-logo { width: 84px; margin: 0; }
  .side .mbtn { display: inline-flex; margin-left: auto; }
  .side-group { display: none; width: 100%; }
  .side.open .side-group { display: block; }
  .side.open .side-group:first-of-type { margin-top: 8px; }
  .side-item { min-height: var(--tap); }
  .main { padding: 24px var(--gutter) 64px; }
  .hdr { margin-bottom: 16px; }   /* заголовок раздела на телефоне — 24 сверху и 16 снизу (брендбук ERP, разд. 4) */
  .hdr .aihdr { margin-left: 0; }
  /* строка таблицы — цель нажатия пальцем, не ниже 44 px (как .rt ERP на телефоне) */
  .main .tbl tbody td:not([colspan]) { height: var(--tap); }

  .drawer, .ai { width: 100%; }
  .drawer { padding: 16px var(--gutter) 24px; }
  /* лист на телефоне — снизу, как нижний лист ERP (брендбук, «Нижний лист»), без скругления и ручки; выше шапки не встаёт */
  .drawer.esheet {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - var(--bar-h));
    padding: 16px var(--gutter) calc(24px + var(--safe-bottom));
    transform: translateY(100%);
  }
  /* открыт — на месте: правило «снизу» (.drawer.esheet) того же веса и ниже в файле, без этой строки лист оставался за
     нижним краем, видно было одно затемнение */
  .drawer.esheet.show { transform: none; box-shadow: var(--shadow-sheet), 0 0 0 100vmax var(--scrim); }
  .drawer.esheet .cls { top: 4px; right: 4px; }
  .ai .top, .ai .msgs, .ai .inp { padding-left: var(--gutter); padding-right: var(--gutter); }

  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .atab tr.exp td:last-child > * { width: calc(100vw - 2 * var(--gutter) - 57px); min-width: 0; }   /* 57 — прибитая «#» 48, линия 1, поле 8 */
  /* раскрытая строка в таблице, пролистанной вбок, — содержимое держится у края прибитой колонки «#», а не уезжает
     влево за экран вместе с широкой ячейкой (UX 13.11: на месте раскрытия была пустая полоса) */
  .wrap .atab tr.exp td[colspan] > * { position: sticky; left: 57px; }

  /* первая колонка прибита; у таблиц с узким номером (#, ✕, ☑) — и колонка названия рядом с ним.
     Прибитые ячейки — на белом и поверх листаемых: обрезки соседних колонок под ними не видны */
  /* прибитая колонка — край линией сетки, как .rt-pin ERP: линия соседней колонки уезжает под неё при листании.
     Узкие (#, ✕, ☑) — 48 px: поля ячейки 8 + 8 и номер до четырёх цифр */
  .wrap .tbl :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
  .wrap .tbl.ix :is(th, td):first-child { width: 48px; min-width: 48px; max-width: 48px; }
  .wrap .tbl.ix :is(th, td):nth-child(2) { position: sticky; left: 48px; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
  .wrap .plan.ix :is(th, td):nth-child(2) { left: 25px; }
  .wrap .ftab.ix :is(th, td):nth-child(2) { min-width: 160px; }
  .wrap .tbl.ix2 :is(th, td):nth-child(2) { width: 48px; min-width: 48px; max-width: 48px; }
  .wrap .tbl.ix2 :is(th, td):nth-child(3) { position: sticky; left: 96px; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
  .wrap .tbl thead th:first-child, .wrap .tbl.ix thead th:nth-child(2), .wrap .tbl.ix2 thead th:nth-child(3) { z-index: 2; }
  /* сдвинутая вниз строка названий: прибитые названия — поверх уезжающих вбок */
  .wrap:not(.is-fit) > .tbl > thead th:first-child, .wrap:not(.is-fit) > .tbl.ix > thead th:nth-child(2),
  .wrap:not(.is-fit) > .tbl.ix2 > thead th:nth-child(3) { z-index: 3; }
  .wrap .tbl td[colspan] { box-shadow: none; }   /* заголовок группы во всю строку — без края прибитой колонки */
}

/* ---------- телефон до 600 px: прибитые колонки вместе — не шире ~45 % экрана (≈176 px из 390); название переносится
   по словам, остальные колонки листаются вбок в своей обёртке ---------- */

@media (max-width: 600px) {
  .wrap .tbl :is(th, td):first-child:not([colspan]) { width: 150px; min-width: 150px; max-width: 150px; white-space: normal; overflow-wrap: anywhere; }
  .wrap .tbl.ix :is(th, td):first-child:not([colspan]) { width: 48px; min-width: 48px; max-width: 48px; }
  .wrap .tbl.ix :is(th, td):nth-child(2):not([colspan]) { width: 136px; min-width: 136px; max-width: 136px; white-space: normal; overflow-wrap: anywhere; }
  /* конструктор: ☑ 40 + № 40 + нота 112 (поля ячеек 8 + 8) */
  .wrap .tbl.ix.ix2 :is(th, td):is(:first-child, :nth-child(2)) { width: 40px; min-width: 40px; max-width: 40px; }
  .wrap .tbl.ix.ix2 :is(th, td):nth-child(2) { left: 40px; }
  .wrap .tbl.ix.ix2 :is(th, td):nth-child(3) { left: 80px; width: 112px; min-width: 112px; max-width: 112px; white-space: normal; overflow-wrap: anywhere; }
  /* идея аромата: ✕ 25 + нота 150 из 1000 px (ширины колонок задаёт colgroup в долях; отданные 3,5 % — колонкам пар
     и спутников: ни одна листаемая не шире видимой части 175 px) */
  .wrap .plan col:nth-child(2) { width: 15% !important; }
  .wrap .plan col:nth-child(3) { width: 16.5% !important; }
  .wrap .plan col:nth-child(4) { width: 16% !important; }
  .wrap .plan.ix :is(th, td):nth-child(2) { overflow-wrap: anywhere; }
  /* листание вбок встаёт на начало колонки сразу за прибитыми: у их края не торчат обрезки недолистанной колонки */
  .wrap { scroll-snap-type: x mandatory; }
  .wrap .tbl thead th { scroll-snap-align: start; scroll-margin-left: 150px; }
  .wrap .tbl.ix thead th { scroll-margin-left: 184px; }
  .wrap .tbl.ix.ix2 thead th { scroll-margin-left: 192px; }
  .wrap .plan.ix thead th { scroll-margin-left: 175px; }
  .wrap .tbl thead th:first-child, .wrap .tbl.ix thead th:nth-child(2), .wrap .tbl.ix2 thead th:nth-child(3),
  .wrap .ftab.ix thead th:last-child { scroll-snap-align: none; }
  /* конец листания — правый край таблицы: последняя колонка встаёт к нему целиком. Пустого запаса за таблицей нет — у
     конца нет белой полосы, раскрытая строка аналитики не уезжает за левый край (UX 14.11: Б1, В1; прежний запас шириной
     листаемой части ставил узкую последнюю колонку к прибитым, а правее оставалась пустота) */
  .wrap { display: flex; }
  .wrap > .tbl { flex: none; }
  .wrap .tbl thead th:last-child { scroll-snap-align: end; }

  /* склад и каталог сырья: колонки не сжимаются — таблица листается вбок с прибитым названием */
  .wrap :is(.stk, .mtl) :is(th, td):nth-child(2) { width: 128px; min-width: 128px; }
  /* склад — как экран ERP на телефоне (её 03.11): бренд и поставщик строкой под названием, остаток и единица справа;
     таблица во всю ширину, вбок не листается */
  /* шаблоны аккордов — две колонки, влезают в экран: таблица во всю ширину, без прибитой колонки и листания вбок */
  .wrap:has(> .rtbl) { display: block; }
  .wrap .rtbl { width: 100%; }
  .wrap .rtbl :is(th, td):first-child:not([colspan]) { width: auto; min-width: 0; max-width: none; }
  .wrap .rtbl td:first-child { position: static; }   /* строки не прибиты; шапка — прилипает (is-fit) */
  .wrap .rtbl tr.rgroup td { position: static; }
  .wrap:has(> .stk) { display: block; }
  .wrap .stk { width: 100%; }
  .wrap .stk :is(th, td):is(:nth-child(2), :nth-child(3)) { display: none; }
  .wrap .stk :is(th, td):first-child:not([colspan]) { width: auto; max-width: none; }
  .wrap .stk :is(th, td):nth-child(4) { width: 64px; min-width: 64px; }
  .wrap .stk :is(th, td):nth-child(5) { width: 48px; min-width: 48px; }
  .stk .stsub { display: block; }
  .wrap .mtl :is(th, td):nth-child(3) { width: 120px; min-width: 120px; }
  /* «Главные ноты» — ровно видимая часть справа от прибитого «Сырья» (150): у конца листания колонка целиком, не под ним */
  .wrap .mtl :is(th, td):nth-child(4) { width: calc(100vw - 2 * var(--gutter) - 150px); min-width: calc(100vw - 2 * var(--gutter) - 150px); }

  /* аналитика и конструктор: названия колонок переносятся по словам, числа и короткие значения — одной строкой; колонки
     списков и текстов (ls: «Спутники…», «Описание»; в конструкторе — «Источники») — ровно в видимую часть справа от
     прибитых, текст переносится: при листании вбок каждая колонка встаёт к прибитым целиком и последняя не уходит под них
     краем (адаптив 14.11). !important — у «Описания» ширина 34 % в разметке */
  .wrap .atab th { white-space: normal; hyphens: manual; }
  .wrap .atab td:not(.ls):not([colspan]) { white-space: nowrap; }
  .wrap .atab :is(th, td).ls { width: calc(100vw - 2 * var(--gutter) - 184px) !important; min-width: calc(100vw - 2 * var(--gutter) - 184px); }
  .wrap .atab td.ls { overflow-wrap: anywhere; }   /* слово длиннее колонки (на 360) переносится, колонку не раздвигает */
  .wrap .atab td.ls .ac { white-space: normal; }
  .wrap .ctab td:nth-child(5) { width: min(170px, calc(100vw - 2 * var(--gutter) - 192px)); min-width: 0; }
  .wrap .ctab :is(th, td):nth-child(9) { width: calc(100vw - 2 * var(--gutter) - 192px); min-width: calc(100vw - 2 * var(--gutter) - 192px); white-space: normal; }
  .wrap .ctab .ctag { white-space: normal; }
}

/* ---------- главная (Л4, перенесено из <style> home.html 13.11) ---------- */

/* № аромата «Fe.21» — одной строкой: прибитая колонка 56 px (поля ячейки 8 + 8; на 40 номер ломался «Fe.2 / 1»);
   колонка названия прибита рядом */
@media (max-width: 1023px) {
  .wrap .tbl.ix.htab :is(th, td):first-child:not([colspan]) { width: 56px; min-width: 56px; max-width: 56px; white-space: nowrap; overflow-wrap: normal; }
  .wrap .tbl.ix.htab :is(th, td):nth-child(2) { left: 56px; }
  .wrap .tbl.ix.htab thead th { scroll-margin-left: 192px; }
}
/* формула «1 · 12.09» — блоком без переноса; в узкой колонке встают столбиком без пустых строк (UX Л4, находка 1) */
.htab .hf { display: inline-block; margin-right: 16px; white-space: nowrap; }
/* тип записи — одной строкой */
.htab td.ht { white-space: nowrap; }
/* сортировка нажимается по всей ячейке названия колонки, не только по слову (UX Л4, находка 3) */
.htab thead .thb { display: flex; width: 100%; }
.htab thead th.on .thb { padding-right: 0; }
.htab thead th.on .tha { position: static; display: inline-block; margin-left: 4px; transform: none; }
/* на компе колонки не прыгают при наборе поиска (UX Л4, находка 8) */
@media (min-width: 1024px) {
  .htab { table-layout: fixed; }
  .htab th:nth-child(1) { width: 7%; } .htab th:nth-child(2) { width: 22%; } .htab th:nth-child(3) { width: 14%; }
  .htab th:nth-child(4) { width: 28%; } .htab th:nth-child(5) { width: 14%; } .htab th:nth-child(6) { width: 15%; }
}

/* ---------- карточка аромата (Л8, перенесено из <style> card.html 13.11) ---------- */

/* описание стилиста — кикер над текстом, как на сайте под описанием */
.sec-char { margin: 24px 0 8px; }
/* ноты и ингредиенты: тексты источника — с переносами строк как у источника; уровень (верх, сердце, база) — кикер ERP
   над своими строками, по краю текста ячеек */
.ntab td { vertical-align: top; }
.ntab tr.rtier td { padding: 16px 8px 4px; font-size: var(--t-label); font-weight: 500; letter-spacing: var(--caps); text-transform: uppercase; color: var(--kicker); }
.ntab .ntx { white-space: pre-line; }
.ntab .nsrc { margin-left: 4px; text-decoration: none; }
.ntab .nadv { display: block; margin-top: 6px; white-space: pre-line; }
.ntab .nwarn { display: block; }
/* телефон: каждая банка — блоком: название, ниже «Что даёт формуле», «Сколько брать», «Описание» по одному (вбок ничего
   не листается); блоки делит линия, сетки колонок нет — колонок нет */
@media (max-width: 600px) {
  .ntab, .ntab tbody, .ntab tr, .ntab td { display: block; width: auto !important; }
  .ntab thead { display: none; }
  .ntab tr.rtier td { padding: 16px 0 4px; }
  .ntab tr.ning { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .main .ntab tr.ning td { height: auto; padding: 4px 0; border: 0; }
  .ntab tr.ning td:first-child:empty { display: none; }
  .ntab tr.ning td[data-h]:not(:empty)::before { content: attr(data-h); display: block; font-size: var(--t-label); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
}

/* ---------- карточка аромата на телефоне: формула и скетч — в ширину экрана, вбок не листаются (UX В10, адаптив 14.11) ---------- */

@media (max-width: 600px) {
  /* без прибитых колонок и растворения края: таблица в экран */
  .fcard .wrap { display: block; overflow: visible; -webkit-mask-image: none; mask-image: none; scroll-snap-type: none; }
  .fcard .wrap > .tbl.ftab.ix :is(th, td):is(:first-child, :nth-child(2)):not([colspan]) {
    position: static; width: auto; min-width: 0; max-width: none; box-shadow: none; white-space: normal; overflow-wrap: break-word;
  }
  .fcard .wrap > .tbl.ftab.ix :is(th, td):first-child:not([colspan]) { width: 32px; }
  /* скетч (#, ингредиент, граммы) — таблицей в экран; формула — строкой-блоком: № · ингредиент · ✕; ниже граммы и % масел
     с названием колонки над числом; ниже «Закрывает ноты» (как «Новая формула» и «Разбор нот» на телефоне) */
  .fcard .ff, .fcard .ff tbody { display: block; width: auto; }
  .fcard .ff thead { display: none; }
  .fcard .ff tr { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .fcard .wrap > .tbl.ftab.ix.ff td:not([colspan]) { display: block; width: auto; height: auto; padding: 0; border: 0; text-align: left; }
  .fcard .ff td:first-child { grid-column: 1; grid-row: 1; }
  .fcard .ff td:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
  .fcard .ff td.fx { grid-column: 4; grid-row: 1; }
  /* ✕ — цель нажатия во всю колонку 44 × 44, знак у правого края, на одной вертикали со стрелкой ▴ формулы; по высоте —
     на строке названия ингредиента (UX 14.11, В2) */
  .fcard .ff td.fx .x { display: flex; align-items: center; justify-content: flex-end; width: var(--tap); height: var(--tap); margin: -12px 0 -12px auto; }
  .fcard .ff td.g { grid-column: 2; grid-row: 2; }
  .fcard .ff td.pc { grid-column: 3; grid-row: 2; }
  .fcard .ff td.nt { grid-column: 2 / 5; grid-row: 3; }
  .fcard .wrap > .tbl.ftab.ix.ff td:empty:not([colspan]) { display: none; }
  .fcard .ff td[data-h]::before { content: attr(data-h); display: block; font-size: var(--t-label); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
  /* «Граммы» — поле 44 px (цель нажатия); число «% масел» рядом — на одной линии с числом в поле (UX 14.11, В3) */
  .fcard .ff input { height: var(--tap); text-align: left; }
  .fcard .ff tr:has(> td.g > input) > td.pc::before { margin-bottom: 12px; }   /* название на месте, число — к середине поля */
}