/* glossary-pages.css — /glossary term cards + letter nav (scoped .tt-glos) */

.tt-glos {
	--tt-glos-canvas: #0b0e11;
	--tt-glos-surface: #1e2329;
	--tt-glos-surface-2: #2b3139;
	--tt-glos-hairline: #2b3139;
	--tt-glos-fg: #ffffff;
	--tt-glos-muted: #707a8a;
	--tt-glos-brand: #2962ff;
}

body.theme--light .tt-glos {
	--tt-glos-canvas: #ffffff;
	--tt-glos-surface: #fafafa;
	--tt-glos-surface-2: #f5f5f5;
	--tt-glos-hairline: #eaecef;
	--tt-glos-fg: #000000;
	--tt-glos-muted: #707a8a;
}

.tt-glos {
	background: var(--tt-glos-canvas);
	color: var(--tt-glos-fg);
}

.tt-glos .inner-page-hero {
	padding-top: 160px !important;
}

@media (max-width: 991px) {
	.tt-glos .inner-page-hero {
		padding-top: 120px !important;
	}
}

.tt-glos .corp-page__title,
.tt-glos .corp-page__sub,
.tt-glos .corp-page__body > p {
	color: var(--tt-glos-fg);
}

.tt-glos .corp-page__sub,
.tt-glos .corp-page__body > p {
	color: var(--tt-glos-muted);
	font-size: 16px;
	line-height: 1.65;
}

/* Blue-bar accents — no icons or hero images */
.tt-glos__page-head {
	position: relative;
	padding-inline-start: 14px;
}

.tt-glos__page-head::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 3px;
	border-radius: 2px;
	background: var(--tt-glos-brand);
}

.tt-glos__intro {
	position: relative;
	margin: 0 0 4px;
	padding: 14px 16px 14px 18px;
	border: 1px solid var(--tt-glos-hairline);
	border-radius: 8px;
	background: var(--tt-glos-surface);
	color: var(--tt-glos-muted);
	font-size: 16px;
	line-height: 1.65;
}

.tt-glos__intro::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: rgba(41, 98, 255, 0.65);
}

.tt-glos__alpha {
	position: sticky;
	top: 72px;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 24px 0 28px;
	padding: 12px 14px;
	border: 1px solid var(--tt-glos-hairline);
	border-radius: 8px;
	background: var(--tt-glos-surface);
}

.tt-glos__alpha a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-glos-muted);
	text-decoration: none;
	transition: color 150ms ease, background 150ms ease;
}

.tt-glos__alpha a:hover,
.tt-glos__alpha a:focus-visible {
	color: var(--tt-glos-fg);
	background: var(--tt-glos-surface-2);
	text-decoration: none;
}

.tt-glos__alpha a.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.tt-glos__section {
	margin-bottom: 36px;
	scroll-margin-top: 140px;
}

.tt-glos__section-title {
	position: relative;
	margin: 0 0 16px;
	padding-inline-start: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--tt-glos-hairline);
	font-size: 20px;
	font-weight: 700;
	color: var(--tt-glos-fg);
}

.tt-glos__section-title::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.12em;
	bottom: calc(10px + 0.12em);
	width: 3px;
	border-radius: 2px;
	background: var(--tt-glos-brand);
}

.tt-glos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

.tt-glos__card {
	padding: 18px 20px;
	border: 1px solid var(--tt-glos-hairline);
	border-radius: 8px;
	background: var(--tt-glos-surface);
	scroll-margin-top: 140px;
}

.tt-glos__term {
	position: relative;
	margin: 0 0 8px;
	padding-inline-start: 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--tt-glos-fg);
}

.tt-glos__term::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 2px;
	border-radius: 1px;
	background: rgba(41, 98, 255, 0.45);
}

.tt-glos__def {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--tt-glos-muted);
}

.tt-glos__see {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--tt-glos-muted);
}

.tt-glos__see a {
	color: inherit;
	text-decoration: none;
}

.tt-glos__see a:hover,
.tt-glos__see a:focus-visible {
	color: var(--tt-glos-brand);
	text-decoration: underline;
}

.tt-glos .corp-page__body a {
	color: var(--tt-glos-muted);
	text-decoration: none;
}

.tt-glos .corp-page__body a:hover,
.tt-glos .corp-page__body a:focus-visible {
	color: var(--tt-glos-fg);
	text-decoration: underline;
}

.tt-glos__closing a {
	color: var(--tt-glos-muted);
	text-decoration: none;
}

.tt-glos__closing a:hover,
.tt-glos__closing a:focus-visible {
	color: var(--tt-glos-fg);
	text-decoration: underline;
}

.tt-glos__closing {
	position: relative;
	margin-top: 32px;
	padding: 18px 20px 18px 22px;
	border: 1px solid var(--tt-glos-hairline);
	border-radius: 8px;
	background: var(--tt-glos-surface);
	font-size: 15px;
	color: var(--tt-glos-muted);
}

.tt-glos__closing::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: rgba(41, 98, 255, 0.45);
}

/* ── Dark theme: pure black canvas, no gray cards ─ */
body.theme--dark .tt-glos {
	--tt-glos-canvas: #000000;
	--tt-glos-surface: transparent;
	--tt-glos-surface-2: rgba(255, 255, 255, 0.04);
	--tt-glos-hairline: rgba(255, 255, 255, 0.12);
	--tt-glos-fg: #ffffff;
	--tt-glos-muted: rgba(255, 255, 255, 0.72);
	background: #000000;
}

body.theme--dark .tt-glos .inner-page-hero,
body.theme--dark .tt-glos .corp-page {
	background: #000000;
}

body.theme--dark .tt-glos .tt-glos__intro,
body.theme--dark .tt-glos .tt-glos__alpha,
body.theme--dark .tt-glos .tt-glos__card,
body.theme--dark .tt-glos .tt-glos__closing {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.12);
}

body.theme--dark .tt-glos .tt-glos__alpha a:hover,
body.theme--dark .tt-glos .tt-glos__alpha a:focus-visible {
	background: rgba(255, 255, 255, 0.04);
}