/* AksharKosh converter page. Colours lean on the theme (currentColor, transparent backgrounds). */
.aksharkosh-converter {
	position: relative;
	margin: 1.5em 0;
}
.aksharkosh-converter .dl-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	margin-bottom: 0.75em;
	font-size: 0.95em;
}
.aksharkosh-converter .dl-panes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}
@media (max-width: 700px) {
	.aksharkosh-converter .dl-panes {
		grid-template-columns: 1fr;
	}
}
.aksharkosh-converter .dl-pane-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	margin-bottom: 0.35em;
}
.aksharkosh-converter textarea,
.aksharkosh-converter .dl-output {
	box-sizing: border-box;
	width: 100%;
	min-height: 16em;
	padding: 0.75em;
	border: 1px solid var(--aksharkosh-border, rgba(128, 128, 128, 0.5));
	border-radius: 6px;
	font-size: 1.1em;
	line-height: 1.7;
	background: var(--aksharkosh-pane-bg, transparent);
	color: inherit;
}
.aksharkosh-converter .dl-output {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.aksharkosh-converter.dl-busy .dl-output {
	opacity: 0.7;
}
.aksharkosh-converter .dl-w {
	all: unset;
	cursor: pointer;
	border-radius: 3px;
}
.aksharkosh-converter .dl-w:hover,
.aksharkosh-converter .dl-w:focus-visible {
	outline: 2px solid var(--aksharkosh-focus, rgba(37, 99, 235, 0.6));
}
.aksharkosh-converter .dl-unsure {
	background: rgba(250, 204, 21, 0.35);
	text-decoration: underline dotted;
}
.aksharkosh-converter .dl-left {
	font-style: italic;
}
.aksharkosh-converter .dl-picked {
	text-decoration: underline;
	text-decoration-color: rgba(22, 163, 74, 0.8);
}
.aksharkosh-converter .dl-copy {
	font-size: 0.85em;
	font-weight: 400;
	cursor: pointer;
}
.aksharkosh-converter .dl-pop {
	position: absolute;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	min-width: 8em;
	padding: 0.25em;
	border: 1px solid var(--aksharkosh-border, rgba(128, 128, 128, 0.5));
	border-radius: 6px;
	background: var(--aksharkosh-pop-bg, #fff);
	color: var(--aksharkosh-pop-fg, #111);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.aksharkosh-converter .dl-choice {
	all: unset;
	padding: 0.3em 0.6em;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1.05em;
}
.aksharkosh-converter .dl-choice:hover,
.aksharkosh-converter .dl-choice:focus-visible {
	background: var(--aksharkosh-hover, rgba(37, 99, 235, 0.12));
}
.aksharkosh-converter .dl-chosen {
	font-weight: 700;
}
.aksharkosh-converter .dl-always {
	all: unset;
	margin-top: 0.25em;
	padding: 0.35em 0.6em 0.2em;
	border-top: 1px solid var(--aksharkosh-border, rgba(128, 128, 128, 0.5));
	font-size: 0.85em;
	cursor: pointer;
	text-decoration: underline;
}
.aksharkosh-converter .dl-always:hover,
.aksharkosh-converter .dl-always:focus-visible {
	background: var(--aksharkosh-hover, rgba(37, 99, 235, 0.12));
}
.aksharkosh-converter .dl-always:disabled {
	opacity: 0.5;
	cursor: default;
}
.aksharkosh-converter .dl-status {
	margin: 0.75em 0 0;
	font-size: 0.95em;
}
.aksharkosh-converter .dl-status.dl-error {
	color: var(--aksharkosh-error, #b91c1c);
}
.aksharkosh-converter .dl-hint {
	margin: 0.25em 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

/* Hindi → Hinglish: the Hinglish-only options are hidden (sub-project C). */
.aksharkosh-converter[data-direction="to_hinglish"] .dl-fwd-only {
	display: none;
}
/* The swap button looks like Copy (shares .dl-copy); the input title is a <label>, so it takes the title's font
   instead of the theme's label style. */
.aksharkosh-converter .dl-swap {
	white-space: nowrap;
}
.aksharkosh-converter .dl-pane-title label {
	font: inherit;
	margin: 0;
}