/* [domain_age_checker] — small additions on top of tools.css. */

.hat .hat-age-hero .hat-hero-title {
	font-size: clamp(1.35rem, 3.4vw, 1.85rem);
}

.hat .hat-age-dates .hat-stat-value {
	font-size: 1.15rem;
}

.hat .hat-age-rel {
	margin-top: 2px;
	font-weight: 700;
}

.hat .hat-age-tile--warn {
	background: var(--hat-warn-soft);
	border-color: rgba(194, 120, 3, 0.25);
}

.hat .hat-age-tile--danger {
	background: var(--hat-danger-soft);
	border-color: rgba(224, 45, 60, 0.25);
}

.hat .hat-age-tile--warn .hat-age-rel { color: var(--hat-warn); }
.hat .hat-age-tile--danger .hat-age-rel { color: var(--hat-danger); }

.hat .hat-age-ns {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hat .hat-age-ns li {
	margin: 0;
	padding: 6px 12px;
	background: var(--hat-surface-2);
	border: 1px solid var(--hat-border);
	border-radius: 10px;
	overflow-wrap: anywhere;
}