/*
 * «Вітай!» — оформлення теми.
 *
 * Напрямок «Святкова листівка». Кольорів тут немає жодного: усі значення
 * приходять із vity-tokens.css. Файл підключається після osnova-skin.css,
 * тож перебивати батька не доводиться — вистачає однакової специфічності
 * й пізнішого місця в каскаді.
 *
 * Зміст:
 *   1. Основа й типографіка
 *   2. Шапка, меню, підвал
 *   3. Слайдер «Головне до свята» (H4)
 *   4. Смуга «Приводи святкувати»
 *   5. Заголовок секції (S4) і бейдж (B1)
 *   6. Кадр картки й заглушка
 *   7. C14 «листівка» · C15 «конверт» · C16 «гірлянда»
 *   8. Стрічка: патерн confetti
 *   9. Віджети сайдбару
 *  10. Сторінка привітання
 *  11. Порожній стан, пагінація, фокус
 *  12. Адаптив: 1024 / 768 / 540
 */

/* ==========================================================================
   1. Основа й типографіка
   ========================================================================== */

body {
	background: var(--vity-bg);
	color: var(--vity-ink);
	font-family: var(--osn-font-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--osn-font-display);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.18;
}

.osn-single__title {
	font-size: 40px;
	letter-spacing: -.02em;
}

.osn-card__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.osn-archhead__title {
	font-size: 32px;
}

/* Дата, автор, час читання — найдрібніший текст сайту, тому колір
   у нього найтемніший із приглушених: 4.7:1 на найсвітлішій поверхні. */
.osn-meta,
.vity-date {
	font-size: var(--osn-fs-meta);
	color: var(--vity-ink-faint);
	letter-spacing: .01em;
}

.vity-date {
	display: block;
	margin: 0;
}

/* ==========================================================================
   2. Шапка, меню, підвал
   ========================================================================== */

.osn-header {
	background: var(--vity-surface);
	border-bottom: 1px solid var(--vity-line);
}

.osn-brand__text {
	font-family: var(--osn-font-display);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--vity-ink);
	text-decoration: none;
}

/* Наш SVG замість тексту, поки власник не завантажив логотип у Customizer. */
.vity-brand__link {
	display: inline-flex;
	align-items: center;
}

.vity-brand__logo {
	display: block;
	width: auto;
	height: var(--osn-logo-height);
}

.osn-nav__link {
	font-weight: 500;
	color: var(--vity-ink-muted);
	text-decoration: none;
}

.osn-nav__link:hover,
.osn-nav__link:focus-visible {
	color: var(--vity-accent);
}

.osn-footer {
	background: var(--vity-surface-alt);
	border-top: 1px solid var(--vity-line);
}

/* ==========================================================================
   3. Слайдер «Головне до свята» — патерн H4
   ========================================================================== */

.vity-hero {
	padding: calc(var(--osn-space) * 4) 0 0;
}

.vity-hero__box {
	position: relative;
}

/*
 * Смуга слайдів — звичайний горизонтальний скрол зі snap. Без JS вона
 * лишається робочою: пальцем і трекпадом гортається так само, просто
 * без крапок і автопрокрутки.
 */
.vity-hero__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--vity-block-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--vity-r-xl);
}

.vity-hero__track::-webkit-scrollbar {
	display: none;
}

/*
 * Слайд — це кадр ПОРУЧ із текстом, а не текст поверх кадру.
 *
 * Спершу тут було накладання: картинка на всю ширину, затемнення, білий
 * заголовок унизу. На живому сайті воно програло двічі. Обкладинки малює
 * модель, і на них уже великими літерами стоїть «З днем народження» — наш
 * заголовок поверх ставав написом на написі. А кадр 21:9 різав саму листівку,
 * у якої є власна рамка й композиція.
 *
 * Заразом зникла помилка накладання: `.vity-cover` позиціонований (цього
 * вимагає заглушка), а затемнення й текст були статичні — за порядком
 * малювання CSS картинка перекривала їх, і заголовок не було видно взагалі.
 */
.vity-slide {
	position: relative;
	scroll-snap-align: center;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: calc(var(--osn-space) * 4);
	padding: calc(var(--osn-space) * 3);
	border-radius: var(--vity-r-xl);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	box-shadow: var(--osn-shadow-md);
}

/*
 * 16:9 — те, у чому модель малює обкладинки. Кадр і рамка збігаються, тож
 * від листівки не відрізається нічого.
 */
.vity-cover--slide {
	aspect-ratio: 16 / 9;
	border-radius: var(--osn-r-lg);
}

.vity-slide__body {
	display: grid;
	gap: calc(var(--osn-space) * 1.5);
	justify-items: start;
	min-width: 0;
	padding-right: calc(var(--osn-space) * 2);
}

.vity-slide__title {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
}

.vity-slide__link {
	color: var(--vity-ink);
	text-decoration: none;
}

.vity-slide__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vity-slide__link:hover,
.vity-slide__link:focus-visible {
	color: var(--vity-accent);
}

.vity-slide__text {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.6;
	color: var(--vity-ink-muted);
}

/* Дата на світлому тлі читається сама, приглушувати її вже не треба. */
.vity-slide .vity-date {
	color: var(--vity-ink-faint);
}

/* -- крапки й стрілки: додає скрипт ---------------------------------- */

.vity-hero__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--osn-space) * 2);
	margin-top: calc(var(--osn-space) * 2.5);
}

.vity-hero__dots {
	display: flex;
	align-items: center;
	gap: var(--osn-space);
}

.vity-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--osn-r-pill);
	background: var(--vity-line-strong);
	cursor: pointer;
	transition: width .18s ease, background .18s ease;
}

.vity-hero__dot.is-current {
	width: 28px;
	background: var(--vity-accent);
}

.vity-hero__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	color: var(--vity-ink);
	cursor: pointer;
}

.vity-hero__arrow:hover,
.vity-hero__arrow:focus-visible {
	border-color: var(--vity-accent);
	color: var(--vity-accent);
}

/* Стрілка намальована рамкою — це один елемент замість іконки й запиту. */
.vity-hero__arrow span {
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.vity-hero__arrow--prev span {
	transform: rotate(-135deg);
	margin-left: 3px;
}

.vity-hero__arrow--next span {
	transform: rotate(45deg);
	margin-right: 3px;
}

/* ==========================================================================
   4. Смуга «Приводи святкувати»
   ========================================================================== */

.vity-occasions {
	padding: calc(var(--osn-space) * 4) 0 0;
}

.vity-occasions__inner {
	display: grid;
	gap: calc(var(--osn-space) * 1.5);
}

.vity-occasions__label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent);
}

/*
 * На вузькому екрані смуга гортається вбік, а не переноситься у стовпчик:
 * дванадцять капсул одна під одною відсунули б стрічку за перший екран.
 */
.vity-occasions__list {
	display: flex;
	gap: var(--osn-space);
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}

.vity-occasions__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 calc(var(--osn-space) * 2);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	font-size: var(--osn-fs-small);
	font-weight: 500;
	color: var(--vity-ink);
	text-decoration: none;
	white-space: nowrap;
}

.vity-occasions__link:hover,
.vity-occasions__link:focus-visible {
	border-color: var(--vity-accent);
	background: var(--vity-accent-soft);
	color: var(--vity-accent-hover);
}

.vity-occasions__count {
	font-size: var(--osn-fs-meta);
	font-variant-numeric: tabular-nums;
	color: var(--vity-ink-faint);
}

/* ==========================================================================
   5. Заголовок секції (S4) і бейдж (B1)
   ========================================================================== */

.vity-shead {
	display: grid;
	grid-template-columns: minmax(var(--osn-space), 1fr) auto minmax(var(--osn-space), 1fr);
	align-items: center;
	gap: calc(var(--osn-space) * 2);
	margin: 0 0 calc(var(--osn-space) * 1.5);
}

.vity-shead__rule {
	height: 1px;
	background: var(--vity-line-strong);
}

.vity-shead__title {
	margin: 0;
	font-size: 26px;
	text-align: center;
}

.vity-shead__sub {
	margin: 0 0 calc(var(--osn-space) * 3);
	font-size: var(--osn-fs-small);
	text-align: center;
	color: var(--vity-ink-muted);
}

.vity-block {
	margin: 0 0 var(--vity-block-space);
}

.vity-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 10px;
	border-radius: var(--osn-r-pill);
	background: var(--vity-accent);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent-contrast);
	text-decoration: none;
}

.vity-badge:hover,
.vity-badge:focus-visible {
	background: var(--vity-accent-hover);
	color: var(--vity-accent-contrast);
}

/* Варіант без заливки — там, де під бейджем немає фото. */
.vity-badge--ghost {
	background: var(--vity-accent-soft);
	color: var(--vity-accent-hover);
}

