/* Home of Digital Glossary: the marked terms, their hint cards and the [hod_glossary] list.
   Colours, fonts and radii follow the theme's tokens when it has them (Home of Digital / PROEMI) and fall back to plain values. */

/* A marked term: a dotted underline in the text colour, so it reads on light and dark panels.
   It stays an inline span, so lines wrap exactly as before the script ran. */
.hodg-term {
	cursor: help;
	border-radius: 3px;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1.5px;
	text-underline-offset: .22em;
	text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-color .15s, text-decoration-color .15s;
}
.hodg-term:hover,
.hodg-term.is-open {
	text-decoration-style: solid;
	text-decoration-color: var(--accent, #f2994a);
	background-color: color-mix(in srgb, var(--accent, #f2994a) 16%, transparent);
}
.hodg-term:focus-visible { outline: 2px solid var(--focus-ring, currentColor); outline-offset: 2px; }
/* Phones: a taller tap area around the term, without moving any text. */
@media (pointer: coarse) {
	.hodg-term { position: relative; }
	.hodg-term::after { content: ""; position: absolute; inset: -6px -2px; }
}

/* The hint card floats over the page (position: fixed), so opening it moves nothing. */
.hodg-card {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	box-sizing: border-box;
	width: max-content;
	max-width: min(340px, calc(100vw - 24px));
	padding: 14px 18px 16px;
	background: var(--white, #fff);
	color: var(--prm-01, #050507);
	border: 1px solid rgba(5, 5, 7, .08);
	border-radius: var(--radius-thumb, 12px);
	box-shadow: 0 1px 2px rgba(17, 20, 26, .06), 0 14px 36px rgba(17, 20, 26, .18);
	font-family: var(--font-sans, system-ui, sans-serif);
	text-align: left;
	color-scheme: light;
}
.hodg-card[hidden] { display: none; }
/* Small arrow towards the term (x set by the script). */
.hodg-card::before {
	content: "";
	position: absolute;
	left: calc(var(--hodg-arrow, 50%) - 6px);
	top: -7px;
	width: 12px;
	height: 12px;
	background: inherit;
	border: inherit;
	border-right: 0;
	border-bottom: 0;
	border-radius: 2px 0 0 0;
	transform: rotate(45deg);
}
.hodg-card.is-above::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.hodg-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 6px; }
.hodg-card__term { font-size: 16px; line-height: 22px; font-weight: 600; }
.hodg-card__full { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; line-height: 18px; letter-spacing: -0.02em; color: var(--prm-c-03, #454545); }
.hodg-card__def { margin: 0; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--prm-c-01, #1c1c1c); }
@media (prefers-reduced-motion: no-preference) {
	.hodg-card:not([hidden]) { animation: hodg-in .14s ease-out; }
}
@keyframes hodg-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- [hod_glossary]: every term, A to Z ---------- */

.hodg-list { --hodg-line: var(--line, #e7e7e7); color: var(--ink, #050507); }
.hodg-az ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hodg-az a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid var(--hodg-line);
	border-radius: var(--radius-pill, 100px);
	background: var(--white, #fff);
	color: var(--ink, #050507);
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 15px;
	text-decoration: none;
	transition: border-color .2s;
}
.hodg-az a:hover { border-color: var(--ink, #050507); color: var(--ink, #050507); }
.hodg-letter {
	display: grid;
	grid-template-columns: minmax(56px, 140px) minmax(0, 1fr);
	gap: 8px clamp(24px, 4vw, 64px);
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: 20px;
	border-top: 1px solid var(--prm-c-05, #b0b0b0);
	scroll-margin-top: 96px;
}
.hodg-letter__head { margin: 0; font-family: var(--font-serif, Georgia, serif); font-style: italic; font-weight: 400; font-size: clamp(48px, 5vw, 72px); line-height: .9; }
.hodg-entries { margin: 0; }
.hodg-entry {
	display: grid;
	grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
	gap: 8px clamp(24px, 3vw, 48px);
	padding: 22px 0;
	border-top: 1px solid var(--hodg-line);
	scroll-margin-top: 96px;
}
.hodg-entry:first-child { border-top: 0; padding-top: 6px; }
.hodg-entry dd { margin: 0; }
.hodg-entry__term { grid-row: span 2; display: flex; flex-direction: column; gap: 4px; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }
.hodg-entry__full { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; line-height: 18px; letter-spacing: -0.02em; color: var(--label, #454545); }
.hodg-entry__def { font-size: 18px; line-height: 28px; color: var(--ink-soft, #1c1c1c); max-width: 62ch; }
.hodg-entry__more a { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink, #050507); text-underline-offset: 4px; }
.hodg-entry:target { background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #f2994a) 16%, transparent), transparent 70%); }
@media (max-width: 760px) {
	.hodg-letter, .hodg-entry { grid-template-columns: minmax(0, 1fr); }
	.hodg-entry__term { grid-row: auto; }
}