/**
 * Rhymes Finder — front-end styles.
 * Scoped under .erhy-root and driven by --erhy-accent and --erhy-radius.
 * Font sizes are in fixed pixels (not rem/em) so readability never depends on
 * the host theme's root font size. Layout responds to the tool's own width via
 * container queries, so it fits a sidebar, a column or a full-width post alike.
 */

.erhy-root {
	--erhy-bg: #ffffff;
	--erhy-surface: #ffffff;
	--erhy-surface-2: color-mix(in srgb, var(--erhy-accent) 5%, #ffffff);
	--erhy-border: color-mix(in srgb, var(--erhy-accent) 15%, #d6dce3);
	--erhy-border-soft: color-mix(in srgb, var(--erhy-accent) 8%, #e7ebf0);
	--erhy-ink: #131a23;
	--erhy-ink-soft: #45515f;
	--erhy-ink-mute: #647280;
	--erhy-accent-ink: color-mix(in srgb, var(--erhy-accent) 76%, #0a141d);
	--erhy-accent-tint: color-mix(in srgb, var(--erhy-accent) 11%, #ffffff);
	--erhy-accent-tint-2: color-mix(in srgb, var(--erhy-accent) 20%, #ffffff);
	--erhy-on-accent: #ffffff;
	--erhy-shadow: 0 2px 4px rgba(20, 27, 36, .04), 0 20px 44px -26px rgba(20, 27, 36, .32);
	--erhy-shadow-sm: 0 1px 2px rgba(20, 27, 36, .07);

	--erhy-perfect: var(--erhy-accent);
	--erhy-near: color-mix(in srgb, var(--erhy-accent) 52%, #6d5cff);
	--erhy-slant: color-mix(in srgb, var(--erhy-accent) 30%, #c2772f);

	--erhy-r: var(--erhy-radius, 14px);
	--erhy-r-sm: calc(var(--erhy-r) * .62);
	--erhy-r-card: calc(var(--erhy-r) + 8px);
	--erhy-r-pill: 999px;

	display: block;
	container-type: inline-size;
	container-name: erhy;
	margin: 2.25rem 0;
	color: var(--erhy-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.erhy-root *,
.erhy-root *::before,
.erhy-root *::after {
	box-sizing: border-box;
}

.erhy-root button {
	font-family: inherit;
	color: inherit;
	margin: 0;
	cursor: pointer;
	background: none;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
}

.erhy-root input,
.erhy-root select {
	font-family: inherit;
	color: inherit;
	margin: 0;
}

.erhy-root .erhy-visually-hidden{
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Card */
.erhy-root .erhy-shell{
	position: relative;
	background: var(--erhy-surface);
	border: 1px solid var(--erhy-border-soft);
	border-radius: var(--erhy-r-card);
	box-shadow: var(--erhy-shadow);
	padding: clamp(22px, 3vw, 36px);
}

.erhy-root .erhy-headbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}

.erhy-root .erhy-heading{
	margin: 0 0 22px;
	font-size: 27px;
	font-weight: 750;
	letter-spacing: -.015em;
	line-height: 1.2;
	color: var(--erhy-ink);
}

.erhy-root .erhy-headbar .erhy-heading{
	margin: 0;
}

/* Theme toggle */
.erhy-root .erhy-theme-toggle{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: var(--erhy-r-pill);
	border: 1px solid var(--erhy-border-soft);
	color: var(--erhy-ink-mute);
	background: var(--erhy-surface-2);
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.erhy-root .erhy-theme-toggle:hover{
	color: var(--erhy-accent-ink);
	border-color: var(--erhy-accent);
	background: var(--erhy-accent-tint);
	transform: none;
}

.erhy-root .erhy-theme-toggle--float{
	position: absolute;
	top: 18px;
	right: 18px;
}

/* Search */
.erhy-root .erhy-search{
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.erhy-root .erhy-search__field{
	flex: 1 1 auto;
	display: block;
}

.erhy-root .erhy-input{
	width: 100%;
	height: 58px;
	padding: 0 18px;
	border: 1.5px solid var(--erhy-border);
	border-radius: var(--erhy-r);
	background: var(--erhy-bg);
	color: var(--erhy-ink);
	font-size: 18px;
	font-weight: 500;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.erhy-root .erhy-input::placeholder{
	color: var(--erhy-ink-mute);
	font-weight: 400;
}

.erhy-root .erhy-input:focus{
	outline: none;
	border-color: var(--erhy-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--erhy-accent) 18%, transparent);
}

.erhy-root .erhy-btn--go{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 58px;
	padding: 0 28px;
	flex: 0 0 auto;
	border-radius: var(--erhy-r);
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -.005em;
	color: var(--erhy-on-accent);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--erhy-accent) 90%, #ffffff),
		var(--erhy-accent));
	box-shadow: var(--erhy-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .22);
	transition: transform .12s ease, filter .15s ease;
}

.erhy-root .erhy-btn--go:hover{
	filter: saturate(1.08) brightness(1.03);
	transform: translateY(-1px);
}

.erhy-root .erhy-btn__icon{
	display: inline-flex;
}

/* Filters */
.erhy-root .erhy-filters{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 28px;
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid var(--erhy-border-soft);
}

.erhy-root .erhy-filter{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.erhy-root .erhy-filter__label{
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--erhy-ink-soft);
}

.erhy-root .erhy-pills{
	display: inline-flex;
	flex-wrap: wrap;
	max-width: 100%;
	gap: 6px;
	padding: 5px;
	background: var(--erhy-surface-2);
	border: 1px solid var(--erhy-border-soft);
	border-radius: var(--erhy-r-pill);
}

.erhy-root .erhy-pill{
	min-width: 0;
	padding: 11px 20px;
	border-radius: var(--erhy-r-pill);
	font-size: 16px;
	font-weight: 600;
	color: var(--erhy-ink-soft);
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.erhy-root .erhy-pill.is-on{
	color: var(--erhy-on-accent);
	background: var(--erhy-accent);
	box-shadow: var(--erhy-shadow-sm);
}

.erhy-root .erhy-pill:not(.is-on):hover{
	color: var(--erhy-accent-ink);
	background: var(--erhy-accent-tint);
}

.erhy-root .erhy-select{
	position: relative;
	display: inline-flex;
}

.erhy-root .erhy-select::after{
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-right: 2px solid var(--erhy-ink-soft);
	border-bottom: 2px solid var(--erhy-ink-soft);
	transform: rotate(45deg);
	pointer-events: none;
}

.erhy-root .erhy-select__el{
	-webkit-appearance: none;
	appearance: none;
	height: 50px;
	min-width: 150px;
	padding: 0 44px 0 16px;
	border: 1.5px solid var(--erhy-border);
	border-radius: var(--erhy-r-sm);
	background: var(--erhy-bg);
	color: var(--erhy-ink);
	font-size: 17px;
	font-weight: 550;
	cursor: pointer;
}

.erhy-root .erhy-select__el:focus{
	outline: none;
	border-color: var(--erhy-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--erhy-accent) 16%, transparent);
}

.erhy-root .erhy-select--sm .erhy-select__el{
	min-width: 132px;
}

.erhy-root .erhy-pos{
	display: inline-flex;
	gap: 10px;
}

.erhy-root .erhy-input--sm{
	height: 50px;
	width: 150px;
	padding: 0 14px;
	border: 1.5px solid var(--erhy-border);
	border-radius: var(--erhy-r-sm);
	background: var(--erhy-bg);
	color: var(--erhy-ink);
	font-size: 17px;
}

.erhy-root .erhy-range{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.erhy-root .erhy-input--num{
	height: 50px;
	width: 90px;
	text-align: center;
	padding: 0 10px;
	border: 1.5px solid var(--erhy-border);
	border-radius: var(--erhy-r-sm);
	background: var(--erhy-bg);
	color: var(--erhy-ink);
	font-size: 17px;
}

.erhy-root .erhy-range__dash{
	color: var(--erhy-ink-mute);
}

/* Active-filter chips */
.erhy-root .erhy-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 20px;
}

.erhy-root .erhy-chip{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px 8px 16px;
	border-radius: var(--erhy-r-pill);
	font-size: 15px;
	font-weight: 600;
	color: var(--erhy-accent-ink);
	background: var(--erhy-accent-tint);
	border: 1px solid color-mix(in srgb, var(--erhy-accent) 24%, transparent);
	transition: background .15s ease;
}

.erhy-root .erhy-chip::after{
	content: "\00d7";
	font-size: 18px;
	line-height: 1;
	opacity: .7;
}

.erhy-root .erhy-chip:hover{
	background: var(--erhy-accent-tint-2);
}

/* Status */
.erhy-root .erhy-status{
	margin: 24px 0 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--erhy-ink-soft);
	min-height: 1.3em;
}

.erhy-root .erhy-status--show{
	color: var(--erhy-ink);
}

/* Autocomplete dropdown under the search box */
.erhy-root .erhy-search__field {
	position: relative;
}

.erhy-root .erhy-ac {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	padding: 6px;
	background: var(--erhy-surface);
	border: 1.5px solid var(--erhy-border);
	border-radius: var(--erhy-r);
	box-shadow: var(--erhy-shadow);
	max-height: 320px;
	overflow-y: auto;
}

.erhy-root .erhy-ac__item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 11px 14px;
	border-radius: var(--erhy-r-sm);
	font-size: 17px;
	font-weight: 500;
	color: var(--erhy-ink);
	transition: background .12s ease, color .12s ease;
}

.erhy-root .erhy-ac__item strong {
	font-weight: 750;
	color: var(--erhy-accent-ink);
}

.erhy-root .erhy-ac__item:hover,
.erhy-root .erhy-ac__item.is-active {
	background: var(--erhy-accent-tint);
	color: var(--erhy-accent-ink);
}

/* Did-you-mean suggestions for misspelled searches */
.erhy-root .erhy-suggest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
}

.erhy-root .erhy-suggest__items {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

.erhy-root .erhy-suggest__label {
	font-size: 16px;
	font-weight: 600;
	color: var(--erhy-ink-soft);
}

.erhy-root .erhy-suggest__label::after {
	content: ":";
}

.erhy-root .erhy-suggest__word {
	padding: 9px 16px;
	border-radius: var(--erhy-r-pill);
	font-size: 16px;
	font-weight: 650;
	color: var(--erhy-accent-ink);
	background: var(--erhy-accent-tint);
	border: 1.5px solid color-mix(in srgb, var(--erhy-accent) 28%, transparent);
	transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.erhy-root .erhy-suggest__word:hover {
	background: var(--erhy-accent-tint-2);
	border-color: var(--erhy-accent);
	transform: translateY(-1px);
}

/* Legend — explains the result-tile colours */
.erhy-root .erhy-rbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 18px;
	margin-top: 18px;
}

.erhy-root .erhy-rsort{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-left: auto;
}

.erhy-root .erhy-rsort__label{
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--erhy-ink-soft);
	white-space: nowrap;
}

.erhy-root .erhy-rsort .erhy-select__el{
	height: 44px;
	min-width: 168px;
}

.erhy-root .erhy-legend{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-top: 0;
}

.erhy-root .erhy-legend__item{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--erhy-ink-soft);
}

.erhy-root .erhy-legend__item i{
	width: 13px;
	height: 13px;
	border-radius: 50%;
	display: inline-block;
}

.erhy-root .erhy-legend--perfect i{ background: var(--erhy-perfect); }
.erhy-root .erhy-legend--near i{ background: var(--erhy-near); }
.erhy-root .erhy-legend--slant i{ background: var(--erhy-slant); }

/* Results — tiles colour-coded by rhyme type */
.erhy-root .erhy-results{
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 16px;
}

.erhy-root .erhy-result{
	--tc: var(--erhy-accent);
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	padding: 13px 17px;
	border-radius: var(--erhy-r-sm);
	background: color-mix(in srgb, var(--tc) 9%, var(--erhy-surface));
	border: 1.5px solid color-mix(in srgb, var(--tc) 30%, var(--erhy-border-soft));
	box-shadow: var(--erhy-shadow-sm);
	transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.erhy-root .erhy-result::before{
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	align-self: center;
	background: var(--tc);
}

.erhy-root .erhy-result--perfect{ --tc: var(--erhy-perfect); }
.erhy-root .erhy-result--near{ --tc: var(--erhy-near); }
.erhy-root .erhy-result--slant{ --tc: var(--erhy-slant); }

.erhy-root .erhy-result:hover{
	transform: translateY(-2px);
	border-color: var(--tc);
	background: color-mix(in srgb, var(--tc) 16%, var(--erhy-surface));
	box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--tc) 60%, transparent);
}

.erhy-root .erhy-result__word{
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -.006em;
	color: var(--erhy-ink);
}

.erhy-root .erhy-result__meta{
	font-size: 14px;
	font-weight: 600;
	color: var(--erhy-ink-mute);
	font-variant-numeric: tabular-nums;
}

.erhy-root .erhy-result.is-copied{
	border-color: var(--tc);
	background: color-mix(in srgb, var(--tc) 22%, var(--erhy-surface));
}

/* Footer — running count + show more / all */
.erhy-root .erhy-foot{
	margin-top: 20px;
}

.erhy-root .erhy-foot__bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}

.erhy-root .erhy-foot__count{
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--erhy-ink-mute);
}

.erhy-root .erhy-more{
	display: flex;
	gap: 12px;
}

.erhy-root .erhy-foot__actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.erhy-root .erhy-btn--copy{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	padding: 0 20px;
	border-radius: var(--erhy-r-sm);
	font-size: 16px;
	font-weight: 650;
	color: var(--erhy-on-accent);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--erhy-accent) 90%, #ffffff),
		var(--erhy-accent));
	border: 0;
	box-shadow: var(--erhy-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .2);
	transition: transform .12s ease, filter .15s ease;
}

.erhy-root .erhy-btn--copy:hover{
	filter: saturate(1.08) brightness(1.03);
	transform: translateY(-1px);
}

.erhy-root .erhy-btn--copy.is-done{
	background: color-mix(in srgb, var(--erhy-accent) 22%, var(--erhy-surface));
	color: var(--erhy-accent-ink);
	box-shadow: var(--erhy-shadow-sm);
}

.erhy-root .erhy-btn__ico{
	display: inline-flex;
}

.erhy-root .erhy-btn--ghost{
	height: 42px;
	padding: 0 16px;
	border-radius: var(--erhy-r-sm);
	font-size: 15px;
	font-weight: 560;
	color: var(--erhy-accent-ink);
	background: var(--erhy-surface);
	border: 1.5px solid var(--erhy-border);
	transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.erhy-root .erhy-btn--ghost:hover{
	background: var(--erhy-accent-tint);
	border-color: var(--erhy-accent);
	transform: translateY(-1px);
}

/* Related articles — real internal links to existing rhyme pages */
.erhy-root .erhy-related {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--erhy-border-soft);
}

.erhy-root .erhy-related__head {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--erhy-ink);
}

