/* «Юнитка» — просчёт юнит-экономики новой карточки (Инструменты → Юнитка).
   Свои классы с префиксом uk-, чтобы правки экрана не задевали остальной интерфейс.
   Цвета, кегли, отступы и радиусы — только из общей шкалы в style.css.
   Раскладка по правилу «интерфейс не дёргается» (DEVELOPMENT.md §7): три колонки со своей
   прокруткой, шапка и итог не уезжают; всё, что появляется по действию (подсказка источника,
   поиск типа Ozon, история, сравнение), — окном поверх страницы (#uk-pop), а не вставкой в поток.
   Набор строк итога постоянный: пустое — прочерк, а не исчезнувшая строка. */

#modal-unitcalc.as-page > .modal-box{overflow:hidden;display:flex;flex-direction:column;padding:0}
#modal-unitcalc .modal-head{padding:var(--sp-2) var(--sp-4);margin:0;display:flex;align-items:center;gap:var(--sp-3)}
#modal-unitcalc .modal-head h2{margin:0;font-size:var(--fs-hero)}
.uk-dirty{font-size:var(--fs-cap);color:var(--warn);background:var(--warn-soft);border-radius:var(--r-sm);
  padding:1px var(--sp-2);visibility:hidden}
.uk-dirty.on{visibility:visible}

.uk-shell{flex:1;min-height:0;display:grid;grid-template-columns:276px minmax(0,1fr) 352px;background:var(--bg)}
.uk-col{min-height:0;overflow:auto;padding:var(--sp-3) var(--sp-4)}
.uk-list{background:var(--panel);border-right:1px solid var(--line);padding:var(--sp-3)}
.uk-res{background:var(--panel);border-left:1px solid var(--line)}

/* ---------- список просчётов ---------- */
.uk-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--panel2)}
.uk-seg button{border:0;background:none;font:inherit;font-size:var(--fs-base);padding:var(--sp-1) var(--sp-3);
  cursor:pointer;color:var(--muted);white-space:nowrap}
.uk-seg button + button{border-left:1px solid var(--line)}
.uk-seg button.on{background:var(--accent);color:#fff}
.uk-seg button:disabled{opacity:.5;cursor:not-allowed}
.uk-list .uk-seg{display:flex}
.uk-list .uk-seg button{flex:1}
.uk-lrow{display:flex;gap:var(--sp-2);align-items:center;margin:var(--sp-2) 0}
.uk-lrow input[type=search],.uk-lrow input[type=text]{flex:1;min-width:0;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-base)}
.uk-arch{font-size:var(--fs-cap);color:var(--muted);display:flex;gap:var(--sp-1);align-items:center;white-space:nowrap}
.uk-items{display:flex;flex-direction:column;gap:var(--sp-1)}
.uk-item{display:grid;grid-template-columns:auto 1fr;gap:0 var(--sp-2);padding:var(--sp-2);border:1px solid var(--line);
  border-radius:var(--r-md);cursor:pointer;background:var(--panel)}
.uk-item:hover{background:var(--panel2)}
.uk-item.on{border-color:var(--accent2);box-shadow:inset 0 0 0 1px var(--accent2)}
.uk-item input[type=checkbox]{grid-row:1 / 3;align-self:center;margin:0}
.uk-it-t{font-size:var(--fs-base);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uk-it-m{font-size:var(--fs-cap);color:var(--muted);display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.uk-chip{display:inline-block;padding:0 var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-cap);
  background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);white-space:nowrap}
