/* =============================================================================
   Слой 5 из 7: донор (публичные страницы, подключение, «Моя помощь», вход).
   Общие компоненты и токены уже заданы слоями выше; здесь остаётся то, что
   относится только к донору.

   Оболочки экранов:
     .flow — подключение и вход: билет-форма со шагом в корешке и заметка «Как это работает»;
     .me   — «Моя помощь» и страницы управления: билеты просьб, плотные билеты приютов, история;
     публичные страницы (главная, «Как это работает», приюты, сбор, отчёт, реквизиты, ошибки) —
     последний раздел файла «public pages».
   ============================================================================= */

/* Экран-форма: читаемая колонка вместо «полоски» посередине широкого экрана.
   Страницы с раскладкой на всю ширину помечаются `donor--wide`. */
.donor:not(.donor--wide) {
  max-width: var(--w-prose);
}

.donor--wide {
  min-width: 0;
}

/* Сумма потребности на карточке сбора */
.need strong {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* =============================================================================
   Рабочие экраны донора: «Моя помощь», управление, перевод, подключение, вход.
   Фон — холодно-серый, как у остальных рабочих экранов; бумага (билеты, заметки) лежит поверх него.
   ============================================================================= */

body:has(.me, .flow) {
  --bg: var(--ground);
}

.me,
.flow {
  min-width: 0;
}

.me {
  display: grid;
  gap: var(--s-6);
  align-content: start;
}

.me > * {
  min-width: 0;
  margin-block: 0;
}

.me > .block {
  margin-bottom: var(--s-6);
}

/* Одиночные формы и статусы: колонка читаемой ширины, прижатая влево, а не «полоска» посередине */
.me--narrow,
.me-narrow {
  width: 100%;
  max-width: var(--w-prose);
}

/* В рабочих экранах билеты отделяются промежутками контейнера, а не нижним полем */
.me .ticket,
.flow .ticket {
  margin: 0;
}

/* Корешок «отрывается» только у кнопки: корешки с несколькими ссылками не должны уезжать из-под курсора */
@media (prefers-reduced-motion: no-preference) {
  :is(.me, .flow) .ticket__stub:is(:hover, :has(a:hover), :has(a:focus-visible)) {
    transform: none;
  }
}

/* ---------- Бумажные заметки и сводки ---------- */
.paper {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  min-width: 0;
  padding: var(--s-5);
  background: var(--paper);
  box-shadow: var(--e-1);
}

.paper > * {
  margin: 0;
}

/* Сводка «подпись: значение»; `.facts--row` на ≥768 выкладывает значения в ряд */
.facts {
  display: grid;
  margin: 0;
}

.facts > div {
  display: grid;
  gap: 2px;
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--ink);
}

.facts > div:first-child {
  padding-top: 0;
}

.facts > div:last-child {
  border-bottom: 0;
}

.facts dt {
  color: var(--muted);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.facts .amount {
  font-size: 1.75rem;
  letter-spacing: -.03em;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .facts--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .facts--row > div {
    padding: 0 var(--s-4);
    border-right: 1px dashed var(--ink);
    border-bottom: 0;
  }

  .facts--row > div:first-child {
    padding-left: 0;
  }

  .facts--row > div:last-child {
    border-right: 0;
  }
}

/* Нумерованные пояснения в заметке и в шагах «связи с каналом» */
.rules {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
}

.rules li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) 2.5rem;
  border-bottom: 1px dashed var(--ink);
  counter-increment: rule;
}

.rules li:last-child {
  border-bottom: 0;
}

.rules li::before {
  content: counter(rule);
  position: absolute;
  top: var(--s-3);
  left: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--ink);
  background: var(--yellow);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1;
}

/* Шаги «связи с Telegram» внутри билета: плотнее, чем пояснения в заметке */
.rules--steps li {
  padding-block: var(--s-2);
}

.rules--steps li::before {
  top: var(--s-2);
}

/* ---------- Баннеры: сообщения отключены, канал недоступен ---------- */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 2px dashed var(--ink);
  background: var(--yellow);
}

.banner > * {
  margin: 0;
}

.banner p {
  max-width: var(--measure);
}

.banner form {
  margin: 0;
}

.banner--alert {
  border: 2px solid var(--danger);
  background: var(--paper);
}

/* «Правило подтверждено»: последний шаг подключения, листок ложится на место */
.flash--done {
  --tilt: -.5deg;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-5);
  border: 2px dashed var(--ink);
  background: var(--yellow);
  transform: rotate(var(--tilt));
}

.flash--done p {
  margin: 0;
}

.flash--done strong {
  font-size: var(--t-h3);
  letter-spacing: -.01em;
}

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

/* Карточка во фрагментах HTMX (корень остаётся `.card`: на него указывают цели `closest .card`) */
.card--stack {
  display: grid;
  gap: var(--s-3);
}

.card--stack > * {
  margin: 0;
}

/* Чип с длинной формулировкой переносится по словам */
.chip--wrap {
  align-items: flex-start;
  white-space: normal;
}

.chip--wrap::before {
  margin-top: .32em;
}

/* Группа переключателей: пунктирная рамка вместо серой обводки браузера */
.choice {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-4);
  border: 2px dashed var(--ink);
}

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

.choice .check {
  margin: 0;
}

.check > span {
  min-width: 0;
}

/* ---------- Билет-форма ---------- */
.form-ticket {
  --stub-w: 270px;
}

.form-ticket .ticket__body {
  grid-template-columns: minmax(0, 1fr); /* колонка не растёт от содержимого: поля и ряды чипов не уходят под корешок */
  gap: var(--s-4);
}

.form-ticket .ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--s-3);
}

/* Кнопка корешка уходит вниз корешка и тянется на всю его ширину */
.form-ticket .ticket__stub > .btn {
  align-self: stretch;
  margin-top: auto;
}

/* Выбор файла в тон полям */
.field input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-right: var(--s-3);
  padding: 0 var(--s-4);
  border: 2px solid var(--ink);
  border-radius: var(--r-1);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--d-hover) var(--ease-out);
}

.field input[type="file"]::file-selector-button:hover {
  background: var(--yellow);
}

.form-ticket .field {
  min-width: 0;
  margin: 0;
}

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