.erhy-root .erhy-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.erhy-root .erhy-related__link {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 16px;
	border-radius: var(--erhy-r-sm);
	background: var(--erhy-surface-2);
	border: 1.5px solid var(--erhy-border-soft);
	color: var(--erhy-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, transform .12s ease, color .15s ease;
}

.erhy-root .erhy-related__link:hover {
	background: var(--erhy-accent-tint);
	border-color: var(--erhy-accent);
	color: var(--erhy-accent-ink);
	transform: translateX(3px);
}

.erhy-root .erhy-related__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--erhy-accent);
}

.erhy-root .erhy-related__text {
	min-width: 0;
}

/* Compact variant (sidebar) */
.erhy-root.erhy--compact{
	margin: 1.4rem 0;
}

.erhy-root.erhy--compact .erhy-shell{
	padding: 20px;
	border-radius: calc(var(--erhy-r) + 4px);
}

.erhy-root.erhy--compact .erhy-heading{
	font-size: 22px;
	margin-bottom: 18px;
}

.erhy-root.erhy--compact .erhy-search{
	gap: 8px;
}

.erhy-root.erhy--compact .erhy-input,
.erhy-root.erhy--compact .erhy-btn--go{
	height: 54px;
}

.erhy-root.erhy--compact .erhy-btn--go{
	width: 54px;
	padding: 0;
	justify-content: center;
}