.uk-chip.ok{background:var(--ok-soft);color:var(--ok);box-shadow:inset 0 0 0 1px #bfe0cd}
.uk-chip.warn{background:var(--warn-soft);color:var(--warn);box-shadow:inset 0 0 0 1px #f0d9ae}
.uk-chip.bad{background:var(--bad-soft);color:var(--bad);box-shadow:inset 0 0 0 1px #f0c8c6}
.uk-empty{color:var(--muted);font-size:var(--fs-base);padding:var(--sp-3);background:var(--panel2);border-radius:var(--r-md)}
.uk-cmpbar{position:sticky;bottom:0;background:var(--panel);padding:var(--sp-2) 0 0;margin-top:var(--sp-2);
  border-top:1px solid var(--line);display:flex;gap:var(--sp-2);align-items:center;justify-content:space-between;
  font-size:var(--fs-cap);color:var(--muted)}

/* ---------- редактор ---------- */
.uk-edit{padding:var(--sp-3) var(--sp-4) var(--sp-6)}
.uk-ro-note{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-base);margin-bottom:var(--sp-3);display:none}
.uk-shell.ro .uk-ro-note{display:block}
.uk-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-3)}
.uk-sec > h3{margin:0 0 var(--sp-3);font-size:var(--fs-num);font-weight:600;display:flex;gap:var(--sp-2);align-items:baseline}
.uk-sec > h3 small{font-weight:400;color:var(--muted);font-size:var(--fs-cap)}
.uk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:var(--sp-3) var(--sp-3)}
.uk-grid.w2{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.uk-span{grid-column:1 / -1}
.uk-f{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;position:relative}
.uk-l{font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.02em;color:var(--muted);font-weight:600;
  display:flex;gap:var(--sp-1);align-items:center;white-space:nowrap}
.uk-f input[type=text],.uk-f select,.uk-f textarea{width:100%;font-size:var(--fs-base);padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-md);font-family:inherit}
.uk-f textarea{resize:vertical;min-height:56px}
.uk-f input.auto{background:var(--panel2)}
.uk-f input.manual{background:#fff;border-color:var(--accent2)}
.uk-shell.ro input,.uk-shell.ro select,.uk-shell.ro textarea{pointer-events:none;opacity:.75}
/* Подпись «откуда число» — одна строка фиксированной высоты: длина текста не двигает соседей,
   полный текст — в подсказке и в окне «i». Справа от неё — «↺ авто» (скрыта, но место занято). */
.uk-sub{display:flex;gap:var(--sp-2);align-items:center;height:15px;min-width:0}
.uk-src{flex:1;min-width:0;font-size:var(--fs-cap);color:var(--muted);height:15px;line-height:15px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.uk-src.warn{color:var(--warn)}
/* Верхний отступ колонки отдан самой панели: иначе при прокрутке заголовок секции просвечивал
   над ней в 12-пиксельной щели. */
.uk-edit{padding-top:0}
.uk-actions{position:sticky;top:0;z-index:3;display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;
  background:var(--bg);padding:var(--sp-3) 0;margin-bottom:var(--sp-1)}
.uk-link{background:none;border:0;padding:0;color:var(--accent2);cursor:pointer;font:inherit;font-size:var(--fs-cap);
  text-decoration:underline;text-underline-offset:2px;text-transform:none;letter-spacing:0;font-weight:400}
.uk-link:hover{color:var(--brand)}
.uk-link.hid{visibility:hidden}
.uk-i{border:1px solid var(--line);background:var(--panel2);border-radius:50%;width:16px;height:16px;font-size:var(--fs-cap);
  line-height:1;color:var(--muted);cursor:pointer;padding:0;flex:none}
.uk-i:hover{color:var(--accent);border-color:var(--accent2)}
.uk-calc{background:var(--ok-soft)!important;font-weight:600}
.uk-pick{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.uk-btnrow{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.uk-share{display:flex;gap:var(--sp-1);align-items:center;font-size:var(--fs-base)}

/* ---------- итог ---------- */
.uk-res{padding:var(--sp-4)}
.uk-hero{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);background:var(--panel2)}
.uk-hero .k{font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.02em;color:var(--muted);font-weight:600}
.uk-hero .v{font-size:28px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.uk-hero .s{font-size:var(--fs-base);color:var(--muted);height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.uk-hero.ok{background:var(--ok-soft);border-color:#bfe0cd}.uk-hero.ok .v{color:var(--ok)}
.uk-hero.warn{background:var(--warn-soft);border-color:#f0d9ae}.uk-hero.warn .v{color:var(--warn)}
.uk-hero.bad{background:var(--bad-soft);border-color:#f0c8c6}.uk-hero.bad .v{color:var(--bad)}
.uk-delta{font-size:var(--fs-cap);color:var(--warn);height:16px;line-height:16px;margin:var(--sp-1) 0;visibility:hidden}
.uk-delta.on{visibility:visible}
.uk-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3)}
.uk-kpi{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3)}
.uk-kpi .k{font-size:var(--fs-cap);color:var(--muted)}
.uk-kpi .v{font-size:var(--fs-num);font-weight:600;font-variant-numeric:tabular-nums}
.uk-h{font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.02em;color:var(--muted);font-weight:600;
  margin:var(--sp-3) 0 var(--sp-1)}
.uk-prices{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
/* text-align задан явно: общий стиль таблиц прижимает ячейки вправо (там числа), а подписи
   строк здесь текстовые — от этого они уезжали к середине колонки. */
.uk-prices td,.uk-split td:first-child{text-align:left}
.uk-prices td{padding:3px 0;border-bottom:1px solid var(--line)}
.uk-prices td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.uk-prices td small{display:block;color:var(--muted);font-weight:400;font-size:var(--fs-cap)}
.uk-bar{display:flex;height:14px;border-radius:var(--r-sm);overflow:hidden;background:var(--panel2);margin:var(--sp-2) 0}
.uk-bar i{display:block;height:100%}
.uk-split{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.uk-split td{padding:2px 0}
.uk-split td:nth-child(2),.uk-split td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.uk-split td:nth-child(3){color:var(--muted);width:56px}
.uk-sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:var(--sp-2);vertical-align:baseline}
.uk-warns{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1)}
.uk-warns div{font-size:var(--fs-cap);color:var(--warn);background:var(--warn-soft);border-radius:var(--r-sm);
  padding:var(--sp-1) var(--sp-2)}

/* ---------- окна поверх страницы ---------- */
#uk-pop{position:fixed;z-index:1200;display:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 12px 32px rgba(26,31,43,.18);padding:var(--sp-3);max-width:min(480px,calc(100vw - 16px));
  max-height:min(70vh,520px);overflow:auto;font-size:var(--fs-base)}
#uk-pop.open{display:block}
#uk-pop h4{margin:0 0 var(--sp-2);font-size:var(--fs-base)}
#uk-pop .uk-sugg{display:flex;flex-direction:column}
#uk-pop .uk-sugg button{border:0;background:none;text-align:left;font:inherit;padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-sm);cursor:pointer}
#uk-pop .uk-sugg button:hover,#uk-pop .uk-sugg button.on{background:var(--panel2)}
#uk-pop .uk-sugg small{color:var(--muted);display:block;font-size:var(--fs-cap)}
#uk-pop .uk-clu{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1) var(--sp-3)}
#uk-pop .uk-clu label{display:flex;gap:var(--sp-1);align-items:center;font-size:var(--fs-base)}
#uk-pop .uk-parts{width:100%;border-collapse:collapse}
#uk-pop .uk-parts td{padding:2px 0}
#uk-pop .uk-parts td:last-child{text-align:right;font-weight:600;white-space:nowrap;padding-left:var(--sp-3)}
#uk-pop .uk-hist button{display:grid;grid-template-columns:1fr auto;width:100%;text-align:left;border:0;background:none;
  font:inherit;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;gap:0 var(--sp-3)}
#uk-pop .uk-hist button:hover{background:var(--panel2)}
#uk-pop .uk-hist small{color:var(--muted);font-size:var(--fs-cap)}

.uk-back{position:fixed;inset:0;z-index:1190;background:rgba(26,31,43,.35);display:none;align-items:center;justify-content:center}
.uk-back.open{display:flex}
.uk-cmp{background:var(--panel);border-radius:var(--r-lg);padding:var(--sp-4);max-width:min(1100px,calc(100vw - 24px));
  max-height:calc(100vh - 48px);overflow:auto;box-shadow:0 16px 48px rgba(26,31,43,.28)}
.uk-cmp h3{margin:0 0 var(--sp-3);display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-num)}
.uk-cmp table{border-collapse:collapse;font-size:var(--fs-base);min-width:520px}
.uk-cmp th,.uk-cmp td{padding:var(--sp-1) var(--sp-3);border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.uk-cmp th:first-child,.uk-cmp td:first-child{text-align:left;color:var(--muted);position:sticky;left:0;background:var(--panel)}
.uk-cmp thead th{font-size:var(--fs-cap);vertical-align:bottom;white-space:normal;max-width:200px;color:var(--text)}
.uk-cmp td.diff{background:var(--panel2)}
.uk-cmp td.best{background:var(--ok-soft);color:var(--ok);font-weight:600}
.uk-cmp tr.sep td{border-top:2px solid var(--line-strong)}

/* Узкий экран: колонки перестают быть независимыми прокрутками — прокручивается вся страница,
   итог уходит под редактор. Строки сетки растут под содержимое (min-height:auto), иначе
   редактор вылезает за свою ячейку и накладывается на итог. */
@media (max-width:1240px){
  .uk-shell{grid-template-columns:240px minmax(0,1fr);grid-auto-rows:auto;align-content:start;overflow:auto}
  .uk-col{min-height:auto;overflow:visible}
  .uk-res{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .uk-shell{grid-template-columns:1fr}
  .uk-list{border-right:0;border-bottom:1px solid var(--line)}
  /* на телефоне три ряда кнопок, прилипшие к верху, съедали полэкрана — панель едет вместе с формой */
  .uk-actions{position:static}
  #modal-unitcalc .modal-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-num)}
  #modal-unitcalc .modal-head .btn{white-space:nowrap}
}