/* ---------- Чипы суммы в правиле (M-2d.ui, правка 2026-10-26) ----------
   Малые «таблетки» под полями «На один сбор» и «Всего в месяц»: типовые значения, нажатие подставляет их в поле. Это
   настоящие submit-кнопки (без скрипта форма уходит на сервер и возвращается с подставленным значением). Все чипы
   поля стоят в одной строке и делят её поровну (на телефоне 360–390 px). От 768 px чипы идут по своей ширине и
   переносятся, только если поле уже суммы их ширин (узкая колонка билета на 1024 px): ряд не раздвигает поле и не
   уходит под корешок. Видимая высота 30 px (32 от 768 px), цель касания 40 px (42 от 768 px; ::after расширяет её без
   изменения вёрстки). Выбранный — aria-pressed="true", заливка чернилами. */
#rule-form {
  scroll-margin-top: 72px; /* шапка 58 px + запас: якорь формы после нажатия чипа без скрипта */
}

.presets {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  max-width: 38rem;
  margin: var(--s-1) 0 0;
}

.preset {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 30px;
  padding: 0 var(--s-1);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-meta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}

/* Цель касания 40 px по высоте: невидимое поле вокруг таблетки (отсчёт от внутреннего края рамки 2 px), соседние
   чипы не перекрываются (зазор 6 px, поле по бокам 2 px) */
.preset::after {
  content: "";
  position: absolute;
  inset: -7px -4px;
}

/* Наведение — только мышь: на сенсорном экране :hover «залипает» на нажатом чипе и спорит с выбранным */
@media (hover: hover) and (pointer: fine) {
  .preset:hover {
    background: var(--yellow);
  }
}

.preset:active {
  background: var(--yellow-soft);
  transition-duration: var(--d-press);
}

.preset[aria-pressed="true"],
.preset[aria-pressed="true"]:active {
  background: var(--ink);
  color: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
  .preset[aria-pressed="true"]:hover {
    background: var(--night-2);
  }
}

@media (min-width: 768px) {
  .presets {
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .preset {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
  }

  .preset::after {
    inset: -7px -4px;
  }
}

/* Поля суммы в правиле — как до чипов: чёрная рамка, без жёлтого ореола. Ореол наведения остаётся мыши; на сенсорном
   экране он «залипал» после касания. Фокус — тёмное кольцо вместо жёлтого: его видно и на белом листе билета. */
#rule-form .field input:not([type="hidden"]) {
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  #rule-form .field input:not([type="hidden"]):hover {
    box-shadow: 0 0 0 4px var(--yellow-soft);
  }
}

#rule-form .field input:not([type="hidden"]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: none;
}

@media (min-width: 768px) {
  .form-ticket .ticket__body {
    padding: var(--s-6);
  }

  .form-ticket .ticket__stub {
    padding: var(--s-6) var(--s-5);
  }
}

/* Билет с корешком снизу на любой ширине: узкие экраны с одним билетом и боковые колонки */
@media (min-width: 768px) {
  .ticket--stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .ticket--stack .ticket__stub {
    --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);
    border-top: 2px dashed var(--ink);
    border-left: 0;
    transform-origin: 0 0;
  }

  .ticket--stack .ticket__stub::before {
    top: -10px;
    left: -9px;
  }

  .ticket--stack .ticket__stub::after {
    top: -10px;
    right: -9px;
    bottom: auto;
    left: auto;
  }
}

/* ---------- Подключение и вход ---------- */
.flow {
  display: grid;
  gap: var(--s-7);
  align-items: start;
}

.flow__main {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-width: 0;
  max-width: var(--w-prose);
}

.flow__main > * {
  margin-block: 0;
}

.flow__main > .h1 {
  margin-top: var(--s-2);
}

.flow--solo .flow__main {
  max-width: 44rem;
}

/* Заметка «Как это работает»: бумага с пунктирным краем */
.flow__aside {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-width: 0;
  padding: var(--s-5);
  border: 2px dashed var(--ink);
  background: var(--paper);
}

.flow__aside > * {
  margin: 0;
}

@media (min-width: 1024px) {
  .flow:not(.flow--solo) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-8);
  }

  .flow__aside {
    position: sticky;
    top: 92px;
    padding: var(--s-6);
  }
}

/* Путь подключения */
.trail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) 0;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  list-style: none;
  counter-reset: trail;
}

.trail li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  counter-increment: trail;
}

.trail li:first-child {
  padding-left: 0;
}

.trail li + li {
  border-left: 1px dashed var(--ink);
}

.trail li::before {
  content: counter(trail);
  display: grid;
  place-items: center;
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: var(--t-meta);
  line-height: 1;
}

.trail li.is-done {
  color: var(--ink);
}

.trail li.is-done::before {
  border-color: var(--ink);
  background: var(--yellow);
}

.trail li[aria-current] {
  color: var(--ink);
}

.trail li[aria-current]::before {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 767px) {
  .trail li:not([aria-current]) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .trail li:not([aria-current]) {
    padding-inline: var(--s-2);
  }
}

/* Выбор канала и способа входа */
.choices {
  display: grid;
  gap: var(--s-3);
}

.choices > form {
  margin: 0;
}

/* Связь с каналом: ожидание, ввод кода, повторная отправка */
.bind {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--ink);
}

.bind > * {
  margin: 0;
}

.bind .field {
  margin: 0;
}

.bind__wait {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 700;
}

.bind__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral);
}

@media (prefers-reduced-motion: no-preference) {
  .bind__dot {
    animation: bind-pulse 1600ms var(--ease-out) infinite;
  }
}

@keyframes bind-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 90, 79, .55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 10px rgba(255, 90, 79, 0);
  }
}

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

.bind__more {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--ink);
}

.bind__more > *,
.bind__more form > * {
  margin-block: 0;
}

.bind__more form {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  margin: 0;
}

/* ---------- «Моя помощь» ---------- */
.me .page-head {
  margin: 0;
}

.me .page-head > * {
  margin: 0;
}

/* Билет просьбы: тело — суть, корешок — сумма и главное действие */
.req {
  --stub-w: 300px;
}

.req__body {
  gap: var(--s-3);
}

.req__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.req__byline {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
}

/* Реквизиты в билете просьбы: получатель, номер Kaspi (копируется одним нажатием) и назначение платежа */
.req__reqs {
  display: grid;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-2) 0 0;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--ink);
}

