/*
 * GDV Glossary, the reader's page.
 *
 * Tokens come from gdv-public-ui. Nothing here defines a colour of its own or
 * restyles anything the theme owns.
 */

/* The page sits in a reading column, and the column is centred.

   A definition used to run the full content width, which on a desktop is around
   130 characters where an eye wants 65 to 75: the line is so long that finding
   the start of the next one costs a moment, on the one page whose whole purpose
   is reading. The measure below is the fix, and it applies to the controls too,
   so the search box stops looking like an admin field stretched across a page.

   Centred, not left. Left-aligning the whole block was proposed and refused: the
   title above this markup is centred and the theme centres the page, so a
   left-packed column would sit off-axis under its own title.

   The rail is the space the index letter sits in from 768px up. It is declared
   here so the container, the controls and the groups all measure from one
   number. */
.gdv-glossary {
	--gdv-glossary-measure: 42rem;
	--gdv-glossary-rail: 3.5rem;
	--gdv-glossary-gutter: 1.5rem;
	max-width: var(--gdv-glossary-measure);
	margin: 0 auto 2rem;
}

.gdv-glossary__heading {
	margin: 0 0 1rem;
}

/* The search box. Full width: it is the control the page is used through. */
.gdv-glossary__search {
	margin: 0 0 1rem;
}

