/* =============================================================================
   Слой 4 из 7: общие компоненты для донора, приюта и оператора.
   Кнопки, ссылки, поля, чипы статусов, уведомления, карточка, таблица,
   билет с корешком (тело + перфорированный корешок), фото-обложка, купоны.

   Старые имена классов (.button, .pill, .tag, .card, .tear, .notice-warning)
   стилизованы здесь же, чтобы экраны, ещё не переведённые на новые имена,
   выглядели единообразно. Движение (подъём, «отрыв») включается только при
   prefers-reduced-motion: no-preference; цвет и фокус работают всегда.
   ============================================================================= */

/* ---------- Кнопки ---------- */
.btn,
.button {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-fg);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-1);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--d-hover) var(--ease-out),
    box-shadow var(--d-hover) var(--ease-out),
    background-color var(--d-hover) var(--ease-out);
}

/* Строка с абзацем вокруг кнопок: у абзаца с кнопкой нет лишнего межстрочного зазора */
p > .btn,
p > .button {
  margin-block: var(--s-1);
}

.btn:hover,
.button:hover {
  box-shadow: var(--e-lift);
}

.btn:active,
.button:active {
  box-shadow: none;
  transition-duration: var(--d-press);
}

.btn:not(.btn--ghost):not(.btn--ink):active,
.button:not(.button-secondary):active {
  --btn-bg: var(--coral-press);
}

.btn--ink {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
}

.btn--ink:hover {
  --btn-bg: var(--night-2);
}

.btn--ghost,
.btn--paper,
.button-secondary {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
}

.btn--ghost:hover,
.button-secondary:hover {
  --btn-bg: var(--yellow);
  box-shadow: none;
}

.btn--ghost:active,
.button-secondary:active {
  --btn-bg: var(--yellow-soft);
}

.btn--sm {
  min-height: var(--touch);
  padding: 0 var(--s-4);
  font-size: var(--t-small);
}

.btn--wide {
  width: 100%;
}

.btn--split {
  justify-content: space-between;
}

.btn svg {
  transition: transform var(--d-hover) var(--ease-out);
}

.btn:disabled,
.button:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  --btn-bg: var(--ground-2);
  --btn-fg: var(--muted);
  --btn-bd: transparent;
  box-shadow: none;
  cursor: not-allowed;
}

/* Движение от наведения — только у мыши (hover: hover и pointer: fine): на сенсорном экране :hover
   включается касанием и «залипает», поэтому там остаются только нажатие и цвет. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .btn:hover,
  .button:hover {
    transform: translateY(-2px);
  }

  .btn:hover svg {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .btn:active,
  .button:active {
    transform: translateY(1px);
  }

  .btn:disabled,
  .button:disabled,
  .btn[aria-disabled="true"],
  .btn.is-disabled {
    transform: none;
  }
}

/* ---------- Стрелка ----------
   Единая стрелка ссылок, кнопок и корешков (`components/_arrow.html`). Центр стрелки совпадает с оптическим
   центром строки: серединой между центрами x-высоты и капители Golos Text (x-высота .53em, капитель .70em,
   ascent .98em, descent .22em). Flex выравнивает центр строки по области шрифта, то есть .38em над базовой
   линией, а оптический центр лежит на .31em, поэтому стрелку опускаем на .0725em. Внутри потока текста
   (`display: inline`, стрелка идёт за последним словом) то же даёт vertical-align -.24em при высоте 1.1em. */
.arrow {
  position: relative;
  top: .0725em;
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

.arrow--inline,
:is(.pub-camp__brief, .pub-camp__side, .read__links) .arrow {
  top: 0;
  vertical-align: -.24em;
}

/* ---------- Ссылки ---------- */
.link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}

.link:hover {
  text-underline-offset: .34em;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

.link-arrow svg {
  transition: transform var(--d-hover) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .link-arrow:hover svg {
    transform: translateX(4px);
  }
}

/* Строки-действия во вторичной роли: ссылка, выглядящая как ссылка, но отправляющая форму */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

/* ---------- Поля форм ---------- */
.field {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--s-4);
}

