/* ============================================================
   Конструктор ленты. Цвета интерфейса — только роли канона из
   notes/brandbook.md: поэтому переключение темы не требует дубля правил.
   ============================================================ */

.merc-ribbon,
.merc-ribbon *{ box-sizing:border-box }
.merc-ribbon{ width:100%; max-width:1180px; margin:clamp(28px,5vw,64px) auto; container-type:inline-size;
  color:var(--color-text); font-family:var(--font-base,"PT Sans",system-ui,sans-serif) }
.merc-ribbon button,
.merc-ribbon input{ font:inherit }
.merc-ribbon__head{ max-width:760px; margin:0 0 clamp(22px,3vw,34px) }
.merc-ribbon .merc-ribbon__eyebrow{ margin:0 0 8px; color:var(--color-accent-ink); font-size:13px;
  font-weight:700; letter-spacing:.07em; text-transform:uppercase }
.merc-ribbon__title{ margin:0; color:var(--color-text); font-size:clamp(26px,3vw,38px); line-height:1.12 }
.merc-ribbon .merc-ribbon__intro{ margin:12px 0 0; max-width:62ch; color:var(--color-text-mute);
  font-size:16px; line-height:1.55 }

.merc-ribbon__layout{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(20px,3vw,38px); align-items:start }
.merc-ribbon__controls,
.merc-ribbon__result{ min-width:0; padding:clamp(18px,2.4vw,28px); background:var(--color-surface);
  border:1px solid var(--color-line); border-radius:12px; box-shadow:var(--sh-card) }
.merc-ribbon__controls{ display:grid; gap:22px }
.merc-ribbon__field label,
.merc-ribbon__group legend,
.merc-ribbon .merc-ribbon__legend{ display:block; margin:0 0 9px; color:var(--color-text); font-size:14px; font-weight:700 }
/* Граница поля и кнопки — служебным цветом, а не линией: --color-line
   ночью даёт 1,2 к поверхности, и контур элемента управления исчезает. */
.merc-ribbon__input{ width:100%; min-width:0; height:48px; padding:0 13px; color:var(--color-text);
  background:var(--color-bg); border:1px solid var(--color-text-soft); border-radius:4px }
.merc-ribbon__input:focus,
.merc-ribbon__stage:focus{ outline:2px solid var(--color-accent); outline-offset:2px; border-color:var(--color-accent) }
.merc-ribbon .merc-ribbon__count{ margin:7px 0 0; color:var(--color-text-mute); font-size:13px; line-height:1.4 }
.merc-ribbon__count span{ color:var(--color-text); font-variant-numeric:tabular-nums }
.merc-ribbon__count[data-state="limit"]{ color:var(--color-accent-ink) }
.merc-ribbon__count[data-state="over"]{ color:var(--color-accent-ink); font-weight:700 }