.vity-badge--ghost:hover,
.vity-badge--ghost:focus-visible {
	background: var(--vity-accent);
	color: var(--vity-accent-contrast);
}

/* ==========================================================================
   6. Кадр картки й заглушка
   ========================================================================== */

.vity-cover {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--vity-surface-alt);
}

.vity-cover__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.vity-cover--card {
	aspect-ratio: 4 / 3;
}

.vity-cover--round {
	width: 72px;
	flex: 0 0 72px;
	aspect-ratio: 1 / 1;
	border-radius: var(--osn-r-pill);
}

/*
 * Заглушка замість фото. Сайт стартує без жодного зображення, і без неї
 * картка провалилась би у смужку тексту, а сітка стрибала б, щойно
 * у частини записів обкладинки з'являться.
 */
.vity-cover--blank {
	background:
		radial-gradient(circle at 22% 28%, var(--vity-accent-soft) 0 22%, transparent 22%),
		radial-gradient(circle at 76% 66%, var(--vity-accent-soft) 0 16%, transparent 16%),
		var(--vity-surface-alt);
}

.vity-cover__spark {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 34% 62%, var(--vity-spark-a) 0 4px, transparent 4px),
		radial-gradient(circle at 62% 34%, var(--vity-spark-b) 0 5px, transparent 5px),
		radial-gradient(circle at 50% 78%, var(--vity-spark-c) 0 3px, transparent 3px);
	opacity: .7;
}

/* ==========================================================================
   7. Патерни карток
   ========================================================================== */

/* -- C14 «листівка» --------------------------------------------------- */

.vity-postcard {
	position: relative;
	display: grid;
	gap: 0;
	min-width: 0;
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-lg);
	overflow: hidden;
	box-shadow: var(--osn-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}

.vity-postcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--osn-shadow-md);
}

.vity-postcard__frame {
	position: relative;
}

/* Заголовок ловить клік по всій картці — звідси position на .vity-postcard.
   Бейдж лежить вище накладки, тож лишається окремим посиланням. */
.vity-badge--corner {
	position: absolute;
	left: calc(var(--osn-space) * 1.5);
	top: calc(var(--osn-space) * 1.5);
	z-index: 1;
}

.vity-postcard__body {
	display: grid;
	gap: var(--osn-space);
	padding: calc(var(--osn-space) * 2.5);
	/* Перфорація, як на відривній листівці. */
	border-top: 1px dashed var(--vity-line-strong);
}

.vity-postcard__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
}

.vity-postcard__link {
	color: var(--vity-ink);
	text-decoration: none;
}

.vity-postcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vity-postcard__link:hover,
.vity-postcard__link:focus-visible {
	color: var(--vity-accent);
}

.vity-postcard__text {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.6;
	color: var(--vity-ink-muted);
}

.vity-picks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--vity-block-gap);
}

/* -- C15 «конверт» ---------------------------------------------------- */

.vity-envelope {
	position: relative;
	display: grid;
	gap: var(--osn-space);
	justify-items: start;
	min-width: 0;
	padding: calc(var(--osn-space) * 2.5);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-md);
	overflow: hidden;
}

/* Загнутий ріг: два трикутники з градієнта, без зайвого елемента в розмітці. */
.vity-envelope__fold {
	position: absolute;
	right: 0;
	top: 0;
	width: 34px;
	height: 34px;
	background: linear-gradient(225deg, var(--vity-accent-soft) 0 50%, transparent 50%);
	border-left: 1px solid var(--vity-line);
	border-bottom: 1px solid var(--vity-line);
}

.vity-envelope__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.28;
}

.vity-envelope__link {
	color: var(--vity-ink);
	text-decoration: none;
}

.vity-envelope__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vity-envelope__link:hover,
.vity-envelope__link:focus-visible {
	color: var(--vity-accent);
}

.vity-envelope__text {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.6;
	color: var(--vity-ink-muted);
}

.vity-wishbox--grid .vity-wishbox__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--vity-block-gap);
}

/* -- C16 «гірлянда» --------------------------------------------------- */

.vity-wishbox--list .vity-wishbox__items {
	display: grid;
	gap: calc(var(--osn-space) * 2.5);
	padding-top: calc(var(--osn-space) * 3);
}

.vity-garland {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(var(--osn-space) * 2);
	min-width: 0;
}

/* «Нитка», на якій висить кругла мініатюра. */
.vity-garland__thread {
	position: absolute;
	left: 36px;
	top: -18px;
	width: 1px;
	height: 18px;
	background: var(--vity-line-strong);
}

.vity-garland__thread::before {
	content: "";
	position: absolute;
	left: -2px;
	top: -3px;
	width: 5px;
	height: 5px;
	border-radius: var(--osn-r-pill);
	background: var(--vity-accent);
}

.vity-garland .vity-cover--round {
	border: 3px solid var(--vity-surface);
	box-shadow: var(--osn-shadow-sm);
}

.vity-garland__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.vity-garland__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.3;
}

.vity-garland__link {
	color: var(--vity-ink);
	text-decoration: none;
}

.vity-garland__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vity-garland__link:hover,
.vity-garland__link:focus-visible {
	color: var(--vity-accent);
}

/* ==========================================================================
   8. Стрічка: патерн confetti
   ========================================================================== */

.osn-loop {
	gap: calc(var(--osn-space) * 3);
}

/*
 * Модифікатор приходить фільтром osn_card_layout — Osnova малює картку
 * сама, копії entry-card.php у темі немає. Рамку знизу від батька знімаємо
 * тут же: картка стала панеллю, і лінія під нею була б зайвою.
 */
.osn-card--confetti {
	padding: 0 0 calc(var(--osn-space) * 2.5);
	border-bottom: 0;
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-lg);
	overflow: hidden;
	gap: 0;
}

.osn-card--confetti .osn-card__cover {
	aspect-ratio: 3 / 2;
	border-radius: 0;
}

.osn-card--confetti .osn-card__body {
	position: relative;
	gap: calc(var(--osn-space) * 1.25);
	margin: 0 calc(var(--osn-space) * 2);
	padding: calc(var(--osn-space) * 3) 0 0;
}

/* Три крапки конфеті над заголовком — підпис патерна. */
.osn-card--confetti .osn-card__body::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--osn-space) * 1.5);
	width: 34px;
	height: 6px;
	background:
		radial-gradient(circle at 3px 3px, var(--vity-accent) 0 3px, transparent 3px),
		radial-gradient(circle at 17px 3px, var(--vity-spark-a) 0 3px, transparent 3px),
		radial-gradient(circle at 31px 3px, var(--vity-spark-b) 0 3px, transparent 3px);
}

.osn-card--confetti .osn-card__foot {
	border-top: 1px solid var(--vity-line);
}

.osn-card--confetti .osn-terms__link {
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent);
	text-decoration: none;
}

/* ==========================================================================
   9. Віджети сайдбару
   ========================================================================== */

.osn-widget {
	border-radius: var(--osn-r-lg);
}

.osn-widget__title {
	color: var(--vity-accent);
}

.vity-wlist,
.vity-wterms {
	display: grid;
	gap: calc(var(--osn-space) * 1.5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vity-wlist__item {
	display: flex;
	align-items: center;
	gap: calc(var(--osn-space) * 1.5);
	min-width: 0;
}

.vity-wlist__item + .vity-wlist__item {
	padding-top: calc(var(--osn-space) * 1.5);
	border-top: 1px dashed var(--vity-line);
}

.vity-wlist .vity-cover--round {
	width: 56px;
	flex-basis: 56px;
}

.vity-wlist__body {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.vity-wlist__link {
	font-size: var(--osn-fs-small);
	font-weight: 500;
	line-height: 1.35;
	color: var(--vity-ink);
	text-decoration: none;
}

.vity-wlist__link:hover,
.vity-wlist__link:focus-visible {
	color: var(--vity-accent);
}

.vity-wterms__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--osn-space);
	min-height: 40px;
	padding: 0 calc(var(--osn-space) * 1.5);
	border-radius: var(--osn-r-md);
	font-size: var(--osn-fs-small);
	color: var(--vity-ink);
	text-decoration: none;
}

.vity-wterms__link:hover,
.vity-wterms__link:focus-visible {
	background: var(--vity-accent-soft);
	color: var(--vity-accent-hover);
}

.vity-wterms__count {
	font-size: var(--osn-fs-meta);
	font-variant-numeric: tabular-nums;
	color: var(--vity-ink-faint);
}

/* ==========================================================================
   10. Сторінка привітання
   ========================================================================== */

.vity-progress {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 90;
	width: 100%;
	height: 3px;
	pointer-events: none;
}

.vity-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--vity-accent), var(--vity-spark-b));
}