:where(p, h1, h2, h3) + .field {
  margin-top: var(--s-4);
}

.field > span,
.field > label,
.field legend {
  font-size: var(--t-small);
  font-weight: 700;
}

.field .hint {
  margin: 0;
}

.input,
:is(.field, .shelter, .operator) :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]),
.tx-select,
.copy-row input {
  display: block;
  width: 100%;
  max-width: 38rem;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--ink);
  transition: box-shadow var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out);
}

:is(.field, .shelter, .operator) textarea,
textarea.input {
  min-height: 7rem;
  resize: vertical;
}

.input:hover,
:is(.field, .shelter, .operator) :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]):hover,
.tx-select:hover {
  box-shadow: 0 0 0 4px var(--yellow-soft);
}

.input:focus-visible,
:is(.field, .shelter, .operator) :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]):focus-visible,
.tx-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--yellow);
  border-color: var(--ink);
}

.input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
}

.input:disabled,
.field :is(input, select, textarea):disabled {
  border-color: var(--ground-2);
  background: var(--ground);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

.input--error,
.field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--danger);
}

.field-error,
[data-field-error] {
  margin: var(--s-1) 0 0;
  color: var(--danger);
  font-size: var(--t-small);
  font-weight: 700;
}

/* Флажки и переключатели: цель касания не меньше 44 px по высоте строки */
.check,
.operator label:has(> :is(input[type="checkbox"], input[type="radio"])) {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: var(--touch);
  margin: 0 0 var(--s-3);
  font-weight: 400;
}

.check input,
.field input[type="checkbox"],
.field input[type="radio"],
.operator input[type="checkbox"],
.operator input[type="radio"] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.field input[type="file"] {
  max-width: 38rem;
  padding: var(--s-2) 0;
}

fieldset {
  min-width: 0;
}

.copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin: var(--s-1) 0 var(--s-3);
}

.copy-row input {
  flex: 1 1 12rem;
  width: auto;
  min-width: 0;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.error-block {
  margin: 0 0 var(--s-4);
}

/* ---------- Чипы статусов: состояние различается формой метки, не только цветом ---------- */
.chip,
.pill,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px 3px 8px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-1);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-meta);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  vertical-align: baseline;
}

/* Длинные формулировки статусов читаются как предложение */
.pill,
.tag {
  display: inline-block;
  padding: 3px 10px;
}

.chip {
  white-space: nowrap;
}

.chip::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.chip--open,
.pill-yellow {
  background: var(--yellow);
}

.chip--review {
  border-style: dashed;
}

.chip--review::before {
  border: 1.5px solid currentColor;
  background: transparent;
}

.chip--ended,
.chip--cancel,
.chip--skipped {
  border-color: var(--ground-2);
  background: var(--ground);
  color: var(--muted);
}

.chip--done::before {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
}

.chip--cancel::before {
  height: 2px;
  border-radius: 0;
}

.chip--act,
.pill-coral {
  border-color: var(--coral);
  background: var(--coral);
}

.chip--notified {
  border-style: dashed;
}

.chip--notified::before {
  border: 1.5px solid currentColor;
  background: transparent;
}

.chip--claimed {
  background: var(--yellow-soft);
}

.chip--confirmed,
.chip--published,
.pill-dark {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.chip--clarify::before {
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  background: transparent;
}

.chip--paused {
  border-style: dashed;
  background: var(--ground);
}

.chip--report {
  border-style: dotted;
}

.chip--on-night {
  border-color: var(--on-night);
}

/* ---------- Уведомления ---------- */
.notice-warning {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--ink);
  border-radius: var(--r-1);
  background: var(--warn-bg);
  color: var(--warn-fg);
}

.notice-warning[role="alert"],
.notice-warning.error-block {
  border: 1px solid var(--danger);
  background: var(--paper);
  color: var(--danger);
}

.flash {
  margin: 0 0 var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ink);
  border-radius: var(--r-1);
  background: var(--paper);
}

.flash-success {
  background: var(--yellow-soft);
}

