/* ===========================================================================
   Borneo · блок .promo (docs/spec/promo.md §2, docs/promo-preview.html)

   Подключён отдельным <link> в root.html.heex, не через @import в app.css —
   строка проводки в tasks/reports/155-patches.md. app.css обязан побайтово
   совпадать с .claude/skills/borneo/assets/borneo.css (theme_test §5.8), а этот
   файл в borneo.css не копируется — по образцу radio.css (109).

   Ни одного нового цвета: всё из переменных почерка (--accent, --accent-ink) и
   из стекла, уже описанного в borneo.css. Исключение ровно одно и оно в самом
   листе, а не здесь: белое поле QR и его тёмные модули рисует Promo.QR, потому
   что QR печатается тёмным по светлому всегда (§2.4).

   Движения здесь нет вовсе. Конструктор носителя — работа руками: человек
   меняет поле и смотрит на лист, а лист не должен ни выезжать, ни моргать.
   =========================================================================== */

.promo-tabs{display:flex;gap:8px;margin:12px 0 10px}

.promo-form{display:flex;flex-direction:column;gap:6px}
.promo-form select,
.promo-form input{
  width:100%;padding:9px 11px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:inherit;font:inherit;
}
.promo-form select:focus-visible,
.promo-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.promo-actions{display:flex;gap:8px;margin-top:10px}

.promo-variants{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.promo-variants li{display:flex;flex-direction:column;gap:3px}

/* Лист в натуральную величину: на экране он ужимается по ширине колонки, но
   пропорции и миллиметры внутри SVG не трогаются — печать берёт их как есть. */
.promo-sheet{margin-top:12px;padding:10px;display:flex;justify-content:center}
.promo-sheet svg{width:100%;height:auto;max-width:320px;border-radius:6px}

.promo-list,
.promo-rating{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.promo-list li,
.promo-rating li{
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:baseline;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.08);
}
.promo-list li:last-child,
.promo-rating li:last-child{border-bottom:0;padding-bottom:0}

.promo-rating li{grid-template-columns:1fr auto}
.promo-rating .micro{grid-column:1 / -1}

/* Печать: на листе остаётся только лист. Размер страницы и нулевые поля ставит
   хук promo.js — он знает размер конкретного макета, а CSS его не знает. */
@media print{
  .promo-tabs,.promo-form,.promo-variants,.promo-list,.promo-rating,.promo-actions{display:none !important}
  .promo-sheet{padding:0;margin:0;background:none;border:0;box-shadow:none}
  .promo-sheet svg{max-width:none;width:auto;height:auto;border-radius:0}
}