/**
 * Transliteration Converter (Tool 5).
 */

:root {
	--tl-ink: #182f2d;
	--tl-ink-soft: #4d625e;
	--tl-paper: #f6f1e7;
	--tl-paper-deep: #ece5d6;
	--tl-white: #fffdf8;
	--tl-coral: #c95f4d;
	--tl-gold: #e5ad4f;
	--tl-sage: #6f8f79;
	--tl-plum: #74578a;
	--tl-line: #d8d0c3;
	--tl-line-soft: #e4ddd0;
	--tl-shadow: 0 24px 70px rgba(24, 47, 45, .11);
}

.tl-scope,
.tl-scope * {
	box-sizing: border-box;
}

.yazidis-translit-page {
	background: var(--tl-paper);
}

.yazidis-translit-page .site-content,
.yazidis-translit-page .content-area,
.yazidis-translit-page .site-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.yazidis-translit-page .widget-area,
.yazidis-translit-page .table-of-contents,
.yazidis-translit-page .post-toc {
	display: none !important;
}

.tl-main {
	overflow: hidden;
	background:
		radial-gradient(circle at 93% 12%, rgba(116, 87, 138, .06), transparent 24%),
		radial-gradient(circle at 6% 16%, rgba(201, 95, 77, .07), transparent 22%),
		linear-gradient(180deg, #fbf8f1 0, var(--tl-paper) 40%, #f8f4ec 100%);
	color: var(--tl-ink);
}

.tl-shell {
	width: min(100%, 1160px);
	margin: 0 auto;
	padding: 0 30px 90px;
}

[hidden] {
	display: none !important;
}

.tl-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.tl-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 66px;
	font-size: .73rem;
	font-weight: 700;
	color: #75827f;
}

.tl-breadcrumbs a { color: var(--tl-ink-soft); text-decoration: none; }
.tl-breadcrumbs a:hover { color: var(--tl-coral); }
.tl-breadcrumbs span[aria-hidden="true"] { color: #b8b0a4; }

.tl-overline {
	margin: 0 0 12px;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .13em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--tl-coral);
}

/* ---------------------------------------------------------------- Hero */

.tl-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
	align-items: center;
	gap: 54px;
	min-height: 380px;
	padding: 60px 66px;
	border-radius: 28px;
	background: var(--tl-ink);
	box-shadow: var(--tl-shadow);
	color: #fff;
}

.tl-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.tl-kicker {
	margin: 0 0 16px;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #f2c878;
}

.tl-hero h1 {
	max-width: 640px;
	margin: 0;
	font-family: var(--wikipress-font-content), Georgia, serif;
	font-size: clamp(2.4rem, 4.6vw, 4.1rem);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: 1.02;
	color: #fff;
}