.req__reqs > div {
  display: grid;
  gap: var(--s-1);
  align-content: start;
  min-width: 0;
}

.req__reqs dt {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
}

.req__reqs dd {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.req__reqs .copy-row {
  margin: 0;
}

.req__reqs .copy-row input {
  -webkit-user-select: all;
  user-select: all;
}

@media (min-width: 1024px) {
  .req__reqs {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.req__title {
  font-size: clamp(2rem, 1.6rem + 1.9vw, 3.5rem);
}

.req__stub {
  justify-items: stretch;
  gap: var(--s-3);
  padding: var(--s-5);
}

.req__stub .link {
  justify-self: start;
}

.req__stub > .ticket__label,
.req__stub > .ticket__value {
  justify-self: start;
}

.req__amount {
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
}

/* Ожидает уведомления: билет без жёлтого корешка, тело в пунктирной рамке */
.req--notified {
  --stub-bg: var(--paper);
}

.req--notified .ticket__body {
  outline: 2px dashed var(--ink);
  outline-offset: -2px;
}

.req--notified .ticket__value {
  font-size: 2rem;
}

@media (min-width: 1024px) {
  .req__body {
    padding: var(--s-6) var(--s-7) var(--s-6) var(--s-6);
  }

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

/* Мои приюты: плотные билеты, правило в теле, состояние и действие в корешке */
.org-grid {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

@media (min-width: 1440px) {
  .org-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

.org-tk {
  --stub-w: 230px;
}

.org-tk .ticket__body {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4);
}

.org-tk__photo {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.org-tk__main {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.org-tk__main > * {
  margin: 0;
}

.org-tk .ticket__stub {
  display: grid;
  justify-content: start;
  gap: var(--s-1);
  align-content: center;
}

.org-tk .ticket__stub form {
  margin: 0;
}

.org-tk__join {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--ink);
}

.org-tk__main .notice-warning {
  margin: 0;
  padding: var(--s-1) var(--s-3);
}

/* «Сообщения и отключение»: второстепенное убрано под заголовок */
.more {
  padding-top: var(--s-1);
  border-top: 1px dashed var(--ink);
}

.more > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--touch);
  font-size: var(--t-small);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.more > summary::-webkit-details-marker {
  display: none;
}

.more > summary::after {
  content: "";
  width: .5rem;
  height: .5rem;
  margin-top: -.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--d-hover) var(--ease-out);
}

.more[open] > summary::after {
  margin-top: .2rem;
  transform: rotate(-135deg);
}

.more__row {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  margin: 0 0 var(--s-3);
}

.more .check {
  margin: 0;
}

/* История: плотная таблица на десктопе, карточки на мобильном (общий `.table--cards`) */
.ledger {
  background: var(--paper);
}

.ledger td {
  vertical-align: middle;
}

@media (min-width: 768px) {
  .ledger th,
  .ledger td {
    padding-inline: var(--s-4);
  }

  .ledger .ledger__status {
    border-left: 2px dashed var(--ink);
  }

  .ledger th.r,
  .ledger td.ledger__sum {
    background: var(--yellow-soft);
  }

  .ledger tbody tr:hover td.ledger__sum {
    background: var(--yellow);
  }
}

@media (max-width: 767px) {
  .ledger td.ledger__sum {
    font-size: 1.125rem;
  }
}

/* Настройки: тихие действия в одной строке */
.settings__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.settings__row form {
  margin: 0;
}

/* Месяцы в «Учтено в лимите» */
.months {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.months :is(a, strong) {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--s-4);
  border: 2px solid var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--d-hover) var(--ease-out);
}

.months a:hover {
  background: var(--yellow);
}

.months strong {
  background: var(--ink);
  color: var(--paper);
}

.cols-2 {
  display: grid;
  gap: var(--s-5);
  align-items: start;
  min-width: 0;
}

@media (min-width: 1024px) {
  .cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Карточка запроса: сведения слева, действия билетом справа (на узких экранах действия выше сведений) */
.grid--main-aside > .act {
  order: -1;
}

@media (min-width: 1024px) {
  .grid--main-aside > .act {
    order: 0;
  }
}

.act .ticket__body {
  gap: var(--s-3);
}

.act form {
  margin: 0;
}

/* Перевод: реквизиты и форма заявления в две колонки на десктопе */
.pay {
  display: grid;
  gap: var(--s-5);
  align-items: start;
  min-width: 0;
}

@media (min-width: 1024px) {
  .pay:has(> .ticket + .ticket) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
  }
}

.pay .ticket {
  min-width: 0;
}

.pay pre.details {
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--ink);
  background: var(--ground);
}

/* =============================================================================
   public pages: главная, «Как это работает», приюты, страница приюта, сбор,
   отчёт, реквизиты, страницы ошибок (M-2b.03, линия «публичная часть»).
   Раскладка C «Билет с корешком»: фото на всю ширину и лента-билет (`.cover`),
   строки-билеты сборов (`.camp`), купоны (`.coupons`), тёмный раздел (`.section--night`).
   ============================================================================= */

/* Вырезы билета красятся цветом подложки раздела, а не страницы */
.donor .section {
  --bg: var(--ground);
}

.donor .section--paper {
  --bg: var(--paper);
}

.donor .section--night {
  --bg: var(--night);
}

/* Страницы чтения, справки и ошибок лежат на сером, как рабочие экраны */
body:has(.read, .reqs, .oops, .camp--org) {
  --bg: var(--ground);
}

/* Якоря не прячутся под липкой шапкой */
#join,
#needed,
#mine,
#rule {
  scroll-margin-top: 120px;
}

.donor .page-head > * {
  margin: 0;
}

@media (min-width: 1024px) {
  .donor .page-head--row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44ch);
    align-items: end;
    gap: var(--s-7);
  }
}

.section__more {
  margin: var(--s-6) 0 0;
}

/* ---------- Строка-билет сбора и приюта ---------- */
.camps {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

.camps > .ticket {
  margin: 0;
}

.camp {
  --stub-w: 270px;
}

.camp__body {
  display: grid;
  gap: 0;
  align-content: stretch;
  padding: 0;
}

.camp__photo {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night);
}

.camp__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Закрытые сборы чуть тише: фото приглушено, чтобы открытые читались первыми */
.camp:not([data-state="open"]) .camp__photo img {
  filter: saturate(.55);
}