/* -- зміст ------------------------------------------------------------ */

.vity-toc {
	margin: 0 0 calc(var(--osn-space) * 4);
	padding: calc(var(--osn-space) * 2.5);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-lg);
}

.vity-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--osn-space);
	width: 100%;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vity-ink);
	cursor: default;
}

.vity-toc__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--osn-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--vity-accent);
}

/* Стрілка потрібна лише там, де зміст справді згортається. */
.vity-toc__toggle .osn-icon--chevron {
	display: none;
}

.vity-toc__list {
	display: grid;
	gap: 6px;
	margin: calc(var(--osn-space) * 1.5) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: vity-toc;
}

.vity-toc__item--h3 {
	padding-left: calc(var(--osn-space) * 2.5);
}

.vity-toc__link {
	display: block;
	padding: 5px 0 5px 14px;
	border-left: 2px solid var(--vity-line);
	font-size: var(--osn-fs-small);
	line-height: 1.4;
	color: var(--vity-ink-muted);
	text-decoration: none;
}

.vity-toc__link:hover,
.vity-toc__link:focus-visible {
	color: var(--vity-accent);
}

.vity-toc__link.is-current {
	border-left-color: var(--vity-accent);
	font-weight: 600;
	color: var(--vity-accent);
}

/* -- шеринг ----------------------------------------------------------- */

.vity-share {
	margin: calc(var(--osn-space) * 4) 0 0;
	padding: calc(var(--osn-space) * 3);
	background: var(--vity-accent-soft);
	border-radius: var(--osn-r-lg);
}

.vity-share__title {
	margin: 0 0 calc(var(--osn-space) * 1.5);
	font-size: 17px;
	color: var(--vity-accent-hover);
}

.vity-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--osn-space);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vity-share__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 calc(var(--osn-space) * 2);
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--vity-ink);
	text-decoration: none;
	cursor: pointer;
}

.vity-share__link:hover,
.vity-share__link:focus-visible {
	border-color: var(--vity-accent);
	color: var(--vity-accent);
}

.vity-share__note {
	margin: var(--osn-space) 0 0;
	min-height: 1.2em;
	font-size: var(--osn-fs-meta);
	color: var(--vity-accent-hover);
}

/* -- кнопки під привітанням ------------------------------------------- */

/*
 * Рядок стоїть одразу після `blockquote` і притягується до нього
 * від'ємним відступом: 1.6em знизу в цитати (батьківський скін) + наші
 * -2.2em дають після злиття полів рівно -0.6em, тобто рядок сідає під
 * останній абзац цитати. Відступ зліва — ширина смуги й поля цитати,
 * щоб кнопки стали під текстом, а не під смугою.
 */
.vity-qa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: -2.2em 0 1.6em;
	padding-left: 23px;
}

/* Кнопки тихі: у статті їх понад тридцять пар, і кричати вони не мають. */
.vity-qa__btn {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	line-height: 1;
	color: var(--vity-ink-muted);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.vity-qa__btn:hover,
.vity-qa__btn:focus-visible {
	border-color: var(--vity-accent);
	color: var(--vity-accent);
}

.vity-qa__btn--copy {
	color: var(--vity-accent);
}

.vity-qa__btn.is-done {
	border-color: var(--vity-accent);
	background: var(--vity-accent);
	color: var(--vity-accent-contrast);
}

.vity-qa__btn[aria-expanded="true"] {
	border-color: var(--vity-accent);
	background: var(--vity-accent-soft);
	color: var(--vity-accent-hover);
}

.vity-qa__apps {
	display: none;
	flex-basis: 100%;
	flex-wrap: wrap;
	gap: 6px;
}

.vity-qa__apps.is-open {
	display: flex;
}

/*
 * `.osn-prose a` має (0,1,1) і дав би посиланням месенджерів підкреслення
 * й акцентний колір тексту — той самий дозволений контрактом виняток, що й
 * у врізки нижче.
 */
.osn-prose .vity-qa__btn--app {
	color: var(--vity-ink-muted);
	text-decoration: none;
	background: var(--vity-surface);
}

.osn-prose .vity-qa__btn--app:hover,
.osn-prose .vity-qa__btn--app:focus-visible {
	color: var(--vity-accent);
}

@media (prefers-reduced-motion: reduce) {
	.vity-qa__btn {
		transition: none;
	}
}

/* -- блок автора ------------------------------------------------------ */

.vity-author {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: calc(var(--osn-space) * 2.5);
	align-items: start;
	margin: calc(var(--osn-space) * 4) 0 0;
	padding: calc(var(--osn-space) * 3);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-lg);
}

.vity-author__img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: var(--osn-r-pill);
}

.vity-author__kicker {
	margin: 0;
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-ink-faint);
}

.vity-author__name {
	margin: 2px 0 var(--osn-space);
	font-size: 20px;
}

.vity-author__bio {
	margin: 0 0 var(--osn-space);
	font-size: var(--osn-fs-small);
	line-height: 1.6;
	color: var(--vity-ink-muted);
}

.vity-author__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--vity-accent);
	text-decoration: none;
}

.vity-author__more:hover,
.vity-author__more:focus-visible {
	color: var(--vity-accent-hover);
}

/* -- врізка в тексті -------------------------------------------------- */

.vity-inline {
	position: relative;
	margin: calc(var(--osn-space) * 4) 0;
	padding: calc(var(--osn-space) * 2.5) calc(var(--osn-space) * 3);
	background: var(--vity-surface-alt);
	border-radius: var(--osn-r-md);
}

.vity-inline__mark {
	position: absolute;
	left: 0;
	top: calc(var(--osn-space) * 2.5);
	bottom: calc(var(--osn-space) * 2.5);
	width: 3px;
	border-radius: var(--osn-r-pill);
	background: var(--vity-accent);
}

.vity-inline__lead {
	margin: 0 0 4px;
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-ink-faint);
}

/*
 * Єдиний селектор у темі, зроблений лише щоб перебити батьківський:
 * .osn-prose a має специфічність (0,1,1), бо у вмісті записів на
 * посиланнях класів немає. Контракт Osnova цей виняток прямо дозволяє.
 */
.osn-prose .vity-inline__link {
	font-family: var(--osn-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vity-ink);
	text-decoration: none;
	background: none;
}

.osn-prose .vity-inline__link:hover,
.osn-prose .vity-inline__link:focus-visible {
	color: var(--vity-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   10a. Калькулятор дат
   ========================================================================== */

/*
 * Картка того самого роду, що зміст і блок автора: біле тло, тонка межа,
 * велике скруглення. У рубриці стоїть над стрічкою, тож відступ знизу
 * відділяє її від першої картки запису.
 */
.vity-calc {
	margin: 0 0 var(--vity-block-space);
	padding: calc(var(--osn-space) * 3);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-lg);
	box-shadow: var(--osn-shadow-sm);
}

.vity-calc[hidden] {
	display: none;
}

.osn-prose .vity-calc {
	margin: calc(var(--osn-space) * 4) 0;
}

.vity-calc__kicker {
	margin: 0;
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent);
}

.vity-calc__title {
	margin: 4px 0 var(--osn-space);
	font-family: var(--osn-font-display);
	font-size: 24px;
	line-height: 1.25;
	color: var(--vity-ink);
}

.vity-calc__lead {
	margin: 0 0 calc(var(--osn-space) * 2.5);
	font-size: var(--osn-fs-small);
	line-height: 1.6;
	color: var(--vity-ink-muted);
}

/* -- форма ------------------------------------------------------------ */

.vity-calc__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: calc(var(--osn-space) * 1.5);
	margin: 0;
}

.vity-calc__date {
	display: grid;
	grid-template-columns: 76px minmax(140px, 1fr) 96px;
	gap: var(--osn-space);
	flex: 1 1 360px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.vity-calc__legend {
	/* Легенда потрібна зчитувачам екрана; зрячим вистачає підписів полів. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.vity-calc__field {
	display: grid;
	gap: 4px;
	margin: 0;
	min-width: 0;
}

.vity-calc__label {
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--vity-ink-muted);
}

.vity-calc__optional {
	font-weight: 400;
	color: var(--vity-ink-faint);
}

.vity-calc__input {
	width: 100%;
	min-height: 46px;
	padding: 0 12px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-md);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	/* 16px і більше — інакше iOS збільшує сторінку при фокусі в полі. */
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--vity-ink);
}

.vity-calc__input:focus-visible {
	border-color: var(--vity-accent);
	outline-offset: 0;
}

