/* ══════════════════════════════════════════════════════════
   utilities.css — shared content helpers (.hbox, .dbox, .nlist).
   Extracted from style.css without changing declarations.
   ══════════════════════════════════════════════════════════ */

/* ── READABILITY / LAYOUT HELPERS ── */
.hbox {
	/* background: rgba(200, 168, 75, 0.07); */
	background: color-mix(in srgb, var(--text) 4%, transparent);
	/* border-left: 3px solid var(--accent2); */
	border-left: 3px solid var(--badge);
	border-radius: 0 6px 6px 0;
	padding: 10px 14px;
	margin: 10px 0;
	/* font-size: clamp(13.5px, 0.8vw, 50px); */
	/* font-size: clamp(13.5px, 0.8vw, 30px); */
	font-size: clamp(13.5px, 0.8vw, 20px);
	/* color: #888888; */
	color: var(--cbul);
	/* line-height: 1.5; */
}
.hbox b,
.hbox strong {
	/* color: var(--accent2); */
	color: var(--badge);
	font-weight: 700;
}
.hbox p + p {
	margin-top: 5px;
}

.hbox-g {
	background: rgba(100, 118, 97, 0.08);
	border-left: 3px solid var(--g);
	border-radius: 0 6px 6px 0;
	padding: 10px 14px;
	margin: 10px 0;
	font-size: clamp(13.5px, 0.8vw, 50px);
	color: var(--tdim);
	line-height: 1.15;
}
.hbox-g strong {
	color: var(--gl);
	font-weight: 700;
}
.hbox-g b {
	color: var(--accent);
	font-weight: 700;
}

.dbox {
	/* background: rgba(0, 0, 0, 0.32); */
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 12px 16px;
	margin: 10px 0;
	font-size: 12.5px;
	color: var(--tdim);
	line-height: 1.8;
}
.dbox b,
.dbox strong {
	/* color: var(--text); */
	color: var(--dimtitle);
	text-transform: uppercase;
	font-weight: 600;
}

.nlist {
	list-style: none;
	display: flex;
	flex-direction: column;
	padding-left: 0;
	padding-bottom: 10px;
}
.nlist > li {
	font-size: clamp(13.5px, 0.8vw, 20px);
	color: var(--tdim);
	line-height: 1.15;
	margin-top: 10px;
}
.nlist > li > .nn {
	/* color: var(--gl); */
	color: var(--bullbold);
	font-weight: 700;
	font-size: clamp(13.5px, 0.8vw, 20px);
	min-width: 18px;
	flex-shrink: 0;
	font-family: monospace;
	letter-spacing: 0;
}

/* ── Spacing / media helpers (replace repeated inline styles) ── */
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-media { border: none; pointer-events: none; }
.u-z50 { position: relative; z-index: 50; }
.u-object-top { object-position: top; }
.ni .nav-caret { font-size: 9px; margin-left: 2px; }

.cslbl.u-mb-8 { margin-bottom: 8px; }

.u-dim { color: var(--tdim); }