/*
 * The application's own pages: the course list, a course, and the account
 * settings. Loaded by the root base template.
 *
 * The sign-in page loads this too, and then system.css on top of it, so the
 * card and form components below are defined once and the sign-in page's own
 * stylesheet holds only what is peculiar to it — the backdrop and the centring.
 */

:root {
	--ink: #1a1a1a;
	--muted: #46566b;
	--paper: #fdfdfc;
	--blue: #008cff;
	--blue-ink: #0062b4;
	--line: rgba(16, 42, 67, 0.14);
	--card: #ffffff;
	--bad: #8c1d1d;
	--bad-bg: #fdecec;
	--good: #17603a;
	--good-bg: #e8f6ee;
}

body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	font: 16px/1.5 system-ui, sans-serif;
}

main {
	max-width: 46rem;
	margin: 0 auto;
	padding: 2rem 1rem 4rem;
}

a { color: var(--blue-ink); }

/* ── Chrome ──────────────────────────────────────────────────────────────── */

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--line);
	background: var(--card);
}

.brand {
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--ink);
}

.topnav {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.9375rem;
}

footer {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 1rem 2rem;
	color: var(--muted);
}

.page-title {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.crumb {
	margin: 0 0 1rem;
	font-size: 0.875rem;
}

.empty {
	color: var(--muted);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
	margin: 0 0 1.5rem;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	background: var(--card);
}

.card-title {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.card-meta {
	color: var(--muted);
	font-size: 0.875rem;
}

/* The line under a card's action that points somewhere else — the sign-in page
 * from the registration form, and back again. */
.card-note {
	margin: 1rem 0 0;
	text-align: center;
	font-size: 0.875rem;
	color: var(--muted);
}

.card-highlight {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.12);
}

/* The course list: cards that are entirely a link, so the whole tile is the
 * hit target rather than just the words in it. */
.cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.card-link { padding: 0; }

.card-link a {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.25rem;
	text-decoration: none;
	color: inherit;
}

.card-link:hover { border-color: var(--blue); }
.card-link a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.field {
	display: block;
	margin-bottom: 1rem;
}

.field-label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
}

.field-input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	background: #fff;
	font: inherit;
	color: inherit;
}

.field-input:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
	border-color: transparent;
}

/* The rule a field has to satisfy, said before it is broken rather than after.
 * It sits inside the label, under the control it is about. */
.field-note {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--muted);
}

.button {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.6875rem 1rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--blue);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.button:hover { background: var(--blue-ink); }
.button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.button[disabled] { opacity: 0.6; cursor: progress; }

.button-quiet {
	background: transparent;
	color: var(--blue-ink);
	border: 1px solid var(--line);
}

.button-quiet:hover { background: rgba(0, 140, 255, 0.08); }

/* A form control that has to read as a link, because the action behind it is a
 * POST and must not be reachable by following a URL. */
.inline { display: inline; }

.linkbutton {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--blue-ink);
	text-decoration: underline;
	cursor: pointer;
}

.linkbutton-bad { color: var(--bad); }

/* ── Messages ────────────────────────────────────────────────────────────── */

.alert {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.9375rem;
}

.alert-bad { background: var(--bad-bg); color: var(--bad); }
.alert-good { background: var(--good-bg); color: var(--good); }

/* An inline edit-and-submit pair inside a table cell: the field takes the room,
 * the action sits beside it. */
.rowform {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.rowform .field-input {
	min-width: 8rem;
	padding: 0.375rem 0.5rem;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.table th,
.table td {
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: baseline;
}

.table th {
	font-size: 0.8125rem;
	color: var(--muted);
}

.row-spent td { color: var(--muted); }

/* The one place a secret is ever printed. It wraps rather than scrolls, because
 * a key you cannot see all of is a key you will copy wrong. */
.secret {
	margin: 0 0 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	background: #f6f8fa;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.875rem;
	word-break: break-all;
	white-space: pre-wrap;
}

/* ── Outline ─────────────────────────────────────────────────────────────── */

/* A course's outline: headings under headings.
 *
 * Nesting is an indent driven by a custom property the template sets per row,
 * rather than one class per level, so an outline can nest as deeply as its
 * author likes without this file having anticipated the depth. */
.outline {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.outline-item {
	padding: 0.625rem 0 0.625rem calc(var(--depth, 0) * 1.5rem);
	border-bottom: 1px solid var(--line);
}

.outline-title {
	display: block;
	font-weight: 600;
}

/* Deeper headings are quieter: the indent says where a chapter sits, and the
 * weight says how much of the course it is. */
.outline-item[style*="--depth: 0"] .outline-title { font-size: 1.0625rem; }

.outline-subtitle {
	display: block;
	color: var(--muted);
	font-size: 0.9375rem;
}

/* Only ever rendered for someone who may edit the course — everyone else is
 * served an outline these were filtered out of. */
.outline-closed { opacity: 0.6; }

.outline-badge {
	display: inline-block;
	margin-top: 0.25rem;
	padding: 0.0625rem 0.375rem;
	border: 1px solid var(--line);
	border-radius: 0.25rem;
	color: var(--muted);
	font-size: 0.75rem;
}

/* ── Review ──────────────────────────────────────────────────────────────── */

/* A quiet line above the page's content, for something that is available rather
 * than something that happened. */
.notice {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}

/* What publishing one object would do. The three words are colour-coded, but
 * the word is always there: colour is the shortcut, not the message. */
.change {
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.change-create { color: var(--good); }
.change-update { color: var(--blue-ink); }
.change-delete { color: var(--bad); }