/* Вкладка «Грядки».

   Своих цветов, теней и радиусов здесь нет — всё берётся токенами из styles.css.
   Ряды кнопок, карточки и подписи — те же классы, что на экране теплиц (.seg,
   .opt, .lbl, .segnote): менеджер не должен переучиваться, переходя на вкладку.
   Ниже только то, чего у теплиц не было: ввод ширины, счётчик количества,
   список заказанного и вопрос про сборку. */

/* Ширина — поле с размером клиента и ходовые размеры рядом. */
.bed-width input{width:96px;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:5px;
  font:500 var(--fs-md)/1 var(--mono);color:var(--fg);background:var(--card)}
.bed-width input:hover{border-color:var(--muted-fg)}
.bed-width{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.bed-width .lbl{margin:0}
.bed-width .seg{margin-top:-2px}
.bed-width .segnote{margin:0;max-width:320px}

.bed-size{align-items:flex-start}

/* Счётчик количества: минус, число, плюс. Кнопки крупнее шрифта намеренно —
   по ним попадают не глядя, посреди разговора. */
.qty{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:5px;overflow:hidden;
  width:fit-content;background:var(--card)}
.qty button{width:36px;min-height:36px;border:0;background:var(--card);color:var(--fg);cursor:pointer;
  font:500 var(--fs-lg)/1 var(--sans);transition:background var(--fast)}
.qty button:hover:not(:disabled){background:var(--muted)}
.qty button:disabled{color:var(--border);cursor:default}
.qty input,.qty span{width:44px;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);
  text-align:center;font:600 var(--fs-md)/36px var(--mono);color:var(--fg);background:var(--card);
  -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Добавление в заказ. Цена стоит на самой кнопке: менеджер называет её клиенту
   до того, как что-то добавит. */
.bed-add{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s4) 0 var(--s5)}
/* Вертикальный отступ ОБЯЗАН остаться от .go: без него кнопка схлопывается
   в полоску 208x13 px, и главное действие вкладки становится ненажимаемым.
   Так уже было с кнопкой «подробно» 53x11 px (docs/AUDIT-layout.md). */
.bed-go{display:flex;align-items:center;gap:var(--s3);width:auto;padding:var(--s3) var(--s5)}
.bed-go b{font:700 var(--fs-md)/1 var(--mono)}

/* Раскладка под теплицу — предложение, а не настройка: сказано, что встанет,
   и два готовых итога кнопками. */
.bed-layout{border:1px solid var(--border);border-radius:6px;background:var(--bg);
  padding:var(--s3);margin:0 0 var(--s5)}
.bed-layout .lbl{margin-top:0}
.bed-layout-t{margin:0 0 var(--s3);max-width:70ch;font:500 var(--fs-md)/1.45 var(--sans);color:var(--fg)}

.bed-layout-go{display:flex;gap:var(--s2);flex-wrap:wrap}
.bed-layout-go .opt{flex:0 1 200px;text-align:left}

/* Список заказанного. */
.bed-list{list-style:none;margin:0 0 var(--s4);padding:0;border:1px solid var(--border);border-radius:6px;
  background:var(--card);overflow:clip}
.bed-list li{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--border)}
.bed-list li:last-child{border-bottom:0}
.bed-name{flex:1 1 auto;min-width:0}
.bed-name span{display:block;max-width:70ch;font:500 var(--fs-md)/1.35 var(--sans);color:var(--fg)}
.bed-name i{display:block;font-style:normal;font:400 var(--fs-xs)/1.4 var(--mono);color:var(--muted-fg);margin-top:2px}
.bed-sum{flex:0 0 auto;min-width:88px;text-align:right;font:600 var(--fs-md)/1 var(--mono);color:var(--fg)}
.bed-del{flex:0 0 auto;border:0;background:none;cursor:pointer;padding:var(--s1) var(--s2);border-radius:4px;
  font:400 var(--fs-xs)/1 var(--mono);color:var(--muted-fg);transition:color var(--fast),background var(--fast)}
