/* Штамп — основная надпись листа: сетка в рамке тушью 2px сверху и слева, всегда в правом нижнем углу
   рамки вплотную. Несёт главное действие (синюю кнопку) и факты. Система даёт графы и линии;
   раскладку граф (grid-template-areas, ширину) задаёт страница.
   Графы: __photo · __who (имя strong, роль span курсивом) · __cta (синяя кнопка во всю графу, печать) ·
   __facts (строки фактов) · __title · __parties (стороны: dt подпись, dd значение) · __sheet (малый штамп строкой). */

.stamp {
  --stamp-pad-x: 18px;
  --stamp-photo: 140px;
  --stamp-who-fs: var(--fs-title);
  --stamp-seal-room: 170px;       /* место под печать справа от надписи кнопки; узкий штамп — печать поверх надписи */

  display: grid;
  border-top: var(--frame) solid var(--ink);
  border-left: var(--frame) solid var(--ink);
  background: var(--sheet, var(--paper));
}
.stamp > * { margin: 0; border-bottom: 1px solid var(--ink); }
.stamp > :last-child { border-bottom: 0; }

/* графы — по именам областей; раскладку (grid-template-areas, колонки) задаёт страница.
   Специфичность нулевая: страница переназначает область без !important. Штамп в один столбец
   по порядку разметки — .stamp--column (тогда раскладку не задавать). */
:where(.stamp > .stamp__photo) { grid-area: photo; }
:where(.stamp > .stamp__who) { grid-area: who; }
:where(.stamp > .stamp__title) { grid-area: title; }
:where(.stamp > .stamp__cta) { grid-area: cta; }
:where(.stamp > .stamp__facts) { grid-area: facts; }
:where(.stamp > .stamp__parties) { grid-area: parties; }
:where(.stamp > .stamp__sheet) { grid-area: sheet; }
.stamp--column > * { grid-area: auto; }

.stamp__photo { width: 100%; height: 100%; min-height: var(--stamp-photo); object-fit: cover; object-position: 50% 16%; border-right: 1px solid var(--ink); }
/* мини-фото исполнителя в строке */
.stamp__mini { flex: none; width: 36px; height: 36px; object-fit: cover; object-position: 50% 18%; border: 1px solid var(--ink); }

.stamp__who { display: grid; align-content: center; gap: 4px; padding: 14px var(--stamp-pad-x); }
.stamp__who strong { font-size: var(--stamp-who-fs); line-height: 1.15; font-weight: 600; }
.stamp__who span { font-size: var(--fs-annotation); font-style: italic; color: var(--graphite); }
/* подпись над именем: «Автор статьи» */
.stamp__who .stamp__role { font-size: var(--fs-label); }

.stamp__title { padding: 10px var(--stamp-pad-x); font-size: var(--fs-body); font-weight: 600; line-height: 1.2; }

/* синяя кнопка — во всю графу; справа место под печать «Согласовано» */
.stamp .btn-tg { display: flex; width: 100%; padding-right: var(--stamp-seal-room); }

.stamp__facts { display: grid; list-style: none; padding: 0; }
.stamp__facts li { padding: 8px var(--stamp-pad-x); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.stamp__facts li + li { border-top: 1px solid var(--hair); }

/* стороны: «Заказчик — …», «Исполнитель — …» */
.stamp__parties { display: grid; }
.stamp__parties div { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; min-height: 52px; }
.stamp__parties div + div { border-top: 1px solid var(--hair); }
.stamp__parties dt { align-self: stretch; display: flex; align-items: center; padding: 8px var(--stamp-pad-x); border-right: 1px solid var(--hair); font-size: var(--fs-caption); color: var(--graphite); }
.stamp__parties dd { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 16px; }

/* нижняя строка — малый штамп: раздел · Лист N из M */
.stamp__sheet { display: flex; font-size: var(--fs-caption); color: var(--graphite); font-variant-numeric: tabular-nums; }
.stamp__sheet > * { padding: 7px var(--stamp-pad-x); }
.stamp__sheet > :first-child { flex: 1; }
.stamp__sheet > * + * { border-left: 1px solid var(--hair); }

/* ---------- Печать «Согласовано» ---------- */

/* на синей кнопке — белая, проступает на наведение и фокус; .seal--blue — синяя поверх бумаги
   (ставится после отправки заявки: .is-signed у штампа или бланка) */
.seal {
  position: absolute; right: 18px; top: 50%; margin-top: -16px;
  padding: 6px 10px;
  border: 3px double currentColor;
  color: var(--on-blue);
  font: 600 var(--fs-label)/1 var(--sans);
  text-transform: uppercase; letter-spacing: .12em;
  opacity: 0;
  transform: rotate(-9deg) scale(1.5);
  transition: opacity .2s, transform .45s var(--ease);
  pointer-events: none;
}
.seal--blue { color: var(--blue); background: rgb(251 252 253 / .7); }
:is(.stamp__cta, .btn-tg):is(:hover, :focus-visible) .seal { opacity: .92; transform: rotate(-9deg) scale(1); }
.is-signed .seal { opacity: .92; transform: rotate(-9deg) scale(1); }

/* ---------- Узкие экраны ---------- */

@media (max-width: 719px) {
  /* печать не помещается рядом с надписью кнопки */
  .stamp { --stamp-pad-x: 14px; --stamp-photo: 104px; --stamp-seal-room: 20px; }
  .seal:not(.seal--blue) { display: none; }
}