.flash-error {
  border-color: var(--danger);
  color: var(--danger);
}

.flash-error ul {
  margin: var(--s-2) 0 0;
  padding-left: 1.25rem;
}

.flash-error p {
  margin: 0;
}

/* ---------- Карточка и пунктир-отрыв ---------- */
.card {
  margin: 0 0 var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--ink);
  border-radius: var(--r-0);
  background: var(--paper);
  box-shadow: var(--e-1);
}

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.card legend {
  padding: 0 var(--s-1);
  font-weight: 700;
}

.tear,
.perf {
  height: 0;
  margin: var(--s-4) 0;
  border: 0;
  border-top: var(--perf);
}

.perf--thin {
  border-top-width: 1px;
}

/* ---------- Билет с корешком ----------
   <div class="ticket">
     <div class="ticket__body">…</div>
     <div class="ticket__stub">…</div>
   </div>
   Корешок справа на ≥768 px, снизу на мобильном; вырезы красятся цветом фона страницы (--bg).
   Модификаторы: --link (весь билет — ссылка), --sm (плотный), корешок: --cta, --ink, --quiet. */
.ticket {
  --notch: var(--bg);
  --ticket-bg: var(--paper);
  --stub-bg: var(--yellow);
  --stub-w: 220px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 var(--s-5);
  color: var(--ink);
  text-decoration: none;
  filter: var(--e-ticket);
  transition: transform var(--d-hover) var(--ease-out), filter var(--d-hover) var(--ease-out);
}

.ticket__body {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  min-width: 0;
  padding: var(--s-5);
  background: var(--ticket-bg);
}

.ticket__body > * {
  margin: 0;
}

.ticket__stub {
  /* Позы «отрыва»: наведение мышью и фокус — --tear-peak; при прокрутке на сенсорном экране корешок заметно отлетает
     (--torn-peak) и остаётся надорванным (--torn-rest) */
  --tear-peak: translateY(5px) rotate(-1.2deg);
  --tear-rest: translateY(2px) rotate(-.5deg);
  --torn-peak: translateY(16px) rotate(-3.4deg);
  --torn-rest: translateY(9px) rotate(-2deg);
  position: relative;
  display: grid;
  gap: var(--s-2);
  align-content: center;
  justify-items: start;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  border-top: 2px dashed var(--ink);
  background: var(--stub-bg);
  color: var(--ink);
  text-decoration: none;
  transform-origin: 0 0;
  transition: transform var(--d-hover) var(--ease-tear), background-color var(--d-hover) var(--ease-out);
}

.ticket__stub > * {
  margin: 0;
}

.ticket__stub::before,
.ticket__stub::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--notch);
}

.ticket__stub::before {
  left: -9px;
}

.ticket__stub::after {
  right: -9px;
}

.ticket__stub--cta {
  --stub-bg: var(--coral);
}

.ticket__stub--ink {
  --stub-bg: var(--ink);
  color: var(--paper);
}

.ticket__stub--quiet {
  --stub-bg: var(--ground-2);
}

.ticket__stub .link:not(.link-arrow) {
  display: inline-block;
  margin-top: var(--s-1);
  color: inherit;
}

/* Подпись корешка — вводное слово к значению («до 30 октября», «вы сообщили»), а не метка над ним */
.ticket__label {
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.3;
}

/* Крупное значение корешка: срок, сумма, число в очереди */
.ticket__value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ticket--sm .ticket__body {
  gap: var(--s-1);
  padding: var(--s-4);
}

.ticket--sm .ticket__stub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-3) var(--s-4);
}

.ticket__stub svg {
  width: 22px;
  height: 22px;
}

.ticket--link:active .ticket__stub {
  transition-duration: var(--d-press);
}

