/*
 * «Пиши грамотно» — інструменти (шорткоди pysh_*).
 *
 * Новий патерн C20 «зошитова картка»: біла картка на папері, той самий
 * акцент — тонка червона лінія поля, що вже є на C17/C19 та в стрічці
 * (osn-card--linijka), тепер зліва результату, а не тіла картки.
 *
 * Токени — ті самі, що в pysh-tokens.css, нових кольорів не заводимо.
 * Стеля специфічності — один клас, три брейкпоінти 1024/768/540,
 * !important не використовується.
 */

.pysh-tool {
	margin-bottom: 28px;
	padding: 24px;
	background: var(--pysh-surface);
	border: 1px solid var(--pysh-line);
	border-radius: var(--pysh-r-lg);
	box-shadow: var(--pysh-shadow-sm);
}

.pysh-tool + .pysh-tool {
	margin-top: 0;
}

/* Віджет бічної колонки: картку вже малює .osn-widget навколо —
   свою прибираємо, лишаються тільки внутрішні відступи. */
.pysh-tool--plain {
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

.pysh-tool__head {
	margin-bottom: 18px;
}

.pysh-tool__title {
	margin: 0;
	font-family: var(--pysh-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--pysh-ink);
	text-wrap: balance;
}

.pysh-tool__note {
	margin: 6px 0 0;
	font-size: var(--osn-fs-small);
	line-height: 1.5;
	color: var(--pysh-ink-muted);
	text-wrap: pretty;
}

/* ==========================================================================
   Вкладки
   ========================================================================== */

.pysh-tool__tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--pysh-line);
}

.pysh-tool__tab {
	min-height: 40px;
	padding: 0 16px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var(--pysh-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 600;
	color: var(--pysh-ink-muted);
	cursor: pointer;
	transition-property: color, border-color;
	transition-duration: .15s;
}

.pysh-tool__tab:hover {
	color: var(--pysh-ink);
}

.pysh-tool__tab.is-active {
	color: var(--pysh-accent);
	border-bottom-color: var(--pysh-accent);
}

/* ==========================================================================
   Поля вводу
   ========================================================================== */

.pysh-tool__body {
	display: grid;
	gap: 14px;
}

.pysh-tool__label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--pysh-ink-muted);
}

.pysh-tool__input {
	width: 100%;
	padding: 11px 14px;
	background: var(--pysh-surface);
	border: 1px solid var(--pysh-line);
	border-radius: var(--pysh-r-md);
	font-family: var(--pysh-font-body);
	font-size: var(--osn-fs-body);
	color: var(--pysh-ink);
	transition-property: border-color, box-shadow;
	transition-duration: .15s;
}

.pysh-tool__input:hover {
	border-color: var(--pysh-line-strong);
}

.pysh-tool__input:focus-visible {
	outline: none;
	border-color: var(--pysh-accent);
	box-shadow: 0 0 0 3px var(--pysh-accent-soft);
}

textarea.pysh-tool__input {
	resize: vertical;
	min-height: 84px;
}

.pysh-tool__input--number,
.pysh-tool__input--date {
	max-width: 220px;
}

/* Один стовпчик завжди: інструмент однаково часто сидить і в статті
   (широка колонка), і у вузькій бічній колонці (--osn-sidebar: 316px) —
   трициферна сітка в такій ширині тіснила б підписи полів. */
.pysh-tool__grid3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

/* ==========================================================================
   Результат і копіювання
   ========================================================================== */

/* Стовпчик, не рядок: результат на всю ширину поля вводу, кнопка
   копіювання — компактна, під ним. */