.camp__text {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  min-width: 0;
  padding: var(--s-4) var(--s-5) var(--s-5);
}

.camp__text > * {
  margin: 0;
}

.camp__title {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 3rem);
}

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

.camp__date {
  font-size: 1.5rem;
}

.camp__purpose {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--muted);
  max-width: var(--measure);
}

.camp .need strong {
  font-size: 1.125rem;
}

/* Растянутая ссылка: весь билет открывает сбор, а ссылка в корешке («Открыть отчёт») остаётся отдельной */
.camp__link {
  color: inherit;
  text-decoration: none;
}

.camp__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.camp__link:focus-visible {
  outline: none;
}

.camp:has(.camp__link:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.camp__stub {
  z-index: 2;
  gap: var(--s-2);
  align-content: start;
  pointer-events: none;
}

.camp__stub .camp__report {
  pointer-events: auto;
}

.camp .camp__go {
  display: inline-flex;
  margin-top: auto;
}

.camp__stub .chip {
  max-width: 100%;
}

.pub-status {
  display: grid;
  gap: var(--s-1);
  justify-items: start;
}

.pub-status .pill {
  display: block;
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--ink);
  border-radius: var(--r-1);
  background: var(--ground);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.pub-status__reason {
  color: var(--muted);
  font-size: var(--t-small);
}

@media (min-width: 768px) {
  .camp__body {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  }

  /* Фото заполняет строку по высоте текста и не растягивает её собственной пропорцией */
  .camp__photo {
    position: relative;
    aspect-ratio: auto;
    height: 100%;
    min-height: 168px;
  }

  .camp__photo img {
    position: absolute;
    inset: 0;
  }

  .camp__text {
    align-content: center;
    padding: var(--s-5) var(--s-6);
  }

  /* Корешок: чип, срок и действие разнесены сверху вниз */
  .camp__stub {
    align-content: space-between;
    justify-items: start;
    padding: var(--s-5);
  }

  .camp--plain .camp__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .camp--plain .camp__text {
    padding-inline: var(--s-6);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .camp__photo img {
    transition: transform 900ms var(--ease-out);
  }

  .camp:hover .camp__photo img {
    transform: scale(1.05);
  }
}

/* ---------- Главная: «Помощь по правилу» и «Кто стоит за Паналапом» ---------- */
.who {
  display: grid;
  gap: var(--s-6);
}

.who__text {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  min-width: 0;
}

.who__text > * {
  margin: 0;
}

.who__dl {
  display: grid;
  margin: 0;
  border-top: 1px dashed var(--on-night-muted);
}

.who__dl > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--on-night-muted);
}

.who__dl dt {
  color: var(--yellow);
  font-weight: 700;
}

.who__dl dd {
  margin: 0;
  color: var(--on-night-muted);
}

@media (min-width: 1024px) {
  .who {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-9);
  }

  .who__dl > div {
    grid-template-columns: 9rem minmax(0, 1fr);
  }
}

/* Подпись и заголовок в тёмном разделе и в купонах */
.coupons .h3 {
  font-size: 1.25rem;
}

/* ---------- «Как это работает» ---------- */
.how {
  display: grid;
  gap: var(--s-7);
  align-items: start;
  margin: var(--s-7) 0;
}

.how__main > h2,
.how__side {
  margin: 0;
}

.how__main {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.how__side {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.how__cta {
  --stub-w: 280px;
  margin: 0 0 var(--s-6);
}

.how__cta .ticket__stub .link {
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .how {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-8);
    margin: var(--s-8) 0;
  }
}

.pub-list {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}

.pub-list li {
  max-width: var(--measure);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--ink);
}

.pub-list--tight {
  margin: var(--s-3) 0 0;
}

.pub-list--tight li {
  padding-block: var(--s-2);
  font-size: var(--t-small);
}

/* Сводка «подпись: значение» (сбор, приют) */
.pub-facts,
.pub-brief {
  display: grid;
  margin: 0;
}

.pub-facts > div,
.pub-brief > div {
  display: grid;
  gap: 2px;
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--ink);
}

.pub-facts > div:first-child {
  padding-top: 0;
}

.pub-facts > div:last-child {
  border-bottom: 0;
}

.pub-facts dt {
  font-weight: 700;
}

.pub-facts dd {
  margin: 0;
  color: var(--muted);
}

.pub-brief {
  border-top: 2px solid var(--ink);
}

.pub-brief dt {
  color: var(--muted);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}

.pub-brief dd {
  display: grid;
  gap: var(--s-1);
  justify-items: start;
  margin: 0;
  font-size: 1.125rem;
}

.pub-brief dd > p {
  margin: 0;
}

.pub-brief__note {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 400;
}

/* ---------- Страница приюта ---------- */
.pub-org .join {
  --stub-w: 340px;
  margin: 0 0 var(--s-8);
}

.join .ticket__body {
  gap: var(--s-2);
  padding: var(--s-5);
}

.join__go {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  text-decoration: none;
}

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

.join__go--cta {
  font-size: 1.375rem;
  line-height: 1.15;
}

/* Весь корешок — ссылка */
.join__go::after {
  content: "";
  position: absolute;
  inset: 0;
}

.join__go:focus-visible {
  outline: none;
}

.join .ticket__stub:has(.join__go:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: -6px;
}

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

@media (min-width: 768px) {
  .join .ticket__body {
    padding: var(--s-6);
  }

  .join .ticket__stub {
    padding: var(--s-6) var(--s-5);
  }
}

.pub-org__grid {
  display: grid;
  gap: var(--s-7);
  align-items: start;
  min-width: 0;
}

.pub-org__main {
  display: grid;
  gap: var(--s-7);
  min-width: 0;
}

.pub-org__main .block {
  gap: var(--s-5);
  margin: 0;
}

.pub-org__main .block > * {
  margin: 0;
}

.pub-org__main .block > .ticket {
  margin: 0;
}

.pub-org__side {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-width: 0;
}

.pub-org__side .paper {
  border: 1px dashed var(--ink);
  box-shadow: none;
}

.pub-org__side .h3 {
  margin: 0;
}

.pub-org .empty p + p {
  margin-top: var(--s-2);
}

.pub-org__all {
  margin: var(--s-7) 0 0;
}