@media (min-width: 768px) {
  .ticket {
    grid-template-columns: minmax(0, 1fr) var(--stub-w);
  }

  .ticket__stub {
    --tear-peak: translateX(7px) rotate(1.6deg);
    --tear-rest: translateX(3px) rotate(.6deg);
    --torn-peak: translateX(18px) rotate(4deg);
    --torn-rest: translateX(10px) rotate(2.2deg);
    border-top: 0;
    border-left: 2px dashed var(--ink);
    transform-origin: 0 100%;
  }

  .ticket__stub::before,
  .ticket__stub::after {
    left: -10px;
    right: auto;
  }

  .ticket__stub::before {
    top: -9px;
  }

  .ticket__stub::after {
    top: auto;
    bottom: -9px;
  }

  .ticket--sm .ticket__stub {
    display: grid;
    justify-content: start;
    align-content: center;
  }
}

/* Подъём билета и «отрыв» корешка: единственный авторский жест системы.
   Мышь — наведение; сенсорный экран — прокрутка (блок «Отрыв без наведения» ниже), касание только переходит по ссылке. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .ticket--link:hover {
    transform: translateY(-3px);
    filter: var(--e-ticket-lift);
  }

  .ticket--link:hover .ticket__stub,
  .ticket__stub:is(a):hover,
  .ticket__stub:has(a:hover) {
    transform: var(--tear-peak);
  }

  .ticket--link:active .ticket__stub {
    transform: translateY(2px);
  }

  @media (min-width: 768px) {
    .ticket--link:active .ticket__stub {
      transform: var(--tear-rest);
    }
  }
}

/* Фокус с клавиатуры надрывает корешок на любом устройстве */
@media (prefers-reduced-motion: no-preference) {
  .ticket__stub:has(a:focus-visible) {
    transform: var(--tear-peak);
  }
}

/* ---------- Отрыв без наведения (M-2b.motion, docs/design/2026-10-25-mobile-scroll-motion.md) ----------
   [data-torn] ставит web/js/tear.js один раз, когда строка-билет целиком на экране (только сенсорный экран): корешок
   с data-tear="stub" надрывается и остаётся надорванным до конца просмотра страницы. Движение заметно крупнее наведения
   (M-2f.ui, 2026-10-26): корешок отлетает до --torn-peak за ~40 % времени с лёгким перелётом, затем оседает в
   --torn-rest. Итоговая поза — обычное объявление, анимация держит только начало (backwards): после неё наведение и
   фокус работают. */
@media (prefers-reduced-motion: no-preference) {
  [data-torn] {
    transform: var(--torn-rest, var(--tear-rest));
    animation: tear-off var(--d-tear) linear backwards;
  }
}

/* Первый экран главной: надрыв кнопки (мягкая поза наведения → надрыв), см. [data-tear="hero"] ниже */
@keyframes tear {
  0% {
    transform: var(--tear-from, none);
    animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); /* --ease-tear */
  }

  40% {
    transform: var(--tear-peak);
    animation-timing-function: cubic-bezier(.16, 1, .3, 1); /* --ease-out */
  }

  100% {
    transform: var(--tear-rest);
  }
}

@keyframes tear-off {
  0% {
    transform: var(--tear-from, none);
    animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); /* --ease-tear: быстрый отрыв с перелётом */
  }

  40% {
    transform: var(--torn-peak, var(--tear-peak));
    animation-timing-function: cubic-bezier(.16, 1, .3, 1); /* --ease-out: плавное оседание */
  }

  100% {
    transform: var(--torn-rest, var(--tear-rest));
  }
}

/* ---------- Фото в билете и карточке (M-4.32) ----------
   Обложка сбора / фото приюта / фото отчёта: кадр 16:9, без inline-стилей и внешних URL (CSP img-src 'self'). */
.ticket__photo,
.card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: var(--s-3);
}

/* ---------- Фото на всю ширину и лента-билет поперёк него ----------
   <section class="cover">
     <img class="cover__photo" …>
     <div class="ticket cover__band"> … </div>
   </section>
   Фото подставляется атрибутом src; object-fit держит кадр при любом размере файла. */
.cover {
  position: relative;
  isolation: isolate;
  min-height: max(100vh, 720px);
  min-height: max(100svh, 720px);
  background: var(--night);
}

/* M-2b.mobile: на телефоне шапка — обычная полоса над фото, как на остальных страницах (58 px: знак 56 + рамка 2), поэтому
   первый экран делится между ними, и лента-билет с корешком остаётся на экране целиком. */