.pysh-tool__result-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.pysh-tool__result {
	min-height: 40px;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: var(--pysh-surface-alt);
	border-left: var(--pysh-margin-w) solid var(--pysh-mark);
	border-radius: 0 var(--pysh-r-md) var(--pysh-r-md) 0;
	font-family: var(--pysh-font-display);
	font-size: 17px;
	line-height: 1.4;
	color: var(--pysh-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.pysh-tool__result:empty::before {
	content: attr(data-placeholder);
	color: var(--pysh-ink-faint);
	font-family: var(--pysh-font-body);
	font-size: var(--osn-fs-small);
}

.pysh-tool__copy {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 18px;
	background: var(--pysh-accent);
	border: 1px solid var(--pysh-accent);
	border-radius: var(--pysh-r-md);
	font-family: var(--pysh-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 600;
	color: var(--pysh-accent-contrast);
	cursor: pointer;
	transition-property: background-color, border-color, scale;
	transition-duration: .15s;
}

.pysh-tool__copy:hover:not(:disabled) {
	background: var(--pysh-accent-hover);
	border-color: var(--pysh-accent-hover);
}

.pysh-tool__copy:active:not(:disabled) {
	scale: .96;
}

.pysh-tool__copy:disabled {
	cursor: not-allowed;
	opacity: .45;
}

.pysh-tool__copy-icon {
	position: relative;
	width: 17px;
	height: 17px;
}

.pysh-tool__copy-icon-layer {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition-property: opacity, scale, filter;
	transition-duration: .2s;
	transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.pysh-tool__copy-icon-layer--idle {
	opacity: 1;
	scale: 1;
	filter: blur(0);
}

.pysh-tool__copy-icon-layer--done {
	opacity: 0;
	scale: .25;
	filter: blur(4px);
}

.pysh-tool__copy.is-copied .pysh-tool__copy-icon-layer--idle {
	opacity: 0;
	scale: .25;
	filter: blur(4px);
}

.pysh-tool__copy.is-copied .pysh-tool__copy-icon-layer--done {
	opacity: 1;
	scale: 1;
	filter: blur(0);
}

.pysh-tool__copy-note {
	display: block;
	margin-top: -2px;
	font-size: var(--osn-fs-meta);
	color: var(--pysh-ink-muted);
}

/* ==========================================================================
   Мовна звичка дня
   ========================================================================== */

.pysh-habit__situation {
	margin: 0 0 6px;
	font-family: var(--pysh-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pysh-ink);
	text-wrap: balance;
}

.pysh-habit__answer {
	margin: 0 0 12px;
	font-size: var(--osn-fs-small);
	line-height: 1.55;
	color: var(--pysh-ink-muted);
	text-wrap: pretty;
}

.pysh-habit__example {
	display: grid;
	gap: 6px;
	margin-bottom: 12px;
	padding: 10px 12px;
	background: var(--pysh-surface-alt);
	border-radius: var(--pysh-r-md);
}

.pysh-habit__example-row {
	margin: 0;
	font-size: var(--osn-fs-small);
	color: var(--pysh-ink);
}

.pysh-habit__example-row span {
	font-weight: 700;
}

.pysh-habit__example-row--before span {
	color: var(--pysh-mark);
}

.pysh-habit__example-row--better span {
	color: var(--pysh-accent);
}

.pysh-habit__tag {
	display: inline-block;
	padding: 3px 10px;
	background: var(--pysh-accent-soft);
	border-radius: 100px;
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--pysh-accent);
}

/* ==========================================================================
   Цитата дня
   ========================================================================== */

.pysh-quote {
	margin: 0;
	padding-left: 16px;
	border-left: var(--pysh-margin-w) solid var(--pysh-mark);
}

.pysh-quote__text {
	margin: 0 0 10px;
	font-family: var(--pysh-font-display);
	font-size: 19px;
	font-style: italic;
	line-height: 1.45;
	color: var(--pysh-ink);
	text-wrap: pretty;
}

.pysh-quote__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 8px;
}

.pysh-quote__author {
	font-style: normal;
	font-weight: 600;
	font-size: var(--osn-fs-small);
	color: var(--pysh-accent);
}

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

.pysh-quote__context {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.5;
	color: var(--pysh-ink-muted);
}

/* ==========================================================================
   Слово дня
   ========================================================================== */

.pysh-wotd__word {
	margin: 0 0 6px;
	font-family: var(--pysh-font-display);
	font-size: 24px;
	font-weight: 700;
	color: var(--pysh-accent);
}

.pysh-wotd__meaning {
	margin: 0 0 10px;
	font-size: var(--osn-fs-body);
	line-height: 1.5;
	color: var(--pysh-ink);
}

.pysh-wotd__example {
	margin: 0 0 10px;
	font-size: var(--osn-fs-small);
	font-style: italic;
	color: var(--pysh-ink-muted);
}

.pysh-wotd__origin {
	display: inline-block;
	padding: 3px 10px;
	background: var(--pysh-surface-alt);
	border-radius: 100px;
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--pysh-ink-faint);
}

/* ==========================================================================
   Тест на грамотність
   ========================================================================== */

.pysh-quiz__empty {
	margin: 0;
	font-size: var(--osn-fs-small);
	color: var(--pysh-ink-faint);
}

.pysh-quiz__text {
	margin: 0 0 16px;
	font-family: var(--pysh-font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pysh-ink);
	text-wrap: balance;
}

.pysh-quiz__options {
	display: grid;
	gap: 10px;
}

.pysh-quiz__option {
	padding: 11px 14px;
	background: var(--pysh-surface);
	border: 1px solid var(--pysh-line);
	border-radius: var(--pysh-r-md);
	text-align: left;
	font-family: var(--pysh-font-body);
	font-size: var(--osn-fs-body);
	color: var(--pysh-ink);
	cursor: pointer;
	transition-property: border-color, background-color, scale;
	transition-duration: .15s;
}

.pysh-quiz__option:hover:not(:disabled) {
	border-color: var(--pysh-accent);
}

.pysh-quiz__option:active:not(:disabled) {
	scale: .98;
}

.pysh-quiz__option:disabled {
	cursor: default;
}

.pysh-quiz__option.is-correct {
	border-color: var(--pysh-accent);
	background: var(--pysh-accent-soft);
	font-weight: 600;
}

.pysh-quiz__option.is-wrong {
	border-color: var(--pysh-mark);
	background: var(--pysh-mark-soft);
}

.pysh-quiz__feedback {
	margin: 14px 0 0;
	font-size: var(--osn-fs-small);
	line-height: 1.5;
	color: var(--pysh-ink-muted);
}

.pysh-quiz__feedback:empty {
	margin: 0;
}

.pysh-quiz__feedback.is-correct {
	color: var(--pysh-accent);
}

.pysh-quiz__feedback.is-wrong {
	color: var(--pysh-mark);
}

.pysh-quiz__explain {
	margin: 8px 0 0;
	font-size: var(--osn-fs-small);
	line-height: 1.5;
	color: var(--pysh-ink-faint);
}

/* ==========================================================================
   Брейкпоінти
   ========================================================================== */

/* ==========================================================================
   Тест: добірка питань на сторінці (1.11)
   ========================================================================== */

.pysh-quiz-set {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pysh-q;
}

.pysh-quiz-set__item {
	position: relative;
	padding: 0 0 22px 40px;
	border-bottom: 1px dotted var(--pysh-line-strong);
	counter-increment: pysh-q;
}

.pysh-quiz-set__item::before {
	content: counter(pysh-q);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--pysh-font-display);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pysh-mark);
}

