/* Per-app theme tokens (the app's dark/light palette via light-dark()),
   moved here so the shared css/general.css can be app-agnostic. */
/* Theme tokens via CSS light-dark(): each token is declared once as
   light-dark(<light>, <dark>) and resolves off the element's `color-scheme`.
   "system" leaves color-scheme: light dark (follows the OS); the data-theme
   overrides below force one or the other. The accent comes from
   css/identity.css; light uses the darker red for contrast on white.
   Keep the light/dark --bg in sync with THEME_COLOR in js/theme.js. */
:root {
	color-scheme: light dark;

	--bg:           light-dark(#f7f4f4, #0e0e12);
	--bg-grad-top:  light-dark(#f6dde0, #2a0e14);
	--surface:      light-dark(#ffffff, #16161d);
	--surface-2:    light-dark(#f3eeee, #1f1f29);
	--surface-3:    light-dark(#e9e2e3, #2a2a36);
	/* Text fields read as a lighter well than the page behind them — see the
	   modal override, where the page is already --surface and the relationship
	   has to flip to stay visible. */
	--input-bg:     light-dark(#ffffff, #24242f);
	--text:         light-dark(#171112, #f4f4f6);
	--text-dim:     light-dark(#685a5c, #a0a0ad);
	--text-faint:   light-dark(#958a8b, #6c6c79);
	--color-primary-on-surface:     light-dark(var(--color-primary-700), var(--color-primary-400));
	--color-primary-grad:  linear-gradient(135deg,
		light-dark(var(--color-primary-dark), var(--color-primary)) 0%,
		light-dark(var(--color-primary), var(--color-primary-400)) 100%);
	--border:       light-dark(#e5dcdd, #2a2a36);
	--danger:       light-dark(#dc2626, #ef4444);
	--nav-bg:       light-dark(rgba(247, 244, 244, 0.9), rgba(14, 14, 18, 0.92));
	--nav-h:        62px;
}

/* ─── Page headers ──────────────────────────────────────────────────────── */
.page-title {
	font: var(--font-h3);
	margin: var(--space-2xs) 0 var(--space-m);
}
.section-title {
	font: var(--font-h5);
	margin: var(--space-l) 0 var(--space-s);
}
/* Brand on the start edge, actions (if any) on the end: the 1fr track is what
   pushes them apart. */
.top-bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "brand end";
	align-items: center;
	gap: var(--space-s);
	margin-bottom: var(--space-m);

	& .brand { grid-area: brand; }
	& .top-bar-end { grid-area: end; }
}
.top-bar .brand {
	font: var(--font-h4);
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-xs);
}
/* Icons are inline SVG (js/icons.js) carrying class="icon". Sizing is by
   font-size — the svg is 1em square — so the `.icon { font-size: … }` rules
   throughout this file (and root-app.css / buttons.css) set icon sizes, and
   color comes through `fill: currentColor`. 24px is the default. There is no
   icon font: this class used to be `.ms` (Material Symbols), which read as a
   font hook long after the font was gone. */
svg.icon {
	width: 1em;
	height: 1em;
	font-size: 24px;
	fill: currentColor;
	vertical-align: -0.15em;
	flex-shrink: 0;
}

.top-bar .brand .icon { color: var(--color-primary); font-size: 26px; }

.icon-btn {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	cursor: pointer;
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn .icon { font-size: 22px; }
/* Toggle-style icon button (aria-pressed). */
.icon-btn.on {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.link-btn {
	background: none;
	border: none;
	color: var(--text-dim);
	font: var(--font-body-medium-semibold);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	cursor: pointer;
	padding: var(--space-2xs) 0;
}
.link-btn:hover { color: var(--text); }
.link-btn .icon { font-size: 20px; }
.danger-text { color: var(--danger); }
.danger-text:hover { color: var(--danger); }

.play-btn {
	background: var(--color-primary-grad);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: var(--space-s) var(--space-l);
	font: var(--font-body-medium-bold);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
	white-space: nowrap;
}
.play-btn:active { transform: scale(0.97); }
.play-btn:disabled { background: var(--surface-3); color: var(--text-faint); cursor: not-allowed; }
.ghost-btn {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 999px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-medium-medium);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
}
.ghost-btn:hover { background: var(--surface-3); }

/* ─── Empty state ───────────────────────────────────────────────────────── */
.empty {
	text-align: center;
	color: var(--text-dim);
	padding: 60px var(--space-l);
}
.empty .icon { font-size: 54px; color: var(--surface-3); margin-bottom: var(--space-s); }
.empty p { margin: var(--space-2xs) 0; }

/* ─── Settings ──────────────────────────────────────────────────────────── */
.settings-list { display: grid; gap: var(--space-xs); }
/* Icon, label, then an optional trailing state — named so a row without a state
   still lines its icon and label up with the rows that have one (the shared
   button base would otherwise centre them). */
.settings-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "icon label state";
	align-items: center;
	justify-items: start;
	gap: var(--space-s);
	text-align: start;
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-m);
	font: var(--font-body-large-medium);
	cursor: pointer;
}
.settings-item:hover { background: var(--surface-3); }
.settings-item:disabled { opacity: 0.6; cursor: default; }
.settings-item .icon { grid-area: icon; font-size: 22px; color: var(--text-dim); }
.settings-item > span:not(.settings-state) { grid-area: label; }
/* Trailing state label (e.g. how many passkeys the account has). */
.settings-state {
	grid-area: state;
	font: var(--font-body-medium-bold);
	color: var(--color-primary-on-surface);
}
.settings-item[aria-checked="false"] .settings-state { color: var(--text-faint); }
.settings-hint { margin: var(--space-xs) var(--space-2xs) 0; font: var(--font-body-small-regular); }

.settings-foot {
	margin-top: var(--space-xl);
	text-align: center;
	font: var(--font-body-small-regular);

	/* Which shell snapshot this device booted from — see js/version.js. */
	.settings-version {
		display: block;
		margin-top: var(--space-2xs);
		color: var(--text-faint);
		font-variant-numeric: tabular-nums;
	}
}

/* ─── Segmented control (theme toggle) ──────────────────────────────────── */
.seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--space-2xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--space-2xs);
	margin-bottom: var(--space-m);

	& button {
		border: none;
		background: none;
		color: var(--text-dim);
		font: var(--font-body-small-semibold);
		padding: var(--space-xs);
		border-radius: 9px;
		cursor: pointer;
		display: grid;
		grid-auto-flow: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);

		& .icon { font-size: 18px; }
		&.on { background: var(--color-primary); color: #fff; }
	}
}

/* ─── Auth page ─────────────────────────────────────────────────────────── */
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-l); }
.auth-card {
	width: 100%;
	max-width: 380px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: var(--space-2xl) var(--space-xl);
}
.auth-logo {
	width: 72px; height: 72px;
	border-radius: 20px;
	background: var(--color-primary-grad);
	display: grid; place-items: center;
	margin: 0 auto var(--space-l);
	color: #fff;
}
.auth-logo .icon { font-size: 40px; }
.auth-title { font: var(--font-h3); margin: 0 0 var(--space-xs); }
.auth-subtitle { color: var(--text-dim); margin: 0 0 var(--space-xl); font: var(--font-body-medium-regular); }
.auth-actions { display: grid; gap: var(--space-s); }
.auth-hint {
	color: var(--text-dim);
	font: var(--font-body-small-regular);
	margin: 0 0 var(--space-l);
	line-height: 1.5;

	/* Losing a local-only account is the one consequence worth colouring for. */
	&.auth-hint--warn {
		color: var(--danger);
		background: color-mix(in oklch, var(--danger) 8%, transparent);
		border-radius: 12px;
		padding: var(--space-s);
		text-align: start;
	}
}
.auth-error { color: var(--danger); font: var(--font-body-small-medium); margin-top: var(--space-m); }

/* ─── Account recovery (Settings → Your account) ──────────────────────────── */
/* Shown only while an account has no passkey and no linked device, i.e. while
   the session token on this device is the only way back into the account. */
.settings-warn {
	margin: 0 var(--space-2xs) var(--space-s);
	padding: var(--space-s) var(--space-m);
	border-radius: 12px;
	background: color-mix(in oklch, var(--danger) 8%, transparent);
	border: 1px solid color-mix(in oklch, var(--danger) 25%, transparent);
	color: var(--danger);
	font: var(--font-body-small-regular);
	line-height: 1.5;
}

/* ─── Pairing QR dialog ───────────────────────────────────────────────────── */
.qr-backdrop {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	padding: var(--space-l);
	background: rgb(0 0 0 / 0.55);
}
.qr-card {
	inline-size: min(340px, 100%);
	display: grid;
	gap: var(--space-m);
	justify-items: center;
	text-align: center;
	padding: var(--space-xl);
	border-radius: 20px;
	background: var(--surface);
	border: 1px solid var(--border);
}
.qr-title { font: var(--font-h4, var(--font-h3)); margin: 0; }
.qr-code {
	inline-size: min(240px, 60vmin);
	aspect-ratio: 1;
	padding: var(--space-s);
	border-radius: 12px;

	/* A scanner needs real contrast and a light quiet zone, so this block keeps
	   its own colours in both themes rather than inheriting the surface. */
	background: #fff;
	color: #000;

	& svg { inline-size: 100%; block-size: 100%; display: block; }
}
.qr-actions { display: grid; grid-auto-flow: column; gap: var(--space-s); }

/* ─── Library ───────────────────────────────────────────────────────────── */
/* The host is the layout container (light DOM, no wrapper): top bar, then the
   library body, which fills what's left of <main>. `main >` outranks the
   generic `main > * { display: block }` in root-app.css. */
main > library-page {
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: start;

	& .empty {
		align-self: center;
		display: grid;
		justify-items: center;

		& h2 { font: var(--font-h4); color: var(--text); margin: 0 0 var(--space-2xs); }
	}
}