@media (max-width: 767px) {
  .cover {
    min-height: max(calc(100vh - 58px), 720px);
    min-height: max(calc(100svh - 58px), 720px);
  }
}

.cover__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.cover__band {
  --tilt: -1.2deg;
  --ticket-bg: var(--yellow);
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 24px;
  margin: 0;
  transform: rotate(var(--tilt));
  filter: drop-shadow(3px 12px 18px rgba(0, 0, 0, .3));
}

.cover__band .ticket__stub::before,
.cover__band .ticket__stub::after {
  display: none;
}

.cover__body {
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
}

/* Заголовок главной — заглавные display-кегля из макета C: 40 → 96 px, до трёх строк */
.cover__band .hero-title {
  font-size: clamp(2.4rem, 1.5rem + 4.6vw, 6rem);
}

.cover__band .display {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  hyphens: manual;
}

.cover__lead {
  max-width: 40ch;
  font-size: 1rem;
  font-weight: 700;
}

/* Приют и город — строка под названием, не метка над ним */
.cover__byline {
  font-size: var(--t-body);
  font-weight: 700;
}

.cover__byline a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.cover__stub {
  display: block;
  justify-items: stretch;
  padding: 0;
  border-top: 0;
}

/* M-2b.mobile: на телефоне корешок ленты — четыре отдельные полоски, каждая красит себя сама. Сам корешок прозрачный:
   когда «Хочу помогать» надорвана и сдвинута, за ней виден фон страницы (фото), а не жёлтый листок. */
@media (max-width: 767px) {
  .cover__stub {
    background: transparent;
  }
}

.cover__desk {
  display: none;
}

.cover__cta {
  --tear-peak: rotate(1.6deg) translate(6px, 4px);
  --tear-rest: rotate(.6deg) translate(2px, 1px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: 72px;
  padding: 0 var(--s-5);
  background: var(--coral);
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 700;
  text-decoration: none;
  transform-origin: 0 0;
  transition: transform var(--d-hover) var(--ease-tear), box-shadow var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out);
}