/* Строки-билеты на всю ширину; справочные заметки — двумя колонками под ними */
@media (min-width: 768px) {
  .pub-org__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: start;
  }

  .pub-org__side .paper {
    padding: var(--s-5);
  }
}

@media (min-width: 1024px) {
  .pub-org__side .paper {
    padding: var(--s-6);
  }
}

/* ---------- Страница сбора ---------- */
.cover--page .cover__body {
  align-content: center;
}

/* Ссылки со стрелкой в узких колонках переносятся по словам: стрелка идёт за последним словом */
:is(.pub-camp__brief, .pub-camp__side, .read__links) .link-arrow {
  display: inline;
}

/* Последнее слово и стрелка не расходятся по строкам там, где ссылка течёт как текст (узкие колонки);
   в flex-ссылках обёртка прозрачна, стрелка остаётся отдельным flex-элементом */
.link-tail {
  display: contents;
}

:is(.pub-camp__brief, .pub-camp__side, .read__links) .link-tail {
  display: inline;
  white-space: nowrap;
}

:is(.pub-camp__brief, .pub-camp__side, .read__links) .link-arrow svg {
  display: inline;
  margin-left: .35em;
}

.pub-when {
  margin: 0;
}

@media (min-width: 768px) {
  .pub-when {
    display: none;
  }
}

.pub-camp {
  display: grid;
  gap: var(--s-6);
  align-items: start;
  min-width: 0;
}

.pub-camp > * {
  min-width: 0;
  margin-block: 0;
}

.pub-camp__preview {
  grid-area: preview;
}

.pub-camp__main {
  display: grid;
  gap: var(--s-6);
  align-content: start;
  grid-area: main;
}

.pub-camp__brief {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  grid-area: brief;
}

.pub-camp__brief > * {
  margin: 0;
}

.pub-camp__side {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  grid-area: side;
}

.pub-camp__side .paper {
  border: 1px dashed var(--ink);
  box-shadow: none;
}

.pub-camp__side .paper .h3 {
  margin: 0;
}

.pub-camp__side .past {
  --stub-w: 104px;
  margin: 0;
}

.pub-camp__side .past h3 {
  hyphens: auto;
}

.pub-camp__side .past .ticket__stub {
  align-content: center;
}

.pub-camp__side .past .camp__link {
  font-weight: 700;
}

.pub-camp {
  grid-template-areas:
    "preview"
    "main"
    "brief"
    "side";
}

/* 1024–1439: две колонки (факты | описание), «О приюте» и прошлые сборы — рядом внизу */
@media (min-width: 1024px) {
  .pub-camp {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    grid-template-areas:
      "preview preview"
      "brief main"
      "side side";
    gap: var(--s-7);
  }

  /* Колонка фактов занимает всю высоту своей строки; липнет только вложенный блок,
     поэтому он останавливается у нижней границы строки и не заезжает на «Прошлые сборы» */
  .pub-camp__brief {
    align-self: stretch;
  }

  .pub-camp__stick {
    display: grid;
    gap: var(--s-4);
    align-content: start;
  }

  .pub-camp__stick > * {
    margin: 0;
  }

  /* Липкость только там, где блок помещается в окне: иначе его нижняя часть была бы недоступна */
  @media (min-height: 760px) {
    .pub-camp__stick {
      position: sticky;
      top: 100px;
    }
  }

  .pub-camp__side {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .pub-camp__side > h2 {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1440px) {
  .pub-camp {
    grid-template-columns: minmax(0, 3fr) minmax(0, 5.4fr) minmax(0, 3.6fr);
    grid-template-areas:
      "preview preview preview"
      "brief main side";
  }

  .pub-camp__side {
    grid-template-columns: minmax(0, 1fr);
  }

  @media (min-height: 760px) {
    .pub-camp__side {
      position: sticky;
      top: 100px;
    }
  }
}

.pub-prose {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.pub-prose > * {
  margin: 0;
}

.pub-prose__text {
  max-width: var(--measure);
  white-space: pre-line;
}

/* Отметка о проверке нужды: печать на странице, текст ровно как в правиле D17 */
.pub-proof {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  width: fit-content;
  max-width: 100%;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border: 2px solid var(--ink);
  background: var(--yellow);
  font-weight: 700;
}

.pub-proof__icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
}

/* Заметка под описанием: статус и оговорка про другие каналы */
.pub-note {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: var(--ground);
  border-top: var(--perf);
}

.pub-note > * {
  margin: 0;
}

.pub-note .pub-status {
  justify-items: start;
}

/* Личный блок донора */
.pub-mine {
  display: grid;
  gap: var(--s-3);
}

.pub-mine > h2 {
  margin: 0;
}

.pub-mine .ticket {
  margin: 0;
}

.pub-mine .ticket__stub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}

.pub-mine .ticket__stub .btn {
  width: 100%;
}

.pub-mine .ticket__stub .link {
  margin: 0;
}

.pub-mine .ticket__body > p {
  max-width: var(--measure);
}

@media (min-width: 768px) {
  .pub-mine .ticket__stub .btn {
    width: auto;
  }
}

/* ---------- Отчёт: страница для чтения ---------- */
.read__head {
  display: grid;
  gap: var(--s-3);
  max-width: 56rem;
  margin-bottom: var(--s-6);
}

.read__head > * {
  margin: 0;
}

.read {
  display: grid;
  gap: var(--s-6);
  align-items: start;
  min-width: 0;
}

.read > * {
  min-width: 0;
}

.read--solo {
  max-width: 44rem;
}

.read__aside {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
}

.read__aside > * {
  margin: 0;
}

.read__date {
  font-size: 1.125rem;
  font-weight: 700;
}

.read__stamp {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 2px dashed var(--ink);
  background: var(--yellow);
  font-weight: 700;
}

.read__stamp .pub-proof__icon {
  margin-top: 1px;
}

.read__links {
  line-height: 2;
}

.read__main {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

.read__sheet {
  padding: var(--s-5);
  background: var(--paper);
  box-shadow: var(--e-1);
  font-size: 1.0625rem;
  line-height: 1.6;
}

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

.read__sheet > h2 {
  margin: var(--s-7) 0 var(--s-3);
}

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

.read__sheet .report-text {
  max-width: var(--measure);
}

.read__amend {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 2px dashed var(--ink);
  background: var(--paper);
}

.read__amend > * {
  margin: 0;
}

.proofs {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-4);
  padding: 0;
  list-style: none;
}

.proofs__link {
  display: block;
  overflow: hidden;
  background: var(--night);
}

.proofs__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.proofs__item--doc {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--ink);
  background: var(--ground);
  font-weight: 700;
}