.bed-del:hover{color:var(--danger);background:#FEF2F2}

.bed-empty{margin:0 0 var(--s4);padding:var(--s3);border:1px dashed var(--border);border-radius:6px;
  font:400 var(--fs-md)/1.5 var(--sans);color:var(--muted-fg);max-width:68ch}

/* Вопрос про сборку. Прямой вопрос с ценой внутри — приём старого калькулятора
   (решение №34), а не галочка, которую менеджер может не заметить. */
.bed-asm{margin:0 0 var(--s4)}
.bed-asm-q{margin:0 0 var(--s2);font:500 var(--fs-lg)/1.4 var(--sans);color:var(--fg)}
.bed-asm-q b{font:700 var(--fs-lg)/1.4 var(--mono);color:var(--accent-text)}
.bed-asm-a{display:flex;gap:var(--s2)}
.bed-asm-a button{min-width:88px;min-height:36px;padding:0 var(--s4);border-radius:5px;cursor:pointer;
  font:600 var(--fs-md)/1 var(--sans);transition:background var(--fast),border-color var(--fast)}
.bed-asm-a .no{border:1px solid var(--border);background:var(--card);color:var(--fg)}
.bed-asm-a .no:hover{border-color:var(--muted-fg)}
/* Тот же зелёный, что у главной кнопки экрана: --accent как фон под белым
   текстом даёт 3,77:1 при норме 4,5:1 и по контрасту не проходит. */
.bed-asm-a .yes{border:1px solid var(--accent-text);background:var(--accent-text);color:#fff}
.bed-asm-a .yes:hover{box-shadow:0 0 0 3px var(--accent-soft)}
.bed-asm.on .bed-asm-q{color:var(--accent-text)}
.bed-asm-off{border:1px solid var(--border);background:var(--card);color:var(--muted-fg);cursor:pointer;
  padding:var(--s1) var(--s3);border-radius:5px;font:400 var(--fs-xs)/1.6 var(--mono)}
.bed-asm-off:hover{border-color:var(--danger);color:var(--danger)}

/* Предупреждение расчёта. Цвет тревоги, но не крик: менеджер обязан прочитать
   его прежде, чем назовёт сумму. */
.bed-warn{margin:var(--s2) 0 0;max-width:560px;padding:var(--s2) var(--s3);border-left:3px solid var(--danger);
  background:#FEF2F2;border-radius:0 4px 4px 0;font:400 var(--fs-sm)/1.5 var(--sans);color:var(--danger)}

/* Убранная теплица в смете: строка остаётся, чтобы её было чем вернуть. */
.spec tr.off td{color:var(--muted-fg)}
.spec .more.drop:hover{color:var(--danger)}

/* Перечень цветов полимера — единственная подпись карточки, которая длиннее
   строки. Ей разрешено переноситься: на 1280 «…вишня, графит» не влезал
   в 343 px и обрезался многоточием, то есть менеджер не видел двух цветов. */
.cards .opt .s{white-space:normal;overflow:visible;text-overflow:clip}

/* Строка списка ломается только когда ей действительно тесно. Порог 1360 px
   ронял её в две строки уже на 1280, оставляя 442 px пустоты справа. */
@media (max-width:1100px){
  .bed-layout-go .opt{flex:1 1 160px}
  .bed-list li{flex-wrap:wrap}
  .bed-name{flex:1 1 100%}
}

/* Совет расчёта: помогает продать, но ошибкой не является — значит и цвет
   не тревожный. Красное в этом проекте означает «деньги посчитаны неверно». */
.bed-tip{margin:var(--s2) 0 0;max-width:560px;padding:var(--s2) var(--s3);
  border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 4px 4px 0;
  font:400 var(--fs-sm)/1.5 var(--sans);color:var(--accent-text)}

/* Что ещё в заказе, кроме грядок. Стоит первым блоком вкладки: менеджер,
   которому клиент звонит только про грядки, должен убрать теплицу в одно
   движение и не искать кнопку в смете справа. */
.bed-gh{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s4);
  padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:6px;background:var(--card)}
.bed-gh.off{border-style:dashed;background:var(--bg)}
.bed-gh-t{flex:1 1 320px;max-width:70ch;margin:0;font:400 var(--fs-md)/1.45 var(--sans);color:var(--muted-fg)}
.bed-gh-t b{font-weight:600;color:var(--fg)}
.bed-gh-b{flex:0 0 auto;min-height:29px;padding:0 var(--s3);border:1px solid var(--border);border-radius:5px;
  background:var(--card);color:var(--fg);cursor:pointer;font:500 var(--fs-sm)/1 var(--sans);
  transition:border-color var(--fast),color var(--fast)}
.bed-gh-b:hover{border-color:var(--muted-fg)}
.bed-gh.off .bed-gh-b{border-color:var(--accent);color:var(--accent-text)}

/* Характеристики из прайса. Лента снимков — то, чего у теплиц не было вовсе. */
.bed-photos{display:flex;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s3)}
.bed-photo{padding:0;border:1px solid var(--border);border-radius:5px;background:var(--card);
  cursor:pointer;overflow:clip;line-height:0;transition:border-color var(--fast)}
.bed-photo:hover{border-color:var(--accent)}
.bed-photo img{display:block;width:132px;height:88px;object-fit:contain;background:#fff}
.bed-specs-h{margin:0 0 var(--s2);max-width:640px;font:500 var(--fs-md)/1.5 var(--sans);color:var(--fg)}
.bed-specs-list{margin:0 0 var(--s3);padding-left:18px;max-width:640px}
.bed-specs-list li{font:400 var(--fs-md)/1.6 var(--sans);color:var(--muted-fg)}

/* Цвета: квадратик — приближение RAL, поэтому код стоит рядом всегда. */
.bed-colors span{font:400 var(--fs-xs)/1 var(--mono);color:var(--muted-fg)}

/* Выбор цвета полимера. Квадратик рядом с названием и кодом RAL: код —
   факт из прайса и он же уходит поставщику, квадратик — для разговора. */
.bed-colors{margin:0 0 var(--s3)}
.bed-color-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.bed-color{display:flex;align-items:center;gap:var(--s2);height:36px;box-sizing:border-box;padding:var(--s1) var(--s3) var(--s1) var(--s1);
  border:1px solid var(--border);border-radius:5px;background:var(--card);cursor:pointer;
  transition:border-color var(--fast),box-shadow var(--fast)}
.bed-color:hover{border-color:var(--muted-fg)}
.bed-color.on{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.bed-color .sw{width:26px;height:26px;border-radius:4px;flex:0 0 auto;
  border:1px solid rgba(15,23,42,.18);background:var(--muted)}
.bed-color .nm{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.bed-color .nm b{font:600 var(--fs-md)/1.2 var(--sans);color:var(--fg)}
.bed-color .nm i{font-style:normal;font:400 var(--fs-xs)/1.3 var(--mono);color:var(--muted-fg)}
.bed-colors .segnote{margin:var(--s2) 0 0;max-width:520px}

/* «убрать» у каждой строки сметы. Держится справа от названия и не мозолит
   глаза: действие редкое — «добавил по ошибке», — но искать его не должно
   приходиться на другой вкладке. */
.spec .more.drop{color:var(--muted-fg)}
.spec .more.drop:hover{color:var(--danger)}

/* Мера строки в блоках характеристик и предупреждений. 60–75 знаков — норма
   для чтения; на 1680 они растягивались до 94 знаков (обмер 28.07.2026). */
.bed-specs li,.bed-specs p{max-width:70ch}

/* Подстрочники обеих вкладок одной роли — значит и вид один: 11px mono, как
   у .segnote на теплицах. Три размера и две гарнитуры на одном экране читаются
   как два разных продукта (обмер вёрстки 28.07.2026). Правило стоит последним
   намеренно: оно перекрывает шрифт, заданный выше вместе с рамкой и фоном. */
.bed-warn,.bed-tip,.bed-empty,.bed-gh-t{font:400 var(--fs-xs)/1.5 var(--mono)}

/* Комплект «Грядки в теплицу» на вкладке грядок: карточка с вопросом о сборке.
   Рамка отделяет её от списка поштучных грядок — это разные товары. */
.bed-kit{margin:0 0 var(--s4);padding:var(--s3);border:1px solid var(--border);border-radius:6px;background:var(--card)}
.bed-kit.on{border-color:var(--accent)}
.bed-kit-t{display:flex;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s2);
  font:400 var(--fs-md)/1.45 var(--sans);color:var(--muted-fg)}
.bed-kit-t b{font:600 var(--fs-md)/1.45 var(--mono);color:var(--fg)}
.bed-kit .bed-gh-b{margin-top:var(--s2)}