/* Список допов: группы, строки, счётчик количества, варианты, доплаты за сборку.

   Отдельным файлом по той же причине, что и styles-kp.css: styles.css упёрся
   в 300 строк из AGENTS.md, а список допов — самостоятельная часть экрана
   со своими состояниями. Токены палитры, шрифтов и отступов те же, из :root
   в styles.css, поэтому подключается он строго после него. */

/* допы: группы со смысловыми подзаголовками — работы, основание, герметизация… */
.grp+.grp{margin-top:var(--s3)}
.grp-t{margin:0 0 var(--s1);font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-fg);border-bottom:1px solid var(--fg);padding-bottom:var(--s1)}
.addwrap{border-bottom:1px solid var(--border)}
.grp .items>.addwrap:last-child{border-bottom:0}
.add{display:flex;align-items:center;gap:var(--s2);min-height:var(--row)}
.add input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto}
/* min-width:0 обязателен: без него гибкая ячейка не сжимается меньше своего
   текста, и длинное пояснение вылезает за строку — в две колонки оно ложилось
   поверх соседней. */
.add .n{flex:1;min-width:0;font-size:var(--fs-md);cursor:pointer;padding:var(--s1) 0}
.add .n i{font-style:normal;display:block;max-width:100%;font:400 var(--fs-xs)/1.35 var(--mono);color:var(--muted-fg)}
.add .v{font:500 var(--fs-sm)/1 var(--mono);color:var(--muted-fg);white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.add.on .v{color:var(--fg);font-weight:600}
/* Нет в наличии: строка видна (наличие вернётся), но отметить её нельзя.
   Причина написана в подписи, а не спрятана в бледности. */
.add.off .n,.add.off .v{color:var(--muted-fg)}
.add.off .n{cursor:not-allowed}
.add.off input[type=checkbox]{cursor:not-allowed;opacity:.5}
.qty{display:flex;border:1px solid var(--border);border-radius:4px;overflow:hidden;flex:0 0 auto}
.qty button{width:24px;height:24px;border:0;background:var(--card);color:var(--muted-fg);
  font:600 var(--fs-md)/1 var(--sans);padding:0;transition:background-color var(--fast),color var(--fast)}
.qty button:hover:not(:disabled){background:var(--muted);color:var(--fg)}
.qty button:disabled{opacity:.4;cursor:default}
.qty span{width:26px;display:grid;place-items:center;font:600 var(--fs-sm)/1 var(--mono);
  border-left:1px solid var(--border);border-right:1px solid var(--border)}

/* Варианты допа — кнопками, а не списком: то, чего не видно, менеджер не зачитает. */
.vars{display:flex;flex-wrap:wrap;gap:var(--s1);padding:0 0 var(--s2) var(--s5)}
.var{border:1px solid var(--border);border-radius:4px;background:var(--card);color:var(--muted-fg);
  padding:var(--s1) var(--s2);font:500 var(--fs-xs)/1.2 var(--sans);transition:border-color var(--fast),background-color var(--fast)}
.var:hover{border-color:var(--muted-fg)}
.var.on{border-color:var(--primary);background:var(--primary);color:#fff}

/* Доплата за сборку допа: строка ПОД самим допом, а не отдельный экран.
   Появляется только когда заказана сборка теплицы — иначе доплачивать не к чему.

   Подчинение строки видно без слов: отступ под название допа и вертикальная
   черта слева. Без неё доплата читается как ещё один доп в списке, и менеджер
   считает её отдельной позицией. Ростом строка ниже строки допа (28 против 36):
   это уточнение к решению, а не решение.

   Сумма стоит в том же столбце, что суммы допов, и видна ДО галочки: менеджер
   называет её клиенту раньше, чем принимает решение. Знак «плюс» отличает
   доплату от цены самой позиции.

   Включённая доплата помечена и цветом, и весом: цвет одинокий на этом экране
   ничего не сообщает (см. правило о цвете в styles.css). */
.asm{display:flex;align-items:center;gap:var(--s2);min-height:28px;
  margin:0 0 var(--s1) var(--s5);padding-left:var(--s2);border-left:2px solid var(--border)}
.asm input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;flex:0 0 auto}
.asm .n{flex:1;min-width:0;font:400 var(--fs-sm)/1.35 var(--sans);color:var(--muted-fg);cursor:pointer}
.asm .v{font:500 var(--fs-sm)/1 var(--mono);color:var(--muted-fg);white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.asm.on{border-left-color:var(--accent)}
.asm.on .n{color:var(--accent-text);font-weight:500}
.asm.on .v{color:var(--fg);font-weight:600}
/* Цены на эту длину в прайсе нет: включать нечего, и вместо галочки стоит то,
   что надо уточнить у поставщика. Молчать нельзя — 300–800 ₽ пропадали
   незаметно (docs/AUDIT-money.md №4). */
.asm.gap{border-left-color:#FDE68A;align-items:baseline;padding-top:2px;padding-bottom:2px}
.asm.gap .note{flex:1;min-width:0;font:400 var(--fs-xs)/1.45 var(--mono);color:#78350F}

.beds{background:var(--muted);border:1px solid var(--border);border-radius:5px;padding:var(--s2) var(--s3);margin-top:var(--s3)}
.beds .addwrap{border-bottom:0}
/* Готового комплекта грядок для этой ширины в прайсе нет. Не галочка и не цена,
   а одна строка, которая говорит менеджеру, чем комплект заменить. */
.beds-no{margin:var(--s3) 0 0;padding:var(--s2) var(--s3);background:var(--muted);border-radius:5px;
  font:400 var(--fs-xs)/1.5 var(--mono);color:var(--muted-fg)}

/* Пятнадцать допов в одну колонку растягивали расстояние «название → сумма»
   до 818 px, и глаз терял строку (Н10). Две колонки включаются только там,
   где им хватает ширины.

   ИМЕННО GRID, А НЕ column-count. Многоколоночная раскладка режет содержимое
   по границе колонки: длинное пояснение («Автомат ставится только на
   дополнительную форточку…») перетекало в соседнюю колонку и ложилось поверх
   чужой строки, а счётчик «− 0 +» наезжал на соседний доп. У grid каждая
   строка — целая ячейка, разорваться ей нечем. */
@media (min-width:1500px){
  .grp .items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
  /* minmax(0,…) сверху и min-width:0 здесь: иначе длинное название распирает
     дорожку и колонки разъезжаются по ширине. */
  .addwrap{min-width:0}
  /* Грядки — отдельная продажа, а не доп: блок идёт во всю ширину группы. */
  .beds{grid-column:1 / -1}
  /* Пояснение — в одну строку; целиком показывается по наведению (title). */
  /* Переносим, а не обрезаем. Обрезка съедала 375 px из 614 — 61% фразы,
     и прочитать её можно было только наведением (обмер 28.07.2026). */
  .add .n i{white-space:normal;overflow:visible;text-overflow:clip}
}