/*
 * «Відомі» — довідкові інструменти.
 *
 * «Коротко» в статті, дні народження, список від А до Я, справжні імена,
 * ювілеї, гра «Хто старший?», їхні віджети й блоки на головній.
 *
 * Мова та сама, що й у vdmi-main.css: етикетка під експонатом — папір,
 * волосяні лінії, бронза на роках і числах, гострі кути, жодних тіней.
 * Ті самі правила: без !important, без #id, кольори лише з токенів,
 * брейкпоінти 1024 / 768 / 540.
 *
 * Зміст:
 *   1  Спільне: заголовки, поля, кнопки
 *   2  Рядок і картка людини
 *   3  «Коротко» в статті
 *   4  Дні народження
 *   5  Від А до Я
 *   6  Справжні імена
 *   7  Ювілеї
 *   8  «Хто старший?»
 *   9  Сітка інструментів і блоки головної
 *  10  Віджети
 *  11  Адаптив
 */

/* ==========================================================================
   1. Спільне
   ========================================================================== */

.vdmi-tool {
	display: grid;
	gap: calc(var(--osn-space) * 4);
	min-width: 0;
	margin: calc(var(--osn-space) * 3) 0;
}

.vdmi-tool--compact {
	gap: calc(var(--osn-space) * 1.5);
	margin: 0;
}

/*
 * Інструмент, вставлений шорткодом, живе всередині .osn-prose, а там
 * кожне посилання підкреслене (.osn-prose a, специфічність 0,1,1).
 * Кнопки місяців, днів і літер — не текстові посилання, тож риску
 * знімаємо для всіх, а текстовим повертаємо її на наведенні нижче.
 */
.osn-prose .vdmi-tool a {
	text-decoration: none;
}

.vdmi-tool > section {
	min-width: 0;
}

.osn-prose .vdmi-tool__title,
.vdmi-tool__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--osn-space) calc(var(--osn-space) * 1.5);
	margin: 0 0 calc(var(--osn-space) * 2);
	padding-bottom: var(--osn-space);
	font-family: var(--osn-font-display);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--osn-ink);
	border-bottom: var(--vdmi-hair) solid var(--osn-line-strong);
}

.vdmi-tool__count {
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

.osn-prose .vdmi-tool__lead,
.vdmi-tool__lead {
	margin: 0 0 calc(var(--osn-space) * 2);
	font-size: var(--osn-fs-small);
	line-height: 1.55;
	color: var(--osn-ink-muted);
}

.osn-prose .vdmi-tool__empty,
.vdmi-tool__empty {
	margin: 0;
	padding: calc(var(--osn-space) * 2);
	font-size: var(--osn-fs-small);
	color: var(--osn-ink-muted);
	background: var(--osn-surface-alt);
}

.osn-prose .vdmi-tool__more,
.vdmi-tool__more {
	margin: calc(var(--osn-space) * 1.5) 0 0;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
}

.vdmi-tool__more a {
	color: var(--osn-accent);
	text-decoration: none;
}

.vdmi-tool__more a:hover,
.vdmi-tool__more a:focus-visible {
	color: var(--osn-accent-hover);
	text-decoration: underline;
}

/* --- Поля форм --- */

.vdmi-field {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.vdmi-field__label {
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--osn-ink-muted);
}

.vdmi-field__input {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--osn-ink);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line-strong);
	border-radius: var(--osn-r-md);
}

.vdmi-field__input:focus {
	outline: 2px solid var(--osn-accent);
	outline-offset: 1px;
	border-color: var(--osn-accent);
}

/* --- Кнопки --- */

.vdmi-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	font: inherit;
	font-size: var(--osn-fs-small);
	font-weight: 600;
	color: var(--osn-accent-contrast);
	background: var(--osn-accent);
	border: var(--vdmi-hair) solid var(--osn-accent);
	border-radius: var(--osn-r-md);
	cursor: pointer;
	transition: background-color .15s ease;
}

