/* Коммерческое предложение на экране: заголовок с видами, счётчик символов,
   предупреждение о лимите площадки, сам текст и кнопка копирования.

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

/* КП на экране */
.kp{margin-top:var(--s3);border:1px solid var(--border);border-radius:5px;overflow:hidden}
.kp .head{display:flex;align-items:center;background:var(--muted);border-bottom:1px solid var(--border)}
.kp .head button{font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:0 var(--s3);height:32px;border:0;border-right:1px solid var(--border);background:transparent;
  color:var(--muted-fg);transition:background-color var(--fast),color var(--fast)}
.kp .head button:hover{background:var(--card);color:var(--fg)}
.kp .head button.on{background:var(--card);color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}
/* Счётчик символов. Четыре состояния из core/quote-text.js → charBudget():
   ok — запас есть; near — за 80 знаков до нашего потолка, ещё можно подрезать;
   over — потолок пройден; blocked — Авито такое сообщение не отправит вовсе.
   Цвет только помечает, говорит текст ниже: цветом одним такое не сообщают. */
.kp .head .cnt{margin-left:auto;margin-right:var(--s1);padding:2px var(--s2);border-radius:3px;
  font:600 var(--fs-xs)/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--accent-text)}
.kp .head .cnt.near{color:#78350F;background:#FFFBEB;box-shadow:inset 0 0 0 1px #FDE68A}
.kp .head .cnt.over,.kp .head .cnt.blocked{color:#fff;background:var(--danger)}
/* Предупреждение о лимите площадки: полосой во всю ширину блока, сразу под
   счётчиком и над текстом — менеджер видит его раньше, чем нажмёт «Скопировать». */
.kpwarn{margin:0;padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);
  font:500 var(--fs-xs)/1.5 var(--sans)}
.kpwarn.near{background:#FFFBEB;color:#78350F}
.kpwarn.over,.kpwarn.blocked{background:#FEF2F2;color:var(--danger)}
.kpwarn.blocked{font-weight:600;box-shadow:inset 3px 0 0 var(--danger)}
/* Пометка о ручной правке. Стоит над полем — менеджер обязан увидеть её раньше,
   чем нажмёт «Скопировать». Три состояния: правка есть (нейтрально), правка
   устарела после пересчёта (тревожно), правку стёрла смена теплицы. */
.kpmark{margin:0;padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);
  font:500 var(--fs-xs)/1.5 var(--sans);background:var(--accent-soft);color:var(--accent-text)}
.kpmark.stale{background:#FFFBEB;color:#78350F;box-shadow:inset 3px 0 0 #D97706}
.kpmark.dropped{background:var(--muted);color:var(--muted-fg)}
/* КП показываем целиком, без прокрутки: менеджер должен видеть весь текст,
   который отправит клиенту, а не первые десять строк. Высоту под содержимое
   ставит render-kp.js — у поля ввода своей высоты по тексту не бывает. */
.kp textarea{display:block;width:100%;margin:0;padding:var(--s3);border:0;resize:none;overflow:hidden;
  font:400 var(--fs-sm)/1.62 var(--mono);background:var(--card);color:var(--fg)}
.kp textarea:focus{outline:2px solid var(--accent);outline-offset:-2px}
/* Правленый текст помечен и самим полем: полоса слева видна, даже когда
   пометка над блоком ушла за край окна при прокрутке. */
.kp textarea.edited{box-shadow:inset 3px 0 0 var(--accent)}
.kp .foot{display:flex;gap:var(--s1);padding:var(--s2);border-top:1px solid var(--border);background:var(--muted)}
.kp .foot button{flex:1;padding:var(--s2);border:1px solid var(--border);border-radius:4px;background:var(--card);
  font:500 var(--fs-md)/1 var(--sans);color:var(--fg);transition:background-color var(--fast),border-color var(--fast)}
.kp .foot button:hover{border-color:var(--muted-fg);background:var(--muted)}
/* «Вернуть исходный» — отмена, а не цель: уже, тише и не тянет на себя нажатие. */
.kp .foot button.undo{flex:0 0 auto;color:var(--muted-fg)}
/* Копирование. Кнопок столько, сколько вариантов в расчёте: одна на коротком КП
   и на правленом руками тексте, две — когда у длинного КП есть второй вариант.
   Глагол не повторяется дважды: он стоит подписью слева, на кнопках — номер
   варианта и его цена. Ряд тянется на всю ширину, «Вернуть исходный» остаётся
   у правого края. */
.kp .foot .copyrow{flex:1;display:flex;align-items:center;gap:var(--s1);min-width:0}
.kp .foot .copyrow button{flex:1;min-width:0}
/* Подпись-глагол. Не кнопка и не заголовок — служебное слово, поэтому тише
   и мельче текста на самих кнопках. */
.kp .foot .clab{flex:0 0 auto;padding-left:var(--s1);font:500 var(--fs-xs)/1 var(--sans);color:var(--muted-fg)}
/* Цена на кнопке — цифра, которую менеджер сверяет глазами с итогом наверху,
   поэтому моноширинными табличными знаками: они не пляшут при пересчёте. */
.kp .foot button.cvar{font-variant-numeric:tabular-nums}
/* Сработало. Цвет — не единственный признак: на кнопке меняется само слово. */
.kp .foot button.done{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}