.tl-hero h1 em { font-style: italic; color: #efbd68; }

.tl-hero-copy > p {
	max-width: 620px;
	margin: 24px 0 0;
	font-size: 1rem;
	line-height: 1.75;
	color: #d4dedb;
}

.tl-hero-script {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 4px;
	padding: 30px 34px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 20px;
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(8px);
	text-align: center;
}

.tl-hero-script span {
	font-family: var(--wikipress-font-content), Georgia, serif;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	line-height: 1.3;
	color: #fff;
}

.tl-hero-script span:nth-child(2) { color: #ef9d7f; }
.tl-hero-script span:nth-child(3) { color: #b9a6cf; }

.tl-hero-script small {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .13);
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #94a9a3;
}

/* ---------------------------------------------------------------- Converter */

.tl-tool { margin-top: 40px; }

.tl-converter {
	padding: 26px;
	border: 1px solid rgba(216, 208, 195, .92);
	border-radius: 22px;
	background: rgba(255, 253, 248, .97);
	box-shadow: 0 20px 55px rgba(24, 47, 45, .1);
}

.tl-input-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 10px;
}

.tl-input-head > label {
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #667773;
}

.tl-from { display: flex; align-items: center; gap: 10px; }

.tl-from label {
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #8b958f;
}

.tl-from select {
	height: 40px;
	padding: 0 32px 0 12px;
	border: 1px solid #ccc4b7;
	border-radius: 9px;
	background: #fff;
	font: 700 .78rem/1 var(--wikipress-font-ui);
	color: var(--tl-ink);
}

.tl-input-wrap textarea {
	width: 100%;
	min-height: 96px;
	padding: 16px 18px;
	border: 1px solid #ccc4b7;
	border-radius: 12px;
	background: #fff;
	font: 500 1.35rem/1.5 var(--wikipress-font-content), Georgia, serif;
	color: var(--tl-ink);
	resize: vertical;
}

.tl-from select:focus,
.tl-input-wrap textarea:focus {
	outline: 3px solid rgba(201, 95, 77, .13);
	border-color: var(--tl-coral);
}

.tl-examples {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
}

.tl-examples > span {
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #8b958f;
}

.tl-examples button {
	padding: 6px 12px;
	border: 1px solid var(--tl-line);
	border-radius: 999px;
	background: var(--tl-white);
	font: 600 .8rem/1 var(--wikipress-font-content), Georgia, serif;
	color: var(--tl-ink);
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease;
}

.tl-examples button:hover { border-color: var(--tl-coral); color: var(--tl-coral); }

.tl-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.tl-submit {
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: var(--tl-coral);
	font: 800 .78rem/1 var(--wikipress-font-ui);
	color: #fff;
	cursor: pointer;
}

.tl-submit:hover { background: var(--tl-ink); }

.tl-detected {
	font-size: .74rem;
	font-weight: 700;
	color: #8b958f;
}

.tl-results {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
}

.tl-card {
	display: flex;
	flex-direction: column;
	min-height: 118px;
	padding: 16px 18px;
	border: 1px solid var(--tl-line);
	border-left: 4px solid var(--tl-ink);
	border-radius: 12px;
	background: var(--tl-white);
}

.tl-card-arabic { border-left-color: var(--tl-coral); }
.tl-card-cyrillic { border-left-color: var(--tl-plum); }
.tl-card-ipa { border-left-color: var(--tl-sage); }
.tl-card-latin { border-left-color: var(--tl-gold); }

.tl-card.is-source {
	background: #f3eee2;
	border-style: dashed;
}

.tl-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.tl-card-label {
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #7a857f;
}

.tl-copy {
	padding: 4px 10px;
	border: 1px solid var(--tl-line);
	border-radius: 7px;
	background: transparent;
	font: 800 .6rem/1 var(--wikipress-font-ui);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tl-ink-soft);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.tl-copy:hover { border-color: var(--tl-coral); color: var(--tl-coral); }
.tl-copy.is-copied { background: var(--tl-ink); border-color: var(--tl-ink); color: #fff; }

.tl-card-value {
	flex: 1;
	font-family: var(--wikipress-font-content), Georgia, serif;
	font-size: 1.6rem;
	line-height: 1.4;
	color: var(--tl-ink);
	word-break: break-word;
}

.tl-card-ipa .tl-card-value { font-size: 1.25rem; color: #3c4f4a; }

.tl-card-value:empty::after {
	content: "—";
	color: #c3bcae;
}

.tl-reverse-note {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fff6e5;
	border: 1px solid #e8d6b0;
	font-size: .76rem;
	line-height: 1.6;
	color: #6f5c37;
}

/* ---------------------------------------------------------------- Section heads */

.tl-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 24px;
}

.tl-section-head h2,
.tl-notes-intro h2 {
	margin: 0;
	font-family: var(--wikipress-font-content), Georgia, serif;
	font-size: clamp(1.6rem, 2.8vw, 2.6rem);
	font-weight: 500;
	letter-spacing: -.035em;
	line-height: 1.08;
	color: var(--tl-ink);
}

.tl-section-head > p {
	max-width: 440px;
	margin: 0;
	font-size: .8rem;
	line-height: 1.6;
	color: #677773;
}

/* ---------------------------------------------------------------- Reference chart */

.tl-chart { margin-top: 76px; }

.tl-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--tl-line);
	border-radius: 16px;
	background: var(--tl-white);
}

.tl-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: .9rem;
}

.tl-table th,
.tl-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--tl-line-soft);
}

.tl-table thead th {
	position: sticky;
	top: 0;
	background: var(--tl-paper-deep);
	font: 800 .62rem/1 var(--wikipress-font-ui);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7773;
}

.tl-table-group th {
	background: #f1ebdd;
	font-family: var(--wikipress-font-content), Georgia, serif;
	font-size: .95rem;
	font-weight: 600;
	color: var(--tl-coral);
}

.tl-cell-latin,
.tl-cell-arabic,
.tl-cell-cyrillic {
	font-family: var(--wikipress-font-content), Georgia, serif;
	font-size: 1.3rem;
	font-weight: 600;
}