.proofs__link:focus-visible {
  outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .proofs__img {
    transition: transform 600ms var(--ease-out);
  }

  .proofs__link:hover .proofs__img {
    transform: scale(1.04);
  }
}

@media (min-width: 768px) {
  .proofs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 1024px) {
  .read:not(.read--solo) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: var(--s-8);
  }

  .read__aside {
    position: sticky;
    top: 100px;
  }

  .proofs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Назначение и реквизиты ---------- */
.reqs {
  display: grid;
  gap: var(--s-5);
  align-items: start;
  min-width: 0;
}

.reqs > * {
  min-width: 0;
  margin: 0;
}

.reqs__purpose {
  gap: var(--s-3);
}

.reqs__purpose > h2 {
  margin: 0;
}

.reqs__ticket {
  --stub-w: 260px;
}

.reqs__ticket .ticket__body {
  gap: var(--s-4);
}

.reqs__field {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.reqs__field > * {
  margin: 0;
}

.reqs__label {
  color: var(--muted);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}

/* Поля для копирования: одно нажатие выделяет значение целиком, без скриптов */
.reqs__value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.reqs__bank {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ink);
  background: var(--ground);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
}

.reqs .copy-row {
  margin: 0;
}

.reqs .copy-row input {
  max-width: 24rem;
  background: var(--yellow-soft);
  font-size: 1.25rem;
  -webkit-user-select: all;
  user-select: all;
  cursor: copy;
}

.reqs .copy-row input:hover {
  box-shadow: 0 0 0 4px var(--yellow);
}

.reqs .copy-row input:focus-visible {
  outline: none;
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--yellow);
}

/* Предупреждения: значок и жирный текст на жёлтом листке */
.pub-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  padding: var(--s-4);
  border: 2px dashed var(--ink);
  border-radius: var(--r-0);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
}

.pub-warn--plain {
  margin: 0;
}

.pub-warn__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 1px;
}

.reqs .pub-warn {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .reqs {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-7);
  }

  .reqs__ticket .ticket__body {
    padding: var(--s-6);
  }

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

/* ---------- Страницы ошибок ---------- */
.oops {
  display: grid;
  align-content: center;
  min-height: 46vh;
}

.oops__ticket {
  --stub-w: 320px;
  max-width: 60rem;
  margin: 0;
}

.oops__ticket .ticket__body {
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
}

.oops__ticket h1 {
  margin: 0;
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

.oops__code {
  font-size: clamp(3.5rem, 2.2rem + 5vw, 6rem);
  letter-spacing: -.04em;
}

.oops__ticket .ticket__stub {
  align-content: center;
  gap: var(--s-3);
}

@media (min-width: 768px) {
  .oops__ticket .ticket__body {
    padding: var(--s-7) var(--s-6);
  }

  .oops__ticket .ticket__stub {
    padding: var(--s-6) var(--s-5);
  }
}

/* =============================================================================
   Единое правило и список приютов (M-2d.ui, решение 2026-10-25, вариант Б):
   подключение (приют-источник, выбор приютов, сводка), «Моя помощь» (билет правила, список приютов),
   страница приюта (билет «Добавить в мой список»). Месячный лимит общий для всех приютов списка.
   Блоки `.pick`, `.sum`, `.origin`, `.fit`, `.shelf` — кандидаты в components.css.
   ============================================================================= */

/* ---------- Приют, с которого начали подключение ---------- */
.origin {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 2px dashed var(--ink);
  background: var(--paper);
  font-size: var(--t-small);
}

.origin img {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.origin p {
  margin: 0;
}

/* ---------- Корешок формы правила: сколько просьб помещается в общий месячный лимит ---------- */
.fit {
  display: grid;
  gap: 2px;
}

.fit .ticket__value {
  font-size: 2.25rem;
}

.fit__note {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-small);
}

/* ---------- Выбор приютов: строка-флажок с фото ---------- */
.pick {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pick__group {
  margin: var(--s-4) 0 var(--s-1);
  color: var(--muted);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}

.pick__group:first-child {
  margin-top: 0;
}

.pick__row {
  display: grid;
  grid-template-columns: 1.5rem 56px minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  align-items: center;
  min-height: var(--touch);
  padding: var(--s-3);
  border-bottom: 1px dashed var(--ink);
  cursor: pointer;
}

.pick li:last-child .pick__row {
  border-bottom: 0;
}

.pick__row:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.pick__row:has(input:disabled) {
  background: transparent;
  cursor: not-allowed;
  opacity: .6;
}

.pick__row input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--ink);
  cursor: inherit;
}

.pick__row img {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.pick__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pick__name {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -.01em;
}

.pick__meta {
  color: var(--muted);
  font-size: var(--t-small);
}

.pick-set {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---------- Сводка подтверждения ---------- */
.sum {
  display: grid;
  margin: 0;
}

.sum > div {
  display: grid;
  gap: 2px var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--ink);
}

.sum > div:first-child {
  padding-top: 0;
}

.sum dt {
  color: var(--muted);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}

.sum dd {
  margin: 0;
}

.sum dd b {
  font-size: 1.25rem;
  letter-spacing: -.02em;
}

/* ---------- «Моя помощь»: билет правила ---------- */
.rule-tk {
  --stub-w: 280px;
}

.rule-tk .ticket__body {
  gap: var(--s-3);
}

.rule-tk__line {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.rule-tk__line span {
  display: block;
}

.rule-tk__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--ink);
  font-size: var(--t-small);
}

.rule-tk__facts div {
  display: flex;
  gap: var(--s-2);
}

.rule-tk__facts dt {
  color: var(--muted);
}

.rule-tk__facts dd {
  margin: 0;
  font-weight: 700;
}

.rule-tk .ticket__stub {
  align-content: center;
  justify-content: start;
  gap: var(--s-1);
}

.rule-tk .ticket__stub form {
  margin: 0;
}

