/**
 * DW Glossar — frontend styles.
 *
 * Colours come from the site, not from this file. What the site sets under
 * Appearance → Editor → Styles → Colors — Text, Background, Links — is read
 * server-side (includes/class-colors.php) and emitted as an inline override
 * of --dwg-text, --dwg-surface and --dwg-accent. That is the real answer, and
 * it is what these three tokens normally hold.
 *
 * The chains below are only what is left when a site answers nothing: a
 * classic theme, or a block theme that leaves those fields unset. They are
 * deliberately last-resort, because guessing was the bug — a theme may call
 * any colour `contrast` or `primary`, and on one real site `contrast` was a
 * pale grey, which turned every glossary term into unreadable light text.
 *
 * Nested var() fallbacks are the mechanism: each var() falls through to the
 * next when the property is not defined by the theme.
 */

:root {
	/* Normally replaced by Styles → Colors → Links, or by the palette entry
	 * chosen under Glossary → Settings → Accent colour. */
	--dwg-accent: var(
		--wp--preset--color--primary,
		var(
			--wp--preset--color--accent,
			var(
				--wp--preset--color--accent-1,
				var(
					--wp--preset--color--link,
					var(
						--wp--preset--color--secondary,
						var( --wp--preset--color--theme-1, #1d4ed8 )
					)
				)
			)
		)
	);
	/*
	 * Normally replaced by Styles → Colors → Text, read server-side.
	 * currentColor is the floor: the colour the surrounding content is already
	 * painted in. It is never *wrong*, even where it is not what the site
	 * configured — unlike the slug chain that used to be here, which read
	 * `contrast` and got a pale grey on a real site.
	 *
	 * Muted and border derive from it, so overriding --dwg-text — from the
	 * server, from a theme, or in Additional CSS — moves all three together.
	 */
	--dwg-text: currentColor;

	/* Normally replaced by Styles → Colors → Background. */
	--dwg-surface: var(
		--wp--preset--color--base,
		var( --wp--preset--color--background, var( --wp--preset--color--base-1, #fff ) )
	);
	--dwg-accent-soft: color-mix( in srgb, var( --dwg-accent ) 12%, transparent );
	--dwg-muted: color-mix( in srgb, var( --dwg-text ) 62%, transparent );
	--dwg-border: color-mix( in srgb, var( --dwg-text ) 14%, transparent );
	--dwg-radius: 10px;
	--dwg-pad: 1.35rem;
	--dwg-gap: 1rem;
	--dwg-shadow: 0 1px 2px rgb( 0 0 0 / 6% ), 0 8px 24px rgb( 0 0 0 / 8% );
}

/* Fallback for themes that do not ship the core screen-reader class. */
.dwg-index .screen-reader-text,
.dwg-source .screen-reader-text,
.dwg-box .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * Inline glossary term
 * ------------------------------------------------------------------ */

a.dwg-term {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: from-font;
	text-decoration-color: var( --dwg-accent );
	text-underline-offset: 0.18em;
	/* It is a link to the term's page, so it gets a link cursor. `help` here
	   reads as "not clickable", which is exactly the wrong signal. */
	cursor: pointer;
}

a.dwg-term:hover,
a.dwg-term:focus-visible {
	text-decoration-style: solid;
	background-color: var( --dwg-accent-soft );
	border-radius: 3px;
}

a.dwg-term:focus-visible {
	outline: 2px solid var( --dwg-accent );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Tooltip
 * ------------------------------------------------------------------ */

.dwg-tooltip {
	position: absolute;
	z-index: 999;
	cursor: pointer;
	max-width: min( 22rem, calc( 100vw - 2rem ) );
	padding: 0.75rem 0.9rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --dwg-text );
	background: var( --dwg-surface );
	border: 1px solid var( --dwg-border );
	border-radius: var( --dwg-radius );
	box-shadow: var( --dwg-shadow );
}

.dwg-tooltip[hidden] {
	display: none;
}

.dwg-tooltip:hover {
	border-color: var( --dwg-accent );
}

.dwg-tooltip__title {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.9375rem;
}

.dwg-tooltip__body,
.dwg-tooltip__loading {
	margin: 0;
	color: var( --dwg-muted );
}

.dwg-tooltip__more {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var( --dwg-accent );
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dwg-tooltip:hover .dwg-tooltip__more {
	text-decoration-thickness: 2px;
}

.dwg-tooltip__more::after {
	content: " →";
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Term box
 * ------------------------------------------------------------------ */

.dwg-box {
	padding: 1.25rem 1.35rem;
	margin-block: 2rem;
	background: var( --dwg-surface );
	border: 1px solid var( --dwg-border );
	border-left: 3px solid var( --dwg-accent );
	border-radius: var( --dwg-radius );
}

.dwg-box__heading {
	margin: 0 0 0.9rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var( --dwg-muted );
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dwg-box__list {
	display: grid;
	gap: 0.6rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.dwg-box--cards .dwg-box__list {
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: 0.75rem;
}

.dwg-box__item {
	margin: 0;
}

.dwg-box__link {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	height: 100%;
	text-decoration: none;
	color: var( --dwg-text );
}

.dwg-box--cards .dwg-box__link {
	padding: 0.85rem 0.9rem;
	background: color-mix( in srgb, var( --dwg-text ) 3%, transparent );
	border: 1px solid transparent;
	border-radius: 8px;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.dwg-box--cards .dwg-box__link:hover,
.dwg-box--cards .dwg-box__link:focus-visible {
	background: var( --dwg-accent-soft );
	border-color: var( --dwg-accent );
}

.dwg-box__term {
	font-weight: 650;
	line-height: 1.3;
}

.dwg-box__link:hover .dwg-box__term,
.dwg-box__link:focus-visible .dwg-box__term {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.dwg-box__excerpt {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var( --dwg-muted );
}

.dwg-box__more {
	margin-top: auto;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var( --dwg-accent );
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dwg-box--list .dwg-box__more,
.dwg-box--compact .dwg-box__more {
	display: none;
}

.dwg-box--compact .dwg-box__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
}

.dwg-box--compact .dwg-box__link {
	padding: 0.3rem 0.7rem;
	font-size: 0.875rem;
	background: color-mix( in srgb, var( --dwg-text ) 5%, transparent );
	border-radius: 999px;
}

.dwg-box--compact .dwg-box__link:hover,
.dwg-box--compact .dwg-box__link:focus-visible {
	background: var( --dwg-accent-soft );
}

.dwg-box--list .dwg-box__link {
	padding-left: 0.9rem;
	border-left: 2px solid var( --dwg-border );
}

.dwg-box--list .dwg-box__link:hover,
.dwg-box--list .dwg-box__link:focus-visible {
	border-left-color: var( --dwg-accent );
}

.dwg-box__all,
.dwg-box__empty {
	margin: 0.9rem 0 0;
	font-size: 0.8125rem;
	color: var( --dwg-muted );
}

.dwg-box__all a {
	color: var( --dwg-accent );
}

/* ------------------------------------------------------------------ *
 * A–Z index
 * ------------------------------------------------------------------ */

/*
 * One surface, not a patchwork.
 *
 * The search field and the A–Z rail used to be the only things painting
 * --dwg-surface, everything else being transparent. That only looks right
 * when the theme's `base` colour is also what the page is painted with. On a
 * theme where it is not — a warm off-white body over a cold near-white
 * `base`, in the case that reported this — the index reads as two white
 * boxes floating on a differently coloured page.
 *
 * So the whole index is one panel, and the parts inside it sit on that panel
 * instead of painting their own background. To let the page show through
 * instead, override --dwg-surface with `transparent` in Additional CSS.
 */
.dwg-index {
	padding: 1.25rem var( --dwg-pad ) 0.35rem;
	background: var( --dwg-surface );
	border: 1px solid var( --dwg-border );
	border-radius: var( --dwg-radius );
}

.dwg-index__search {
	margin-bottom: 1.25rem;
}

.dwg-index__search-label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --dwg-muted );
}

.dwg-index__search-input {
	width: 100%;
	max-width: 26rem;
	padding: 0.6rem 0.8rem;
	font-size: 1rem;
	color: var( --dwg-text );
	background: var( --dwg-surface );
	border: 1px solid var( --dwg-border );
	border-radius: 8px;
}

.dwg-index__search-input:focus-visible {
	outline: 2px solid var( --dwg-accent );
	outline-offset: 1px;
}

.dwg-index__status {
	min-height: 1.25em;
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var( --dwg-muted );
}

/*
 * The rail sticks to the top while the list scrolls under it, so it needs an
 * opaque background of its own — the same surface as the panel, and pulled
 * out to the panel's edges so nothing shows through beside it.
 */
.dwg-index__nav {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 0.6rem var( --dwg-pad );
	margin: 0 calc( var( --dwg-pad ) * -1 ) 1.5rem;
	background: var( --dwg-surface );
	border-bottom: 1px solid var( --dwg-border );
}

.dwg-index__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.dwg-index__nav-item {
	margin: 0;
}

.dwg-index__nav-link {
	display: grid;
	place-items: center;
	min-width: 2rem;
	min-height: 2rem;
	font-size: 0.875rem;
	font-weight: 650;
	color: var( --dwg-accent );
	text-decoration: none;
	border-radius: 6px;
}

a.dwg-index__nav-link:hover,
a.dwg-index__nav-link:focus-visible {
	color: var( --dwg-surface );
	background: var( --dwg-accent );
}

.dwg-index__nav-link.is-empty,
.dwg-index__nav-link.is-filtered-out {
	color: var( --dwg-muted );
	opacity: 0.4;
	pointer-events: none;
}

.dwg-index__group {
	padding-top: 0.5rem;
	margin-bottom: 2rem;
	scroll-margin-top: 4.5rem;
}

.dwg-index__letter {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	padding-bottom: 0.4rem;
	margin: 0 0 0.9rem;
	font-size: 1.5rem;
	line-height: 1;
	color: var( --dwg-accent );
	border-bottom: 2px solid var( --dwg-accent-soft );
}

.dwg-index__count {
	font-size: 0.75rem;
	font-weight: 600;
	color: var( --dwg-muted );
}

.dwg-index__list {
	padding: 0;
	margin: 0;
	list-style: none;
}

.dwg-index--cols-2 .dwg-index__list {
	columns: 2;
	column-gap: 2rem;
}

.dwg-index--cols-3 .dwg-index__list {
	columns: 3;
	column-gap: 2rem;
}

.dwg-index--cols-4 .dwg-index__list {
	columns: 4;
	column-gap: 1.5rem;
}

.dwg-index__item {
	margin: 0 0 0.55rem;
	break-inside: avoid;
}

.dwg-index__item[hidden] {
	display: none;
}

.dwg-index__link {
	font-weight: 600;
	color: var( --dwg-text );
	text-decoration-color: var( --dwg-border );
	text-underline-offset: 0.15em;
}

.dwg-index__link:hover,
.dwg-index__link:focus-visible {
	color: var( --dwg-accent );
	text-decoration-color: currentcolor;
}

.dwg-index__synonyms,
.dwg-index__excerpt {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var( --dwg-muted );
}

.dwg-index__synonyms::before {
	content: "≈ ";
}

.dwg-index__empty,
.dwg-index__noresults {
	padding: 1rem 0;
	color: var( --dwg-muted );
}

/* ------------------------------------------------------------------ *
 * Synonyms on a term page
 * ------------------------------------------------------------------ */

.dwg-aliases {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	align-items: baseline;
	margin-block: -0.5rem 1.5rem;
	font-size: 0.9375rem;
}

/* The muted colour goes on the label, not the row: the row is what the pills
 * inherit their text colour from, and they want the theme's full-strength
 * text, not a 62% mix of it. */
.dwg-aliases__prefix {
	font-weight: 650;
	color: var( --dwg-muted );
}

.dwg-aliases__item {
	padding: 0.1rem 0.5rem;
	background: color-mix( in srgb, var( --dwg-accent ) 10%, transparent );
	border-radius: 999px;
	white-space: nowrap;
}

/* The comma exists for copied text and screen readers, not for the eye. */
.dwg-aliases__sep {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
}

.dwg-aliases__empty {
	font-style: italic;
}

/* ------------------------------------------------------------------ *
 * Source citation
 * ------------------------------------------------------------------ */

.dwg-source {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: baseline;
	padding: 0.7rem 0.9rem;
	margin-block: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
	background: color-mix( in srgb, var( --dwg-text ) 4%, transparent );
	border-radius: 8px;
}

.dwg-source__prefix {
	font-weight: 650;
	color: var( --dwg-muted );
}

.dwg-source__link {
	color: var( --dwg-accent );
	text-decoration: underline;
	text-underline-offset: 0.15em;
	overflow-wrap: anywhere;
}

.dwg-source__link::after {
	content: " ↗";
	text-decoration: none;
}

.dwg-source__empty {
	color: var( --dwg-muted );
	font-style: italic;
}

/* ------------------------------------------------------------------ *
 * Single term page
 * ------------------------------------------------------------------ */

.dwg-single__meta {
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	color: var( --dwg-muted );
}

.dwg-single__back {
	margin-top: 2rem;
	font-size: 0.9375rem;
}

.dwg-archive__intro {
	max-width: 44rem;
	color: var( --dwg-muted );
}

/* ------------------------------------------------------------------ *
 * Responsive and preference adjustments
 * ------------------------------------------------------------------ */

@media ( max-width: 600px ) {
	.dwg-index--cols-2 .dwg-index__list,
	.dwg-index--cols-3 .dwg-index__list,
	.dwg-index--cols-4 .dwg-index__list {
		columns: 1;
	}

	:root {
		--dwg-pad: 1rem;
	}

	.dwg-index__nav {
		position: static;
	}

	.dwg-box {
		padding: 1rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dwg-box--cards .dwg-box__link {
		transition: none;
	}
}

@media ( prefers-color-scheme: dark ) {
	:root {
		--dwg-accent: var(
			--wp--preset--color--primary,
			var(
				--wp--preset--color--accent,
				var( --wp--preset--color--accent-1, var( --wp--preset--color--link, #8ab4ff ) )
			)
		);
		/* --dwg-text needs no dark variant: currentColor already follows the
		 * theme, which has its own dark handling. */
		--dwg-surface: var(
			--wp--preset--color--base,
			var( --wp--preset--color--background, #14161a )
		);
		--dwg-shadow: 0 1px 2px rgb( 0 0 0 / 40% ), 0 8px 24px rgb( 0 0 0 / 45% );
	}
}

@media print {
	.dwg-index__nav,
	.dwg-index__search,
	.dwg-tooltip {
		display: none;
	}

	/* No panel on paper: it costs ink and adds nothing. */
	.dwg-index {
		padding: 0;
		background: none;
		border: 0;
	}

	a.dwg-term {
		text-decoration: none;
	}
}