.vity-calc__go,
.vity-calc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 calc(var(--osn-space) * 3);
	border: 1px solid var(--vity-accent);
	border-radius: var(--osn-r-pill);
	background: var(--vity-accent);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 700;
	color: var(--vity-accent-contrast);
	cursor: pointer;
}

.vity-calc__go:hover,
.vity-calc__go:focus-visible,
.vity-calc__btn:hover,
.vity-calc__btn:focus-visible {
	border-color: var(--vity-accent-hover);
	background: var(--vity-accent-hover);
}

.vity-calc__btn--copy {
	min-height: 40px;
	background: var(--vity-surface);
	color: var(--vity-accent);
}

.vity-calc__btn--copy:hover,
.vity-calc__btn--copy:focus-visible {
	background: var(--vity-accent-soft);
	color: var(--vity-accent-hover);
}

.vity-calc__btn.is-done {
	background: var(--vity-accent);
	color: var(--vity-accent-contrast);
}

.vity-calc__error {
	margin: calc(var(--osn-space) * 1.5) 0 0;
	font-size: var(--osn-fs-small);
	font-weight: 600;
	color: var(--vity-accent-hover);
}

/* -- результат -------------------------------------------------------- */

.vity-calc__result {
	margin: calc(var(--osn-space) * 3) 0 0;
	padding: calc(var(--osn-space) * 3) 0 0;
	border-top: 1px dashed var(--vity-line-strong);
}

.vity-calc__result[hidden],
.vity-calc__error[hidden] {
	display: none;
}

.vity-calc__banner {
	margin: 0 0 calc(var(--osn-space) * 2);
	padding: calc(var(--osn-space) * 1.5) calc(var(--osn-space) * 2);
	border-radius: var(--osn-r-md);
	background: var(--vity-accent-soft);
	font-weight: 700;
	color: var(--vity-accent-hover);
}

.vity-calc__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--osn-space) * 1.5);
	margin: 0;
}

.vity-calc__stat {
	padding: calc(var(--osn-space) * 2);
	border-radius: var(--osn-r-md);
	background: var(--vity-surface-alt);
}

.vity-calc__stat-label {
	margin: 0 0 4px;
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-ink-faint);
}

.vity-calc__stat-value {
	display: grid;
	gap: 4px;
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--vity-ink);
}

.vity-calc__stat-note {
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 400;
	line-height: 1.45;
	color: var(--vity-ink-muted);
}

.vity-calc__stat-note strong {
	color: var(--vity-accent);
}

/* -- фраза ------------------------------------------------------------ */

.vity-calc__phrase {
	position: relative;
	margin: calc(var(--osn-space) * 2.5) 0 0;
	padding: calc(var(--osn-space) * 2) calc(var(--osn-space) * 2) calc(var(--osn-space) * 2) calc(var(--osn-space) * 2.5);
	border-left: 3px solid var(--vity-accent);
	border-radius: 0 var(--osn-r-md) var(--osn-r-md) 0;
	background: var(--vity-accent-soft);
}

.vity-calc__phrase-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--osn-space);
}

.vity-calc__phrase-kicker {
	margin: 0;
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent-hover);
}

.vity-calc__switch {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line-strong);
}

.vity-calc__switch-btn {
	min-width: 44px;
	min-height: 32px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--osn-r-pill);
	background: none;
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 700;
	color: var(--vity-ink-muted);
	cursor: pointer;
}

.vity-calc__switch-btn[aria-pressed="true"] {
	background: var(--vity-accent);
	color: var(--vity-accent-contrast);
}

.vity-calc__phrase-text {
	margin: calc(var(--osn-space) * 1.5) 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--vity-ink);
}

/* -- календар --------------------------------------------------------- */

.vity-calc__cal {
	display: grid;
	gap: calc(var(--osn-space) * 1.5);
	margin: calc(var(--osn-space) * 2.5) 0 0;
}

.vity-calc__field--name {
	max-width: 360px;
}

.vity-calc__cal-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--osn-space) calc(var(--osn-space) * 2);
}

.vity-calc__cal-alt {
	font-size: var(--osn-fs-small);
	font-weight: 600;
	color: var(--vity-accent);
	text-underline-offset: 3px;
}

.vity-calc__cal-alt:hover,
.vity-calc__cal-alt:focus-visible {
	color: var(--vity-accent-hover);
}

.vity-calc__cal-note {
	margin: 0;
	font-size: var(--osn-fs-meta);
	color: var(--vity-ink-faint);
}

/* -- перемикач режимів ----------------------------------------------- */

.vity-calc__modes {
	display: flex;
	gap: 4px;
	margin: 0 0 calc(var(--osn-space) * 2);
	padding: 4px;
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface-alt);
}

.vity-calc__mode {
	flex: 1 1 0;
	min-height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--osn-r-pill);
	background: none;
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 700;
	line-height: 1.2;
	color: var(--vity-ink-muted);
	cursor: pointer;
}

.vity-calc__mode:hover,
.vity-calc__mode:focus-visible {
	color: var(--vity-accent);
}

.vity-calc__mode[aria-pressed="true"] {
	background: var(--vity-surface);
	box-shadow: var(--osn-shadow-sm);
	color: var(--vity-accent);
}

/* -- посилання під річницею ------------------------------------------ */

.vity-calc__links {
	display: grid;
	gap: 6px;
	margin: calc(var(--osn-space) * 2) 0 0;
}

.vity-calc__link {
	font-size: var(--osn-fs-small);
	font-weight: 600;
	color: var(--vity-accent);
	text-underline-offset: 3px;
}

.vity-calc__link:hover,
.vity-calc__link:focus-visible {
	color: var(--vity-accent-hover);
}

/*
 * Вузька версія — у віджеті бічної колонки (~316px). Усе в один стовпчик,
 * заголовки менші; сама логіка й розмітка ті самі.
 */
/* Віджет Osnova вже є карткою — друга рамка всередині була б зайвою. */
.vity-calc--narrow {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.vity-calc--narrow .vity-calc__title {
	font-size: 19px;
}

.vity-calc--narrow .vity-calc__lead {
	font-size: var(--osn-fs-meta);
}

/* Місяць найдовший («листопад», «вересень») — віддаємо йому все, що лишилося. */
.vity-calc--narrow .vity-calc__date {
	grid-template-columns: 50px minmax(0, 1fr) 64px;
	gap: 6px;
	flex-basis: 100%;
}

.vity-calc--narrow .vity-calc__input {
	padding: 0 8px;
	font-size: 16px;
}

.vity-calc--narrow select.vity-calc__input {
	padding-right: 2px;
}

.vity-calc--narrow .vity-calc__go {
	width: 100%;
}

.vity-calc--narrow .vity-calc__stats {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--osn-space);
}

.vity-calc--narrow .vity-calc__stat {
	padding: calc(var(--osn-space) * 1.5);
}

.vity-calc--narrow .vity-calc__stat-value {
	font-size: 18px;
}

.vity-calc--narrow .vity-calc__mode {
	font-size: var(--osn-fs-meta);
}

.vity-calc--narrow .vity-calc__phrase {
	padding: calc(var(--osn-space) * 1.5);
}

.vity-calc--narrow .vity-calc__phrase-text {
	font-size: 15px;
}

/*
 * На окремій сторінці калькулятор стоїть усередині `.osn-prose`, а там
 * `p`, `h2` і `a` мають (0,1,1) — вищу вагу, ніж наші класи. Той самий
 * дозволений контрактом виняток: перебиваємо рівно ці три елементи.
 */
.osn-prose .vity-calc p {
	margin-bottom: 0;
}

.osn-prose .vity-calc .vity-calc__lead {
	margin-bottom: calc(var(--osn-space) * 2.5);
}

.osn-prose .vity-calc .vity-calc__phrase-text {
	margin: calc(var(--osn-space) * 1.5) 0;
}

.osn-prose .vity-calc__title {
	margin: 4px 0 var(--osn-space);
	font-size: 24px;
}

.osn-prose .vity-calc__cal-alt,
.osn-prose .vity-calc__link {
	color: var(--vity-accent);
	background: none;
}

/* «Google Календар» у калькуляторі — посилання, що виглядає як кнопка. */
a.vity-calc__btn,
.osn-prose a.vity-calc__btn {
	color: var(--vity-accent-contrast);
	text-decoration: none;
}

a.vity-calc__btn:hover,
a.vity-calc__btn:focus-visible,
.osn-prose a.vity-calc__btn:hover,
.osn-prose a.vity-calc__btn:focus-visible {
	color: var(--vity-accent-contrast);
}

.vity-calc__cal .vity-calc__label {
	margin: 0;
}

/* -- меню «У календар» (свята, іменини) ------------------------------ */

.vity-calmenu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	grid-column: 1 / -1;
	flex-basis: 100%;
	padding: var(--osn-space);
	border-radius: var(--osn-r-md);
	background: var(--vity-surface-alt);
}