.gdv-glossary__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	font-size: 1rem;
	line-height: 1.4;
	border: 1px solid var(--gdv-ui-border, #d5d7da);
	border-radius: var(--gdv-ui-radius, 6px);
	background: var(--gdv-ui-surface, #fff);
	color: inherit;
}

.gdv-glossary__input:focus {
	outline: 2px solid var(--gdv-ui-primary, #e1ad4e);
	outline-offset: 1px;
}

/* Who keeps this glossary and when it last changed, under the title. Quiet: it
   is there to be found by somebody deciding whether to trust the page, not to
   be read on the way to the first definition. */
.gdv-glossary__provenance {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	color: var(--gdv-ui-text-faint, #797979);
}

/* The counter and the saved-words toggle share one line under the search box.
   The toggle used to sit among the level chips, where an identical button read
   as a third level; it filters by the reader, not by the content, so it belongs
   next to the count of what is showing. */
.gdv-glossary__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0.4rem 0 0;
}

.gdv-glossary .gdv-glossary__kept {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--gdv-ui-text-faint, #797979);
	font-size: 0.85rem;
	line-height: 1.2;
	cursor: pointer;
}

/* It ships hidden and the browser draws it, unless this is here: a display on a
   class outranks the user agent's [hidden] rule, so any element this plugin
   hides in the markup and gives a display to has to say so itself. Without it,
   "Saved words" appears for a visitor who has no saved words and no account. */
.gdv-glossary .gdv-glossary__kept[hidden] {
	display: none;
}

/* The same rule, for everything the search hides, and it was missing.

   Narrowing the list sets [hidden] on the entries, on the group each one sits
   in and on that group's letter in the index. An entry has no display of its
   own and disappeared correctly; a group is a grid from 768px and a level group
   is a block, and an index letter is an inline-flex at every width, so those
   three never went. Searching "froid" on a desktop emptied the words and left a
   column of large letters with nothing beside them and the whole alphabet still
   above. Nothing in gdv-public-ui or neve-child declares a [hidden] rule, so
   this is the only thing standing between the script and the screen. */
.gdv-glossary .gdv-glossary__entry[hidden],
.gdv-glossary .gdv-glossary__group[hidden],
.gdv-glossary .gdv-glossary__index .gdv-glossary__letter[hidden] {
	display: none;
}

/* The controls only exist while the script that drives them is running.

   public.js puts .gdv-glossary--live on the root. Without it the search box
   took typing and did nothing and the counter stated a total that never moved,
   which is a page telling a reader it can do something it cannot. The level
   chips are already buttons rather than links for exactly that reason. What
   stays either way is the glossary, the A to Z index, the per-entry anchors and
   the way back to the letters, because all four are ordinary links. */
.gdv-glossary:not(.gdv-glossary--live) .gdv-glossary__search,
.gdv-glossary:not(.gdv-glossary--live) .gdv-glossary__levels {
	display: none;
}

.gdv-glossary .gdv-glossary__kept svg {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
}

.gdv-glossary .gdv-glossary__kept:is(:hover, :focus, :focus-visible),
.gdv-glossary .gdv-glossary__kept.is-on {
	background: none;
	box-shadow: none;
	color: var(--gdv-ui-primary, #e1ad4e);
}

.gdv-glossary .gdv-glossary__kept.is-on svg {
	fill: currentColor;
}

/* Centred under the search box it belongs to, rather than hanging off its left
   corner. It is the one thing on this page that is not a control or a word being
   defined, so it reads as a caption on the box above it. */
.gdv-glossary__count {
	font-size: 0.85rem;
	color: var(--gdv-ui-text-faint, #797979);
}

/* The level chips.

   One row, scrolling sideways when the names do not fit, rather than wrapping
   onto three lines and pushing the first definition off a phone screen. The row
   scrolls with a swipe, which is the gesture already in the reader's hand, and
   snapping means a chip never comes to rest half cut off. On a wide screen
   there is nothing to scroll and it reads as an ordinary row.

   Buttons, not links, because a link would promise a page that does not exist.
   With no JavaScript they are not drawn at all now: see the .gdv-glossary--live
   rule above, which took the same reasoning as far as it goes. */
.gdv-glossary__levels {
	display: flex;
	justify-content: flex-start;
	gap: 0.4rem;
	margin: 0 0 1rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gdv-glossary__levels::-webkit-scrollbar {
	display: none;
}

/* A chip is gdv-public-ui's own button: .gdv-ui-btn--small --secondary when it
   is off, --primary when it is on, swapped in JavaScript. Nothing about its
   colour, border, radius or text belongs here, so the readability pass booked
   on .gdv-ui-btn--primary reaches these too.

   The one thing that has to be undone is margin-inline: auto. That rule is what
   makes a button content-width and centred, which is right for a button
   standing on its own and wrong for three sitting in a row: the auto margins
   swallow the free space and push the chips to the far corners, so the level
   row spread across the page while the letter row underneath packed left, and
   the two read as two unrelated things. Both rows now pack left with the same
   gap, which is what the rest of this page does.

   Written three classes deep because the rule being undone is .gdv-ui-btn
   doubled on itself, which scores two. */
.gdv-glossary .gdv-glossary__levels .gdv-glossary__level-chip {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin-inline: 0;
	white-space: nowrap;
}

/* The theme, at the head of the same row as the level chips.

   A select rather than chips because there are five to ten themes where there
   are two or three levels, and ten buttons is a wall between the reader and the
   first definition. It leads the row rather than taking a line of its own, so
   the page above the first word is no taller than it was.

   Normal font size and a real tap target: it is a control somebody uses, and
   shrinking it to sit tidily beside the chips is exactly what this codebase
   refuses to do to an input. */
.gdv-glossary .gdv-glossary__topic {
	flex: 0 0 auto;
	scroll-snap-align: start;
	max-width: 14rem;
	padding: 0.3em 0.6em;
	border: 1px solid var(--gdv-ui-border-strong, #797979);
	border-radius: var(--gdv-ui-radius, 8px);
	background: var(--gdv-ui-surface, #ffffff);
	color: var(--gdv-ui-text, #444444);
	font-size: 0.9rem;
	line-height: 1.4;
}

.gdv-glossary .gdv-glossary__topic:focus-visible {
	outline: 2px solid var(--gdv-ui-primary, #e1ad4e);
	outline-offset: 2px;
}

/* The level on one entry. A quiet aside beside the term, never a second
   heading: the term is what a reader is looking for and the level only tells
   them whether it was written for them. */
.gdv-glossary__level {
	margin-left: 0.5em;
	padding: 0.1em 0.5em;
	border-radius: var(--gdv-ui-radius, 8px);
	background: var(--gdv-ui-bg, #fafbf5);
	color: var(--gdv-ui-text-faint, #797979);
	font-size: 0.75rem;
	font-weight: normal;
	white-space: nowrap;
	vertical-align: middle;
}

/* The A to Z index: plain letters, no boxes.

   Boxed, it was a second row of button-shaped things directly under the level
   chips, and two rows of buttons compete with each other for what a reader
   should press. The chips are now the only controls on the page that look like
   buttons, and the index reads as what it is, a row of letters to jump by. The
   tap target is unchanged: it is made of padding rather than of a border. */
.gdv-glossary__index {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.15rem;
	margin: 0 0 1.5rem;
}

.gdv-glossary__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.8em;
	padding: 0.25em 0.35em;
	border-radius: var(--gdv-ui-radius, 8px);
	text-decoration: none;
	line-height: 1.2;
}

.gdv-glossary__letter:is(:hover, :focus, :focus-visible) {
	background: var(--gdv-ui-bg, #fafbf5);
	text-decoration: none;
}

/* A group is its letter and its words, side by side from 768px up.

   The letter used to be a small grey line above each group, which on a desktop
   was quieter than the words underneath it, so 146 entries scrolled past with
   nothing to scan by. In the rail it is large and pale: findable at a glance,
   never competing with a word for attention.

   It is not sticky, and that is not an oversight. This theme makes a wrapper a
   scroll container, which silently disables position: sticky for everything
   inside it, a trap gdv-aroma-blog paid for once already. The letter a reader
   is currently inside is shown in the bar at the foot of the screen instead,
   which is fixed to the body and therefore immune to that. */
.gdv-glossary__group {
	margin: 0 0 2rem;
}

@media (min-width: 768px) {
	/* The rail is added to the measure rather than taken out of it: the words
	   keep their full reading width and the letters sit beside them. */
	.gdv-glossary {
		max-width: calc( var(--gdv-glossary-measure) + var(--gdv-glossary-rail) + var(--gdv-glossary-gutter) );
	}

	/* The controls line up with the words, not with the letters, so the column
	   of definitions has one left edge from the search box to the last entry. */
	.gdv-glossary__search,
	.gdv-glossary__levels,
	.gdv-glossary__index,
	.gdv-glossary__provenance,
	.gdv-glossary__none {
		margin-inline-start: calc( var(--gdv-glossary-rail) + var(--gdv-glossary-gutter) );
	}

	.gdv-glossary__group {
		display: grid;
		grid-template-columns: var(--gdv-glossary-rail) minmax(0, 1fr);
		column-gap: var(--gdv-glossary-gutter);
		align-items: start;
	}

	.gdv-glossary__list,
	.gdv-glossary__back {
		grid-column: 2;
	}
}

/* The letter above each group is a divider, not a title.

   Left alone it inherits the theme's h3: centred, large and gold, which on a
   phone reads as the start of a new article rather than as the join between two
   groups of words. Quiet, small and left-aligned, above its rule, it does the
   job it is there for.

   Three classes deep on purpose. The theme's rule is
   `h3:not(.widget-title):not(.extract-title)` (style.css:596), and a :not()
   carries the weight of what is inside it, so that selector scores two classes
   plus an element. Two classes of ours lost to it silently, which is why the
   heading stayed gold and centred after the first attempt. Adding the real
   ancestor beats it without reaching for !important. Anything else this plugin
   styles that is a bare h1 to h6 will hit the same wall. */
.gdv-glossary .gdv-glossary__body .gdv-glossary__group-title {
	margin: 0 0 0.5rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--gdv-ui-border, #d5d7da);
	text-align: left;
	font-size: 1.05rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--gdv-ui-text-faint, #797979);
}

/* In the rail, from 768px up: large, pale and right against the words it
   introduces. No rule under it, because it is no longer a line across the top
   of anything. */
@media (min-width: 768px) {
	.gdv-glossary .gdv-glossary__body .gdv-glossary__group-title {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 2.5rem;
		line-height: 1;
		text-align: right;
		color: var(--gdv-ui-border, #d5d7da);
	}

	/* A level name is a word, not a letter, so it cannot go in a 3.5rem rail.
	   Grouped by level the heading stays where it always was, above its group
	   and across the full width. */
	.gdv-glossary__group--level {
		display: block;
	}

	.gdv-glossary .gdv-glossary__body .gdv-glossary__group-title--level {
		margin: 0 0 0.5rem;
		padding-bottom: 0.25rem;
		border-bottom: 1px solid var(--gdv-ui-border, #d5d7da);
		font-size: 1.05rem;
		text-align: left;
		color: var(--gdv-ui-text-faint, #797979);
	}
}

.gdv-glossary__list {
	margin: 0;
}

/* More air between two entries than inside one, so the eye groups a word with
   its definition rather than with the word below it. The old spacing was almost
   the same either side of the line, which is what made 146 entries read as one
   grey block. */
.gdv-glossary__entry {
	margin: 0 0 1.75rem;
	/* The anchor lands below a sticky header rather than under it. */
	scroll-margin-top: 6rem;
}

/* The word carries the site's heading face and the definition the reading face.

   Two things come out of that. The word is legible as a word at a glance down a
   long column, which bold body text at the same size was not, and the lowercase
   definitions read as a dictionary's house style rather than as unfinished
   sentences: that is his deliberate choice, and typography is what makes it
   look chosen.

   The family is named rather than inherited because the theme sets it on h1 to
   h5 only, and this is a dt. */
.gdv-glossary__term {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
	margin: 0;
	font-family: "Cantata One", Georgia, "Times New Roman", serif;
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.35;
	scroll-margin-top: 6rem;
}

/* The bookmark and the link, after the word rather than in front of it.

   They used to lead the line, so the eye met the least important thing on the
   row first and the word second, 146 times. Here they are quiet until the entry
   is hovered or something in it is focused, which keeps the column of words
   clean, and a kept bookmark stays visible whatever the pointer is doing: that
   one is not a tool, it is a state the reader put there.

   Where there is no hover, which is every phone and tablet, they are simply
   always visible. A control that only appears on hover does not exist on a
   touch screen. */
.gdv-glossary__tools {
	display: inline-flex;
	align-items: center;
	gap: 0.15em;
}

/* The fade is per button rather than on the row that holds them, so a kept
   bookmark can overrule it on its own. Set on the row, no child could: opacity
   on a parent is not something a child can undo. */
.gdv-glossary__tools > * {
	opacity: 0;
	transition: opacity 0.15s ease;
}

.gdv-glossary__entry:hover .gdv-glossary__tools > *,
.gdv-glossary__entry:focus-within .gdv-glossary__tools > *,
.gdv-glossary__keep.is-kept {
	opacity: 1;
}

@media (hover: none) {
	.gdv-glossary__tools > * {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdv-glossary__tools > * {
		transition: none;
	}
}

/* Keeping a word. Quiet outline until it is kept, filled after: the mark has to
   be readable down a column of 147 terms at a glance, which is the same job the
   green tick does on the admin list. It used to sit in front of the term, where
   it led every line and the word came second; it now follows the word with the
   copy-link button beside it. */
/* Every state says its own colour and its own fill, and none of them inherit.

   Left to inherit, hovering a kept bookmark turned it into a filled blue block:
   this is a bare <button> inside a <dt> on a themed page, so both `color` and
   the svg's `fill` were being decided by rules that know nothing about it. The
   states are few enough to write out, so they are written out.

   Three states, read as one sequence:

     grey outline        not kept
     accent, half filled hovering an unkept one, showing what pressing will do
     accent, filled      kept

   The middle one exists because a darker grey outline was almost invisible at
   this size, so hovering an unkept bookmark read as nothing happening at all.
   It is deliberately softer than the kept state, so it foreshadows it rather
   than being mistaken for it.

   Hovering a kept one darkens instead, never changes hue: it has to read as
   "press to release", not as a different object. */
.gdv-glossary .gdv-glossary__keep,
.gdv-glossary .gdv-glossary__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.15em;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--gdv-ui-text-faint, #797979);
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	vertical-align: baseline;
}

/* The lucide files are 24 by 24, which is a button's worth of icon standing
   beside a word. Sized to the line it sits on instead. */
.gdv-glossary .gdv-glossary__keep svg,
.gdv-glossary .gdv-glossary__copy svg {
	width: 1.05em;
	height: 1.05em;
	fill: none;
	stroke: currentColor;
}

/* Copying a link. The button answers, because a copy that gives no sign is
   indistinguishable from one that failed: it takes the accent for two seconds,
   which is the same colour keeping a word uses, so the two read as one family
   of small confirmations. */
.gdv-glossary .gdv-glossary__copy:is(:hover, :focus, :focus-visible, :active),
.gdv-glossary .gdv-glossary__copy.is-copied {
	background: none;
	box-shadow: none;
	color: var(--gdv-ui-primary, #e1ad4e);
}

.gdv-glossary .gdv-glossary__keep:is(:hover, :focus, :focus-visible, :active) {
	background: none;
	box-shadow: none;
	color: var(--gdv-ui-primary, #e1ad4e);
}

.gdv-glossary .gdv-glossary__keep:is(:hover, :focus, :focus-visible, :active) svg {
	fill: currentColor;
	fill-opacity: 0.35;
	stroke: currentColor;
}

.gdv-glossary .gdv-glossary__keep.is-kept {
	color: var(--gdv-ui-primary, #e1ad4e);
}

.gdv-glossary .gdv-glossary__keep.is-kept svg {
	fill: currentColor;
	fill-opacity: 1;
	stroke: currentColor;
}

.gdv-glossary .gdv-glossary__keep.is-kept:is(:hover, :focus, :focus-visible, :active) {
	background: none;
	color: var(--gdv-ui-primary-hover, #f0605c);
}

.gdv-glossary .gdv-glossary__keep.is-kept:is(:hover, :focus, :focus-visible, :active) svg {
	fill: currentColor;
	fill-opacity: 1;
	stroke: currentColor;
}

/* The link into wp-admin, for whoever can edit the glossary. Deliberately plain
   and quiet: it is scaffolding for one person, sitting on a page written for
   everybody else, so it should be findable and never noticeable. */
.gdv-glossary__edit {
	margin-left: 0.5em;
	font-size: 0.75rem;
	font-weight: 400;
}

.gdv-glossary__variants {
	font-weight: 400;
	font-style: italic;
	color: var(--gdv-ui-text-faint, #797979);
}

.gdv-glossary__variants::before {
	content: " · ";
	font-style: normal;
}

/* A dd is indented by 40px by the browser, which on a 390px screen costs a
   tenth of every line of every definition for nothing: the term above it is
   already bold and the entries are already spaced apart. Written as the logical
   property as well, so it holds whatever the theme sets. */
.gdv-glossary .gdv-glossary__definition {
	margin: 0.15rem 0 0;
	margin-inline-start: 0;
	padding-inline-start: 0;
}

/* The sources, folded away behind their own count. The component is
   gdv-public-ui's .gdv-ui-collapsible, which carries how it opens, how it looks
   and how it prints; what stays here is where it sits on this page and the size
   it reads at, which is the size the list below it has always had. */
.gdv-glossary__sources {
	margin: 0.4rem 0 0;
}

.gdv-glossary__sources-summary {
	font-size: 0.85rem;
}

.gdv-glossary__citations {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: var(--gdv-ui-text-faint, #797979);
}

.gdv-glossary__see-also {
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
}

.gdv-glossary__see-also-label {
	color: var(--gdv-ui-text-faint, #797979);
}

.gdv-glossary__see-also-label::after {
	content: " : ";
}

.gdv-glossary__none {
	margin: 1rem 0;
	color: var(--gdv-ui-text-faint, #797979);
}

/* The page with nothing on it. Normal reading size: it is the only sentence
   there, so shrinking it would leave the page looking emptier still. */
.gdv-glossary__empty {
	margin: 1rem 0;
}

.gdv-glossary__empty-admin {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var(--gdv-ui-text-faint, #797979);
}

/* The way back to the letters, at the end of each group. Quiet and small: it is
   there for the reader who has finished with the S entries, and invisible to
   the one still reading them. */
.gdv-glossary__back {
	margin: 0.25rem 0 0;
	font-size: 0.8rem;
}

.gdv-glossary__back a {
	color: var(--gdv-ui-text-faint, #797979);
}

/*
The bar at the foot of the screen.

Once a reader has scrolled past the search box, a page of 146 definitions gives
them no way back to it but the scrollbar. The bar carries a second search field,
the letter they are currently in, and the way back to the top, and it appears
only once the page's own search box has gone.

Fixed and attached to the body, never sticky: this theme makes a wrapper a
scroll container, which silently disables position: sticky for everything inside
it. The shape, the low z-index and the reveal are gdv-aroma-blog's reader bar,
his own pattern, rather than a second one invented here. The z-index is
deliberately low for a fixed element: anything the site draws over the bottom of
the screen to ask a question should come out on top of a strip of tools.

A literal white, not a theme token: neve-child sets --nv-site-bg to transparent,
and a var() fallback does not help, because a fallback is used only where the
property is undefined, never where it is defined as something unwanted.
*/
.gdv-glossary-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;

	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem max( 0.75rem, env( safe-area-inset-left ) );
	padding-bottom: max( 0.5rem, env( safe-area-inset-bottom ) );

	background: #ffffff;
	border-top: 1px solid var(--gdv-ui-border, #d5d7da);
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.07 );

	opacity: 0;
	visibility: hidden;
	transform: translateY( 100% );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gdv-glossary-bar.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

/*
The theme's own "scroll to top" is switched off on the glossary page.

It is a fixed button in the bottom-right corner that appears once the reader
scrolls, which is where the bar puts its own way back to the top, and it is
drawn over it. Raising the bar would only reverse which of the two is
unreachable, and it is the more expendable of the pair: the bar's arrow does the
same job and the bar also carries the search box and the letter.

The same decision the theme itself took for the article page, at
style.css:12069, and it is written the same way: the theme's rule wins on
specificity otherwise. To bring it back, delete this rule.
*/
body.gdv-glossary-page #scroll-to-top,
body.gdv-glossary-page .scroll-to-top {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.gdv-glossary-bar {
		transition: none;
	}
}

/*
What just happened, said in words beside the word it happened to.

Copying a link changes nothing a reader can see, so without this the only
confirmation was a 16px icon turning gold and a tooltip nobody hovers long
enough to read. Attached to the body and placed against the button's own
rectangle, for the same reason the bar is: inside the entry it would be laid out
by whatever the theme does to that column.

Above the bar's z-index, since it is answering something the reader just did.
*/
.gdv-glossary-toast {
	position: fixed;
	z-index: 16;
	max-width: 16rem;
	padding: 0.35rem 0.6rem;
	border-radius: var(--gdv-ui-radius, 6px);
	background: #333333;
	color: #ffffff;
	font-size: 0.8rem;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;

	/* The translate places it above the point it was given, and stays put: it
	   is positioning, not the animation. Only the opacity moves. */
	transform: translateY( -100% );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
}

.gdv-glossary-toast.is-visible {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.gdv-glossary-toast {
		transition: none;
	}
}

/* The bar is attached to the body, not to the glossary, so it is outside every
   selector this page's markup sits inside. `.screen-reader-text` is normally the
   theme's, and a bar whose labels became visible because a theme did not define
   it would be a strip of stray words across the bottom of the screen. Said here
   rather than assumed. */
.gdv-glossary-bar .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* The field takes the room and the two markers beside it take what they need.
   min-width: 0 so it shrinks rather than pushing them off a phone. */
.gdv-glossary-bar__input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 0.5em 0.8em;
	font-size: 1rem;
	line-height: 1.4;
	border: 1px solid var(--gdv-ui-border, #d5d7da);
	border-radius: var(--gdv-ui-radius, 6px);
	background: var(--gdv-ui-surface, #fff);
	color: inherit;
}

.gdv-glossary-bar__input:focus {
	outline: 2px solid var(--gdv-ui-primary, #e1ad4e);
	outline-offset: 1px;
}

/* Where the reader is. One character wide most of the time, so it is given a
   fixed footprint rather than making the field jump as the letter changes. */
.gdv-glossary-bar__letter {
	flex: 0 0 auto;
	min-width: 1.6em;
	text-align: center;
	font-family: "Cantata One", Georgia, "Times New Roman", serif;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--gdv-ui-text-faint, #797979);
}

/* The same slot holding a theme's name instead of a letter. A name is words,
   not one serif capital, so it takes the reading face at a small size and is
   cut off with an ellipsis rather than pushing the search field out of the bar
   on a phone. */
.gdv-glossary-bar__letter--topic {
	min-width: 0;
	max-width: 9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: inherit;
	font-size: 0.8rem;
	text-align: right;
}

.gdv-glossary-bar__top {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--gdv-ui-border, #d5d7da);
	border-radius: var(--gdv-ui-radius, 6px);
	background: none;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
}

.gdv-glossary-bar__top svg {
	width: 1.1rem;
	height: 1.1rem;
}

.gdv-glossary-bar__top:is(:hover, :focus, :focus-visible) {
	background: none;
	color: var(--gdv-ui-primary, #e1ad4e);
	border-color: var(--gdv-ui-primary, #e1ad4e);
}

/* Two columns, and never on a phone. */
@media (min-width: 900px) {
	.gdv-glossary__body--two .gdv-glossary__list {
		column-count: 2;
		column-gap: 2.5rem;
	}

	.gdv-glossary__body--two .gdv-glossary__entry {
		break-inside: avoid;
	}
}

/*
On a phone.

The A to Z index wrapped onto two rows of boxed letters and pushed the first
definition below the fold, on a page whose whole point is reading definitions.
It is now one row that scrolls sideways and snaps, the same shape as the level
chips above it, so it costs half the height and the letters keep a full-size
tap target rather than being shrunk to fit. Swiping a strip of letters is the
gesture people already have from their contacts list.

The search box is left exactly as it is: full width, normal font size. It is the
control that actually works one-handed, and it is what everything else here gives
room to rather than something to squeeze.
*/
@media (max-width: 600px) {
	/* A side gutter, so the search box, the letters and every line of every
	   definition stop short of the screen edge instead of touching it, and line
	   up with the breadcrumb and the title above them. The block itself carries
	   no horizontal margin or padding of its own at any other width: this is the
	   one place it needs one, because at phone width the container it sits in
	   gives it almost nothing. */
	.gdv-glossary {
		padding-inline: 1rem;
	}

	.gdv-glossary__index {
		flex-wrap: nowrap;
		gap: 0.3rem;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.gdv-glossary__index::-webkit-scrollbar {
		display: none;
	}

	.gdv-glossary__letter {
		flex: 0 0 auto;
		scroll-snap-align: start;
		min-width: 2.4em;
		padding: 0.45em 0.4em;
	}

}

/*
On a touch screen the tools are always visible, and a term long enough to fill
the line pushes them onto the next one: two icons and, for whoever can edit, a
link, sitting at the left margin under every word, 146 times.

They cannot be kept on the term's own line at this width, because there is no
room left on it. Pushed to the right instead, so they stand clear of the edge
every line of reading starts from, and pulled up tight against the word they
belong to.

Everything below 768px, not only a phone: that is where the letter rail stops
and where a term is wide enough to take the whole line.
*/
@media (max-width: 767px) {
	.gdv-glossary__tools {
		margin-inline-start: auto;
		margin-top: -0.4em;
	}
}

/*
Printed, the glossary is the only thing on the page: the search box filters
nothing on paper and the index links go nowhere.
*/
@media print {
	.gdv-glossary__search,
	.gdv-glossary__index,
	.gdv-glossary__levels,
	.gdv-glossary__tools,
	.gdv-glossary__keep,
	.gdv-glossary__edit,
	.gdv-glossary__back,
	.gdv-glossary-bar,
	.gdv-glossary-toast,
	.gdv-glossary__none {
		display: none;
	}

	/* Kept on paper, unlike every other control here: a printed reference with
	   no date on it is a page nobody can place. */
	.gdv-glossary__provenance {
		display: block;
	}

	/* The rail is a screen device, and a sheet of paper is wider than 768px in
	   CSS pixels, so the rule that builds it applies here unless it is undone.
	   On paper the letter goes back above its group, where a page break can
	   never separate it from its words. */
	.gdv-glossary__group {
		display: block;
	}

	.gdv-glossary .gdv-glossary__body .gdv-glossary__group-title {
		margin: 0 0 0.5rem;
		padding-bottom: 0.25rem;
		border-bottom: 1px solid #999999;
		font-size: 1.05rem;
		text-align: left;
		color: #333333;
	}

	.gdv-glossary,
	.gdv-glossary__search,
	.gdv-glossary__provenance {
		max-width: none;
		margin-inline: 0;
	}

	.gdv-glossary__entry {
		break-inside: avoid;
	}

	.gdv-glossary__definition a::after {
		content: "";
	}
}