/*
 * Портал служіння — стилі кабінету.
 * Mobile-first, без зовнішніх залежностей. Усі класи з префіксом yp-,
 * стилі теми churchly не змінюються.
 */

.yp-portal {
	--yp-bg: #ffffff;
	--yp-surface: #f6f7f9;
	--yp-border: #e2e5ea;
	--yp-text: #1d2430;
	--yp-muted: #6b7480;
	--yp-accent: #2f6fed;
	--yp-accent-dark: #2456c4;
	--yp-ok: #1e8a52;
	--yp-ok-bg: #e6f5ec;
	--yp-warn-bg: #fff6e0;
	--yp-warn: #8a6100;
	--yp-err: #b3261e;
	--yp-err-bg: #fdecea;
	--yp-radius: 10px;

	box-sizing: border-box;
	max-width: 900px;
	margin: 0 auto;
	padding: 12px 14px 48px;
	color: var(--yp-text);
	font-size: 16px;
	line-height: 1.45;
	-webkit-text-size-adjust: 100%;
}

.yp-portal *,
.yp-portal *::before,
.yp-portal *::after {
	box-sizing: border-box;
}

/* ---------- Шапка ---------- */

.yp-head {
	border-bottom: 1px solid var(--yp-border);
	margin-bottom: 16px;
	padding-bottom: 10px;
}

.yp-head__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.yp-head__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.yp-head__user {
	color: var(--yp-muted);
	font-size: 14px;
}

.yp-nav {
	display: flex;
	gap: 6px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.yp-nav__item {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--yp-border);
	border-radius: 999px;
	background: var(--yp-bg);
	color: var(--yp-text);
	font-size: 14px;
	text-decoration: none;
}

.yp-nav__item:hover {
	border-color: var(--yp-accent);
	color: var(--yp-accent);
}

.yp-nav__item.is-active {
	background: var(--yp-accent);
	border-color: var(--yp-accent);
	color: #fff;
}

.yp-nav__item--muted {
	margin-left: auto;
	color: var(--yp-muted);
}

/* ---------- Повідомлення ---------- */

.yp-notice {
	border-radius: var(--yp-radius);
	padding: 10px 14px;
	margin-bottom: 16px;
	font-size: 15px;
}

.yp-notice--ok {
	background: var(--yp-ok-bg);
	color: var(--yp-ok);
}

.yp-notice--err {
	background: var(--yp-err-bg);
	color: var(--yp-err);
}

.yp-notice--warn {
	background: var(--yp-warn-bg);
	color: var(--yp-warn);
}

/* ---------- Секції ---------- */

.yp-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.yp-section__title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.yp-section__head .yp-section__title {
	margin: 0;
}

.yp-count {
	display: inline-block;
	min-width: 24px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--yp-surface);
	color: var(--yp-muted);
	font-size: 13px;
	font-weight: 600;
	vertical-align: middle;
}

.yp-back {
	color: var(--yp-muted);
	font-size: 14px;
	text-decoration: none;
}

.yp-back:hover {
	color: var(--yp-accent);
}

.yp-meta {
	margin: 0 0 14px;
	font-size: 14px;
}

.yp-meta__text {
	color: var(--yp-muted);
}

.yp-empty {
	padding: 24px 0;
	color: var(--yp-muted);
	text-align: center;
}

/* ---------- Картка ---------- */

.yp-card {
	border: 1px solid var(--yp-border);
	border-radius: var(--yp-radius);
	padding: 18px;
	background: var(--yp-bg);
}

.yp-card__title {
	margin: 0 0 10px;
	font-size: 19px;
}

/* ---------- Форми ---------- */

.yp-field {
	display: block;
	margin-bottom: 14px;
}

.yp-field__label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 600;
}

.yp-field__hint {
	display: block;
	margin-bottom: 6px;
	color: var(--yp-muted);
	font-size: 13px;
}

.yp-field__hint code {
	padding: 1px 4px;
	border-radius: 4px;
	background: var(--yp-surface);
	font-size: 12px;
}

.yp-input {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--yp-border);
	border-radius: 8px;
	background: var(--yp-bg);
	color: var(--yp-text);
	font-family: inherit;
	font-size: 16px; /* 16px — щоб iOS не зумив при фокусі */
	line-height: 1.35;
}

.yp-input:focus {
	border-color: var(--yp-accent);
	outline: 2px solid rgba(47, 111, 237, 0.18);
	outline-offset: 0;
}

.yp-input:disabled {
	background: var(--yp-surface);
	color: var(--yp-muted);
}

.yp-textarea {
	min-height: 260px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	line-height: 1.55;
	resize: vertical;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

.yp-field-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.yp-field-row .yp-field {
	flex: 1 1 180px;
}

.yp-field-row .yp-field--narrow {
	flex: 0 1 130px;
}

.yp-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 16px 0;
}

.yp-form--inline {
	margin: 10px 0;
}

.yp-danger {
	margin-top: 28px;
	padding-top: 14px;
	border-top: 1px solid var(--yp-border);
}

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