.vity-calmenu[hidden] {
	display: none;
}

.vity-calmenu__item,
.osn-prose .vity-calmenu__item {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--vity-ink);
	text-decoration: none;
	cursor: pointer;
}

.vity-calmenu__item:hover,
.vity-calmenu__item:focus-visible,
.osn-prose .vity-calmenu__item:hover,
.osn-prose .vity-calmenu__item:focus-visible {
	border-color: var(--vity-accent);
	color: var(--vity-accent);
}

.vity-hol__cal[aria-expanded="true"],
.vity-nd__cal[aria-expanded="true"] {
	border-color: var(--vity-accent);
	background: var(--vity-accent-soft);
	color: var(--vity-accent-hover);
}

/* ==========================================================================
   10b. Довідник річниць весілля
   ========================================================================== */

.vity-anniv {
	margin: calc(var(--osn-space) * 4) 0 0;
}

/* Перехід по десятиліттях липне згори: список довгий, а повертатися до
   початку, щоб перескочити на інший проміжок, незручно. */
.vity-anniv__jump {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	gap: 6px;
	margin: 0 0 calc(var(--osn-space) * 2.5);
	padding: var(--osn-space) 0;
	overflow-x: auto;
	background: var(--vity-bg);
	scrollbar-width: thin;
}

.osn-prose .vity-anniv__jump-link {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	font-size: var(--osn-fs-meta);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--vity-ink);
	text-decoration: none;
	white-space: nowrap;
}

.osn-prose .vity-anniv__jump-link:hover,
.osn-prose .vity-anniv__jump-link:focus-visible {
	border-color: var(--vity-accent);
	color: var(--vity-accent);
}

.osn-prose .vity-anniv__list {
	display: grid;
	gap: calc(var(--osn-space) * 1.5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.osn-prose .vity-anniv__item {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: calc(var(--osn-space) * 2);
	margin: 0;
	padding: calc(var(--osn-space) * 2.5);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-lg);
	/* Щоб рядок за якорем не ховався під липкою смугою переходу. */
	scroll-margin-top: 72px;
}

.vity-anniv__item:target {
	border-color: var(--vity-accent);
	box-shadow: 0 0 0 3px var(--vity-accent-soft);
}

.osn-prose .vity-anniv__years {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--vity-accent);
}

.osn-prose .vity-anniv__title {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 1.25;
}

.osn-prose .vity-anniv__alt,
.osn-prose .vity-anniv__note {
	margin: 0 0 var(--osn-space);
	font-size: var(--osn-fs-meta);
	line-height: 1.5;
	color: var(--vity-ink-faint);
}

.osn-prose .vity-anniv__note {
	margin: var(--osn-space) 0 0;
	font-style: italic;
}

.osn-prose .vity-anniv__symbol,
.osn-prose .vity-anniv__gifts {
	margin: 0 0 6px;
	font-size: var(--osn-fs-small);
	line-height: 1.6;
	color: var(--vity-ink-muted);
}

.vity-anniv__label {
	font-weight: 700;
	color: var(--vity-ink);
}

.vity-anniv__item--rare .vity-anniv__years {
	color: var(--vity-ink-faint);
}

.osn-prose .vity-anniv__post {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: calc(var(--osn-space) * 1.5) 0 0;
	font-size: var(--osn-fs-small);
	font-weight: 700;
	color: var(--vity-accent);
	text-decoration: none;
	background: none;
}

.osn-prose .vity-anniv__post:hover,
.osn-prose .vity-anniv__post:focus-visible {
	color: var(--vity-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.osn-prose .vity-anniv__source {
	margin: calc(var(--osn-space) * 2.5) 0 0;
	font-size: var(--osn-fs-meta);
	color: var(--vity-ink-faint);
}

@media (max-width: 540px) {
	.osn-prose .vity-anniv__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding: calc(var(--osn-space) * 2);
	}

	.osn-prose .vity-anniv__title {
		font-size: 18px;
	}
}

/* ==========================================================================
   10c. «Сьогодні вітаємо»
   ========================================================================== */

.vity-hol[hidden] {
	display: none;
}

/* -- смуга над підвалом ---------------------------------------------- */

/*
 * Окрема смуга між контентом і підвалом, а не всередині підвалу: туди
 * погляд майже не доходить. Кольорове тло відділяє її від обох сусідів.
 */
.vity-hol--compact {
	margin: var(--vity-block-space) 0 0;
	padding: calc(var(--osn-space) * 2) 0;
	background: var(--vity-accent-soft);
	border-top: 1px solid var(--vity-line);
}

.vity-hol__strip {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--osn-space) calc(var(--osn-space) * 3);
	font-size: var(--osn-fs-small);
	line-height: 1.5;
	color: var(--vity-ink);
}

.vity-hol__strip-label {
	margin-right: 6px;
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent-hover);
}

.vity-hol__strip-link {
	font-weight: 600;
	color: var(--vity-ink);
}

a.vity-hol__strip-link {
	text-decoration: underline;
	text-decoration-color: var(--vity-line-strong);
	text-underline-offset: 3px;
}

a.vity-hol__strip-link:hover,
a.vity-hol__strip-link:focus-visible {
	color: var(--vity-accent);
}

.vity-hol__strip-all {
	margin-left: auto;
	font-weight: 700;
	color: var(--vity-accent);
	text-underline-offset: 3px;
}

/* -- повна версія ---------------------------------------------------- */

.vity-hol--full {
	margin: calc(var(--osn-space) * 4) 0;
}

.vity-hol__title {
	margin: 0 0 calc(var(--osn-space) * 2);
	font-size: 22px;
}

.vity-hol__kicker {
	margin: 0 0 calc(var(--osn-space) * 1.5);
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent);
}

.vity-hol__cards,
.vity-hol__list {
	display: grid;
	gap: var(--osn-space);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vity-hol__cards {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: calc(var(--osn-space) * 1.5);
	margin-bottom: calc(var(--osn-space) * 4);
}

.vity-hol__card {
	display: grid;
	align-content: start;
	gap: 6px;
	margin: 0;
	padding: calc(var(--osn-space) * 2.5);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-top: 4px solid var(--vity-accent);
	border-radius: var(--osn-r-lg);
}

.vity-hol__card--professional {
	border-top-color: var(--vity-spark-c);
}

.vity-hol__card--religious {
	border-top-color: var(--vity-spark-b);
}

.vity-hol__type {
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-ink-faint);
}

.vity-hol__card-title {
	font-family: var(--osn-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vity-ink);
	text-decoration: none;
}

a.vity-hol__card-title:hover,
a.vity-hol__card-title:focus-visible {
	color: var(--vity-accent);
}

.vity-hol__desc {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.55;
	color: var(--vity-ink-muted);
}

.vity-hol__more {
	margin-top: 4px;
	font-size: var(--osn-fs-small);
	font-weight: 700;
	color: var(--vity-accent);
	text-underline-offset: 3px;
}

.vity-hol__next-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--osn-space);
	margin: 0 0 calc(var(--osn-space) * 1.5);
}

.vity-hol__next-head .vity-hol__kicker {
	margin: 0;
}

.vity-hol__filter {
	display: inline-flex;
	gap: 4px;
	padding: 3px;
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface-alt);
}

.vity-hol__chip {
	min-height: 32px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--osn-r-pill);
	background: none;
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 700;
	color: var(--vity-ink-muted);
	cursor: pointer;
}

.vity-hol__chip[aria-pressed="true"] {
	background: var(--vity-surface);
	box-shadow: var(--osn-shadow-sm);
	color: var(--vity-accent);
}

.vity-hol__row {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) auto;
	gap: calc(var(--osn-space) * 1.5);
	align-items: center;
	margin: 0;
	padding: calc(var(--osn-space) * 1.25) calc(var(--osn-space) * 1.5);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-md);
}

.vity-hol__row[hidden] {
	display: none;
}

.vity-hol__date {
	display: grid;
	justify-items: center;
	padding: 6px 0;
	border-radius: var(--osn-r-md);
	background: var(--vity-accent-soft);
	font-size: var(--osn-fs-meta);
	line-height: 1.2;
	color: var(--vity-accent-hover);
}

