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

:root {
	/* Tool chrome — the dark "dashbirb" shell every tab sits in. */
	--bg:       #0a0b0e;
	--bg2:      #0f1117;
	--bg3:      #15171f;
	--border:   #1e2130;
	--text:     #c9d1e8;
	--dim:      #596380;
	--accent:   #009DFF; /* birb blue — every control on the site reads this one token */
	--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;
}

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

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

/* ── Shared controls ───────────────────────────────────────────────────────────
   One look per control, for every tab. Components add only LAYOUT (width, height,
   margin, flex) on top; colours, type, padding and radius live here. */

/* Monospace for numbers, ids and paths. */
.mono {
	font-family: var(--font-mono);
}

/* Section heading in a sidebar or panel: "ITERATIONS", "LAYERS", "Screenshots". */
.section-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--dim);
}

/* Headings: a page's section (.h2) and the titles under it (.h3), e.g. App's feature and states. */
.h2 {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}
.h3 {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
}

/* Filled secondary button — sidebar and panel actions. */
.btn {
	padding: 4px 9px;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--text);
	background: var(--bg3);
	border: 1px solid var(--border);
}
.btn:hover:not(:disabled) {
	color: #fff;
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Outline button — the gallery tiles' and lightboxes' actions (copy, save, → mp4…).
   Dim on the grid, where a row of them sits under every tile and should stay quiet. */
.btn-ghost {
	padding: 2px 8px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 11px;
	/* A <button> ignores the page's line-height unless told; without this a "copy" button
	   sat 4 px shorter than the <a> "download" beside it. */
	line-height: inherit;
	color: var(--dim);
	text-decoration: none;
}
.btn-ghost:hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--accent);
}
.btn-ghost:disabled {
	opacity: 0.6;
	cursor: progress;
}
/* In a lightbox the actions are the point, so they get the readable text colour: --dim on
   the near-black scrim is ~3.3:1, under the 4.5:1 that 11 px text needs. Placed before
   .stale / .bad so a state colour still wins, and hover (more specific) still turns accent. */
.lightbox .btn-ghost {
	color: var(--text);
}
.btn-ghost.stale {
	border-color: var(--yellow);
	color: var(--yellow);
}
.btn-ghost.bad {
	border-color: var(--red);
	color: var(--red);
}
/* A status toggle: a dot before the label, hollow while off; `.live` turns it green and fills
   the dot, like an "online" badge (a task frame's Ready for dev in /app, 2026-10-21). */
.btn-ghost .dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 5px;
	border: 1px solid currentColor;
	border-radius: 50%;
	vertical-align: 1px;
}
.btn-ghost.live {
	border-color: color-mix(in srgb, var(--green) 55%, transparent);
	color: var(--green);
}
.btn-ghost.live .dot {
	background: currentColor;
}

/* The one main action of a page (Refresh, Download .svg). Size is the page's call. */
.btn-primary {
	border-radius: 7px;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
}
.btn-primary:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Inline text action: "back to live", "copy placement". */
.link {
	color: var(--accent);
	text-decoration: underline;
}
.link:disabled {
	color: var(--dim);
	text-decoration: none;
	cursor: default;
}

/* Frosted panel floating over the map. */
.glass {
	background: rgba(10, 11, 14, 0.82);
	border: 1px solid var(--border);
	backdrop-filter: blur(8px);
}

/* Yellow warning box inside a panel. Font size follows the panel. */
.callout-warn {
	padding: 6px 8px;
	border-radius: 6px;
	line-height: 1.5;
	color: var(--yellow);
	background: color-mix(in srgb, var(--yellow) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
}

/* A toggle's ON state — Inspect / Reference / Follow new in /app. */
.btn.on {
	color: var(--accent);
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
	background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
}

/* Compact data table — the design-system pages in /app (Colours, Text styles). */
.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	user-select: text;
}
.data-table th {
	padding: 0 16px 6px 0;
	text-align: left;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	color: var(--dim);
	border-bottom: 1px solid var(--border);
}
.data-table td {
	height: 32px;
	padding: 3px 16px 3px 0;
	vertical-align: middle;
	white-space: nowrap;
	color: var(--text);
	border-bottom: 1px solid var(--border);
}
.data-table td.mono {
	font-size: 12px;
}
.data-table td.dim {
	color: var(--dim);
}

/* "Sign in with Google" — the one button on /auth/login, in Google's own white style. */
.btn-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px;
	border-radius: 8px;
	background: #fff;
	color: #1f1f1f;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}
.btn-google:hover {
	background: #f1f3f4;
}

/* app.html's loading spinner: the site is client-only, so the page is empty while its code loads.
   A ring at the centre of the working area — under the 48-px header; on /app also right of the
   ~152-px sidebar and under the 48-px bar. routes/+layout.svelte removes it once the app mounts. */
.boot-loader {
	position: fixed;
	left: 50%;
	top: calc(50% + 24px);
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 2px solid color-mix(in srgb, var(--dim) 35%, transparent);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: boot-spin 0.8s linear infinite;
}
.boot-loader.in-app {
	left: calc(50% + 76px);
	top: calc(50% + 48px);
}
@keyframes boot-spin {
	to {
		transform: rotate(360deg);
	}
}