.pysh-quiz-set__more {
	margin: 18px 0 0;
	font-size: var(--osn-fs-small);
}

.pysh-quiz-set__link {
	font-weight: 600;
	color: var(--pysh-accent);
}

/* ==========================================================================
   Кличний відмінок (1.11)
   ========================================================================== */

.pysh-voc__gender {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	border: 0;
}

.pysh-voc__gender .pysh-tool__label {
	width: 100%;
	margin-bottom: 0;
}

.pysh-voc__radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	font-size: var(--osn-fs-small);
	cursor: pointer;
}

.pysh-voc__radio input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--pysh-accent);
}

.pysh-voc__more {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--pysh-font-display);
	font-size: 16px;
	color: var(--pysh-ink-muted);
}

.pysh-voc__more li::before {
	content: "— ";
	color: var(--pysh-line-strong);
}

.pysh-voc__note {
	margin: 0;
	padding: 10px 14px;
	background: var(--pysh-mark-soft);
	border-radius: var(--pysh-r-md);
	font-size: var(--osn-fs-small);
	line-height: 1.5;
	color: var(--pysh-ink);
}

.pysh-voc__tables {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--pysh-line);
}

.pysh-voc__tables--page {
	margin-top: 8px;
	padding-top: 0;
	border-top: 0;
}

.pysh-voc__caption {
	margin: 0 0 10px;
	font-family: var(--pysh-font-display);
	font-size: 18px;
	font-weight: 700;
}

.pysh-voc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--osn-fs-small);
}

.pysh-voc-table th {
	padding: 8px 10px;
	text-align: left;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--pysh-ink-muted);
	border-bottom: 2px solid var(--pysh-line-strong);
}

.pysh-voc-table td {
	padding: 7px 10px;
	border-bottom: 1px solid var(--pysh-line);
}

.pysh-voc-table td + td {
	font-weight: 600;
	color: var(--pysh-accent);
}

.pysh-voc-table__alt {
	font-weight: 400;
	color: var(--pysh-ink-muted);
}

/* ==========================================================================
   Сітка інструментів (1.11)
   ========================================================================== */