.vity-hol__date b {
	font-family: var(--osn-font-display);
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

.vity-hol__wd {
	font-size: 11px;
	color: var(--vity-ink-faint);
}

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

.vity-hol__row-title {
	font-size: var(--osn-fs-small);
	font-weight: 600;
	line-height: 1.35;
	color: var(--vity-ink);
	text-decoration: none;
}

a.vity-hol__row-title {
	color: var(--vity-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vity-hol__meta {
	font-size: var(--osn-fs-meta);
	color: var(--vity-ink-faint);
}

.vity-hol__cal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	white-space: nowrap;
	color: var(--vity-ink-muted);
	cursor: pointer;
}

.vity-hol__cal:hover,
.vity-hol__cal:focus-visible {
	border-color: var(--vity-accent);
	color: var(--vity-accent);
}

/*
 * На сторінці календаря блок усередині `.osn-prose`: там `ul`, `ol`, `li`,
 * `p` і `a` мають (0,1,1). Той самий дозволений контрактом виняток.
 */
.osn-prose .vity-hol__cards,
.osn-prose .vity-hol__list {
	margin-left: 0;
	padding-left: 0;
}

.osn-prose .vity-hol__cards {
	margin-bottom: calc(var(--osn-space) * 4);
}

.osn-prose .vity-hol__card,
.osn-prose .vity-hol__row {
	margin: 0;
}

.osn-prose .vity-hol__kicker,
.osn-prose .vity-hol__desc {
	margin-bottom: 0;
}

.osn-prose .vity-hol__kicker {
	margin-bottom: calc(var(--osn-space) * 1.5);
}

.osn-prose .vity-hol__next-head .vity-hol__kicker {
	margin: 0;
}

.osn-prose a.vity-hol__card-title,
.osn-prose a.vity-hol__row-title,
.osn-prose .vity-hol__more {
	background: none;
}

.osn-prose a.vity-hol__card-title {
	color: var(--vity-ink);
	text-decoration: none;
}

/* -- вузька версія (віджет) ------------------------------------------ */

.vity-hol--narrow {
	margin: 0;
}

.vity-hol--narrow .vity-hol__cards {
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: calc(var(--osn-space) * 2.5);
}

.vity-hol--narrow .vity-hol__card {
	padding: calc(var(--osn-space) * 1.5);
}

.vity-hol--narrow .vity-hol__row {
	padding: var(--osn-space);
}

/*
 * У вузькій колонці й на телефоні кнопка календаря — кругла «+» праворуч:
 * напис на окремому рядку подвоював би висоту кожного свята. Текст
 * лишається в aria-label.
 */
.vity-hol--narrow .vity-hol__row {
	grid-template-columns: 48px minmax(0, 1fr) 36px;
}

.vity-hol--narrow .vity-hol__cal {
	width: 36px;
	padding: 0;
}

.vity-hol--narrow .vity-hol__cal-text {
	display: none;
}

.vity-hol__cal-plus {
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

.vity-hol--narrow .vity-hol__date b {
	font-size: 17px;
}

@media (max-width: 540px) {
	.vity-hol__row {
		grid-template-columns: 50px minmax(0, 1fr) 36px;
		padding: var(--osn-space);
	}

	.vity-hol__cal {
		width: 36px;
		padding: 0;
	}

	.vity-hol__cal-text {
		display: none;
	}

	.vity-hol__strip-all {
		margin-left: 0;
	}
}

/* ==========================================================================
   10d. Підбирач привітання
   ========================================================================== */

.vity-pick {
	margin: calc(var(--osn-space) * 4) 0;
	padding: calc(var(--osn-space) * 3);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-lg);
	box-shadow: var(--osn-shadow-sm);
}

.vity-pick[hidden] {
	display: none;
}

.vity-pick__kicker {
	margin: 0;
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent);
}

.vity-pick__lead {
	margin: 4px 0 calc(var(--osn-space) * 2.5);
	font-size: var(--osn-fs-small);
	line-height: 1.6;
	color: var(--vity-ink-muted);
}

.vity-pick__steps {
	display: grid;
	gap: calc(var(--osn-space) * 2);
}

.vity-pick__step {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.vity-pick__step-title {
	margin: 0 0 var(--osn-space);
	padding: 0;
	font-family: var(--osn-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--vity-ink);
}

.vity-pick__any {
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 400;
	color: var(--vity-ink-faint);
}

.vity-pick__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vity-pick__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 500;
	color: var(--vity-ink);
	cursor: pointer;
}

.vity-pick__chip:hover,
.vity-pick__chip:focus-visible {
	border-color: var(--vity-accent);
	color: var(--vity-accent);
}

.vity-pick__chip[aria-pressed="true"] {
	border-color: var(--vity-accent);
	background: var(--vity-accent);
	color: var(--vity-accent-contrast);
}

.vity-pick__count {
	font-size: var(--osn-fs-meta);
	font-variant-numeric: tabular-nums;
	color: var(--vity-ink-faint);
}

.vity-pick__chip[aria-pressed="true"] .vity-pick__count {
	color: inherit;
	opacity: .85;
}

.vity-pick__go-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--osn-space) calc(var(--osn-space) * 2);
	margin: calc(var(--osn-space) * 3) 0 0;
}

.vity-pick__go,
.vity-pick__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 calc(var(--osn-space) * 3);
	border: 1px solid var(--vity-accent);
	border-radius: var(--osn-r-pill);
	background: var(--vity-accent);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 700;
	color: var(--vity-accent-contrast);
	cursor: pointer;
}

.vity-pick__go:hover,
.vity-pick__go:focus-visible {
	border-color: var(--vity-accent-hover);
	background: var(--vity-accent-hover);
}

.vity-pick__go:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.vity-pick__more {
	margin-top: var(--osn-space);
	background: var(--vity-surface);
	color: var(--vity-accent);
}

.vity-pick__more:hover,
.vity-pick__more:focus-visible {
	background: var(--vity-accent-soft);
}

.vity-pick__reset {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 600;
	color: var(--vity-ink-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.vity-pick__reset[hidden] {
	display: none;
}

.vity-pick__result:empty {
	display: none;
}

.vity-pick__result {
	margin: calc(var(--osn-space) * 3) 0 0;
	padding: calc(var(--osn-space) * 3) 0 0;
	border-top: 1px dashed var(--vity-line-strong);
}

.vity-pick__result[aria-busy="true"] {
	opacity: .6;
}

.osn-prose .vity-pick__source {
	margin: 0 0 calc(var(--osn-space) * 3);
	padding-left: 23px;
	font-size: var(--osn-fs-meta);
	color: var(--vity-ink-faint);
}

.osn-prose .vity-pick__source a {
	color: var(--vity-accent);
}

.vity-pick__error {
	color: var(--vity-accent-hover);
}

/* -- вузька версія (віджет) ------------------------------------------ */

.vity-pick--narrow {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.vity-pick--narrow .vity-pick__chip {
	min-height: 34px;
	padding: 0 10px;
	font-size: var(--osn-fs-meta);
}

.vity-pick--narrow .vity-pick__go,
.vity-pick--narrow .vity-pick__more {
	width: 100%;
}

.vity-pick--narrow .vity-pick__result {
	font-size: 15px;
}

@media (max-width: 540px) {
	.vity-pick {
		padding: calc(var(--osn-space) * 2);
	}

	.vity-pick__go,
	.vity-pick__more {
		width: 100%;
	}
}

/* -- компактний віджет: запрошення на сторінку підбирача ------------- */

.vity-pickcard {
	display: grid;
	gap: var(--osn-space);
	padding: calc(var(--osn-space) * 2);
	border-radius: var(--osn-r-md);
	background: var(--vity-accent-soft);
}

.vity-pickcard__title {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vity-ink);
}

.vity-pickcard__lead {
	margin: 0;
	font-size: var(--osn-fs-meta);
	font-weight: 700;
	color: var(--vity-ink-muted);
}

.vity-pickcard__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vity-pickcard__chips li {
	margin: 0;
}

.vity-pickcard__chip {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--vity-ink);
	text-decoration: none;
}

.vity-pickcard__chip:hover,
.vity-pickcard__chip:focus-visible {
	border-color: var(--vity-accent);
	color: var(--vity-accent);
}

.vity-pickcard__all {
	justify-self: start;
	font-size: var(--osn-fs-small);
	font-weight: 700;
	color: var(--vity-accent);
	text-decoration: none;
}

.vity-pickcard__all:hover,
.vity-pickcard__all:focus-visible {
	color: var(--vity-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   10e. Листівка
   ========================================================================== */

.vity-qa__btn--card::before {
	content: "";
	width: 12px;
	height: 12px;
	margin-right: 6px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--vity-accent), var(--vity-spark-b));
}

/* Поки вантажиться конструктор — кнопка ледь пригасає. */
.vity-qa__btn[aria-busy="true"] {
	opacity: .6;
	cursor: progress;
}

.vity-card-start__btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 calc(var(--osn-space) * 3.5);
	border: 0;
	border-radius: var(--osn-r-pill);
	background: var(--vity-accent);
	font-family: var(--osn-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--vity-accent-contrast);
	cursor: pointer;
}

