*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--bg:       #0a0b0e;
	--bg2:      #0f1117;
	--bg3:      #15171f;
	--border:   #1e2130;
	/*
	 * THE CHART CARD — and the totals cards that sit with it. Every chart in the dashboard and
	 * every headline card beside one paints from these two and nothing else (operator,
	 * 2026-09-04: "use this background style for all charts … on all my pages", "this cards also").
	 *
	 * ONE surface for a chart and its own totals row, on purpose: they are one block, and two
	 * greys a few points apart read as a rendering accident rather than a distinction.
	 *
	 * A card LIGHTER than the page ground is the point: at #0d1117 on a #0a0b0e page the card
	 * barely reads as a card and the plot floats. The App, Ads and Rev tabs already had this via
	 * their own `--surface`; MetricChart, SubsChart and the two sandbox charts had drifted to a
	 * hardcoded #0d1117, so the same dashboard showed two chart styles depending on the tab.
	 *
	 * ⚠️ `--chart-surface` is ALSO the value-label halo — labels are stroked in the card colour so
	 * the digits stay legible over a line. Change one and the other must move with it, or every
	 * label gets outlined in the old colour. Grep `--chart-surface` before editing.
	 */
	--chart-surface: #161b22;
	--chart-border:  #30363d;
	--text:     #c9d1e8;
	--dim:      #596380;
	--accent:   #1877f2;
	--green:    #3ecf8e;
	--yellow:   #f5a623;
	--red:      #ff4d4d;
	--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
	--font-mono: 'SFMono-Regular', 'Fira Code', 'Consolas', monospace;
}

html,
body {
	height: 100%;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
 * THE HEADING SCALE — one per level, on every tab (operator, 2026-10-14: "we have structure like
 * h1, h2, h3 … use the same here"). Pulse's sizes, because Pulse is the tab that read right:
 *
 *   h1 — the page title (one per tab)                 46px / 600
 *   h2 — a section: a group of charts or tables        20px / 650
 *   h3 — a card's own title, inside or above the card  14px / 650
 *
 * Before this each tab set its own: page titles ran 15–46px and section titles 13.5–22px, so
 * General's "Installs" section was smaller than Pulse's card titles. A component sets only
 * MARGINS on its headings — never size, weight or colour — or the drift comes back one tab at a
 * time. Two exceptions, both deliberate: RevChart's card title (`.t`, a span at the h3 size) and
 * the Monthly Report, which nests whole tabs and shifts their levels down one.
 */
h1 {
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.06;
	color: #e8eaf6;
}
h2 {
	font-size: 20px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: #e8eaf6;
}
h3 {
	font-size: 14px;
	font-weight: 650;
	line-height: 1.3;
	color: var(--text);
}
@media (max-width: 600px) {
	h1 {
		font-size: 26px;
	}
	h2 {
		font-size: 18px;
	}
}

input,
select,
textarea,
button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}