.pysh-toolgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 18px 0 28px;
}

.pysh-toolcard {
	display: grid;
	gap: 6px;
	align-content: start;
	padding: 18px 20px;
	background: var(--pysh-surface);
	border: 1px solid var(--pysh-line);
	border-left: var(--pysh-margin-w) solid var(--pysh-mark);
	border-radius: var(--pysh-r-md);
	text-decoration: none;
	transition-property: border-color, box-shadow;
	transition-duration: .15s;
}

.pysh-toolcard:hover,
.pysh-toolcard:focus-visible {
	border-color: var(--pysh-line-strong);
	border-left-color: var(--pysh-mark);
	box-shadow: var(--pysh-shadow-md);
}

/* Картки стоять у тексті сторінки, а там `.osn-prose a` підкреслює й
   фарбує кожне посилання. Картка — посилання цілком, без підкреслень. */
.osn-prose .pysh-toolcard {
	color: var(--pysh-ink);
	text-decoration: none;
}

.pysh-toolcard__title {
	font-family: var(--pysh-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pysh-ink);
}

.pysh-toolcard:hover .pysh-toolcard__title {
	color: var(--pysh-accent);
}

.pysh-toolcard__note {
	font-size: var(--osn-fs-small);
	line-height: 1.5;
	color: var(--pysh-ink-muted);
}

/* ==========================================================================
   Словничок, цитати, картки етикету (1.11)
   ========================================================================== */

.pysh-glossary {
	display: grid;
	margin: 18px 0 0;
}

.pysh-glossary__item {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--pysh-line);
}

.pysh-glossary__word {
	font-family: var(--pysh-font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--pysh-accent);
}

.pysh-glossary__tag {
	display: block;
	margin-top: 4px;
	font-family: var(--pysh-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--pysh-ink-faint);
}

.pysh-glossary__meaning {
	margin: 0;
	font-size: var(--osn-fs-body);
	line-height: 1.55;
}

.pysh-glossary__example {
	display: block;
	margin-top: 4px;
	font-style: italic;
	color: var(--pysh-ink-muted);
}

.pysh-quotes__author + .pysh-quotes__author {
	margin-top: 34px;
}

.pysh-quotes__name {
	margin: 0 0 12px;
}

.pysh-quotes__item {
	margin: 0 0 14px;
	padding: 14px 18px;
	background: var(--pysh-surface);
	border: 1px solid var(--pysh-line);
	border-left: var(--pysh-margin-w) solid var(--pysh-accent);
	border-radius: 0 var(--pysh-r-md) var(--pysh-r-md) 0;
	font-family: var(--pysh-font-body);
	font-size: var(--osn-fs-body);
	color: var(--pysh-ink);
}

.pysh-quotes__text {
	margin: 0;
	font-family: var(--pysh-font-display);
	font-size: 19px;
	line-height: 1.45;
}

.pysh-quotes__work {
	margin: 8px 0 0;
	font-size: var(--osn-fs-small);
	font-weight: 600;
	color: var(--pysh-ink-muted);
}

.pysh-quotes__context {
	margin: 6px 0 0;
	font-size: var(--osn-fs-small);
	line-height: 1.55;
	color: var(--pysh-ink-muted);
}

.pysh-habits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 18px 0 0;
}

.pysh-habits__item {
	display: grid;
	gap: 8px;
	align-content: start;
	justify-items: start;
	padding: 18px;
	background: var(--pysh-surface);
	border: 1px solid var(--pysh-line);
	border-radius: var(--pysh-r-md);
}

.pysh-habits__q {
	margin: 0;
	font-family: var(--pysh-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.pysh-habits__a,
.pysh-habits__ex {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.55;
	color: var(--pysh-ink-muted);
}

.pysh-habits__before,
.pysh-habits__better {
	font-weight: 600;
}

.pysh-habits__before {
	color: var(--pysh-mark);
}

.pysh-habits__better {
	color: var(--pysh-accent);
}

@media (max-width: 768px) {
	.pysh-habits,
	.pysh-toolgrid,
	.pysh-voc__tables {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 540px) {
	.pysh-tool:not(.pysh-tool--plain) {
		padding: 18px;
	}

	.pysh-tool__result-row {
		flex-wrap: wrap;
	}

	.pysh-tool__input--number,
	.pysh-tool__input--date {
		max-width: none;
	}

	.pysh-glossary__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.pysh-quiz-set__item {
		padding-left: 30px;
	}
}