.cover__cta svg {
  width: 26px;
  height: 26px;
  transition: transform var(--d-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cover__cta:hover {
    box-shadow: 0 12px 18px rgba(0, 0, 0, .2);
  }
}

.cover__cta:active {
  background: var(--coral-press);
  transition-duration: var(--d-press);
}

@media (prefers-reduced-motion: no-preference) {
  .cover__band {
    animation: settle var(--d-settle) var(--ease-out) both;
  }

  /* Первый экран главной: лента ложится, через --d-tear-delay надрывается главная кнопка (все устройства, один раз).
     Полоска «Хочу помогать» на мобильном, кнопка корешка на ≥768 px; позы — в .cover__cta и .tabs .tab-cta. */
  [data-tear="hero"] :is(.cover__cta, .tab-cta) {
    transform: var(--tear-rest);
    animation: tear var(--d-tear) linear var(--d-tear-delay) backwards;
  }

  /* Красная полоска «Хочу помогать» на телефоне надрывается на 0,6 с (M-2f.ui): к этому времени лента уже легла */
  [data-tear="hero"] .tab-cta {
    --d-tear-delay: 600ms;
  }

  /* В ленте «отрывается» сама кнопка, корешок остаётся на месте */
  .cover__band .cover__stub:is(:hover, :focus-within, :has(a)) {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cover__cta:hover {
    transform: var(--tear-peak);
  }

  .cover__cta:hover svg {
    transform: translateX(4px);
  }

  .cover__cta:active {
    transform: translate(2px, 1px);
  }
}

@keyframes settle {
  from {
    transform: rotate(calc(var(--tilt) - 2.4deg)) translateY(14px);
  }

  to {
    transform: rotate(var(--tilt)) translateY(0);
  }
}

/* Отрывные полоски 02: на мобильном корешок ленты — четыре вертикальные полоски, первая — действие */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: var(--perf);
  /* M-2b.mobile: корешок ленты прозрачный (см. ниже), поэтому под пунктиром лежит жёлтая полоска в его толщину:
     иначе промежутки пунктира показывали бы фото. */
  background: linear-gradient(var(--yellow), var(--yellow)) 0 0 / 100% 2px no-repeat border-box;
}

.tabs > * {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  min-width: 0;
  padding: var(--s-3) var(--s-1);
  border-right: 1px dashed var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-size: var(--t-meta);
  font-weight: 700;
  text-decoration: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* M-2b.mobile: каждая полоска повёрнута на 180°, поэтому её border-right виден слева. Разделитель нужен между каждой
   парой соседних полосок: он у второй, третьей и четвёртой, а у первой (левый край корешка) его нет. */
.tabs > :first-child {
  border-right: 0;
}

.tabs > a:not(.tab-cta) {
  transition: background-color var(--d-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tabs > a:not(.tab-cta):hover {
    background: var(--paper);
  }
}

.tabs > a:not(.tab-cta):active {
  background: var(--yellow-soft);
}

.tabs > a:focus-visible {
  outline-offset: -5px;
}

/* Подписи полосок — слова, а не метки: полоске нужна высота под вертикальный текст */
.cover__tabs > * {
  min-height: 132px;
}

.tabs .tab-cta {
  --tear-from: rotate(180deg);
  --tear-peak: rotate(177.8deg) translateY(-10px);
  --tear-rest: rotate(179deg) translateY(-4px);
  background: var(--coral);
  font-size: var(--t-small);
  transition: transform var(--d-hover) var(--ease-tear), box-shadow var(--d-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tabs .tab-cta:hover {
    box-shadow: 0 -8px 14px rgba(0, 0, 0, .2);
  }
}

.tabs .tab-cta:active {
  background: var(--coral-press);
  transition-duration: var(--d-press);
}

.tabs .tab-cta:focus-visible {
  outline-offset: -5px;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .tabs .tab-cta:hover {
    transform: var(--tear-peak);
  }

  .tabs .tab-cta:active {
    transform: rotate(180deg) translateY(-2px);
  }
}

.cover--page {
  min-height: 0;
  height: 82vh;
  height: 82svh;
}

@media (min-width: 768px) {
  .cover--page {
    height: 72vh;
    height: 72svh;
  }

  .cover__band {
    --stub-w: 320px;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 40px;
  }

  .cover__body {
    padding: var(--s-7) var(--s-6) var(--s-6);
  }

  .cover__stub {
    display: grid;
    align-content: end;
    justify-items: stretch;
    padding: var(--s-6) var(--s-5);
    border-left: 2px dashed var(--ink);
  }

  .cover__desk {
    display: grid;
    gap: var(--s-4);
    justify-items: start;
  }

  .cover__desk .cover__cta {
    justify-self: stretch;
  }

  .cover__tabs,
  .cover__more {
    display: none;
  }

  .cover__lead {
    font-size: var(--t-lead);
  }
}

@media (min-width: 1024px) {
  .cover {
    min-height: max(calc(100vh - 70px), 760px);
    min-height: max(calc(100svh - 70px), 760px);
  }

  .cover__band {
    --tilt: -1deg;
    --stub-w: 380px;
    z-index: 2;
    bottom: -64px;
    max-width: calc(var(--maxw) - 2 * var(--gutter));
    margin-inline: auto;
  }

  .cover--page .cover__band {
    --stub-w: 360px;
    bottom: -80px;
  }

  .cover__body {
    padding: var(--s-8) var(--s-7) var(--s-7);
  }

  .cover--page .cover__body {
    padding: var(--s-7);
  }

  .cover__band .hero-title {
    max-width: 14ch;
  }

  .cover__stub {
    padding: var(--s-7) var(--s-6);
  }

  /* Лента заходит на следующий раздел: ему нужен запас сверху */
  .cover + .section {
    padding-top: calc(var(--s-9) + 72px);
  }
}

/* ---------- Купоны: шаги механики как полоса отрывных купонов ---------- */
.coupons {
  display: grid;
  margin: 0 0 var(--s-5);
  background: var(--yellow);
  list-style: none;
  filter: drop-shadow(0 6px 14px rgba(28, 28, 28, .1));
}

.coupons > li {
  /* M-2b.mobile: купоны стоят на месте (у них нет ни наведения, ни отрыва при прокрутке) */
  position: relative;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-5);
  border-bottom: 2px dashed var(--ink);
  background: inherit;
}

.coupons > li:last-child {
  border-bottom: 0;
  background: var(--coral);
}

.coupons .muted {
  color: var(--ink-2);
}

.coupons .h3 {
  hyphens: auto;
  overflow-wrap: break-word;
}

.coupon__n {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
}

@media (min-width: 768px) {
  .coupons:not(.coupons--compact) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .coupons:not(.coupons--compact) > li {
    padding: var(--s-6) var(--s-4) var(--s-7);
    border-bottom: 0;
    border-right: 2px dashed var(--ink);
  }

  .coupons:not(.coupons--compact) > li:last-child {
    border-right: 0;
  }

  .coupons:not(.coupons--compact) > li:not(:last-child)::before,
  .coupons:not(.coupons--compact) > li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -10px;
    z-index: 1;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--paper);
  }

  .coupons:not(.coupons--compact) > li::before {
    top: -9px;
  }

  .coupons:not(.coupons--compact) > li::after {
    bottom: -9px;
  }

  .coupon__n {
    margin-bottom: var(--s-4);
    font-size: 4rem;
  }

  .coupons--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coupons--compact > li:nth-child(odd) {
    border-right: 2px dashed var(--ink);
  }

  .coupons--compact > li:nth-child(-n + 2) {
    border-bottom: 2px dashed var(--ink);
  }

  .coupons--compact > li:nth-child(n + 3) {
    border-bottom: 0;
  }

  .coupons--compact .coupon__n {
    margin-bottom: var(--s-2);
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .coupons:not(.coupons--compact) > li {
    padding-inline: var(--s-5);
  }
}

/* ---------- Таблицы ---------- */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.table,
.queue,
.operator table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.table th,
.queue th,
.operator th {
  padding: var(--s-3);
  border-bottom: 2px solid var(--ink);
  color: var(--muted);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-meta);
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
  white-space: nowrap;
}

.table td,
.queue td,
.operator td {
  padding: var(--s-3);
  border-bottom: 1px dashed var(--ink);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.table tbody tr,
.queue tbody tr,
.operator tbody tr {
  transition: background-color var(--d-hover) var(--ease-out);
}

.table tbody tr:hover,
.queue tbody tr:hover,
.operator tbody tr:hover {
  background: var(--yellow-soft);
}

.table .r {
  text-align: right;
}

/* До 768 px строка таблицы становится карточкой «подпись: значение» (подпись — data-label ячейки) */
@media (max-width: 767px) {
  .table-wrap {
    overflow: visible;
  }

  .table--cards,
  .queue,
  .operator table {
    display: block;
  }

  .table--cards thead,
  .queue thead,
  .operator thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .table--cards tbody,
  .queue tbody,
  .operator tbody {
    display: block;
  }

  .table--cards tr,
  .queue tr,
  .operator tbody tr {
    display: block;
    margin: 0 0 var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--ink);
    background: var(--paper);
  }

  .table--cards td,
  .queue td,
  .operator td {
    display: block;
    width: 100%;
    padding: var(--s-1) 0;
    border: 0;
  }

  .table--cards td::before,
  .queue td::before,
  .operator td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: var(--t-meta);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .table--cards td:not([data-label])::before,
  .table--cards td[data-label=""]::before,
  .queue td:not([data-label])::before,
  .queue td[data-label=""]::before,
  .operator td:not([data-label])::before,
  .operator td[data-label=""]::before {
    content: none;
  }

  .table--cards .r {
    text-align: left;
  }
}

/* ---------- Пустое состояние ---------- */
.empty {
  padding: var(--s-6);
  border: 2px dashed var(--ground-2);
  color: var(--muted);
  text-align: center;
}