.merc-ribbon__group{ min-width:0; margin:0; padding:0; border:0 }
.merc-ribbon__choices{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.merc-ribbon__choices--colors{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.merc-ribbon__choices input{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap }
.merc-ribbon__choices label{ display:flex; align-items:center; justify-content:center; gap:8px; min-width:0;
  min-height:42px; margin:0; padding:8px 10px; color:var(--color-text); background:var(--color-bg);
  border:1px solid var(--color-text-soft); border-radius:4px; font-size:14px; line-height:1.25;
  text-align:center; cursor:pointer; user-select:none; transition:border-color .15s ease }
.merc-ribbon__choices label:hover{ border-color:var(--color-accent) }
.merc-ribbon__choices input:focus-visible + label{ outline:2px solid var(--color-accent); outline-offset:2px }
.merc-ribbon__choices input:checked + label{ color:var(--color-on-fill); background:var(--color-accent-fill);
  border-color:var(--color-accent); font-weight:700 }
.merc-ribbon__choices input:disabled + label{ color:var(--color-text-soft); background:var(--color-surface);
  border-style:dashed; cursor:not-allowed }

/* Эти шесть значений — намеренное исключение из интерфейсной палитры: они
   изображают физические оттенки атласа и фольги внутри предпросмотра и в
   образцах материала. Ни один элемент управления не получает эти цвета. */
.merc-ribbon{
  --ribbon-material-black:#181615;
  --ribbon-material-burgundy:#681826;
  --ribbon-material-navy:#17284A;
  --ribbon-material-white:#F1EEE8;
  --foil-material-gold:#D5AD51;
  --foil-material-silver:#C9CDD2;
  --ribbon-material-active:var(--ribbon-material-burgundy);
  --foil-material-active:var(--foil-material-gold)
}
.merc-ribbon__color span{ flex:0 0 18px; width:18px; height:18px; border-radius:50%;
  border:1px solid var(--color-line) }
.merc-ribbon__color--black span{ background:var(--ribbon-material-black) }
.merc-ribbon__color--burgundy span{ background:var(--ribbon-material-burgundy) }
.merc-ribbon__color--navy span{ background:var(--ribbon-material-navy) }
.merc-ribbon__color--white span{ background:var(--ribbon-material-white) }
.merc-ribbon__choices input:checked + .merc-ribbon__color span{ border-color:var(--color-on-fill) }
.merc-ribbon[data-ribbon="black"]{ --ribbon-material-active:var(--ribbon-material-black) }
.merc-ribbon[data-ribbon="burgundy"]{ --ribbon-material-active:var(--ribbon-material-burgundy) }
.merc-ribbon[data-ribbon="navy"]{ --ribbon-material-active:var(--ribbon-material-navy) }
.merc-ribbon[data-ribbon="white"]{ --ribbon-material-active:var(--ribbon-material-white) }
.merc-ribbon[data-foil="gold"]{ --foil-material-active:var(--foil-material-gold) }
.merc-ribbon[data-foil="silver"]{ --foil-material-active:var(--foil-material-silver) }

.merc-ribbon .merc-ribbon__hint,
.merc-ribbon .merc-ribbon__scale-note{ margin:8px 0 0; color:var(--color-text-soft); font-size:12.5px; line-height:1.45 }
/* Блок во всю ширину ПОСЛЕ сетки — см. пояснение в ritual-ribbon.php.
   Панель оформляется как две другие: раньше блок жил внутри левой панели
   и её фон с рамкой достались ему бесплатно. */
.merc-ribbon__presets{ min-width:0; margin-top:clamp(20px,3vw,38px);
  padding:clamp(16px,2vw,22px); background:var(--color-surface);
  border:1px solid var(--color-line); border-radius:12px; box-shadow:var(--sh-card) }
.merc-ribbon__presets .merc-ribbon__legend{ margin:0 0 10px }
.merc-ribbon__preset-list{ display:flex; flex-wrap:wrap; gap:7px;
  padding:2px }
.merc-ribbon__preset{ min-height:34px; max-width:100%; padding:7px 10px; color:var(--color-text-mute);
  background:var(--color-bg); border:1px solid var(--color-line); border-radius:18px;
  font-size:12.5px; line-height:1.35; text-align:left; cursor:pointer }
.merc-ribbon__preset:hover{ color:var(--color-accent-ink); border-color:var(--color-accent) }
.merc-ribbon__preset:focus-visible,
.merc-ribbon__copy:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }

.merc-ribbon__result{ position:sticky; top:18px }
.merc-ribbon__preview-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 12px }
.merc-ribbon__preview-head .merc-ribbon__legend{ margin:0 }
.merc-ribbon .merc-ribbon__spec{ margin:0; color:var(--color-text-soft); font-size:12.5px; white-space:nowrap }
.merc-ribbon__stage{ max-width:100%; overflow-x:auto; padding:18px; background:var(--color-bg);
  border:1px solid var(--color-line); border-radius:6px; scrollbar-color:var(--color-text-soft) var(--color-bg) }
/* Замечание QA-024: у предпросмотра появлялась горизонтальная прокрутка,
   причём в исходном состоянии, без всякого длинного текста. Замер
   9 сентября при 1363 px: содержимое 656 при видимой ширине 614.

   Причина — этот самый пол в 620 px. Он поставлен, чтобы лента
   не мельчала до нечитаемости, и это верно; но в правой колонке
   при 1363 px под содержимое остаётся 578 px: 616 минус рамки
   и минус собственные отступы стейджа по 18. Пол оказался на 42 px
   больше места, которое ему отведено.

   min() оставляет замысел и убирает вылет: пока место позволяет —
   держим 620, когда не позволяет — вписываемся. Прокрутка на узком
   экране при этом остаётся: ниже 560 px пол задан отдельным правилом
   и осмысленно жёсткий — там лента действительно не помещается,
   и прокрутить её честнее, чем показать нечитаемой. */
