/* The auth framework's pages. Every colour a --au-* token; a host maps its own design
   tokens onto them (the --surface-1 / --text-primary names of papp_libs' notes are read
   when there), dark and light. */

:root {
	--au-bg: var(--surface-page, #f4f6fa);
	--au-card: var(--surface-1, #ffffff);
	--au-sunken: var(--surface-sunken, #eef1f6);
	--au-text: var(--text-primary, #1c2230);
	--au-text2: var(--text-secondary, #4b5466);
	--au-muted: var(--text-muted, #7a8396);
	--au-border: var(--border, #d6dbe5);
	--au-accent: var(--series-1, #4f46e5);
	--au-on-accent: #fff;
	--au-ok: #15803d;
	--au-bad: #b91c1c;
	--au-radius: var(--radius, 10px);
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--au-bg: var(--surface-page, #0f1117);
		--au-card: var(--surface-1, #181a20);
		--au-sunken: var(--surface-sunken, #23262f);
		--au-text: var(--text-primary, #e2e4e9);
		--au-text2: var(--text-secondary, #9ca0ab);
		--au-muted: var(--text-muted, #6b7080);
		--au-border: var(--border, #2e3140);
		--au-accent: var(--series-1, #6366f1);
		--au-ok: #4ade80;
		--au-bad: #f87171;
	}
}

body.au-page {
	margin: 0;
	min-height: 100vh;
	background: var(--au-bg);
	color: var(--au-text);
	font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
	display: grid;
	place-items: start center;
	padding: 8vh 16px 32px;
	box-sizing: border-box;
}
.au-card, .au-account { width: min(380px, 100%); box-sizing: border-box; padding: 24px; background: var(--au-card); border: 1px solid var(--au-border); border-radius: calc(var(--au-radius) + 2px); }
.au-account { width: min(640px, 100%); display: flex; flex-direction: column; gap: 18px; }
.au-account.au-embed { border: 0; background: none; padding: 0; width: 100%; }
body.au-page:has(.au-embed) { padding: 12px; place-items: start stretch; background: transparent; }
.au-brand { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 0 0 6px; }
h3 { font-size: 14px; margin: 14px 0 6px; }
.au-sub, .au-hint { margin: 0 0 8px; color: var(--au-text2); font-size: 13px; }
.au-hint { color: var(--au-muted); font-size: 12px; margin-top: -4px; }
form { display: flex; flex-direction: column; gap: 8px; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--au-text2); }
input, select { font: 14px "Segoe UI", system-ui, sans-serif; padding: 7px 10px; border: 1px solid var(--au-border); border-radius: calc(var(--au-radius) - 3px); background: var(--au-sunken); color: var(--au-text); }
input:focus, select:focus { outline: 2px solid var(--au-accent); outline-offset: 0; border-color: var(--au-accent); }
button, .au-btn { font: inherit; padding: 7px 12px; border: 1px solid var(--au-accent); border-radius: calc(var(--au-radius) - 3px); background: var(--au-accent); color: var(--au-on-accent); cursor: pointer; text-decoration: none; text-align: center; }
button:disabled { opacity: 0.6; cursor: default; }
.au-mini { padding: 3px 8px; font-size: 12px; background: none; color: var(--au-text2); border-color: var(--au-border); }
.au-err, .au-note { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--au-bad); }
.au-note { color: var(--au-text2); }
.au-ok { color: var(--au-ok) !important; }
.au-bad { color: var(--au-bad) !important; }
.au-link { color: var(--au-accent); font-size: 13px; }
.au-sec { padding-bottom: 14px; border-bottom: 1px solid var(--au-border); }
.au-sec:last-child { border-bottom: 0; }
.au-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.au-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.au-list li > .au-setpw { flex-basis: 100%; }
.au-mail { font-weight: 560; overflow-wrap: anywhere; }
.au-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--au-sunken); color: var(--au-muted); }
.au-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.au-adv > summary { cursor: pointer; color: var(--au-text2); font-weight: 560; }