.vity-card-start__btn:hover,
.vity-card-start__btn:focus-visible {
	background: var(--vity-accent-hover);
}

/* Під відкритим вікном сторінка не гортається. */
.vity-card-open {
	overflow: hidden;
}

.vity-card {
	width: min(980px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--osn-r-lg);
	background: var(--vity-surface);
	box-shadow: var(--vity-shadow-lg);
	color: var(--vity-ink);
	overflow: auto;
}

.vity-card::backdrop {
	background: rgba(33, 26, 32, .55);
}

.vity-card__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(var(--osn-space) * 1.5) calc(var(--osn-space) * 2.5);
	background: var(--vity-surface);
	border-bottom: 1px solid var(--vity-line);
}

.vity-card__title {
	margin: 0;
	font-size: 20px;
}

.vity-card__close {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface-alt);
	font-size: 24px;
	line-height: 1;
	color: var(--vity-ink);
	cursor: pointer;
}

.vity-card__close:hover,
.vity-card__close:focus-visible {
	background: var(--vity-accent-soft);
	color: var(--vity-accent);
}

.vity-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: calc(var(--osn-space) * 3);
	padding: calc(var(--osn-space) * 2.5);
}

.vity-card__preview {
	align-self: start;
	position: sticky;
	top: 72px;
}

.vity-card__canvas {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--osn-r-md);
	box-shadow: var(--osn-shadow-md);
	background: var(--vity-surface-alt);
}

.vity-card__controls {
	display: grid;
	align-content: start;
	gap: calc(var(--osn-space) * 1.5);
	min-width: 0;
}

.vity-card__label {
	display: block;
	margin: 0 0 6px;
	font-size: var(--osn-fs-meta);
	font-weight: 700;
	color: var(--vity-ink-muted);
}

.vity-card__opt {
	font-weight: 400;
	color: var(--vity-ink-faint);
}

/* Фони — стрічка, що гортається вбік: 33 мініатюри в сітці відсунули б поля вниз. */
.vity-card__bgs {
	display: flex;
	gap: 8px;
	padding: 2px 2px 8px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.vity-card__bg {
	flex: 0 0 auto;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--osn-r-md);
	background: none;
	cursor: pointer;
}

.vity-card__bg img {
	display: block;
	width: 64px;
	height: 80px;
	border-radius: calc(var(--osn-r-md) - 2px);
	object-fit: cover;
}

.vity-card__bg[aria-checked="true"] {
	border-color: var(--vity-accent);
}

.vity-card__field {
	display: block;
	margin: 0;
}

.vity-card__input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-md);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--vity-ink);
	resize: vertical;
}

.vity-card__input:focus-visible {
	border-color: var(--vity-accent);
	outline-offset: 0;
}

.vity-card__hint,
.vity-card__warn {
	margin: -4px 0 0;
	font-size: var(--osn-fs-meta);
	line-height: 1.5;
	color: var(--vity-ink-faint);
}

.vity-card__warn {
	font-weight: 600;
	color: var(--vity-accent-hover);
}

.vity-card__hint[hidden],
.vity-card__warn[hidden],
.vity-card__btn[hidden] {
	display: none;
}

.vity-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--osn-space);
	margin-top: var(--osn-space);
}

.vity-card__btn {
	flex: 1 1 160px;
	min-height: 48px;
	padding: 0 calc(var(--osn-space) * 2.5);
	border: 1px solid var(--vity-accent);
	border-radius: var(--osn-r-pill);
	background: var(--vity-accent);
	font-family: var(--osn-font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--vity-accent-contrast);
	cursor: pointer;
}

.vity-card__btn:hover,
.vity-card__btn:focus-visible {
	background: var(--vity-accent-hover);
	border-color: var(--vity-accent-hover);
}

.vity-card__btn--alt {
	background: var(--vity-surface);
	color: var(--vity-accent);
}

.vity-card__btn--alt:hover,
.vity-card__btn--alt:focus-visible {
	background: var(--vity-accent-soft);
	color: var(--vity-accent-hover);
}

/*
 * Телефон: вікно на весь екран, прев'ю згори — невисоке, щоб поля й кнопки
 * було видно без довгого гортання.
 */
@media (max-width: 720px) {
	.vity-card {
		width: 100vw;
		max-width: 100vw;
		height: 100%;
		max-height: 100%;
		margin: 0;
		border-radius: 0;
	}

	.vity-card__body {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--osn-space) * 2);
		padding: calc(var(--osn-space) * 2);
	}

	.vity-card__preview {
		position: static;
		justify-self: center;
		width: min(100%, 46vh * .8);
	}

	/* Головні кнопки прилипають до низу екрана — не треба гортати до них. */
	.vity-card__actions {
		position: sticky;
		bottom: 0;
		margin: 0 calc(var(--osn-space) * -2) calc(var(--osn-space) * -2);
		padding: calc(var(--osn-space) * 1.5) calc(var(--osn-space) * 2);
		background: var(--vity-surface);
		border-top: 1px solid var(--vity-line);
	}
}

/* ==========================================================================
   10f. Під статтею: опитування, популярне, «ще для…», обране
   ========================================================================== */

/* -- «♡ Зберегти» й посилання на обране ------------------------------ */

.vity-qa__btn--save[aria-pressed="true"] {
	border-color: var(--vity-accent);
	background: var(--vity-accent-soft);
	color: var(--vity-accent-hover);
}

.osn-prose .vity-qa__fav-link {
	align-self: center;
	margin-left: 4px;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--vity-accent);
	background: none;
}

/* -- «Найчастіше копіюють» ------------------------------------------- */

.osn-prose .vity-pop-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 -0.9em 23px;
	padding: 3px 10px;
	border-radius: var(--osn-r-pill);
	background: var(--vity-accent);
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent-contrast);
}

.osn-prose .vity-pop-badge::before {
	content: "★";
	letter-spacing: 0;
}

/* -- опитування ------------------------------------------------------ */

.vity-poll {
	margin: calc(var(--osn-space) * 4) 0 0;
	padding: calc(var(--osn-space) * 3);
	background: var(--vity-surface);
	border: 1px solid var(--vity-line);
	border-left: 4px solid var(--vity-accent);
	border-radius: var(--osn-r-lg);
}

.vity-poll[hidden],
.vity-poll__step[hidden],
.vity-poll__thanks[hidden] {
	display: none;
}

.vity-poll__q {
	margin: 0 0 calc(var(--osn-space) * 1.5);
	font-family: var(--osn-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--vity-ink);
}

.vity-poll__answers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--osn-space);
}

.vity-poll__btn {
	min-height: 44px;
	padding: 0 calc(var(--osn-space) * 2.5);
	border: 1px solid var(--vity-accent);
	border-radius: var(--osn-r-pill);
	background: var(--vity-accent);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 700;
	color: var(--vity-accent-contrast);
	cursor: pointer;
}

.vity-poll__btn:hover,
.vity-poll__btn:focus-visible {
	background: var(--vity-accent-hover);
	border-color: var(--vity-accent-hover);
}

.vity-poll__btn--alt {
	background: var(--vity-surface);
	color: var(--vity-accent);
}

.vity-poll__btn--alt:hover,
.vity-poll__btn--alt:focus-visible {
	background: var(--vity-accent-soft);
	color: var(--vity-accent-hover);
}

.vity-poll__step[data-vity-poll-step="2"]:not([hidden]) {
	display: grid;
	gap: calc(var(--osn-space) * 1.5);
}

.vity-poll__step[data-vity-poll-step="2"] .vity-poll__q {
	margin: 0;
	font-size: 16px;
}

.vity-poll__label {
	display: block;
	margin: 0 0 6px;
	font-size: var(--osn-fs-meta);
	font-weight: 700;
	color: var(--vity-ink-muted);
}

.vity-poll__opt {
	font-weight: 400;
	color: var(--vity-ink-faint);
}

.vity-poll__field {
	display: block;
	margin: 0;
}

.vity-poll__input {
	width: 100%;
	max-width: 420px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-md);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	font-size: 16px;
	color: var(--vity-ink);
}

.vity-poll__step[data-vity-poll-step="2"] .vity-poll__btn {
	justify-self: start;
}

/* Пастка для ботів — поза екраном, але не display:none (його боти пропускають). */
.vity-poll__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vity-poll__thanks {
	margin: 0;
	font-weight: 600;
	color: var(--vity-accent-hover);
}

/* -- «Ще привітання — …» --------------------------------------------- */

.vity-related {
	margin: calc(var(--osn-space) * 4) 0 0;
	padding: calc(var(--osn-space) * 3);
	background: var(--vity-surface-alt);
	border-radius: var(--osn-r-lg);
}