.rule-tk .ticket__value {
  font-size: 2.5rem;
}

@media (min-width: 1024px) {
  .rule-tk .ticket__body,
  .rule-tk .ticket__stub {
    padding: var(--s-6);
  }
}

/* ---------- «Моя помощь»: список приютов ---------- */
.shelf {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  box-shadow: var(--e-1);
}

.shelf > li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-4);
  border-bottom: 1px dashed var(--ink);
}

.shelf > li:last-child {
  border-bottom: 0;
}

.shelf img {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.shelf__main {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.shelf__main > * {
  margin: 0;
}

.shelf__name {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -.01em;
}

.shelf__used {
  font-size: var(--t-small);
}

.shelf__used b {
  font-variant-numeric: tabular-nums;
}

.shelf__acts {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-5);
  font-size: var(--t-small);
}

.shelf__acts > * {
  margin: 0;
}

.shelf__acts .more {
  padding: 0;
  border-top: 0;
}

.shelf__acts .more > summary {
  min-height: 0;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.shelf__acts .more > summary::after {
  display: none;
}

/* Подтверждение «Убрать из списка» раскрывается на месте: `details` в строке открывает форму рядом, без скриптов */
.shelf__confirm {
  display: none;
  grid-column: 1 / -1;
  gap: var(--s-3);
  justify-items: start;
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 2px dashed var(--ink);
  background: var(--paper);
}

.shelf > li:has(.more[open]) .shelf__confirm {
  display: grid;
}

.shelf__confirm > * {
  margin: 0;
}

.shelf__confirm .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.shelf--off > li {
  background: transparent;
}

.shelf--off {
  background: transparent;
  box-shadow: none;
  border: 2px dashed var(--ink);
}

@media (min-width: 1024px) {
  .shelf > li {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--s-4) var(--s-5);
  }

  .shelf img {
    width: 64px;
    height: 64px;
  }

  .shelf__acts {
    grid-column: 3;
    justify-content: flex-end;
  }

  .shelf__confirm {
    grid-column: 2 / -1;
  }
}

.me-stack {
  display: grid;
  gap: var(--s-7);
}

.me-stack > .block {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  margin: 0;
}

.me-stack > .block > * {
  margin: 0;
}

/* Настройки: флажок «Уведомления о прежней помощи» с кнопкой в одной строке */
.settings__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.settings__form .check {
  margin: 0;
  align-items: center;
}

/* ---------- Каталог: «Добавить в мой список» поверх растянутой ссылки карточки ---------- */
.camp__stub .camp__add,
.camp__stub .camp__mine {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-weight: 700;
}

.camp__stub .camp__add {
  pointer-events: auto;
}

/* ---------- Страница приюта: добавить в список одним нажатием ---------- */
.pub-org .add-tk {
  --stub-w: 320px;
  margin: 0 0 var(--s-8);
}

.add-tk .ticket__body {
  gap: var(--s-3);
}

.add-tk .ticket__stub {
  --stub-bg: var(--coral);
  display: grid;
  gap: var(--s-3);
  align-content: center;
  justify-items: stretch;
  padding: var(--s-5);
}

.add-tk .ticket__stub form {
  display: grid;
  margin: 0;
}

.add-tk .ticket__stub .btn {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.add-tk .ticket__stub .small {
  margin: 0;
}

.add-tk__rule {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}

@media (min-width: 1024px) {
  .add-tk .ticket__body {
    padding: var(--s-6);
  }

  .add-tk .ticket__stub {
    padding: var(--s-6);
  }
}

.flash-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}

.flash-row form {
  margin: 0;
}

.pub-org .flash--done {
  margin-bottom: var(--s-6);
}

/* =============================================================================
   Переключатель языка «Рус | Қаз» (M-2e, решение 2026-10-25 «казахский язык»).
   Форма из двух кнопок: в шапке (на узком экране — последняя строка панели меню), в подвале донора; без скриптов
   (POST /language, в «Моей помощи» — POST /me/language). `aria-current="true"` у текущего языка.
   ============================================================================= */
.lang-switch {
  display: flex;
  align-items: center;
  margin: 0;
}

.lang-switch__group {
  display: inline-flex;
  align-items: stretch;
}

.lang-switch__btn {
  position: relative;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--s-3);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}

/* Вертикальная черта между языками: рисуется, а не печатается, чтобы экранный диктор не читал «палка» */
.lang-switch__btn + .lang-switch__btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: currentColor;
  opacity: .55;
}

.lang-switch__btn[aria-current="true"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

.lang-switch__btn:focus-visible {
  outline-offset: -4px;
}

/* Шапка: строка панели меню на узком экране, ячейка с перфорацией на десктопе (как соседние ссылки навигации) */
.site-nav > .lang-switch--header {
  min-height: 48px;
  padding-inline: calc(var(--gutter) - var(--s-3));
}

@media (min-width: 1024px) {
  .site-nav > .lang-switch--header {
    min-height: 0;
    padding-inline: var(--s-2);
    border-left: 1px dashed var(--ink);
  }
}

/* Казахские подписи длиннее русских: навигация шапки на десктопе компактнее (14 px, поля 12 px), чтобы ссылки не рвались
   на три строки и подчёркивание текущей страницы не заходило на текст */
@media (min-width: 1024px) {
  :lang(kk) .site-nav__link {
    padding-inline: var(--s-3);
    font-size: var(--t-small);
  }

  :lang(kk) .site-nav__link[aria-current]::after {
    left: var(--s-3);
    right: var(--s-3);
  }
}

@media (hover: hover) {
  .lang-switch--header .lang-switch__btn:hover {
    background: var(--paper);
  }
}

.lang-switch--header .lang-switch__btn:active {
  background: var(--yellow-soft);
}

/* Подвал (тёмный фон): тот же вид, что у ссылок подвала; первая кнопка выровнена по левому краю колонки */
.site-footer__lang {
  margin-top: var(--s-2);
}

.lang-switch--footer .lang-switch__btn {
  padding-inline: 0 var(--s-4);
  color: var(--on-night);
  text-decoration-color: var(--yellow);
}

.lang-switch--footer .lang-switch__btn + .lang-switch__btn {
  padding-left: var(--s-4);
}

.lang-switch--footer .lang-switch__btn:focus-visible {
  outline-color: var(--yellow);
}

/* =============================================================================
   Путь первого донора (решение 2026-10-26, вариант А): шапка внутри подключения, «Продолжить подключение»
   в корешке шапки, полоса «Вы подключаетесь» на страницах приюта и сбора, «Начать заново».
   ============================================================================= */

/* Шапка потока: знак, «Шаг N из 4», «Выйти»; без навигации сайта и без второго «Хочу помогать» */
.site-header--flow {
  grid-template-columns: minmax(min-content, 1fr) auto auto;
  align-items: stretch;
  min-height: 60px;
}

.site-header--flow .wordmark {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  min-height: 0;
  padding-inline: var(--edge) var(--s-3);
}

.site-header__step,
.site-header__exit {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-4);
  border-left: 1px dashed var(--ink);
  font-size: var(--t-small);
  font-weight: 700;
  white-space: nowrap;
}

