/* suite-shell.css — one shell for every tcp.systems product.
   Namespaced under .tcp-suite so it can be dropped into any page without
   changing that product's own styles. Tokens fall back to sane values, so a
   product that defines --tcp-* picks them up and a product that does not still
   renders correctly. Colour-scheme aware; no fonts, no images, no JS. */

.tcp-suite {
	--tcp-suite-fg: var(--tcp-fg, #e9e9ee);
	--tcp-suite-dim: var(--tcp-fg-dim, #9aa0aa);
	--tcp-suite-bg: var(--tcp-bg-raised, #14161b);
	--tcp-suite-line: var(--tcp-line, #2a2e37);
	--tcp-suite-accent: var(--tcp-accent, #7aa2f7);
	--tcp-suite-ok: var(--tcp-ok, #3fb950);
	--tcp-suite-warn: var(--tcp-warn, #d29922);
	--tcp-suite-bad: var(--tcp-bad, #f85149);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 12px;
	font: 500 12px/1.4 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--tcp-suite-fg);
	background: var(--tcp-suite-bg);
	border-bottom: 1px solid var(--tcp-suite-line);
	overflow-x: auto;
	scrollbar-width: thin;
}
@media (prefers-color-scheme: light) {
	.tcp-suite {
		--tcp-suite-fg: var(--tcp-fg, #1b1d22);
		--tcp-suite-dim: var(--tcp-fg-dim, #5d6470);
		--tcp-suite-bg: var(--tcp-bg-raised, #f6f7f9);
		--tcp-suite-line: var(--tcp-line, #dcdfe5);
	}
}
.tcp-suite a { color: inherit; text-decoration: none; }
.tcp-suite :focus-visible { outline: 2px solid var(--tcp-suite-accent); outline-offset: 2px; border-radius: 4px; }

.tcp-suite__brand { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: var(--tcp-suite-fg); }
.tcp-suite__brand em { color: var(--tcp-suite-accent); font-style: normal; }

.tcp-suite__nav { min-width: 0; flex: 1 1 auto; overflow-x: auto; }
.tcp-suite__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tcp-suite__item { flex: 0 0 auto; }
.tcp-suite__link {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 8px; border-radius: 6px;
	color: var(--tcp-suite-dim); white-space: nowrap;
}
.tcp-suite__link:hover { color: var(--tcp-suite-fg); background: color-mix(in srgb, var(--tcp-suite-fg) 8%, transparent); }
.tcp-suite__link.is-current { color: var(--tcp-suite-fg); background: color-mix(in srgb, var(--tcp-suite-accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tcp-suite-accent) 40%, transparent); }
.tcp-suite__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tcp-suite-dim); flex: 0 0 auto; }
.tcp-suite__dot.is-up { background: var(--tcp-suite-ok); }
.tcp-suite__dot.is-down { background: var(--tcp-suite-bad); }
.tcp-suite__dot.is-stub, .tcp-suite__dot.is-unprobed { background: var(--tcp-suite-dim); }

.tcp-suite__status {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 8px; border-radius: 999px; white-space: nowrap;
	border: 1px solid var(--tcp-suite-line); color: var(--tcp-suite-dim);
	flex: 0 0 auto;
}
.tcp-suite__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tcp-suite-dim); }
.tcp-suite__status.is-ok .tcp-suite__status-dot { background: var(--tcp-suite-ok); }
.tcp-suite__status.is-warn .tcp-suite__status-dot { background: var(--tcp-suite-warn); }
.tcp-suite__status.is-bad .tcp-suite__status-dot { background: var(--tcp-suite-bad); }
.tcp-suite__status-detail { color: var(--tcp-suite-dim); font-weight: 400; }

.tcp-suite__account { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
.tcp-suite__account-name { color: var(--tcp-suite-dim); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.tcp-suite__signout {
	font: inherit; color: var(--tcp-suite-fg); cursor: pointer;
	background: transparent; border: 1px solid var(--tcp-suite-line);
	border-radius: 6px; padding: 3px 8px;
}
.tcp-suite__signout:hover { border-color: var(--tcp-suite-accent); color: var(--tcp-suite-accent); }

@media (max-width: 640px) {
	.tcp-suite { gap: 8px; padding: 6px 8px; }
	.tcp-suite__brand { display: none; }
	.tcp-suite__status-detail { display: none; }
}