.tl-cell-latin { color: var(--tl-ink); }
.tl-cell-arabic { color: var(--tl-coral); font-size: 1.5rem; }
.tl-cell-cyrillic { color: var(--tl-plum); }
.tl-cell-ipa { font-size: 1rem; color: var(--tl-sage); }

.tl-cell-note {
	font-size: .78rem;
	line-height: 1.5;
	color: var(--tl-ink-soft);
}

.tl-table tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- Notes */

.tl-notes {
	margin-top: 80px;
	padding: clamp(34px, 5vw, 60px);
	border-radius: 24px;
	background: var(--tl-ink);
	color: #fff;
}

.tl-notes .tl-overline { color: #efbd68; }
.tl-notes h2 { color: #fff; }

.tl-notes-intro > p:last-child {
	max-width: 720px;
	margin: 20px 0 0;
	font-size: .92rem;
	line-height: 1.75;
	color: #c2d0cc;
}

.tl-notes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 40px;
	margin-top: 38px;
	padding-top: 34px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.tl-notes-grid h3 {
	margin: 0 0 9px;
	font-family: var(--wikipress-font-content), Georgia, serif;
	font-size: 1.08rem;
	font-weight: 500;
	color: #fff;
}

.tl-notes-grid p {
	margin: 0;
	font-size: .84rem;
	line-height: 1.7;
	color: #aec0bb;
}

.tl-notes-grid em { color: #efbd68; font-style: italic; }

/* ---------------------------------------------------------------- Sources */

.tl-sources { margin-top: 80px; }

.tl-source-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--tl-line);
	border-left: 1px solid var(--tl-line);
}

.tl-source-grid article {
	min-height: 200px;
	padding: 22px;
	border-right: 1px solid var(--tl-line);
	border-bottom: 1px solid var(--tl-line);
	background: rgba(255, 255, 255, .35);
}

.tl-source-grid article > p:first-child {
	margin: 0;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tl-coral);
}

.tl-source-grid h3 {
	margin: 8px 0 12px;
	font-family: var(--wikipress-font-content), Georgia, serif;
	font-size: .95rem;
	line-height: 1.4;
}

.tl-source-grid h3 a { color: var(--tl-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.tl-source-grid article > p:last-child {
	margin: 0;
	font-size: .71rem;
	line-height: 1.6;
	color: #63736f;
}

.tl-status-note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 24px;
	padding: 18px 22px;
	border: 1px solid #e4cfaa;
	border-radius: 13px;
	background: #fff8e9;
}

.tl-status-note > span {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: 6px;
	border-radius: 50%;
	background: #d49632;
	box-shadow: 0 0 0 4px rgba(212, 150, 50, .12);
}

.tl-status-note p { margin: 0; font-size: .78rem; line-height: 1.65; color: #685b43; }

.tl-verification {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0;
	font-size: .7rem;
	color: #6c7976;
}

.tl-verification > span {
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-radius: 50%;
	background: var(--tl-sage);
	box-shadow: 0 0 0 4px rgba(111, 143, 121, .14);
}

.tl-verification a { font-weight: 800; color: var(--tl-coral); }

/* ---------------------------------------------------------------- Embed */

.tl-embed { color: var(--tl-ink); }
.tl-embed .tl-tool { margin-top: 0; }
.tl-embed-chart { margin-top: 30px; }
.tl-embed-chart h3 {
	margin: 0 0 14px;
	font-family: var(--wikipress-font-content), Georgia, serif;
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--tl-ink);
}
.tl-embed-cta { margin: 26px 0 0; font-size: .95rem; }
.tl-embed-cta a { color: var(--tl-coral); font-weight: 800; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 980px) {
	.tl-hero { grid-template-columns: 1fr; gap: 30px; padding: 48px 40px; }
	.tl-notes-grid { grid-template-columns: 1fr; gap: 22px; }
	.tl-source-grid { grid-template-columns: 1fr 1fr; }
	.tl-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 640px) {
	.yazidis-translit-page .site-header { position: relative; }
	.tl-shell { padding: 0 15px 65px; }
	.tl-breadcrumbs { min-height: 54px; }
	.tl-hero { padding: 38px 24px; border-radius: 20px; }
	.tl-hero h1 { font-size: clamp(2.1rem, 10vw, 3rem); }
	.tl-hero-script { display: none; }
	.tl-input-head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.tl-results { grid-template-columns: 1fr; }
	.tl-source-grid { grid-template-columns: 1fr; }
	.tl-source-grid article { min-height: 0; }
	.tl-table .tl-th-note,
	.tl-table .tl-cell-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tl-examples button,
	.tl-copy { transition: none; }
}