.site-header__exit {
  min-width: var(--touch);
  padding-right: var(--edge);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  transition: background-color var(--d-hover) var(--ease-out);
}

.site-header__exit:hover {
  background: var(--paper);
}

.site-header__exit:active {
  background: var(--yellow-soft);
  transition-duration: var(--d-press);
}

.site-header__exit:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -5px;
}

@media (min-width: 1024px) {
  .site-header--flow {
    min-height: 68px;
  }

  .site-header__step,
  .site-header__exit {
    font-size: var(--t-body);
  }
}

/* Корешок шапки «Продолжить подключение · шаг N из 4»: длиннее обычной подписи, поэтому переносится.
   Поле справа — обычное поле страницы (--gutter), а не --edge: на 1440 px --edge отнимает у текста 120 px. */
.site-header__stub--resume {
  max-width: 11.5rem;
  padding-block: var(--s-2);
  padding-right: var(--gutter);
  text-align: left;
  line-height: 1.2;
  white-space: normal;
}

@media (min-width: 768px) {
  .site-header__stub--resume {
    max-width: 22rem;
    padding-block: 0;
  }
}

@media (min-width: 1024px) {
  .site-header__stub--resume {
    max-width: 18rem; /* рядом полная навигация: две строки */
  }
}

@media (min-width: 1440px) {
  .site-header__stub--resume {
    max-width: 30rem; /* одна строка */
  }
}

/* Полоса «Вы подключаетесь» над содержимым страницы приюта и сбора */
.connect-strip {
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: var(--t-small);
}

.connect-strip p {
  margin: 0;
}

/* =============================================================================
   Шаг «Приюты» (вариант В): список с флажками, раскрывающаяся карточка «О приюте», закреплённая полоса
   «Выбрано N · Продолжить». Число отмеченных считает CSS (счётчик по `input:checked`), без скрипта.
   ============================================================================= */
.pick-form {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  counter-reset: chosen;
}

.pick-form > * {
  margin: 0;
}

.pick--cards {
  background: var(--paper);
  box-shadow: var(--e-1);
}

.pick--cards .pick__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px dashed var(--ink);
}

.pick--cards .pick__item:last-child {
  border-bottom: 0;
}

/* Выбранный приют закрашивается целиком: флажок, фото, текст, «О приюте» и раскрытая карточка. Закраска берётся
   только из состояния флажка и без перехода: отметка и снятие видны сразу, в том числе на сенсорном экране.
   Наведение (мышь) — отдельное правило ниже; на сенсорном экране его нет. */
.pick--cards .pick__item:has(input:checked) {
  background: var(--yellow-soft);
}

@media (hover: hover) and (pointer: fine) {
  .pick--cards .pick__item:has(.pick__row:hover, .pick__about summary:hover) {
    background: var(--yellow-soft);
  }
}

.pick--cards .pick__row {
  grid-column: 1;
  grid-row: 1;
  border-bottom: 0;
}

.pick--cards .pick__row input:checked {
  counter-increment: chosen;
}

/* «О приюте»: сворачивается в ссылку справа от строки; раскрытая карточка занимает всю ширину строки */
.pick__about {
  grid-column: 2;
  grid-row: 1;
}

.pick__about[open] {
  grid-column: 1 / -1;
  grid-row: 2;
}

.pick__about summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--touch);
  padding: 0 var(--s-3);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  list-style: none;
  cursor: pointer;
}

.pick__about summary::-webkit-details-marker {
  display: none;
}

.pick__about summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.pick__about-close,
.pick__about[open] .pick__about-open {
  display: none;
}

.pick__about[open] .pick__about-close {
  display: inline;
}

.pick__card {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px dashed var(--ink);
  font-size: var(--t-small);
}

.pick__card > * {
  margin: 0;
}

.pick__card .link-button {
  font-size: var(--t-small);
}

/* Закреплённая полоса внизу экрана: сколько выбрано и «Продолжить» */
.pick-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "label action"
    "count action";
  align-items: center;
  column-gap: var(--s-5);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-3) var(--gutter);
  border-top: 2px dashed var(--ink);
  background: var(--yellow);
}

.pick-bar__label {
  grid-area: label;
  font-size: var(--t-small);
  font-weight: 700;
}

.pick-bar__count {
  grid-area: count;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.03em;
}

.pick-bar__count::after {
  content: counter(chosen);
}

.pick-bar .btn {
  grid-area: action;
  justify-self: end;
  width: 100%;
  max-width: 20rem;
}

/* Ничего не отмечено: кнопка приглушена, но отправляет форму и получает понятную ошибку */
.pick-form:not(:has(.pick__row input:checked)) .pick-bar .btn {
  opacity: .6;
}

@media (min-width: 768px) {
  .pick-bar {
    margin-inline: 0;
    border: 2px dashed var(--ink);
    padding: var(--s-3) var(--s-4);
  }
}

/* Выбранные приюты над формой правила: фото в ряд, названия и «изменить» */
.origin--chosen {
  flex-wrap: wrap;
}

.origin__faces {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.origin__faces li + li {
  margin-left: calc(-1 * var(--s-2));
}

.origin__faces img,
.origin__initials {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--paper);
  object-fit: cover;
}

.origin__initials {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

/* «Начать заново» в конце шага: вторичное действие, цель касания не меньше 44 px */
.flow__reset {
  margin: 0;
}

.flow__reset .link-button {
  min-height: var(--touch);
  font-size: var(--t-small);
}