.erhy-root.erhy--compact .erhy-btn__text{
	display: none;
}

.erhy-root.erhy--compact .erhy-filters{
	margin-top: 18px;
	padding-top: 18px;
	gap: 16px;
}

.erhy-root.erhy--compact .erhy-status{
	margin-top: 18px;
}

.erhy-root.erhy--compact .erhy-result{
	padding: 11px 14px;
}

.erhy-root.erhy--compact .erhy-result__word{
	font-size: 18px;
}

/* Dark mode */
.erhy-root[data-erhy-theme="dark"] {
	--erhy-bg: #0f1620;
	--erhy-surface: #161f2b;
	--erhy-surface-2: color-mix(in srgb, var(--erhy-accent) 14%, #131b26);
	--erhy-border: color-mix(in srgb, var(--erhy-accent) 30%, #2c3848);
	--erhy-border-soft: color-mix(in srgb, var(--erhy-accent) 16%, #232f3d);
	--erhy-ink: #eef2f7;
	--erhy-ink-soft: #b6c2cf;
	--erhy-ink-mute: #8493a1;
	--erhy-accent-ink: color-mix(in srgb, var(--erhy-accent) 62%, #ffffff);
	--erhy-accent-tint: color-mix(in srgb, var(--erhy-accent) 24%, #161f2b);
	--erhy-accent-tint-2: color-mix(in srgb, var(--erhy-accent) 36%, #161f2b);
	--erhy-near: color-mix(in srgb, var(--erhy-accent) 48%, #9d8cff);
	--erhy-slant: color-mix(in srgb, var(--erhy-accent) 34%, #e0a766);
	--erhy-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 20px 48px -24px rgba(0, 0, 0, .72);
	--erhy-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
	.erhy-root[data-erhy-theme="auto"] {
		--erhy-bg: #0f1620;
		--erhy-surface: #161f2b;
		--erhy-surface-2: color-mix(in srgb, var(--erhy-accent) 14%, #131b26);
		--erhy-border: color-mix(in srgb, var(--erhy-accent) 30%, #2c3848);
		--erhy-border-soft: color-mix(in srgb, var(--erhy-accent) 16%, #232f3d);
		--erhy-ink: #eef2f7;
		--erhy-ink-soft: #b6c2cf;
		--erhy-ink-mute: #8493a1;
		--erhy-accent-ink: color-mix(in srgb, var(--erhy-accent) 62%, #ffffff);
		--erhy-accent-tint: color-mix(in srgb, var(--erhy-accent) 24%, #161f2b);
		--erhy-accent-tint-2: color-mix(in srgb, var(--erhy-accent) 36%, #161f2b);
		--erhy-near: color-mix(in srgb, var(--erhy-accent) 48%, #9d8cff);
		--erhy-slant: color-mix(in srgb, var(--erhy-accent) 34%, #e0a766);
		--erhy-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 20px 48px -24px rgba(0, 0, 0, .72);
		--erhy-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
	}
}

/* Outer page margin keys off the viewport */
@media (max-width: 680px) {
	.erhy-root {
		margin: 1.75rem 0;
	}
}

/* Layout responds to the tool's OWN width via container queries */
@container erhy (max-width: 540px) {
	.erhy-shell {
		padding: 22px 18px;
	}

	.erhy-search {
		flex-wrap: wrap;
	}

	.erhy-btn--go {
		width: 100%;
		justify-content: center;
	}

	.erhy--compact .erhy-btn--go {
		width: 100%;
	}

	.erhy--compact .erhy-btn__text {
		display: inline;
	}

	.erhy-filters {
		gap: 16px;
	}

	.erhy-filter {
		width: 100%;
	}

	.erhy-pills {
		width: 100%;
		justify-content: space-between;
	}

	.erhy-pill {
		flex: 1 1 0;
		text-align: center;
		padding: 12px 10px;
	}

	.erhy-select,
	.erhy-select__el {
		width: 100%;
	}

	.erhy-pos {
		width: 100%;
		flex-wrap: wrap;
	}

	.erhy-select--sm {
		width: 100%;
	}

	.erhy-input--sm {
		width: 100%;
		flex: 1 1 auto;
	}

	.erhy-range {
		width: 100%;
	}

	.erhy-input--num {
		flex: 1 1 0;
		width: auto;
	}

	.erhy-share__acts {
		margin-left: 0;
	}
}

@container erhy (max-width: 360px) {
	.erhy-root .erhy-shell{
		padding: 18px 15px;
	}

	.erhy-root .erhy-heading{
		font-size: 22px;
		margin-bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.erhy-root * {
		transition: none !important;
	}
}

/* Theme-hardening: keep controls visible and correctly sized whatever the
   host theme sets for raw input/select/button. */
.erhy-root .erhy-input,
.erhy-root .erhy-select__el,
.erhy-root .erhy-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	max-width: none !important;
	min-height: 0;
	line-height: normal !important;
	text-transform: none !important;
	letter-spacing: normal;
}

.erhy-root .erhy-input {
	display: block !important;
	width: 100% !important;
	height: 58px !important;
	background: var(--erhy-bg) !important;
	border: 1.5px solid var(--erhy-border) !important;
	color: var(--erhy-ink) !important;
	font-size: 18px !important;
	opacity: 1 !important;
}

.erhy-root .erhy-input--sm { height: 50px !important; width: 150px !important; font-size: 17px !important; }
.erhy-root .erhy-input--num { height: 50px !important; width: 90px !important; font-size: 17px !important; }

.erhy-root .erhy-select__el {
	display: inline-block !important;
	height: 50px !important;
	background: var(--erhy-bg) !important;
	border: 1.5px solid var(--erhy-border) !important;
	color: var(--erhy-ink) !important;
	background-image: none !important;
	font-size: 17px !important;
}

.erhy-root .erhy-search { display: flex !important; }
.erhy-root .erhy-search__field { flex: 1 1 auto !important; display: block !important; }
.erhy-root .erhy-btn--go { width: auto; }

@container erhy (max-width: 540px) {
	.erhy-root .erhy-btn--go { width: 100% !important; }
	.erhy-root .erhy-input--sm,
	.erhy-root .erhy-select__el { width: 100% !important; }
	.erhy-root .erhy-input--num { width: auto !important; }
}

@container erhy (max-width: 540px) {
	.erhy-root .erhy-rbar { align-items: flex-start; }
	.erhy-root .erhy-rsort { margin-left: 0; width: 100%; }
	.erhy-root .erhy-rsort .erhy-select { flex: 1 1 auto; }
	.erhy-root .erhy-rsort .erhy-select__el { width: 100%; min-width: 0; }
}

/* ----------------------------------------------------------------------------
   Floating launcher — appears on rhyme-related single pages after a delay.
   Not scoped under .erhy-root: it is a fixed-position wrapper. The accent is
   passed in as an inline custom property on .erhy-launcher.
   ------------------------------------------------------------------------- */
.erhy-launcher {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.erhy-launcher__overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 16, 24, .46);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	z-index: 99990;
}

.erhy-launcher.is-open .erhy-launcher__overlay {
	opacity: 1;
	visibility: visible;
}

.erhy-launcher__tab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateX(120%);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 18px;
	border: 0;
	cursor: pointer;
	touch-action: none;
	color: #fff;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--erhy-accent) 90%, #ffffff),
		var(--erhy-accent));
	font-size: 15px;
	font-weight: 650;
	border-radius: 14px 0 0 14px;
	box-shadow: 0 6px 22px -8px rgba(10, 16, 24, .5);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .15s ease;
	z-index: 99991;
}

.erhy-launcher.is-visible .erhy-launcher__tab {
	transform: translateX(0);
}

.erhy-launcher.is-open .erhy-launcher__tab {
	transform: translateX(120%);
}

.erhy-launcher.is-visible .erhy-launcher__tab:hover {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--erhy-accent) 80%, #8b5cf6),
		color-mix(in srgb, var(--erhy-accent) 70%, #06b6d4));
	transform: translateX(0) scale(1.05);
	box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--erhy-accent) 70%, #8b5cf6);
}

.erhy-launcher__ico {
	display: inline-flex;
	position: relative;
	z-index: 1;
}

.erhy-launcher__panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(400px, 94vw);
	padding: 18px;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .38s cubic-bezier(.2, .8, .2, 1);
	z-index: 99992;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.erhy-launcher.is-open .erhy-launcher__panel {
	transform: translateX(0);
}

.erhy-launcher__body {
	width: 100%;
	margin: auto 0;
}

.erhy-launcher__body .erhy-root {
	margin: 0;
}

.erhy-launcher__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	color: #fff;
	background: rgba(10, 16, 24, .55);
	z-index: 2;
	transition: background .15s ease;
}

.erhy-launcher__close:hover {
	background: rgba(10, 16, 24, .8);
}

/* Phones: the floating button *is* the magnifier lens, with a handle
   protruding lower-right and the rhyme note inside it. */
@media (max-width: 768px) {
	.erhy-launcher--no-mobile {
		display: none !important;
	}

	.erhy-launcher__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.erhy-launcher__tab {
		width: 54px !important;
		height: 54px !important;
		min-width: 54px !important;
		max-width: 54px !important;
		min-height: 54px !important;
		flex: none !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		gap: 0;
		aspect-ratio: 1 / 1;
		justify-content: center;
		border-radius: 50%;
		right: 14px;
		top: 50%;
		bottom: auto;
		overflow: visible;
		background: linear-gradient(160deg,
			color-mix(in srgb, var(--erhy-accent) 78%, #ffffff),
			var(--erhy-accent) 55%,
			color-mix(in srgb, var(--erhy-accent) 82%, #06281f));
		box-shadow:
			0 8px 22px -5px color-mix(in srgb, var(--erhy-accent) 70%, transparent),
			0 3px 9px -3px rgba(10, 16, 24, .45);
		transform: translateY(130%) scale(.5);
	}

	/* glass sheen across the top of the lens */
	.erhy-launcher__tab::before {
		content: "";
		position: absolute;
		top: 7px;
		left: 11px;
		width: 30px;
		height: 18px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .22);
		filter: blur(.5px);
		pointer-events: none;
	}

	/* the magnifier handle */
	.erhy-launcher__tab::after {
		content: "";
		position: absolute;
		right: -5px;
		bottom: -5px;
		width: 17px;
		height: 8px;
		border-radius: 9px;
		background: color-mix(in srgb, var(--erhy-accent) 72%, #06281f);
		transform: rotate(45deg);
		transform-origin: center;
		box-shadow: 0 3px 7px -3px rgba(10, 16, 24, .5);
	}

	.erhy-launcher.is-visible .erhy-launcher__tab {
		transform: translateY(0) scale(1);
	}

	.erhy-launcher.is-open .erhy-launcher__tab {
		transform: translateY(130%) scale(.5);
	}

	.erhy-launcher.is-visible .erhy-launcher__tab:hover {
		transform: translateY(0) scale(1.07);
		box-shadow:
			0 12px 30px -5px color-mix(in srgb, var(--erhy-accent) 80%, transparent),
			0 4px 11px -3px rgba(10, 16, 24, .5);
	}

	.erhy-launcher__ico svg {
		width: 26px;
		height: 26px;
	}

	.erhy-launcher__panel {
		width: 100%;
		padding: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.erhy-launcher__tab,
	.erhy-launcher__panel,
	.erhy-launcher__overlay {
		transition: none !important;
	}
}

@media (min-width: 601px) {
	.erhy-launcher--no-desktop {
		display: none !important;
	}
}

/* Theme-hardening for button-based components: sidebars and themes often
   style `button` aggressively (solid brand backgrounds, shadows, uppercase).
   Pin every visual property these components rely on. */
.erhy-root .erhy-ac__item,
.erhy-root .erhy-suggest__word,
.erhy-root .erhy-pill,
.erhy-root .erhy-chip,
.erhy-root .erhy-result,
.erhy-root .erhy-theme-toggle,
.erhy-root .erhy-btn--ghost {
	text-transform: none !important;
	text-shadow: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

.erhy-root .erhy-ac__item {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--erhy-ink) !important;
	width: 100% !important;
	text-align: left !important;
	font-size: 17px !important;
	padding: 11px 14px !important;
	border-radius: var(--erhy-r-sm) !important;
}

.erhy-root .erhy-ac__item:hover,
.erhy-root .erhy-ac__item.is-active {
	background: var(--erhy-accent-tint) !important;
	color: var(--erhy-accent-ink) !important;
}

.erhy-root .erhy-ac__item strong {
	color: var(--erhy-accent-ink) !important;
}

.erhy-root .erhy-suggest__word {
	background: var(--erhy-accent-tint) !important;
	border: 1.5px solid color-mix(in srgb, var(--erhy-accent) 28%, transparent) !important;
	color: var(--erhy-accent-ink) !important;
	box-shadow: none !important;
	font-size: 16px !important;
	padding: 9px 16px !important;
	border-radius: var(--erhy-r-pill) !important;
}

.erhy-root .erhy-suggest__word:hover {
	background: var(--erhy-accent-tint-2) !important;
	border-color: var(--erhy-accent) !important;
}

.erhy-root .erhy-pill {
	background: transparent;
	border: 0 !important;
	box-shadow: none;
	color: var(--erhy-ink-soft);
	border-radius: var(--erhy-r-pill) !important;
}

.erhy-root .erhy-pill.is-on {
	background: var(--erhy-accent) !important;
	color: var(--erhy-on-accent) !important;
}

.erhy-root .erhy-pill:not(.is-on) {
	background: transparent !important;
	color: var(--erhy-ink-soft) !important;
}

.erhy-root .erhy-pill:not(.is-on):hover {
	background: var(--erhy-accent-tint) !important;
	color: var(--erhy-accent-ink) !important;
}

.erhy-root .erhy-chip {
	background: var(--erhy-accent-tint) !important;
	color: var(--erhy-accent-ink) !important;
	border: 1px solid color-mix(in srgb, var(--erhy-accent) 24%, transparent) !important;
	box-shadow: none !important;
	border-radius: var(--erhy-r-pill) !important;
}

.erhy-root .erhy-result {
	background: color-mix(in srgb, var(--tc) 9%, var(--erhy-surface)) !important;
	border: 1.5px solid color-mix(in srgb, var(--tc) 30%, var(--erhy-border-soft)) !important;
	color: var(--erhy-ink) !important;
	border-radius: var(--erhy-r-sm) !important;
}

.erhy-root .erhy-result:hover {
	background: color-mix(in srgb, var(--tc) 16%, var(--erhy-surface)) !important;
	border-color: var(--tc) !important;
}

.erhy-root .erhy-theme-toggle {
	background: var(--erhy-surface-2) !important;
	border: 1px solid var(--erhy-border-soft) !important;
	color: var(--erhy-ink-mute) !important;
	box-shadow: none !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border-radius: 999px !important;
}

.erhy-root .erhy-theme-toggle:hover {
	background: var(--erhy-accent-tint) !important;
	border-color: var(--erhy-accent) !important;
	color: var(--erhy-accent-ink) !important;
}

.erhy-root .erhy-btn--ghost {
	background: var(--erhy-surface) !important;
	border: 1.5px solid var(--erhy-border) !important;
	color: var(--erhy-accent-ink) !important;
	box-shadow: none !important;
	border-radius: var(--erhy-r-sm) !important;
}

.erhy-root .erhy-btn--ghost:hover {
	background: var(--erhy-accent-tint) !important;
	border-color: var(--erhy-accent) !important;
}

/* Share & download card section */

.erhy-root .erhy-share {
	margin-top: 26px;
	padding: 20px;
	border-radius: var(--erhy-r);
	background: var(--erhy-surface-2);
	border: 1px solid var(--erhy-border-soft);
}

.erhy-root .erhy-share__head {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--erhy-ink);
}

.erhy-root .erhy-share__formats {
	display: inline-flex;
	gap: 6px;
	padding: 5px;
	background: var(--erhy-surface);
	border: 1px solid var(--erhy-border-soft);
	border-radius: var(--erhy-r-pill);
	margin-bottom: 14px;
}

.erhy-root .erhy-share__fmt {
	padding: 9px 18px;
	border-radius: var(--erhy-r-pill) !important;
	font-size: 15px !important;
	font-weight: 650;
	color: var(--erhy-ink-soft);
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	transition: background .15s ease, color .15s ease;
}

.erhy-root .erhy-share__fmt.is-on {
	background: var(--erhy-accent) !important;
	color: var(--erhy-on-accent) !important;
}

.erhy-root .erhy-share__fmt:not(.is-on):hover {
	background: var(--erhy-accent-tint) !important;
	color: var(--erhy-accent-ink) !important;
}

.erhy-root .erhy-share__preview {
	margin-bottom: 14px;
}

.erhy-root .erhy-share__preview img {
	display: block;
	width: 100%;
	max-width: 460px;
	height: auto;
	border-radius: var(--erhy-r-sm);
	border: 1px solid var(--erhy-border-soft);
	box-shadow: var(--erhy-shadow-sm);
}

.erhy-root .erhy-share__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

@container erhy (max-width: 540px) {
	.erhy-root .erhy-share__preview img {
		max-width: 100%;
	}
}

/* Theme-hardening for related-article links: themes style widget/content
   anchors aggressively (colours, underlines, box-shadow underlines). */
.erhy-root .erhy-related__link {
	background: var(--erhy-surface-2) !important;
	border: 1.5px solid var(--erhy-border-soft) !important;
	color: var(--erhy-ink) !important;
	text-decoration: none !important;
	box-shadow: var(--erhy-shadow-sm) !important;
	border-radius: var(--erhy-r-sm) !important;
}

.erhy-root .erhy-related__link:hover {
	background: var(--erhy-accent-tint) !important;
	border-color: var(--erhy-accent) !important;
	color: var(--erhy-accent-ink) !important;
}

/* Result tiles: tap the word to chain a new search; copy is its own icon */
.erhy-root .erhy-result {
	padding: 0 !important;
	gap: 0;
	align-items: stretch;
}

.erhy-root .erhy-result::before {
	margin-left: 17px;
}

.erhy-root .erhy-result__main {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	padding: 13px 9px 13px 10px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	font: inherit;
	text-transform: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
}

.erhy-root .erhy-result__copy {
	display: inline-flex;
	align-items: center;
	padding: 0 13px !important;
	background: transparent !important;
	border: 0 !important;
	border-left: 1px solid color-mix(in srgb, var(--tc) 26%, transparent) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--erhy-ink-mute) !important;
	cursor: pointer;
	min-width: 0 !important;
	min-height: 0 !important;
	transition: color .15s ease;
}

.erhy-root .erhy-result__copy:hover {
	color: var(--tc) !important;
}

.erhy-root .erhy-result__copy[data-copied]::after {
	content: attr(data-copied);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 7px);
	transform: translateX(-50%);
	padding: 5px 10px;
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
	color: var(--erhy-on-accent);
	background: var(--erhy-accent-ink);
	border-radius: 7px;
	box-shadow: var(--erhy-shadow-sm);
}

.erhy-root.erhy--compact .erhy-result__main {
	padding: 11px 8px 11px 9px !important;
}

/* Ghost buttons that carry an icon (Download image) */
.erhy-root .erhy-btn--dlimg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}


/* Compact action sizing */
.erhy-root .erhy-btn--sm{
	height: 38px !important;
	padding: 0 14px !important;
	font-size: 14px !important;
	font-weight: 560 !important;
}

.erhy-root .erhy-foot__actions{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.erhy-root .erhy-more{
	display: inline-flex;
	gap: 8px;
}

/* Icon-only action buttons */
.erhy-root .erhy-ibtn{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--erhy-r-sm) !important;
	background: var(--erhy-surface) !important;
	border: 1.5px solid var(--erhy-border) !important;
	color: var(--erhy-ink-soft) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.erhy-root .erhy-ibtn:hover{
	background: var(--erhy-accent-tint) !important;
	border-color: var(--erhy-accent) !important;
	color: var(--erhy-accent-ink) !important;
}

.erhy-root .erhy-ibtn--accent{
	background: var(--erhy-accent) !important;
	border-color: var(--erhy-accent) !important;
	color: var(--erhy-on-accent) !important;
}

.erhy-root .erhy-ibtn--accent:hover{
	filter: saturate(1.08) brightness(1.05);
	color: var(--erhy-on-accent) !important;
}

/* Tooltips: shown on hover/keyboard focus; harmless on touch */
@media (hover: hover) {
	.erhy-root [data-erhy-tip]:hover::after,
	.erhy-root [data-erhy-tip]:focus-visible::after{
		content: attr(data-erhy-tip);
		position: absolute;
		left: 50%;
		bottom: calc(100% + 7px);
		transform: translateX(-50%);
		padding: 5px 10px;
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
		color: var(--erhy-on-accent);
		background: var(--erhy-accent-ink);
		border-radius: 7px;
		box-shadow: var(--erhy-shadow-sm);
		z-index: 40;
		pointer-events: none;
	}
}

/* Copied confirmation bubble (wins over the tooltip while shown) */
.erhy-root [data-copied]::after{
	content: attr(data-copied);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 7px);
	transform: translateX(-50%);
	padding: 5px 10px;
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
	color: var(--erhy-on-accent);
	background: var(--erhy-accent-ink);
	border-radius: 7px;
	box-shadow: var(--erhy-shadow-sm);
	z-index: 41;
	pointer-events: none;
}

/* Share section: one slim bar + smaller preview */
.erhy-root .erhy-share{
	margin-top: 22px;
	padding: 14px 16px 16px;
}

.erhy-root .erhy-share__bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 12px;
}

.erhy-root .erhy-share__label{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--erhy-ink-mute);
}

.erhy-root .erhy-share__acts{
	display: inline-flex;
	gap: 8px;
	margin-left: auto;
}

.erhy-root .erhy-share__formats{
	margin-bottom: 0;
	padding: 4px;
}

.erhy-root .erhy-share__fmt{
	padding: 7px 14px;
	font-size: 14px !important;
	font-weight: 580;
}

.erhy-root .erhy-share__preview{
	margin-bottom: 0;
}

.erhy-root .erhy-share__preview img{
	max-width: 380px;
}


/* Format pills carry a ratio icon; the text label hides in compact */
.erhy-root .erhy-share__fmt{
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* Compact (sidebar / launcher): minimal image panel.
   Rest state = label + three ratio icons. Tapping a shape reveals the
   actions row and a micro-preview. */
.erhy-root.erhy--compact .erhy-share{
	margin-top: 18px;
	padding: 12px;
}

.erhy-root.erhy--compact .erhy-share__fmt-label{
	display: none;
}

.erhy-root.erhy--compact .erhy-share__fmt{
	padding: 8px 11px;
}

.erhy-root.erhy--compact .erhy-share__bar{
	margin-bottom: 0;
	gap: 8px 10px;
}

.erhy-root.erhy--compact .erhy-share__acts,
.erhy-root.erhy--compact .erhy-share__preview{
	display: none;
}

.erhy-root.erhy--compact .erhy-share.is-armed .erhy-share__acts{
	display: inline-flex;
}

.erhy-root.erhy--compact .erhy-share.is-armed .erhy-share__preview{
	display: block;
	margin-top: 12px;
}

.erhy-root.erhy--compact .erhy-share.is-armed .erhy-share__bar{
	margin-bottom: 0;
}

.erhy-root.erhy--compact .erhy-share__preview img{
	max-width: 150px;
}


/* Compact top bar: share + copy link + image download dropdown */
.erhy-root .erhy-cbar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 6px 8px;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	background: var(--erhy-surface-2);
	border: 1px solid var(--erhy-border-soft);
	border-radius: var(--erhy-r);
}

.erhy-root .erhy-cbar > *,
.erhy-root .erhy-foot__actions > *{
	flex: none;
	min-width: 0;
}

/* Compact bar icons shrink so all actions fit a narrow sidebar */
.erhy-root .erhy-cbar .erhy-ibtn{
	width: 34px;
	height: 34px;
}

.erhy-root .erhy-cbar__label{
	flex: 1 0 100%;
	margin: 0 0 2px 2px;
}

.erhy-root .erhy-imgdd{
	position: relative;
	display: inline-flex;
	margin-left: auto;
}

.erhy-root .erhy-imgdd__menu{
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 35;
	display: flex;
	gap: 6px;
	padding: 6px;
	background: var(--erhy-surface);
	border: 1.5px solid var(--erhy-border);
	border-radius: var(--erhy-r-sm);
	box-shadow: var(--erhy-shadow);
}

.erhy-root .erhy-imgdd__menu[hidden]{
	display: none;
}

/* The bottom share section is replaced by the top bar in compact */
.erhy-root.erhy--compact .erhy-share{
	display: none !important;
}

/* Fix: the accent icon button must keep its filled background on hover
   (the generic ibtn hover was washing it out to a tint + white icon). */
.erhy-root .erhy-ibtn--accent:hover{
	background: var(--erhy-accent) !important;
	border-color: var(--erhy-accent) !important;
	color: var(--erhy-on-accent) !important;
}

/* Right-edge dropdown: align tooltips to the button's right edge so they
   don't stretch across the status line or clip at the container edge. */
@media (hover: hover) {
	.erhy-root .erhy-imgdd [data-erhy-tip]:hover::after,
	.erhy-root .erhy-imgdd [data-erhy-tip]:focus-visible::after{
		left: auto;
		right: 0;
		transform: none;
	}
}

/* Compact share bar as a distinct mini-section: tinted strip, tiny label,
   slim borderless icons, one filled image action */
.erhy-root .erhy-cbar__label{
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--erhy-ink-mute);
	margin-right: 8px;
	user-select: none;
}

.erhy-root .erhy-cbar__sep{
	width: 1px;
	height: 18px;
	background: var(--erhy-border-soft);
	margin: 0 5px;
	flex: none;
}

.erhy-root .erhy-cbar .erhy-ibtn{
	width: 32px;
	height: 32px;
	border: 0 !important;
	border-radius: 9px !important;
	background: transparent !important;
}

.erhy-root .erhy-cbar .erhy-ibtn:hover{
	background: var(--erhy-accent-tint) !important;
}

.erhy-root .erhy-cbar .erhy-ibtn--accent{
	background: var(--erhy-accent) !important;
	color: var(--erhy-on-accent) !important;
}

.erhy-root .erhy-cbar .erhy-ibtn--accent:hover{
	background: var(--erhy-accent) !important;
	color: var(--erhy-on-accent) !important;
}

.erhy-root .erhy-cbar .erhy-imgdd{
	margin-left: auto;
}

/* Zero-result helper panel: filtered-out, slant-only, or truly rhymeless */
.erhy-root .erhy-zero{
	margin-top: 14px;
	padding: 14px 16px;
	background: var(--erhy-surface-2);
	border: 1px solid var(--erhy-border-soft);
	border-radius: var(--erhy-r-sm);
}

.erhy-root .erhy-zero__msg{
	margin: 0 0 12px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--erhy-ink-soft);
}

.erhy-root .erhy-zero__acts{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.erhy-root .erhy-btn--fill{
	height: 38px !important;
	padding: 0 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	background: var(--erhy-accent) !important;
	border: 1.5px solid var(--erhy-accent) !important;
	color: var(--erhy-on-accent) !important;
	border-radius: var(--erhy-r-sm) !important;
	box-shadow: none !important;
	cursor: pointer;
}

.erhy-root .erhy-btn--fill:hover{
	filter: saturate(1.08) brightness(1.05);
}

/* ---- Responsive hardening: nothing may overflow its panel ---- */

/* The compact bar wraps instead of pushing children out */
.erhy-root .erhy-cbar > *,
.erhy-root .erhy-foot__actions > *{
	flex: none;
	min-width: 0;
}

.erhy-root .erhy-foot__bar,
.erhy-root .erhy-share__bar{
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Dropdown menu can never exceed the widget */
.erhy-root .erhy-imgdd__menu{
	max-width: min(240px, 86cqw);
	flex-wrap: wrap;
}

/* Global size pass: smaller touch targets that still meet 30px+ */
.erhy-root .erhy-ibtn{
	width: 34px;
	height: 34px;
}

.erhy-root .erhy-ibtn svg{
	width: 16px;
	height: 16px;
}

.erhy-root .erhy-cbar .erhy-ibtn{
	width: 30px;
	height: 30px;
}

.erhy-root .erhy-btn--sm{
	height: 35px !important;
	padding: 0 12px !important;
	font-size: 13.5px !important;
}

.erhy-root .erhy-btn--fill{
	height: 35px !important;
	padding: 0 14px !important;
	font-size: 13.5px !important;
}

.erhy-root .erhy-share__fmt{
	padding: 6px 11px;
	font-size: 13.5px !important;
}

.erhy-root .erhy-share__fmt svg{
	width: 16px;
	height: 16px;
}

/* Very narrow containers: drop the SHARE label text, tighten gaps */
@container erhy (max-width: 350px) {
	.erhy-root .erhy-cbar{
		padding: 5px 6px;
		gap: 2px;
	}

	.erhy-root .erhy-cbar__label{
		display: none;
	}

	.erhy-root .erhy-cbar__sep{
		margin: 0 3px;
	}

	.erhy-root .erhy-foot__actions{
		gap: 6px;
	}
}

/* ---- Modern dropdown pickers (CSS customizable select) ----
   Browsers with base-select get a fully themed open list; others keep the
   native picker, with option colours softened where supported. */
@supports (appearance: base-select) {
	.erhy-root .erhy-select__el,
	.erhy-root .erhy-select__el::picker(select) {
		appearance: base-select;
	}

	.erhy-root .erhy-select__el::picker(select) {
		background: var(--erhy-surface);
		border: 1.5px solid var(--erhy-border);
		border-radius: 12px;
		box-shadow: var(--erhy-shadow);
		padding: 6px;
		margin-top: 6px;
	}

	.erhy-root .erhy-select__el option {
		padding: 10px 13px;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
		color: var(--erhy-ink);
		background: transparent;
		cursor: pointer;
		transition: background .12s ease, color .12s ease;
	}

	.erhy-root .erhy-select__el option:hover,
	.erhy-root .erhy-select__el option:focus-visible {
		background: var(--erhy-accent-tint);
		color: var(--erhy-accent-ink);
	}

	.erhy-root .erhy-select__el option:checked {
		background: var(--erhy-accent);
		color: var(--erhy-on-accent);
		font-weight: 650;
	}

	.erhy-root .erhy-select__el option::checkmark {
		display: none;
	}
}

/* Softened native options where pickers can't be fully styled */
.erhy-root .erhy-select__el option {
	background: var(--erhy-surface);
	color: var(--erhy-ink);
}

.erhy-root .erhy-ac__hint{
	display: block;
	padding: 11px 14px;
	font-size: 15px;
	color: var(--erhy-ink-mute);
}

/* Tier headers inside the results grid: Perfect / Near / Slant */
.erhy-root .erhy-group{
	flex-basis: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 2px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--erhy-ink-mute);
}

.erhy-root .erhy-group:first-child{
	margin-top: 0;
}

.erhy-root .erhy-group__dot{
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
}

.erhy-root .erhy-group--perfect .erhy-group__dot{ background: var(--erhy-accent); }
.erhy-root .erhy-group--near .erhy-group__dot{ background: #4a6cd4; }
.erhy-root .erhy-group--slant .erhy-group__dot{ background: #a08a2e; }

.erhy-root .erhy-group__count{
	font-weight: 600;
	color: var(--erhy-ink-mute);
	opacity: .75;
}

.erhy-root .erhy-group__count::before{ content: '\u00b7\u00a0'; }

/* Syllable sub-headers inside a tier */
.erhy-root .erhy-subgroup{
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: .03em;
	color: var(--erhy-ink-mute);
	opacity: .85;
}

/* Legend counts + empty-tier pill dimming */
.erhy-root .erhy-legend__item b{
	font-weight: 650;
	margin-left: 5px;
	color: var(--erhy-ink-mute);
}

.erhy-root .erhy-legend__item b:empty{ display: none; }

.erhy-root .erhy-pill.is-empty:not(.is-on){
	opacity: .45;
}

.erhy-root .erhy-pill.is-empty.is-on{
	opacity: .7;
}

/* Rare-words reveal */
.erhy-root .erhy-rarebar{
	margin-top: 12px;
}

/* Final overflow guard: share & compact bars and their action groups never
   exceed the container — they wrap instead. */
.erhy-root .erhy-share__bar,
.erhy-root .erhy-share__acts,
.erhy-root .erhy-foot__bar,
.erhy-root .erhy-foot__actions {
	flex-wrap: wrap;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.erhy-root .erhy-share__acts {
	margin-left: auto;
}

@container erhy (max-width: 360px) {
	.erhy-root .erhy-share__acts { margin-left: 0; }
	.erhy-root .erhy-ibtn { width: 34px; height: 34px; }
}