.vity-related__title {
	margin: 0 0 calc(var(--osn-space) * 2);
	font-size: 19px;
}

/* -- віджет найпопулярніших ------------------------------------------ */

.vity-popular {
	font-size: 15px;
}

.osn-prose .vity-popular__source {
	margin: -4px 0 calc(var(--osn-space) * 2.5);
	padding-left: 23px;
	font-size: var(--osn-fs-meta);
}

.osn-prose .vity-popular__source a {
	color: var(--vity-accent);
}

/* -- сторінка «Обране» ----------------------------------------------- */

.vity-fav {
	margin: calc(var(--osn-space) * 3) 0 0;
}

.osn-prose .vity-fav__empty {
	padding: calc(var(--osn-space) * 3);
	border: 1px dashed var(--vity-line-strong);
	border-radius: var(--osn-r-lg);
	color: var(--vity-ink-muted);
	text-align: center;
}

.vity-fav__empty[hidden] {
	display: none;
}

.vity-fav__item {
	transition: opacity .2s ease;
}

.vity-fav__item.is-removed {
	opacity: .4;
}

.osn-prose .vity-fav__source {
	margin: 0 0 calc(var(--osn-space) * 3);
	padding-left: 23px;
	font-size: var(--osn-fs-meta);
	color: var(--vity-ink-faint);
}

.osn-prose .vity-fav__source a {
	color: var(--vity-accent);
}

@media (max-width: 540px) {
	.vity-poll,
	.vity-related {
		padding: calc(var(--osn-space) * 2);
	}
}

/* ==========================================================================
   10g. Іменини (віджет)
   ========================================================================== */

.vity-nd[hidden],
.vity-nd__today[hidden],
.vity-nd__result[hidden] {
	display: none;
}

.vity-nd {
	display: grid;
	gap: calc(var(--osn-space) * 1.5);
}

.vity-nd__today {
	margin: 0;
	padding: calc(var(--osn-space) * 1.25) calc(var(--osn-space) * 1.5);
	border-radius: var(--osn-r-md);
	background: var(--vity-accent-soft);
	font-size: var(--osn-fs-small);
	line-height: 1.5;
	color: var(--vity-ink);
}

.vity-nd__today-label {
	display: block;
	font-size: var(--osn-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vity-accent-hover);
}

.vity-nd__form {
	display: grid;
	gap: 6px;
	margin: 0;
}

.vity-nd__label {
	font-size: var(--osn-fs-meta);
	font-weight: 700;
	color: var(--vity-ink-muted);
}

.vity-nd__row {
	display: flex;
	gap: 6px;
}

.vity-nd__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-md);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	font-size: 16px;
	color: var(--vity-ink);
}

.vity-nd__go {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--osn-r-md);
	background: var(--vity-accent);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 700;
	color: var(--vity-accent-contrast);
	cursor: pointer;
}

.vity-nd__go:hover,
.vity-nd__go:focus-visible {
	background: var(--vity-accent-hover);
}

.vity-nd__result {
	padding: calc(var(--osn-space) * 1.5);
	border: 1px solid var(--vity-line);
	border-radius: var(--osn-r-md);
	background: var(--vity-surface);
}

.vity-nd__name {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--vity-ink);
}

.vity-nd__church,
.vity-nd__hint,
.vity-nd__none {
	margin: 4px 0 0;
	font-size: var(--osn-fs-meta);
	line-height: 1.5;
	color: var(--vity-ink-faint);
}

.vity-nd__next {
	margin: var(--osn-space) 0;
	font-size: var(--osn-fs-small);
	color: var(--vity-ink-muted);
}

.vity-nd__next strong {
	color: var(--vity-accent);
}

.vity-nd__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vity-nd__date {
	display: grid;
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--osn-r-md);
	background: var(--vity-surface-alt);
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	line-height: 1.35;
	color: var(--vity-ink);
}

.vity-nd__date.is-next {
	background: var(--vity-accent);
	color: var(--vity-accent-contrast);
}

.vity-nd__old {
	font-size: 11px;
	font-weight: 400;
	opacity: .75;
}

.vity-nd__all {
	margin: var(--osn-space) 0 0;
	font-size: var(--osn-fs-meta);
	color: var(--vity-ink-muted);
}

.vity-nd__all summary {
	font-weight: 700;
	color: var(--vity-accent);
	cursor: pointer;
}

.vity-nd__all p {
	margin: 6px 0 0;
	line-height: 1.6;
}

.vity-nd__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--osn-space) calc(var(--osn-space) * 1.5);
	margin-top: calc(var(--osn-space) * 1.5);
}

.vity-nd__cal {
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--vity-line-strong);
	border-radius: var(--osn-r-pill);
	background: var(--vity-surface);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--vity-ink-muted);
	cursor: pointer;
}

.vity-nd__cal:hover,
.vity-nd__cal:focus-visible {
	border-color: var(--vity-accent);
	color: var(--vity-accent);
}

.vity-nd__post {
	font-size: var(--osn-fs-small);
	font-weight: 700;
	color: var(--vity-accent);
	text-underline-offset: 3px;
}

/* ==========================================================================
   11. Порожній стан, пагінація, фокус
   ========================================================================== */

.vity-empty {
	display: grid;
	justify-items: center;
	gap: var(--osn-space);
	padding: calc(var(--osn-space) * 6) calc(var(--osn-space) * 3);
	text-align: center;
	background: var(--vity-surface);
	border: 1px dashed var(--vity-line-strong);
	border-radius: var(--osn-r-lg);
}

/* Три конфеті замість ілюстрації: жодного запиту, а порожня сторінка
   перестає виглядати помилкою. */
.vity-empty__mark {
	width: 56px;
	height: 12px;
	background:
		radial-gradient(circle at 6px 6px, var(--vity-accent) 0 5px, transparent 5px),
		radial-gradient(circle at 28px 6px, var(--vity-spark-a) 0 5px, transparent 5px),
		radial-gradient(circle at 50px 6px, var(--vity-spark-b) 0 5px, transparent 5px);
}

.osn-pagination__list a,
.osn-pagination__list span {
	border-radius: var(--osn-r-md);
}

:focus-visible {
	outline: 2px solid var(--vity-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   12. Адаптив
   ========================================================================== */

@media (max-width: 1024px) {
	.osn-single__title {
		font-size: 34px;
	}

	.vity-slide__title {
		font-size: 26px;
	}

	.vity-picks__grid,
	.vity-wishbox--grid .vity-wishbox__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.osn-single__title {
		font-size: 28px;
	}

	.vity-shead__title {
		font-size: 22px;
	}

	/* Дві колонки тут уже тісні: кадр згори, текст під ним. */
	.vity-slide {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--osn-space) * 2.5);
	}

	.vity-slide__body {
		padding-right: 0;
	}

	.vity-slide__title {
		font-size: 23px;
	}

	.vity-hero__arrow {
		display: none;
	}

	.osn-card--confetti .osn-card__cover {
		aspect-ratio: 16 / 9;
	}

	/* Зміст згортається — на телефоні список із восьми пунктів
	   відсуває початок тексту на екран униз. */
	.vity-toc__toggle {
		cursor: pointer;
	}

	.vity-toc__toggle .osn-icon--chevron {
		display: block;
		transition: transform .2s ease;
	}

	.vity-toc.is-open .osn-icon--chevron {
		transform: rotate(180deg);
	}

	.vity-toc__list {
		display: none;
	}

	.vity-toc.is-open .vity-toc__list {
		display: grid;
	}

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

@media (max-width: 540px) {
	.osn-single__title {
		font-size: 24px;
	}

	.osn-card__title {
		font-size: 18px;
	}

	.vity-slide {
		padding: calc(var(--osn-space) * 1.5);
	}

	.vity-slide__title {
		font-size: 20px;
	}

	.vity-slide__body {
		gap: var(--osn-space);
	}

	.vity-picks__grid,
	.vity-wishbox--grid .vity-wishbox__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.vity-garland .vity-cover--round,
	.vity-wlist .vity-cover--round {
		width: 54px;
		flex-basis: 54px;
	}

	.vity-share {
		padding: calc(var(--osn-space) * 2);
	}

	.vity-inline {
		padding: calc(var(--osn-space) * 2) calc(var(--osn-space) * 2);
	}

	.vity-calc {
		padding: calc(var(--osn-space) * 2);
	}

	.vity-calc__title,
	.osn-prose .vity-calc__title {
		font-size: 20px;
	}

	.vity-calc__date {
		grid-template-columns: 64px minmax(0, 1fr) 84px;
		flex-basis: 100%;
	}

	.vity-calc__go {
		width: 100%;
	}

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

	.vity-calc__stat-value {
		font-size: 20px;
	}
}