.vdmi-button:hover,
.vdmi-button:focus-visible {
	background: var(--osn-accent-hover);
	border-color: var(--osn-accent-hover);
}

.vdmi-button--ghost {
	color: var(--osn-accent);
	background: transparent;
}

.vdmi-button--ghost:hover,
.vdmi-button--ghost:focus-visible {
	color: var(--osn-accent-contrast);
}

.vdmi-button[hidden] {
	display: none;
}

/* ==========================================================================
   2. Рядок і картка людини
   ========================================================================== */

.osn-prose .vdmi-plist,
.vdmi-plist {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.osn-prose .vdmi-pl,
.vdmi-pl {
	margin: 0;
	padding: calc(var(--osn-space) * 1.5) 0;
	border-bottom: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-pl {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 4px calc(var(--osn-space) * 2);
}

.vdmi-pl:first-child {
	border-top: var(--vdmi-hair) solid var(--osn-line);
}

/* Рядок без дати: колонка дати не тримає місця. */
.vdmi-pl:not(:has(.vdmi-pl__when)) {
	grid-template-columns: minmax(0, 1fr) auto;
}

.vdmi-pl__when {
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

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

.osn-prose .vdmi-pl__name,
.vdmi-pl__name {
	font-family: var(--osn-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--osn-ink);
	text-decoration: none;
	overflow-wrap: break-word;
}

.osn-prose a.vdmi-pl__name,
a.vdmi-pl__name {
	color: var(--osn-accent);
}

a.vdmi-pl__name:hover,
a.vdmi-pl__name:focus-visible {
	color: var(--osn-accent-hover);
	text-decoration: underline;
}

.vdmi-pl__job {
	font-size: var(--osn-fs-meta);
	line-height: 1.45;
	color: var(--osn-ink-muted);
}

.vdmi-pl__age {
	font-size: var(--osn-fs-meta);
	font-variant-numeric: tabular-nums;
	color: var(--osn-ink-faint);
	white-space: nowrap;
}

/* --- Картка людини (смуга іменинників) --- */

.vdmi-pcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: calc(var(--osn-space) * 2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdmi-pcard {
	display: grid;
	grid-template-columns: 1fr;
	align-content: start;
	gap: calc(var(--osn-space) * 1.5);
	min-width: 0;
	padding: calc(var(--osn-space) * 2);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-pcard__face {
	display: block;
	width: 96px;
	aspect-ratio: 1;
	overflow: hidden;
	border: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-pcard__face--blank,
.vdmi-facts__face--blank {
	display: grid;
	place-items: center;
	background: var(--osn-surface-alt);
}

.vdmi-pcard__face__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.vdmi-pcard__face__mono {
	font-family: var(--osn-font-display);
	font-size: 30px;
	font-weight: 500;
	line-height: 1;
	color: var(--vdmi-bronze-line);
}

.vdmi-pcard__text {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.vdmi-pcard__age {
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

.vdmi-pcard__day {
	color: var(--osn-accent);
}

.vdmi-pcard__name {
	font-family: var(--osn-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--osn-ink);
	text-decoration: none;
	overflow-wrap: break-word;
}

a.vdmi-pcard__name:hover,
a.vdmi-pcard__name:focus-visible {
	color: var(--osn-accent);
	text-decoration: underline;
}

.vdmi-pcard__job {
	font-size: var(--osn-fs-meta);
	line-height: 1.45;
	color: var(--osn-ink-muted);
}

/* ==========================================================================
   3. «Коротко» в статті
   ========================================================================== */

.vdmi-facts {
	margin: 0 0 calc(var(--osn-space) * 4);
	padding: calc(var(--osn-space) * 3);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	border-top: var(--vdmi-rule) solid var(--vdmi-bronze-line);
}

.vdmi-facts__title {
	margin: 0 0 calc(var(--osn-space) * 1.5);
	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(--vdmi-bronze);
}

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

.vdmi-facts__row {
	display: grid;
	grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
	gap: calc(var(--osn-space) * 1.5);
	align-items: baseline;
	padding: calc(var(--osn-space) * 1.25) 0;
	border-bottom: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-facts__label {
	margin: 0;
	font-size: var(--osn-fs-meta);
	color: var(--osn-ink-faint);
}

.vdmi-facts__value {
	margin: 0;
	font-size: var(--osn-fs-small);
	font-weight: 500;
	line-height: 1.45;
	color: var(--osn-ink);
	overflow-wrap: break-word;
}

.vdmi-facts__value a {
	color: var(--osn-accent);
	text-decoration: none;
	border-bottom: var(--vdmi-hair) solid currentColor;
}

.vdmi-facts__value a:hover,
.vdmi-facts__value a:focus-visible {
	color: var(--osn-accent-hover);
}

.vdmi-facts__num {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

.vdmi-facts__peers {
	margin: calc(var(--osn-space) * 2) 0 0;
	font-size: var(--osn-fs-meta);
	line-height: 1.6;
	color: var(--osn-ink-muted);
}

.vdmi-facts__peers-label {
	font-weight: 600;
	color: var(--osn-ink);
}

.vdmi-facts__peers a {
	color: var(--osn-accent);
}

.vdmi-facts__all {
	font-weight: 600;
	white-space: nowrap;
}

/* ==========================================================================
   4. Дні народження
   ========================================================================== */

.vdmi-finder {
	padding: calc(var(--osn-space) * 3);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	border-left: var(--vdmi-rule) solid var(--osn-accent);
}

.vdmi-finder[hidden] {
	display: none;
}

.vdmi-finder .vdmi-tool__title {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: var(--osn-space);
}

.vdmi-finder__form {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 150px auto;
	align-items: end;
	gap: calc(var(--osn-space) * 1.5);
}

.vdmi-finder__out:not(:empty) {
	margin-top: calc(var(--osn-space) * 3);
}

.osn-prose .vdmi-finder__sign,
.vdmi-finder__sign {
	margin: 0 0 calc(var(--osn-space) * 2);
	font-size: var(--osn-fs-small);
}

.vdmi-finder__sign b {
	color: var(--vdmi-bronze);
}

.osn-prose .vdmi-finder__h,
.vdmi-finder__h {
	margin: calc(var(--osn-space) * 3) 0 var(--osn-space);
	font-family: var(--osn-font-display);
	font-size: 19px;
	font-weight: 600;
}

/* --- Місяці --- */

.osn-prose .vdmi-months,
.vdmi-months {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdmi-months {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--osn-space);
}

.osn-prose .vdmi-months__item,
.vdmi-months__item {
	margin: 0;
}

.vdmi-months__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--osn-space);
	min-height: 44px;
	padding: 10px 14px;
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	text-decoration: none;
}

a.vdmi-months__link:hover,
a.vdmi-months__link:focus-visible {
	border-color: var(--osn-accent);
}

.vdmi-months__name {
	font-size: var(--osn-fs-small);
	font-weight: 500;
	color: var(--osn-ink);
}

a.vdmi-months__link:hover .vdmi-months__name {
	color: var(--osn-accent);
}

.vdmi-months__count {
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

.vdmi-months__item.is-current .vdmi-months__link {
	background: var(--osn-accent-soft);
	border-color: var(--osn-accent);
}

/* --- Дні місяця --- */

.vdmi-days {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vdmi-days__link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--osn-accent);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	text-decoration: none;
}

a.vdmi-days__link:hover,
a.vdmi-days__link:focus-visible {
	border-color: var(--osn-accent);
}

.vdmi-days__link.is-empty {
	color: var(--osn-ink-faint);
	background: transparent;
	border-style: dashed;
}

.vdmi-days__link.is-today {
	color: var(--osn-accent-contrast);
	background: var(--osn-accent);
	border-color: var(--osn-accent);
}

.vdmi-day {
	scroll-margin-top: calc(var(--osn-space) * 9);
}

.osn-prose .vdmi-day__title,
.vdmi-day__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--osn-space);
	margin: 0 0 var(--osn-space);
	font-family: var(--osn-font-display);
	font-size: 22px;
	font-weight: 600;
}

.vdmi-day__sign {
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 500;
	color: var(--osn-ink-faint);
}

.vdmi-day.is-today {
	padding: calc(var(--osn-space) * 2);
	background: var(--osn-accent-soft);
	border-left: var(--vdmi-rule) solid var(--osn-accent);
}

/* ==========================================================================
   5. Від А до Я
   ========================================================================== */

.vdmi-dir {
	display: grid;
	gap: calc(var(--osn-space) * 3);
	min-width: 0;
}

.vdmi-dir__filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 220px) minmax(0, 200px);
	align-items: end;
	gap: calc(var(--osn-space) * 1.5);
	padding: calc(var(--osn-space) * 2.5);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-dir__filters[hidden],
.vdmi-rn__search[hidden] {
	display: none;
}

.osn-prose .vdmi-dir__count,
.vdmi-dir__count {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

.vdmi-abc {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: var(--osn-space) 0;
	background: var(--osn-bg);
}

.vdmi-abc__link {
	display: grid;
	place-items: center;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	font-family: var(--osn-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--osn-accent);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	text-decoration: none;
}

.vdmi-abc__link:hover,
.vdmi-abc__link:focus-visible {
	border-color: var(--osn-accent);
}

.vdmi-abc__link.is-off {
	color: var(--osn-ink-faint);
	opacity: .45;
	pointer-events: none;
}

.vdmi-dir__group {
	scroll-margin-top: calc(var(--osn-space) * 14);
}

.vdmi-dir__group[hidden],
.vdmi-dir__row[hidden],
.vdmi-rn tr[hidden] {
	display: none;
}

.osn-prose .vdmi-dir__letter,
.vdmi-dir__letter {
	margin: 0 0 var(--osn-space);
	padding-bottom: 6px;
	font-family: var(--osn-font-display);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--vdmi-bronze);
	border-bottom: var(--vdmi-rule) solid var(--vdmi-bronze-line);
}

.osn-prose .vdmi-dir__list,
.vdmi-dir__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.osn-prose .vdmi-dir__row,
.vdmi-dir__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px calc(var(--osn-space) * 2);
	margin: 0;
	padding: calc(var(--osn-space) * 1.25) 0;
	border-bottom: var(--vdmi-hair) solid var(--osn-line);
}

.osn-prose .vdmi-dir__name,
.vdmi-dir__name {
	font-family: var(--osn-font-display);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--osn-ink);
	text-decoration: none;
	overflow-wrap: break-word;
}

.vdmi-dir__name b {
	font-weight: 700;
}

.osn-prose a.vdmi-dir__name,
a.vdmi-dir__name {
	color: var(--osn-accent);
}

a.vdmi-dir__name:hover,
a.vdmi-dir__name:focus-visible {
	text-decoration: underline;
}

.vdmi-dir__years {
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
	white-space: nowrap;
}

.vdmi-dir__meta,
.vdmi-dir__place {
	grid-column: 1 / -1;
	font-size: var(--osn-fs-meta);
	line-height: 1.45;
	color: var(--osn-ink-muted);
}

.vdmi-dir__place {
	color: var(--osn-ink-faint);
}

/* ==========================================================================
   6. Справжні імена
   ========================================================================== */

.vdmi-rn {
	display: grid;
	gap: calc(var(--osn-space) * 2);
	min-width: 0;
}

.vdmi-rn__search {
	display: grid;
	padding: calc(var(--osn-space) * 2.5);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-rn__wrap {
	max-width: 100%;
	overflow-x: auto;
	border: var(--vdmi-hair) solid var(--osn-line);
}

.osn-prose .vdmi-rn__table,
.vdmi-rn__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--osn-fs-small);
	background: var(--osn-surface);
}

.vdmi-rn__table th,
.vdmi-rn__table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-rn__table thead th {
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--osn-ink-muted);
	background: var(--osn-surface-alt);
}

.vdmi-rn__table tbody th {
	font-weight: 400;
	background: transparent;
}

.vdmi-rn__name {
	font-family: var(--osn-font-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--osn-ink);
	text-decoration: none;
}

a.vdmi-rn__name {
	color: var(--osn-accent);
}

a.vdmi-rn__name:hover,
a.vdmi-rn__name:focus-visible {
	text-decoration: underline;
}

.vdmi-rn__real {
	font-weight: 600;
	color: var(--vdmi-bronze);
}

.vdmi-rn__job {
	font-size: var(--osn-fs-meta);
	color: var(--osn-ink-muted);
}

/* ==========================================================================
   7. Ювілеї
   ========================================================================== */

.osn-prose .vdmi-jub__month,
.vdmi-jub__month {
	margin: calc(var(--osn-space) * 3) 0 var(--osn-space);
	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(--vdmi-bronze);
}

.vdmi-jub__month.is-now {
	color: var(--osn-accent);
}

.vdmi-jub__month.is-now::after {
	content: " · зараз";
	text-transform: none;
	letter-spacing: 0;
}

.vdmi-jub .vdmi-pl {
	grid-template-columns: 132px minmax(0, 1fr) auto;
}

/* ==========================================================================
   8. «Хто старший?»
   ========================================================================== */

.vdmi-older {
	display: grid;
	gap: calc(var(--osn-space) * 2);
	padding: calc(var(--osn-space) * 3);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	border-top: var(--vdmi-rule) solid var(--vdmi-bronze-line);
}

.osn-prose .vdmi-older__q,
.vdmi-older__q {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}

.vdmi-older__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: calc(var(--osn-space) * 1.5);
}

