.gpt-gate-status {
	--gg-status-accent: #475569;
	--gg-status-bg: #f8fafc;
	--gg-status-border: #cbd5e1;
	box-sizing: border-box;
	width: 100%;
	margin: 1.5rem auto;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--gg-status-border);
	border-inline-start: 5px solid var(--gg-status-accent);
	border-radius: 14px;
	background: var(--gg-status-bg);
	color: #172033;
	font: inherit;
	line-height: 1.8;
}

.gpt-gate-status *,
.gpt-gate-status *::before,
.gpt-gate-status *::after {
	box-sizing: border-box;
}

.gpt-gate-status--operational {
	--gg-status-accent: #087f5b;
	--gg-status-bg: #f0fdf8;
	--gg-status-border: #a7f3d0;
}

.gpt-gate-status--minor,
.gpt-gate-status--maintenance {
	--gg-status-accent: #9a6700;
	--gg-status-bg: #fffbeb;
	--gg-status-border: #fde68a;
}

.gpt-gate-status--major {
	--gg-status-accent: #b45309;
	--gg-status-bg: #fff7ed;
	--gg-status-border: #fed7aa;
}

.gpt-gate-status--critical {
	--gg-status-accent: #b42318;
	--gg-status-bg: #fff5f5;
	--gg-status-border: #fecaca;
}

.gpt-gate-status--unknown,
.gpt-gate-status--unavailable {
	--gg-status-accent: #475569;
	--gg-status-bg: #f8fafc;
	--gg-status-border: #cbd5e1;
}

.gpt-gate-status__header {
	display: grid;
	grid-template-columns: 0.85rem minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

.gpt-gate-status__indicator {
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	margin-top: 0.6rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--gg-status-accent);
	box-shadow: 0 0 0 2px var(--gg-status-accent);
}

.gpt-gate-status__eyebrow,
.gpt-gate-status__title,
.gpt-gate-status__summary,
.gpt-gate-status__meta,
.gpt-gate-status__notice,
.gpt-gate-status__no-incidents,
.gpt-gate-status__section-title {
	margin: 0;
}

.gpt-gate-status__eyebrow {
	color: #526176;
	font-size: 0.82rem;
	font-weight: 700;
}

.gpt-gate-status__title {
	margin-top: 0.1rem;
	color: #111827;
	font-size: clamp(1.15rem, 3vw, 1.45rem);
	font-weight: 800;
	line-height: 1.5;
}

.gpt-gate-status__summary {
	margin-top: 0.35rem;
	color: #334155;
}

.gpt-gate-status__incidents {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid color-mix(in srgb, var(--gg-status-accent) 25%, transparent);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.7);
}

.gpt-gate-status__section-title {
	font-weight: 800;
}

.gpt-gate-status__incidents ul {
	margin: 0.55rem 0 0;
	padding: 0 1.15rem 0 0;
}

.gpt-gate-status__incidents li + li {
	margin-top: 0.65rem;
}

.gpt-gate-status__incidents strong {
	display: block;
}

.gpt-gate-status__incidents span,
.gpt-gate-status__incidents time {
	display: inline-block;
	margin-inline-end: 0.65rem;
	color: #526176;
	font-size: 0.88rem;
}

.gpt-gate-status__no-incidents {
	margin-top: 1rem;
	color: #334155;
	font-weight: 650;
}

.gpt-gate-status__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-top: 1rem;
	color: #526176;
	font-size: 0.84rem;
}

.gpt-gate-status__notice {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--gg-status-border);
	color: #334155;
	font-size: 0.9rem;
}

.gpt-gate-status__official-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
	padding: 0.65rem 1rem;
	border: 2px solid var(--gg-status-accent);
	border-radius: 9px;
	background: var(--gg-status-accent);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	transition: filter 150ms ease, transform 150ms ease;
}

.gpt-gate-status__official-link:hover {
	color: #fff;
	filter: brightness(0.9);
	transform: translateY(-1px);
}

.gpt-gate-status__official-link:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 3px;
}

@media (max-width: 540px) {
	.gpt-gate-status {
		border-inline-start-width: 4px;
		border-radius: 11px;
	}

	.gpt-gate-status__meta {
		display: grid;
	}

	.gpt-gate-status__official-link {
		width: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gpt-gate-status__official-link {
		transition: none;
	}
}