/**
 * Страница управления подпиской (`/?swru_manage_subscriptions=<token>`).
 *
 * Оформление — по дизайн-языку сайта (`docs/DESIGN_SYSTEM.md`): колонка по
 * центру (§9.30), шапка страницы (§9.21), сообщение (§9.17), чекбокс (§9.16),
 * кнопки (§9.12/§9.20), слайдер подтверждения (§9.34), название блока (§9.4).
 * Токены и общие рецепты живут в теме, здесь только своё: ритм колонки и
 * строки списка рассылок. Значения в `var()` даны с запасным вариантом —
 * страница плагина должна читаться и без темы.
 *
 * @package Satway_RU
 */

/* Список рассылок: строки-карточки (§9.5) с зазором 8px. */
.swru-sub-page .swru-sub-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s, 8px);
	margin: 0 0 var(--spacing-xl, 32px);
	padding: 0;
	list-style: none;
}

/* Строка списка: галочка и текст выровнены по верхнему краю — у описания
   бывает две строки. Текст по левой оси: в центрированной колонке (§9.30)
   читается только короткая строка, а здесь название и пояснение. */
.swru-sub-page .swru-sub-item {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-m, 16px);
	padding: 20px var(--spacing-l, 24px);
	background-color: var(--color-background-muted, #F7F6F5);
	border: 1px solid var(--color-border, #E6E3E0);
	text-align: left;
}

/* Галочка не по центру строки, а по первой строке названия. */
.swru-sub-page .swru-sub-item__input {
	margin-top: 2px;
}

.swru-sub-page .swru-sub-item__name {
	display: block;
	font-family: var(--font-heading, "Yanone Kaffeesatz", sans-serif);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-foreground, #232027);
}

.swru-sub-page .swru-sub-item__description {
	display: block;
	margin-top: 4px;
	font-family: var(--font-body, "Roboto", sans-serif);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-foreground-muted, #7A7580);
}

/* Блок «Отписаться ото всего» — отдельное действие под своим названием:
   разделяет не линия, а заголовок с разделителем (§9.4), поэтому лишней
   рамки сверху нет. */
.swru-sub-page .swru-sub-unsubscribe {
	margin: var(--spacing-xl, 32px) 0 0;
}

/* Дорожка слайдера уже колонки: 400px по центру на десктопе. Действие одно
   и короткое — на всю ширину колонки оно читалось как главное на странице
   (§9.30 — в колонке стоит одно сообщение или одна форма). На телефоне
   дорожка занимает всю ширину карточки. */
.swru-sub-page .swru-sub-unsubscribe .slide-cancel {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 959px) {
	.swru-sub-page .swru-sub-unsubscribe .slide-cancel {
		max-width: 100%;
	}
}

/* Подсказка внутри узкой дорожки: боковые поля уже, чем у полноширинного
   слайдера темы (0 72px) — при 400px текст не влезал в один ряд и упирался
   в нижний край дорожки. 64px слева — чтобы текст не заезжал под ползунок. */
.swru-sub-page .swru-sub-unsubscribe .slide-cancel__hint {
	padding: 0 24px 0 64px;
}

/* Запасной вариант без скрипта слайдера: обычная кнопка (§9.12). */
.swru-sub-page .swru-sub-unsubscribe noscript {
	display: block;
	margin-top: var(--spacing-m, 16px);
}

/* Прощальная страница (`/maillist/bye/`): картинка в угловых засечках — тот
   же приём, что у кадров в статье (§9.26, longread.css): рамки нет, углы
   обозначены четырьмя засечками 1px на отступе 18px. Ширину колонки
   (§9.30) перебивает своя: на десктопе картинка уже колонки (368px ≈
   460 − 20% по просьбе владельца), на телефоне — по ширине. */
.swru-sub-page.swru-bye .swru-bye__picture {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

@media (min-width: 960px) {
	.swru-sub-page.swru-bye .swru-bye__picture {
		max-width: 368px;
	}
}

.swru-sub-page.swru-bye .swru-bye__image {
	display: block;
	width: 100%;
	height: auto;
}

.swru-sub-page.swru-bye .swru-bye__picture::before {
	content: "";
	position: absolute;
	inset: -18px;
	pointer-events: none;
	background:
		linear-gradient(var(--color-border, #E6E3E0), var(--color-border, #E6E3E0)) left top / 22px 1px no-repeat,
		linear-gradient(var(--color-border, #E6E3E0), var(--color-border, #E6E3E0)) left top / 1px 22px no-repeat,
		linear-gradient(var(--color-border, #E6E3E0), var(--color-border, #E6E3E0)) right top / 22px 1px no-repeat,
		linear-gradient(var(--color-border, #E6E3E0), var(--color-border, #E6E3E0)) right top / 1px 22px no-repeat,
		linear-gradient(var(--color-border, #E6E3E0), var(--color-border, #E6E3E0)) left bottom / 22px 1px no-repeat,
		linear-gradient(var(--color-border, #E6E3E0), var(--color-border, #E6E3E0)) left bottom / 1px 22px no-repeat,
		linear-gradient(var(--color-border, #E6E3E0), var(--color-border, #E6E3E0)) right bottom / 22px 1px no-repeat,
		linear-gradient(var(--color-border, #E6E3E0), var(--color-border, #E6E3E0)) right bottom / 1px 22px no-repeat;
}