.vdmi-older__or {
	align-self: center;
	font-family: var(--osn-font-display);
	font-style: italic;
	font-size: 18px;
	color: var(--osn-ink-faint);
}

.vdmi-older__opt {
	display: grid;
	align-content: start;
	gap: 6px;
	min-height: 112px;
	padding: calc(var(--osn-space) * 2);
	font: inherit;
	text-align: left;
	color: var(--osn-ink);
	background: var(--osn-bg);
	border: var(--vdmi-hair) solid var(--osn-line-strong);
	border-radius: 0;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.vdmi-older__opt:hover:not(:disabled),
.vdmi-older__opt:focus-visible {
	border-color: var(--osn-accent);
	background: var(--osn-accent-soft);
}

.vdmi-older__opt:disabled {
	cursor: default;
}

.vdmi-older__name {
	font-family: var(--osn-font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.vdmi-older__job {
	font-size: var(--osn-fs-meta);
	line-height: 1.45;
	color: var(--osn-ink-muted);
}

.vdmi-older__born {
	margin-top: 4px;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

.vdmi-older__born[hidden] {
	display: none;
}

.vdmi-older__opt.is-older {
	border-color: var(--osn-accent);
	background: var(--osn-accent-soft);
}

.vdmi-older__opt.is-older .vdmi-older__name::after {
	content: " · старше";
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--osn-accent);
}

.vdmi-older__opt.is-wrong {
	border-color: var(--vdmi-bronze);
	background: var(--vdmi-bronze-soft);
}

.osn-prose .vdmi-older__verdict,
.vdmi-older__verdict {
	min-height: 1.5em;
	margin: 0;
	font-size: var(--osn-fs-small);
	font-weight: 600;
}

.vdmi-older__verdict.is-right {
	color: var(--osn-accent);
}

.vdmi-older__verdict.is-wrong {
	color: var(--vdmi-bronze);
}

.vdmi-older__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--osn-space) * 1.5);
}

