/* app.css — polished-but-discreet design system (master §4.14: neutral, unbranded).
   CSP is style-src 'self' with no 'unsafe-inline', so ALL presentation lives here;
   templates carry only semantic elements plus a handful of classes
   (.inline .album-name .page-wide .btn-danger .badge .upload-preview .hint + the pre-existing
   .due-item .due-title .proof-* .stepup .vault-grid +
   .sched-tabs .sched-tab .sched-panel .day-circle .sched-cap-note .sched-error .sched-help .sched-submit .sched-row). */

/* ---- tokens ---- */
:root {
	color-scheme: light dark;
	--bg: #f3f4f6;
	--surface: #ffffff;
	--text: #1d2530;
	--muted: #677081;
	--border: #d8dce3;
	--accent: #3f5fd7;
	--accent-contrast: #ffffff;
	--danger: #b3392e;
	--radius: 10px;
	--shadow: 0 1px 2px rgb(16 24 40 / 0.06);
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #14171c;
		--surface: #1d222a;
		--text: #e7eaef;
		--muted: #98a2b3;
		--border: #333a46;
		--accent: #7d96f5;
		--accent-contrast: #10131a;
		--danger: #e5756a;
		--shadow: 0 1px 2px rgb(0 0 0 / 0.35);
	}
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	font-family: system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	background: var(--bg);
	color: var(--text);
}
a { color: var(--accent); }
h1 { font-size: 1.3rem; margin: 1.25rem 0 0.75rem; }
em { color: var(--muted); }

/* ---- page chrome ---- */
body > header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding: 0.6rem 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
}
body > header > strong { font-size: 1rem; }
body > header nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
}
body > header nav a {
	color: var(--text);
	text-decoration: none;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
}
body > header nav a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
body > header nav form button {
	border: none;
	background: none;
	color: var(--muted);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
}
body > header nav form button:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

main {
	max-width: 46rem;
	margin-inline: auto;
	padding: 0 1rem 3rem;
}
main:has(.page-wide) { max-width: 72rem; }

/* login renders without the shell; its main is a narrow centered card column */
main.auth { max-width: 22rem; padding-top: 3rem; }

/* ---- cards: top-level sections, plus bare top-level lists/forms (review, sessions) ---- */
main > section, main > ul, main > form, .stepup {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin: 1rem 0;
	box-shadow: var(--shadow);
}
main h2 {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	margin: 0 0 0.6rem;
}
section > :last-child, main > ul > li:last-child { margin-bottom: 0; }

/* ---- lists as row stacks ---- */
main ul { list-style: none; margin: 0; padding: 0; }
main li {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--border);
}
main li:last-child { border-bottom: none; padding-bottom: 0; }
main li:first-child { padding-top: 0; }

/* ---- buttons ---- */
button {
	font: inherit;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 4px);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
button:disabled { opacity: 0.55; cursor: default; }
button:disabled:hover { border-color: var(--border); color: inherit; }
/* a block form's submit is the page's primary action; inline row buttons stay quiet */
form:not(.inline) > button[type="submit"] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-contrast);
}
form:not(.inline) > button[type="submit"]:hover { filter: brightness(1.08); }
.btn-danger, form:not(.inline) > button.btn-danger[type="submit"] {
	background: var(--surface);
	color: var(--danger);
	border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: var(--danger); color: var(--danger); }

/* ---- forms & fields ---- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select, textarea {
	font: inherit;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 4px);
	background: var(--surface);
	color: var(--text);
	max-width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
/* block forms: stacked labels with full-width controls */
form:not(.inline) > label { display: block; margin: 0 0 0.75rem; font-weight: 500; }
form:not(.inline) > label > input:not([type="checkbox"]):not([type="radio"]),
form:not(.inline) > label > select,
form:not(.inline) > label > textarea {
	display: block;
	width: 100%;
	margin-top: 0.25rem;
	font-weight: 400;
}
form:not(.inline) > button[type="submit"] { margin-top: 0.25rem; }
/* GET filter bars (vault) and inline row forms: compact flowing controls */
form[method="get"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.75rem 0;
}
/* an album row's name, separated from its inline rename/archive controls */
.album-name { margin-right: 0.5rem; font-weight: 500; }

.inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	vertical-align: middle;
	margin: 0.15rem 0.25rem 0.15rem 0;
}
.inline label { display: inline-flex; align-items: center; gap: 0.35rem; }
.inline input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.inline select { padding: 0.3rem 0.5rem; }
.inline button { padding: 0.3rem 0.7rem; }

fieldset {
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 2px);
	padding: 0.6rem 0.85rem;
	margin: 0.75rem 0;
}
legend { color: var(--muted); font-size: 0.8rem; padding: 0 0.35rem; }

/* ---- alerts ---- */
[role="alert"] {
	background: color-mix(in srgb, var(--danger) 10%, var(--surface));
	border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
	color: var(--danger);
	border-radius: calc(var(--radius) - 2px);
	padding: 0.6rem 0.85rem;
	margin: 0.75rem 0;
}
[role="alert"]:empty { display: none; }

/* ---- help text ---- */
/* form-level hints sit under a section heading; field-level hints (a <small>) sit under
   their control. Muted, secondary, never competing with the field labels themselves. */
.hint { display: block; color: var(--muted); font-size: 0.85rem; margin: 0.25rem 0 0.75rem; }
h2 + .hint, h1 + .hint { margin-top: -0.25rem; }
/* a field hint trailing its label hugs the control above it */
label + .hint { margin-top: -0.45rem; }
.inline .hint { margin: 0; }

/* ---- badges ---- */
.badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--muted);
	background: color-mix(in srgb, var(--muted) 14%, transparent);
	border-radius: 999px;
	padding: 0.1rem 0.55rem;
	vertical-align: middle;
}

/* ---- due items (dashboard) ---- */
.due-item form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
.due-item form input[type="text"] { flex: 1 1 12rem; }
.due-title { font-weight: 600; }

/* ---- step-up panel ---- */
.stepup { margin: 0.75rem 0; }
.stepup > p { margin-top: 0; color: var(--muted); }
section > .stepup { border: none; box-shadow: none; padding: 0; margin: 0; }

/* ---- proofs & media ---- */
.proof-photo { display: block; max-width: 100%; max-height: 22rem; border-radius: calc(var(--radius) - 2px); margin: 0.5rem 0; }
.proof-text { margin: 0.35rem 0; padding: 0.4rem 0.6rem; background: color-mix(in srgb, var(--muted) 8%, transparent); border-radius: calc(var(--radius) - 4px); }
.proof-none { color: var(--muted); font-style: italic; margin: 0.35rem 0; }
.upload-preview { display: block; max-width: 10rem; max-height: 10rem; border-radius: calc(var(--radius) - 4px); margin-top: 0.5rem; border: 1px solid var(--border); }

/* ---- vault grid & pagination ---- */
.vault-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.6rem;
}
.vault-grid a { display: block; aspect-ratio: 1; border-radius: calc(var(--radius) - 2px); overflow: hidden; border: 1px solid var(--border); }
.vault-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
main > nav { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 1rem 0; }
main > nav a, main > nav strong {
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	text-decoration: none;
}
main > nav strong { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* ---- me-time schedule tab form ---- */
.sched-submit { display: none; }
.js-ready .sched-submit { display: inline-block; }

.sched-tabs { display: flex; gap: 0.25rem; margin: 0.5rem 0; }
.sched-tab {
	background: var(--surface); color: var(--text);
	border: 1px solid var(--border); border-radius: var(--radius);
	padding: 0.4rem 0.9rem; cursor: pointer;
}
.sched-tab[aria-selected="true"] {
	background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
}

.sched-panel { margin: 0.5rem 0; }
.day-circles { display: flex; gap: 0.4rem; margin: 0.4rem 0; }
.day-circle {
	width: 2.2rem; height: 2.2rem; border-radius: 50%;
	border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.day-circle[aria-pressed="true"] {
	background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
}
.sched-quickpicks { display: flex; gap: 0.4rem; margin: 0.4rem 0; }

.sched-cap-note { color: var(--muted); font-size: 0.85rem; }
.sched-error { color: var(--danger); }
.sched-help { color: var(--muted); font-size: 0.9rem; }
.sched-row { margin-right: 0.5rem; }