/* SARSTREAM Lite — shared styles (base only).
   Per-page layout lives inline in player.html / dashboard.html. */

:root {
	--bg:        #0b0e13;
	--bg-elev:   #141821;
	--border:    #252a35;
	--fg:        #e8ecf2;
	--muted:     #8a92a3;
	--accent:    #4ea1ff;

	/* Metric thresholds */
	--ok:        #4caf50;
	--warn:      #f5a623;
	--bad:       #ef5350;

	/* Transparencies for overlays */
	--overlay-dim:  rgba(0, 0, 0, 0.55);
	--chrome-bg:    rgba(11, 14, 19, 0.78);

	--radius:    10px;
	--radius-sm: 6px;
	--gap:       12px;

	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
	font-family: var(--font-sans);
	background: var(--bg);
	color: var(--fg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior: none;
}

button {
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--fg);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 8px 14px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
button:hover { background: #1b2030; }
button:active { background: #22283a; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Threshold coloring */
.ok   { color: var(--ok);   }
.warn { color: var(--warn); }
.bad  { color: var(--bad);  }

.dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--muted);
	vertical-align: middle;
}
.dot.ok   { background: var(--ok);   box-shadow: 0 0 6px rgba(76,175,80,0.7); }
.dot.warn { background: var(--warn); }
.dot.bad  { background: var(--bad);  }

/* Card for metrics */
.card {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px;
}
.card h3 {
	margin: 0 0 10px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.kv {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 3px 0;
	font-size: 0.95rem;
}
.kv .k { color: var(--muted); }
.kv .v { font-family: var(--font-mono); }

/* Mono block */
.mono { font-family: var(--font-mono); }

/* Truncate */
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visually hidden but screenreader-accessible */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}