.vdmi-older__score {
	font-size: var(--osn-fs-meta);
	font-variant-numeric: tabular-nums;
	color: var(--osn-ink-muted);
}

.vdmi-older__final {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.55;
}

.vdmi-older__final b {
	display: block;
	margin-bottom: 4px;
	font-family: var(--osn-font-display);
	font-size: 34px;
	font-weight: 600;
	color: var(--vdmi-bronze);
}

.vdmi-older__best {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--osn-fs-meta);
	color: var(--osn-ink-muted);
}

/* Порожні рядки вердикту й рахунку не тримають місця. */
.vdmi-older__verdict:empty {
	display: none;
}

.vdmi-older__bar:not(:has(.vdmi-older__score:not(:empty))):not(:has(.vdmi-button:not([hidden]))) {
	display: none;
}

/* У бічній колонці пара стоїть одна над одною. */
.vdmi-tool--compact .vdmi-older {
	gap: calc(var(--osn-space) * 1.5);
	padding: 0;
	background: none;
	border: 0;
}

.vdmi-tool--compact .vdmi-older__q {
	font-size: 17px;
}

.vdmi-tool--compact .vdmi-older__pair {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--osn-space);
}

.vdmi-tool--compact .vdmi-older__or {
	justify-self: center;
	font-size: 15px;
}