.yp-btn {
	display: inline-block;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--yp-surface);
	color: var(--yp-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.yp-btn:hover {
	filter: brightness(0.97);
}

.yp-btn--primary {
	background: var(--yp-accent);
	color: #fff;
}

.yp-btn--primary:hover {
	background: var(--yp-accent-dark);
	color: #fff;
	filter: none;
}

.yp-btn--ghost {
	border-color: var(--yp-border);
	background: var(--yp-bg);
}

.yp-btn--ok {
	background: var(--yp-ok);
	color: #fff;
}

.yp-btn--danger {
	border-color: var(--yp-err);
	background: var(--yp-bg);
	color: var(--yp-err);
}

/* ---------- Фільтри ---------- */

.yp-filters {
	margin-bottom: 16px;
}

.yp-filters__row {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.yp-filters__row .yp-input {
	flex: 1 1 140px;
	width: auto;
}

.yp-filters__search {
	flex-basis: 100%;
}

/* ---------- Список пісень ---------- */

.yp-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yp-list__item {
	margin: 0 0 8px;
	padding: 0;
	border: 1px solid var(--yp-border);
	border-radius: var(--yp-radius);
	background: var(--yp-bg);
}

.yp-list__item::before {
	content: none;
}

.yp-list__link {
	display: block;
	padding: 12px 14px;
	color: inherit;
	text-decoration: none;
}

.yp-list__link:hover {
	background: var(--yp-surface);
	border-radius: var(--yp-radius);
}

.yp-list__title {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.yp-list__meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.yp-list__tags {
	display: block;
	color: var(--yp-muted);
	font-size: 13px;
}

.yp-list__date {
	display: block;
	margin-top: 4px;
	color: var(--yp-muted);
	font-size: 12px;
}

/* ---------- Мітки ---------- */

.yp-tag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--yp-surface);
	color: var(--yp-muted);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.yp-tag--worship {
	background: #e8f0ff;
	color: #24509e;
}

.yp-tag--choir {
	background: #f1e9fb;
	color: #6338a5;
}

.yp-tag--draft {
	background: var(--yp-warn-bg);
	color: var(--yp-warn);
}

.yp-tag--approved {
	background: var(--yp-ok-bg);
	color: var(--yp-ok);
}

.yp-tag--key {
	background: #eef0f3;
	color: #40484f;
}

/* ---------- Предпоказ слайдів ---------- */

.yp-preview {
	margin: 18px 0 8px;
}

.yp-preview__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
}

.yp-preview__grid {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
}

.yp-slide {
	border: 1px solid var(--yp-border);
	border-radius: 8px;
	overflow: hidden;
	background: #10141c;
	color: #f2f4f7;
}

.yp-slide__head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 10px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.yp-slide__label {
	font-weight: 700;
}

.yp-slide__num {
	opacity: 0.65;
}

.yp-slide__body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 108px;
	padding: 14px 12px;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	white-space: pre-line;
}

/* ---------- Історія ---------- */

.yp-revisions {
	margin: 18px 0;
	border: 1px solid var(--yp-border);
	border-radius: var(--yp-radius);
	padding: 10px 14px;
	font-size: 14px;
}

.yp-revisions summary {
	cursor: pointer;
	font-weight: 600;
}

.yp-revisions__list {
	margin: 10px 0 0;
	padding-left: 18px;
	color: var(--yp-muted);
}

/* ---------- Вхід ---------- */

.yp-login {
	max-width: 380px;
	margin: 0 auto;
}

.yp-login__hint {
	margin: 0 0 14px;
	color: var(--yp-muted);
	font-size: 14px;
}

.yp-login #yp-loginform p {
	margin: 0 0 12px;
}

.yp-login #yp-loginform label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
}

.yp-login #yp-loginform input[type="text"],
.yp-login #yp-loginform input[type="password"] {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--yp-border);
	border-radius: 8px;
	font-size: 16px;
}

.yp-login #yp-loginform .login-remember label {
	display: inline;
	font-weight: 400;
}

.yp-login #yp-loginform input[type="submit"] {
	width: 100%;
	padding: 12px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--yp-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.yp-login__lost {
	margin: 12px 0 0;
	font-size: 14px;
	text-align: center;
}

/* ---------- Планшет / десктоп ---------- */

@media (min-width: 640px) {
	.yp-portal {
		padding: 20px 22px 60px;
	}

	.yp-head__title {
		font-size: 21px;
	}

	.yp-section__title {
		font-size: 26px;
	}

	.yp-filters__search {
		flex-basis: auto;
	}

	.yp-preview__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.yp-list__link {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: start;
		column-gap: 14px;
	}

	.yp-list__title {
		grid-column: 1;
	}

	.yp-list__meta {
		grid-column: 2;
		grid-row: 1 / span 2;
		justify-content: flex-end;
	}

	.yp-list__tags,
	.yp-list__date {
		grid-column: 1;
	}
}

@media (min-width: 900px) {
	.yp-preview__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}