/*
 * GDV Glossary, a marked word inside an article and the definition it opens.
 *
 * Tokens, the button and the focus ring all come from gdv-public-ui, which
 * ArticleMarker asks for with PublicUi::request(). Nothing here redefines them:
 * this file holds only the mark itself and the panel it opens, and the link at
 * the foot of that panel is the shared .gdv-ui-btn rather than a button this
 * plugin invented.
 *
 * **The doubled class is deliberate and is gdv-public-ui's own technique.** A
 * mark is a <button>, and Neve styles every bare button as a button: `button`
 * paints a background, and `button:hover` sets
 * `background: var(--primarybtnhoverbg)`, which on this site is a solid blue, so
 * pointing at a marked word turned it into a blue block. That rule is one
 * element plus one pseudo-class, which outranks a single class. Repeating the
 * class lifts every declaration above it with no !important and without naming
 * the theme, exactly as .gdv-ui-btn.gdv-ui-btn does in public-ui.css and for the
 * same reason.
 */

/*
The hidden attribute is a user-agent rule and loses to any display an author
stylesheet sets on the same element. The panel carries both, so this says it
once. The plugin has paid for this on the reader's page already.
*/
.gdv-glossary-panel[hidden] {
	display: none !important;
}

/*
A mark has to read as part of the sentence, not as a control dropped into it, so
it takes the text's own font and colour and says what it is with the underline
alone.

**The underline is text-decoration and not a border**, which is what gives the
gap under the letters: a border is pinned to the bottom of the element box, so it
sat two pixels under the descenders and read as a printing fault. It also draws
badly when an inline element wraps across two lines, where a text underline
simply follows the words.

**Gold, because that is what this page already means by it.** Every link here is
solid gold, so the page says one thing consistently: gold means something happens
at this word, solid goes somewhere else, dotted explains itself where it stands.
The letters keep the reading colour either way, since body text set in the accent
is worse to read than it is to look at.
*/
.gdv-glossary-mark.gdv-glossary-mark {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	line-height: inherit;
	text-transform: none;
	text-decoration: underline dotted var(--gdv-ui-primary, #e1ad4e);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
	cursor: help;
}

/*
Pointing at a word must not repaint it. The only thing that changes is the
underline, from dotted to solid, which is enough to say the word answers.
*/
.gdv-glossary-mark.gdv-glossary-mark:is(:hover, :focus, :active) {
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	text-decoration: underline solid var(--gdv-ui-primary, #e1ad4e);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.gdv-glossary-mark.gdv-glossary-mark:focus {
	outline: none;
}

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

/* Open, the line is solid and heavier, so the word the panel belongs to is
obvious while the panel is up. */
.gdv-glossary-mark.gdv-glossary-mark[aria-expanded="true"] {
	border: 0;
	background: none;
	box-shadow: none;
	text-decoration: underline solid var(--gdv-ui-primary, #e1ad4e);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.25em;
}

.gdv-glossary-panel {
	position: absolute;
	z-index: 1000;
	box-sizing: border-box;
	max-width: calc(100vw - 24px);
	padding: 16px 18px;
	border: 1px solid var(--gdv-ui-border, #d6d6d6);
	border-radius: var(--gdv-ui-radius, 8px);
	background: var(--gdv-ui-surface, #fff);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
	font-size: 16px;
	line-height: 1.6;
}

.gdv-glossary-panel__term {
	margin: 0 0 6px;
	padding-right: 20px;
	font-weight: 700;
}

.gdv-glossary-panel__definition p:first-child {
	margin-top: 0;
}

.gdv-glossary-panel__definition p:last-child {
	margin-bottom: 0;
}

/*
The link out is .gdv-ui-btn--secondary --small, so it is the same quiet button a
reader meets everywhere else on the site, content width and centred by the
library. Only the space above it belongs to this panel.
*/
.gdv-glossary-panel__link.gdv-glossary-panel__link {
	margin-top: 12px;
}

/* A second bare button, and the theme has the same opinion about this one. */
.gdv-glossary-panel__close.gdv-glossary-panel__close {
	position: absolute;
	top: 6px;
	right: 8px;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--gdv-ui-text-faint, #797979);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.gdv-glossary-panel__close.gdv-glossary-panel__close:is(:hover, :focus, :active) {
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}

/*
Printed, a mark is just a word again. The panel is not on paper at all, and the
dotted underline would read as an ink smudge.
*/
@media print {
	.gdv-glossary-mark.gdv-glossary-mark {
		border: 0;
		color: inherit;
		text-decoration: none;
	}

	.gdv-glossary-panel {
		display: none !important;
	}
}