.vdmi-tool--compact .vdmi-older__opt {
	min-height: 0;
	padding: 12px 14px;
}

.vdmi-tool--compact .vdmi-older__name {
	font-size: 17px;
}

/* ==========================================================================
   9. Сітка інструментів і блоки головної
   ========================================================================== */

.osn-prose .vdmi-tgrid,
.vdmi-tgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: calc(var(--osn-space) * 2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.osn-prose .vdmi-tcard,
.vdmi-tcard {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-content: start;
	gap: 6px calc(var(--osn-space) * 1.5);
	margin: 0;
	padding: calc(var(--osn-space) * 2.5);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	transition: border-color .15s ease;
}

.vdmi-tcard:hover,
.vdmi-tcard:focus-within {
	border-color: var(--osn-accent);
}

.vdmi-tcard__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	font-family: var(--osn-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	color: var(--vdmi-bronze);
	border: var(--vdmi-hair) solid var(--vdmi-bronze-line);
}

.osn-prose .vdmi-tcard__link,
.vdmi-tcard__link {
	font-family: var(--osn-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--osn-ink);
	text-decoration: none;
}

/* Посилання накриває всю картку. */
.vdmi-tcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vdmi-tcard:hover .vdmi-tcard__link,
.vdmi-tcard__link:focus-visible {
	color: var(--osn-accent);
}

.vdmi-tcard__desc {
	font-size: var(--osn-fs-meta);
	line-height: 1.5;
	color: var(--osn-ink-muted);
}

.vdmi-bdstrip {
	padding: var(--vdmi-block-gap) 0 0;
}

.vdmi-toolstrip {
	padding: 0 0 var(--vdmi-block-gap);
}

.vdmi-more-tools {
	margin-top: calc(var(--osn-space) * 6);
}

.vdmi-more-tools__title {
	margin: 0 0 calc(var(--osn-space) * 2);
	padding-bottom: var(--osn-space);
	font-family: var(--osn-font-display);
	font-size: 24px;
	font-weight: 600;
	border-bottom: var(--vdmi-hair) solid var(--osn-line-strong);
}

/* ==========================================================================
   10. Віджети
   ========================================================================== */

.vdmi-tool--compact .vdmi-pl {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: var(--osn-space) 0;
}

.vdmi-tool--compact .vdmi-pl:has(.vdmi-pl__when) {
	grid-template-columns: 84px minmax(0, 1fr);
}

.vdmi-tool--compact .vdmi-pl:has(.vdmi-pl__when) .vdmi-pl__age {
	grid-column: 2;
}

.vdmi-tool--compact .vdmi-pl__name {
	font-size: 16px;
}

.vdmi-tool--compact .vdmi-pl__age {
	color: var(--vdmi-bronze);
	font-weight: 600;
}

.vdmi-tool--compact .vdmi-tool__lead {
	margin: 0;
}

.vdmi-rnfact {
	display: grid;
	gap: var(--osn-space);
	justify-items: start;
}

.vdmi-rnfact__text {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 20px;
	line-height: 1.3;
}

.vdmi-rnfact__name {
	font-weight: 600;
	color: var(--osn-ink);
	text-decoration: none;
}

a.vdmi-rnfact__name {
	color: var(--osn-accent);
}

.vdmi-rnfact__is {
	font-style: italic;
	color: var(--osn-ink-faint);
}

.vdmi-rnfact__real {
	font-weight: 600;
	color: var(--vdmi-bronze);
}

.vdmi-rnfact__job {
	margin: 0;
	font-size: var(--osn-fs-meta);
	color: var(--osn-ink-muted);
}

.vdmi-tlist {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdmi-tlist__item {
	border-bottom: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-tlist__link {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: center;
	gap: calc(var(--osn-space) * 1.5);
	min-height: 48px;
	padding: 6px 0;
	text-decoration: none;
}

.vdmi-tlist__icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	font-family: var(--osn-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--vdmi-bronze);
	border: var(--vdmi-hair) solid var(--vdmi-bronze-line);
}

.vdmi-tlist__name {
	font-size: var(--osn-fs-small);
	font-weight: 500;
	color: var(--osn-ink);
}

.vdmi-tlist__link:hover .vdmi-tlist__name,
.vdmi-tlist__link:focus-visible .vdmi-tlist__name {
	color: var(--osn-accent);
}

/* Заголовки в підвалі однакові: і в блоках, і в наших віджетах. */
.osn-widget--footer .osn-widget__title,
.osn-widget--footer .wp-block-heading {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-family: var(--osn-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--osn-ink);
}

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

@media (max-width: 1024px) {
	.vdmi-dir__filters {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.vdmi-dir__filters .vdmi-field--grow {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.vdmi-facts__list {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.vdmi-finder__form {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.vdmi-finder__form .vdmi-field--year {
		grid-column: 1 / -1;
	}

	.vdmi-finder__form .vdmi-button {
		grid-column: 1 / -1;
	}

	.vdmi-jub .vdmi-pl {
		grid-template-columns: 112px minmax(0, 1fr);
	}

	.vdmi-jub .vdmi-pl__age {
		grid-column: 2;
	}
}

@media (max-width: 540px) {
	.vdmi-facts,
	.vdmi-finder,
	.vdmi-older {
		padding: calc(var(--osn-space) * 2);
	}

	.vdmi-facts__row {
		grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
	}

	.vdmi-pl {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.vdmi-pl__age {
		grid-column: 2;
	}

	.vdmi-pl:not(:has(.vdmi-pl__when)) .vdmi-pl__age {
		grid-column: auto;
	}

	.vdmi-jub .vdmi-pl {
		grid-template-columns: minmax(0, 1fr);
	}

	.vdmi-jub .vdmi-pl__age {
		grid-column: auto;
	}

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

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

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

	.vdmi-older__or {
		justify-self: center;
	}

	.vdmi-older__opt {
		min-height: 0;
	}

	.vdmi-pcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--osn-space);
	}

	.vdmi-pcard {
		padding: calc(var(--osn-space) * 1.5);
	}

	.vdmi-pcard__face {
		width: 72px;
	}

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

	/* Таблиця справжніх імен на телефоні — стовпчиком карток. */
	.vdmi-rn__wrap {
		overflow: visible;
	}

	.vdmi-rn__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.vdmi-rn__table,
	.vdmi-rn__table tbody,
	.vdmi-rn__table tr,
	.vdmi-rn__table th,
	.vdmi-rn__table td {
		display: block;
		width: auto;
	}

	.vdmi-rn__table tr {
		padding: 12px 14px;
		border-bottom: var(--vdmi-hair) solid var(--osn-line);
	}

	.vdmi-rn__table th,
	.vdmi-rn__table td {
		padding: 0;
		border: 0;
	}

	.vdmi-rn__real::before {
		content: "насправді ";
		font-weight: 400;
		color: var(--osn-ink-faint);
	}

	.vdmi-rn__job {
		margin-top: 2px;
	}

	.vdmi-abc__link {
		min-width: 30px;
		height: 30px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vdmi-button,
	.vdmi-older__opt,
	.vdmi-tcard {
		transition: none;
	}
}