/*
 * 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.875rem;
	color: var(--gdv-ui-text-faint, #666666);
}

/* 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;
}

/* It is a control, and it was drawn as the caption standing next to it: same
   size, same faint grey, no boundary of any kind. The only thing saying it
   could be pressed was the pointer changing shape, which is nothing at all on
   a phone.

   An outline and the reading colour are enough to make it a control, and they
   keep it clear of the level chips above, which is the thing it was mistaken
   for when it lived in their row. The boundary takes the strong border token,
   not the divider one: gdv-public-ui carries both because the edge of
   something a person operates needs 3:1 against the page and the divider token
   lands near 1.3:1.

   The state it is in is the accent, on the border, on the word and in the
   filled bookmark, which is the same three-part answer keeping a word gives. */
.gdv-glossary .gdv-glossary__kept {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.35em 0.8em;
	border: 1px solid var(--gdv-ui-border-strong, #797979);
	border-radius: var(--gdv-ui-radius, 8px);
	background: none;
	box-shadow: none;
	color: var(--gdv-ui-text, #444444);
	font-size: 0.875rem;
	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;
	border-color: var(--gdv-ui-primary, #e1ad4e);
	color: var(--gdv-ui-primary, #e1ad4e);
}

/* Pressed, it is also the one thing on the page narrowing the list to this
   reader, so it carries a tint as well as the accent. */
.gdv-glossary .gdv-glossary__kept.is-on {
	background: var(--gdv-ui-bg, #fafbf5);
}

.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.875rem;
	color: var(--gdv-ui-text-faint, #666666);
}

/* 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 and the draft label on one entry: two small captions after the
   word, never a second heading. The term is what a reader is looking for; the
   level only says who it was written for, and the draft label only that it is
   still being written.

   Captions, not pills (his instruction, 2026-09-14). The boxes were set in the
   term's serif at 12px, which that face was never drawn for, and when a long
   term pushed them onto a second line they sat flush on the definition and
   read as its broken first line. Now they are the reading face at the
   supporting-text size the standard allows, spaced capitals, no box: a level
   in the faint grey, a draft in the dark amber, so a state and a category are
   told apart by colour as well as by word. Both clear 4.5:1 on white and on
   the page tint.

   The two wrap as a unit: nowrap inside the group, so a long term pushes both
   down together rather than leaving one up and one alone underneath. The
   group is a flex item of the term row, so the row's gaps place it, and it
   carries no left margin of its own. It had one, 0.35em, on top of the row's
   own 0.35em column gap: inline that was double the intended space, and on the
   line of its own it takes under a long term it was an indent, so the caption
   started 5px to the right of the word above it and the buttons below it. */
.gdv-glossary__tags {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 1em;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gdv-glossary__level {
	color: var(--gdv-ui-text-faint, #666666);
}

.gdv-glossary__draft {
	color: var(--gdv-ui-focus, #8a6100);
}

/* 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, #666666);
}

/* 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, #666666);
	}
}

.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.

   Air alone was not enough, and a hairline between two words is what says where
   one ends. The distance between them is unchanged: half of it now sits above
   the line and half below, so the line reads as the join rather than as the lid
   on the entry above it.

   The colour is the divider token thinned to 60%, which keeps the letter
   heading's rule the stronger of the two. Both are needed, and in this order: a
   browser with no color-mix keeps the full-strength line rather than losing the
   whole declaration and drawing nothing.

   At every width. A column of 196 entries is the same grey block on a desktop,
   and the letter rail there separates one letter from the next, never two words
   inside one letter. */
.gdv-glossary__entry {
	margin: 0 0 0.9rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--gdv-ui-border, #d6d6d6);
	border-bottom-color: color-mix( in srgb, var(--gdv-ui-border, #d6d6d6) 60%, transparent );
	/* The anchor lands below a sticky header rather than under it. */
	scroll-margin-top: 6rem;
}

/* The last word of a letter draws nothing: "Back to the letters" comes next,
   and after it the following letter arrives with a rule of its own. */
.gdv-glossary__entry:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* 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. It is set on the word and its variants, not on
   the row: the row also carries the captions, the tools and the edit link,
   and none of those is a word being defined, so they keep the reading face.

   The row gap is larger than the column gap. When the captions wrap onto a
   line of their own they need air above them, or they read as part of the
   word; the same air keeps them off the definition below. */
.gdv-glossary__term {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em 0.35em;
	margin: 0;
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.35;
	scroll-margin-top: 6rem;
}

.gdv-glossary__term-text,
.gdv-glossary__variants {
	font-family: "Cantata One", Georgia, "Times New Roman", serif;
}

/* 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, #666666);
	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.875rem;
	font-weight: 400;
}

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

.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.4rem 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;
}

/* The sources read at the size of everything else on the page, at every width.
   They were 0.85rem, then 0.875rem, and both were still a paragraph you have to
   lean towards: 0.875rem is the floor the standard allows for supporting text,
   not a size anybody wants to read a citation at (his instruction, 2026-09-13).

   The summary is also a control, not a caption, so it carries the 44px the front
   end asks of anything you press: 1rem at the theme's 1.65 line-height is 26.4px
   of text, and 0.7rem above and below takes the whole thing to 48.8px. No
   display: flex to centre it, which is what would take the disclosure triangle
   away in Chrome (gdv-public-ui says so at the component). */
.gdv-glossary__sources-summary {
	padding-block: 0.7rem;
	font-size: 1rem;
}

/* overflow-wrap because a citation is where a URL or a DOI turns up, and an
   unbreakable string is the one thing that makes this list push the page
   sideways at 320px. */
.gdv-glossary__citations {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	overflow-wrap: anywhere;
	color: var(--gdv-ui-text-faint, #666666);
}

/* The size of everything else, at every width. It sits directly under the
   sources, which read at 1rem, and was the one line left there that did not. */
.gdv-glossary__see-also {
	margin: 0.4rem 0 0;
	font-size: 1rem;
}

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

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

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

/* 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, #666666);
}

/* The way back to the letters, at the end of each group. Quiet, not small: it
   is there for the reader who has finished with the S entries, and it stayed
   invisible to the one still reading them by being the wrong size to read at
   all. It was 0.8rem, which is 12.8px, under the 0.875rem floor the standard
   sets for supporting text on the front end. It reads at 1rem now, the size the
   sources summary, the citations and the see-also line were all brought to for
   the same reason. What keeps it quiet is the faint grey, 5.74:1 on white, not
   the size.

   It is also something you press, so it carries the 44px the front end asks of
   any control, at every width rather than on a phone alone. */
.gdv-glossary__back {
	margin: 0.5rem 0 0;
	font-size: 1rem;
}

.gdv-glossary__back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gdv-ui-text-faint, #666666);
}

/*
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.875rem;
	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, #666666);
}

/* 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.875rem;
	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, which here means everything below the width where the letter rail
starts.

One breakpoint for the lot. The side gutter and the scrolling letter strip used
to be written at 600px and the tools at 767px, so between the two the block
touched both screen edges and the letters wrapped onto two rows, while the rail
that replaces them had not started yet. 767px is the only edge that means
anything on this page, because it is where the group stops being two columns.

Three things drive what follows.

A control is 44px. Everything a reader presses here was between 15px and 38px:
the bookmark and the link beside a word, a letter in the index, "Sources", the
saved-words toggle, the way back to the letters. Height comes from a minimum on
the control rather than from padding on its text, so the words inside it stay
the size they should be read at.

Text that is read is 1rem. The sources, the list behind them and "See also" are
sentences somebody reads, and they were set at 0.85rem, the same size as the
page's own chrome. What stays small is what is genuinely glanced at: the
provenance line, the count, the level beside a word.

The word, its variants and its level keep one line, and its tools take the next
one on their own. They used to be pushed to the far right of whichever line they
landed on and pulled up half a line, so a short term ("% m/V") put them alone
above the definition they were sitting on top of, and a long one left a gap
between the level and the icons. Same markup, two layouts, and neither read as
belonging to the word above it.

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: 767px) {
	/* 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__provenance,
	.gdv-glossary__count {
		font-size: 0.9rem;
	}

	/* A caption that is also a button, so it takes a button's height. */
	.gdv-glossary .gdv-glossary__kept {
		min-height: 44px;
		font-size: 0.9rem;
	}

	/* The theme select at reading size, which is also what stops Safari
	   zooming the whole page the moment it is focused: it does that to any
	   form control whose text is under 16px. */
	.gdv-glossary .gdv-glossary__topic {
		min-height: 44px;
		padding: 0.5em 0.7em;
		font-size: 1rem;
	}

	/* The chip's look stays gdv-public-ui's. The height is asked for here,
	   the same way this page already undoes its auto margins, so the library's
	   small button is not redefined for every other page that uses one. */
	.gdv-glossary .gdv-glossary__levels .gdv-glossary__level-chip {
		min-height: 44px;
	}

	/* Both rows scroll sideways with their scrollbar hidden, so nothing said
	   there was more to the right of them: the alphabet ended at H on a 360px
	   screen and read as a glossary that stops there. The fade is the sign.
	   It only shows where content actually reaches the right edge, so a row
	   short enough to fit is untouched.

	   1.5rem, and fixed rather than a share of the width. At 15% of a 358px
	   strip the fade was 54px, wider than a letter, so it swallowed the next
	   letter whole and the row read as ending at F with blank paper after it.
	   What signals more to the right is a letter half shown, so the fade has
	   to be narrow enough to leave one. */
	.gdv-glossary__index,
	.gdv-glossary__levels {
		-webkit-mask-image: linear-gradient( to right, #000000 calc( 100% - 1.5rem ), transparent );
		mask-image: linear-gradient( to right, #000000 calc( 100% - 1.5rem ), transparent );
	}

	/* The A to Z index wrapped onto two rows of letters and pushed the first
	   definition below the fold, on a page whose whole point is reading
	   definitions. One row that scrolls sideways and snaps costs half the
	   height, and swiping a strip of letters is the gesture people already
	   have from their contacts list. */
	.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: 44px;
		min-height: 44px;
		padding: 0.45em 0.4em;
	}

	.gdv-glossary .gdv-glossary__body .gdv-glossary__group-title {
		margin-bottom: 0.75rem;
	}

	/* The gap between two words has to stay clearly larger than every gap
	   inside one, and the gaps inside one all grow below. Split either side of
	   the line the same way it is at full width. */
	.gdv-glossary__entry {
		margin-bottom: 1.15rem;
		padding-bottom: 1.1rem;
	}

	.gdv-glossary__entry:last-child {
		padding-bottom: 0;
	}

	/* At the term's own size a line of variants is a second title: it is the
	   same serif, and on a phone it takes a full line of its own directly
	   under the word it belongs to. */
	.gdv-glossary__variants {
		font-size: 0.95rem;
	}

	/* Its own line, always, whatever the term above it is. The basis is what
	   forces the wrap, so the layout no longer depends on how much room the
	   word left over. Starting at the same left edge as every line of reading,
	   because a row that hangs off the right with a gap in front of it reads
	   as belonging to nothing, and left rather than centred because for a
	   reader who cannot edit this row is two controls: centred, they sit in
	   the middle of the column with nothing either side to line up with.

	   No margin of its own. The only space above it is the term's own row gap,
	   so it groups with the word it belongs to, and the definition below sets
	   the larger space on its own side. */
	.gdv-glossary__tools {
		flex: 0 0 100%;
		gap: 0.5rem;
		margin-top: 0;
		margin-inline-start: 0;
	}

	/* On a phone each of these is drawn as a control, with an edge you can see.

	   They were two bare 19px glyphs sitting alone on a line of their own, with
	   44px of invisible box around them and nothing either side to line up
	   with, so they read as two marks floating between the word and its
	   definition rather than as things you press. Nothing about the hit area
	   was wrong; what was missing was any sign of where it was.

	   The outline is --gdv-ui-border-strong, the library's token for the edge of
	   something a person operates: it resolves to #666666 on the front end,
	   5.74:1 on white, against the 3:1 the standard asks of a control boundary.
	   The page's other border token, --gdv-ui-border, is #d6d6d6 at about 1.6:1
	   and is for dividers, not for this.

	   No background of its own. The hover, focus and kept rules above already
	   set `background: none` at a higher specificity than anything here can
	   reach without a fight, and on both the white page and the dark one the
	   surface underneath is the colour that would have been painted anyway. */
	.gdv-glossary .gdv-glossary__keep,
	.gdv-glossary .gdv-glossary__copy {
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		border: 1px solid var(--gdv-ui-border-strong, #666666);
		border-radius: var(--gdv-ui-radius, 8px);
	}

	/* 1.05em of a 1.15rem line is 19px, which is a small mark inside a 44px
	   box. 22px fills the control it sits in and is the size the icon reads at
	   on a phone held at arm's length. */
	.gdv-glossary .gdv-glossary__keep svg,
	.gdv-glossary .gdv-glossary__copy svg {
		width: 1.375rem;
		height: 1.375rem;
	}

	/* The margin goes because the row now sets the spacing with its gap, and
	   two of them together would push the link away from the pair it sits
	   beside. It takes the same outline as the two buttons, so the row reads as
	   one set of controls rather than two chips and a stray link, and 0.9rem
	   rather than 0.85rem, which is 13.6px and under the 0.875rem floor. */
	.gdv-glossary__edit {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: 0.7em;
		margin-left: 0;
		border: 1px solid var(--gdv-ui-border-strong, #666666);
		border-radius: var(--gdv-ui-radius, 8px);
		font-size: 0.9rem;
	}

	/* The other half of the same move: the definition steps back so the space
	   under the tools is the larger of the two. Measured from the edges of the
	   buttons now that those are drawn: 9px above the row, 14px below it, and
	   36px between one word and the next, so the row groups with the word it
	   belongs to and the entries stay clearly apart. */
	.gdv-glossary .gdv-glossary__definition {
		margin-top: 0.9rem;
	}

	.gdv-glossary__sources {
		margin-top: 0.75rem;
	}

	/* The size and the padding are in the base rules now, at every width, so what
	   is left here is the space above the list. */
	.gdv-glossary__citations {
		margin-top: 0.5rem;
	}
}

/*
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;
	}

	/* A printable grey, the same one the group title takes here: the token is
	   mixed with transparent, and what a printer does with that on paper is
	   not worth finding out on a reference somebody has in their hand. */
	.gdv-glossary__entry {
		break-inside: avoid;
		border-bottom-color: #999999;
	}

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