/* ==========================================================================
   Utterance line + row-based results.  Loaded last so it wins the cascade.
   The name and its respelling are ONE object: the pronunciation is not a
   caption under the name, it is half of how a name is rendered.
   ========================================================================== */

:root{ --abn-font-mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace; }

/* ---- the utterance line ---- */
.abn-utter{
	display:inline-flex; flex-direction:column; align-items:flex-start; gap:.18em;
	border:0; background:none; padding:0; margin:0; font:inherit; color:inherit;
	cursor:pointer; text-align:left;
}
.abn-utter .abn-utter__nm{
	font-family:var(--abn-font-display); font-weight:700; line-height:1.05;
	letter-spacing:-.015em; color:var(--abn-dark);
}
.abn-utter .abn-utter__syl{
	font-family:var(--abn-font-mono); color:var(--abn-muted);
	letter-spacing:.02em; display:flex; flex-wrap:wrap; align-items:baseline;
}
.abn-utter .abn-utter__syl span{
	border-radius:3px; padding:0 1px;
	transition:color .18s ease, background-color .18s ease;
}
.abn-utter .abn-utter__syl .is-stress{ color:var(--abn-dark); font-weight:700; }
.abn-utter .abn-utter__syl .is-on{ color:var(--abn-primary); background:#FBEDE6; }
.abn-utter .abn-utter__syl .sep{ opacity:.35; }
.abn-utter:hover .abn-utter__nm{ color:var(--abn-primary); }
.abn-utter:focus-visible{ outline:3px solid var(--abn-primary); outline-offset:4px; border-radius:4px; }

.abn-utter--lg .abn-utter__nm{ font-size:clamp(2.6rem,9vw,4.4rem); }
.abn-utter--lg .abn-utter__syl{ font-size:clamp(.86rem,2.4vw,1.02rem); margin-top:.3em; }
.abn-utter--sm .abn-utter__nm{ font-size:1.34rem; }
.abn-utter--sm .abn-utter__syl{ font-size:.79rem; }

/* ---- results become rows, not boxes ---- */
.abn-results{
	display:block !important; grid-template-columns:none !important;
	border-top:1px solid var(--abn-border);
}
.abn-results .abn-card{
	display:flex; align-items:center; gap:16px; min-height:0;
	background:none; border:0; border-bottom:1px solid var(--abn-border);
	border-radius:0; padding:16px 0; box-shadow:none;
}
.abn-results .abn-card:hover{ transform:none; box-shadow:none; }
/* the coloured gender rail encoded nothing a screen reader could use */
.abn-results .abn-card::before{ display:none; }
.abn-results .abn-card__body{ flex:1; min-width:0; }
.abn-results .abn-card__meaning{ margin:.28rem 0 0; font-size:.92rem; color:var(--abn-muted); }
.abn-results .abn-card__tag{ margin:.28rem 0 0; font-size:.78rem; color:var(--abn-muted); }
.abn-results .abn-save{
	flex:0 0 auto; border:1px solid var(--abn-border); border-radius:999px;
	padding:9px 15px; min-height:40px; font-size:.8rem;
}
.abn-results .abn-save[aria-pressed="true"]{
	border-color:var(--abn-primary); color:var(--abn-primary); background:#FBEDE6;
}
.abn-results .abn-badge--trending{ position:static; margin-left:8px; }

@media (prefers-reduced-motion:reduce){
	.abn-utter .abn-utter__syl span{ transition:none; }
}
/* One stretched link makes the whole row the target; the utterance button and
   the keep control sit above it so they stay independently clickable. */
.abn-results .abn-card{ position:relative; }
.abn-card__link{ position:absolute; inset:0; z-index:0; }
.abn-results .abn-card:hover .abn-utter__nm{ color:var(--abn-primary); }
.abn-results .abn-card__body,
.abn-results .abn-save{ position:relative; z-index:1; }
.abn-results .abn-card__body{ pointer-events:none; }
.abn-results .abn-utter{ pointer-events:auto; }
.abn-card__link:focus-visible{ outline:3px solid var(--abn-primary); outline-offset:-3px; }