.merc-ribbon__stage-inner{ min-width:min(620px, 100%) }
.merc-ribbon__band{ display:block; width:100%; height:auto }
.merc-ribbon__material{ fill:var(--ribbon-material-active) }
.merc-ribbon__text{ fill:var(--foil-material-active); stroke:var(--foil-material-active); stroke-width:.35px;
  font-family:Georgia,"PT Serif",serif; font-size:55px; font-weight:700;
  paint-order:stroke fill }
/* На белом атласе золото даёт 1,83, серебро 1,38 — надпись не читается.
   На печати её различает блеск фольги, на экране блеска нет, поэтому
   букве добавлен тёмный контур: он же честно показывает границу знака.
   Контур берёт --color-plate, а не --color-text: атлас белый в обеих темах,
   значит и контур на нём обязан быть тёмным в обеих. */
.merc-ribbon[data-ribbon="white"] .merc-ribbon__text{ stroke:var(--color-plate); stroke-width:2px }
.merc-ribbon__summary{ display:grid; gap:5px; margin:18px 0 0; padding:14px;
  color:var(--color-text-mute); background:var(--color-bg); border:1px solid var(--color-line); border-radius:4px }
.merc-ribbon__summary p{ margin:0; font-size:13.5px; line-height:1.45 }
.merc-ribbon__summary strong{ color:var(--color-text) }
.merc-ribbon__summary [data-state="over"]{ color:var(--color-accent-ink); font-weight:700 }
.merc-ribbon__copy{ width:100%; min-height:48px; margin:16px 0 0; padding:10px 18px;
  color:var(--color-on-fill); background:var(--color-accent-fill); border:1px solid var(--color-accent-fill);
  border-radius:4px; font-weight:700; cursor:pointer }
/* Наведение берёт роль «заливка при наведении»: --accent-ink ночью
   поднимается по светлоте, и белая подпись на нём давала 3,30. */
.merc-ribbon__copy:hover{ background:var(--color-accent-fill-hover); border-color:var(--color-accent-fill-hover) }
.merc-ribbon .merc-ribbon__copy-status{ min-height:1.4em; margin:7px 0 0; color:var(--color-text-mute);
  font-size:13px; line-height:1.4 }
.merc-ribbon .merc-ribbon__warning,
.merc-ribbon .merc-ribbon__noscript{ margin:14px 0 0; padding:13px 14px; color:var(--color-text-mute);
  background:var(--color-bg); border-left:3px solid var(--color-accent); font-size:13px; line-height:1.5 }
.merc-ribbon__warning strong{ color:var(--color-text) }
.merc-ribbon__noscript{ border:1px solid var(--color-line) }

@media (max-width:1039px){
  .merc-ribbon__layout{ grid-template-columns:minmax(0,1fr) }
  .merc-ribbon__result{ position:static }
}
/* Шорткод может стоять внутри статьи шириной 820 px даже на широком экране.
   Контейнерный порог не даёт двум колонкам сжаться из-за внешнего шаблона. */
@container (max-width:900px){
  .merc-ribbon__layout{ grid-template-columns:minmax(0,1fr) }
  .merc-ribbon__result{ position:static }
}
@media (max-width:560px){
  .merc-ribbon{ margin:28px auto }
  .merc-ribbon__controls,
  .merc-ribbon__result{ padding:16px; border-radius:8px }
  .merc-ribbon__choices--colors{ grid-template-columns:minmax(0,1fr) }
  .merc-ribbon__stage{ padding:12px }
  .merc-ribbon__stage-inner{ min-width:560px }
  .merc-ribbon__preview-head{ align-items:flex-start; flex-direction:column; gap:4px }
  .merc-ribbon__preset-list{ max-height:194px }
}
@media (prefers-reduced-motion:reduce){
  .merc-ribbon__choices label{ transition:none }
}

/* На узком экране формулировки в один столбец дают очень длинный блок,
   поэтому там окно с прокруткой остаётся осмысленным. */
@media (max-width:700px){
  .merc-ribbon__preset-list{ max-height:194px; overflow:auto;
    scrollbar-color:var(--color-text-soft) var(--color-surface) }
}