/*
 * theme.css — Neerslag-o-Tron design tokens and shared treatments.
 * Tokens come from prototype variant D (ADR-0002).
 *
 * Class names here deliberately avoid Bootstrap's (.panel not .card,
 * .button not .btn): the app loads no Bootstrap CSS or JS, only its icons.
 */

:root {
	/* palette */
	--bg: #0b1016;
	--panel: #131b24;
	--line: #223040;
	--ink: #e8eef5;
	--muted: #7d8fa3;
	--accent: #4aa3ff;
	--on-accent: #04121f;
	--track: #1c2836;   /* empty space in a bar or gauge */
	--outline: #24313f; /* outline of an empty cell */

	/* palette — domain colours, named after the glossary (CONTEXT.md) so a
	   weather type, intensity or no-commute reason maps to var(--<value>) */
	--regen: #4aa3ff;
	--hagel: #9d7bff;
	--sneeuw: #d9e6f5;
	--droog: #2f7d54;
	--licht: #4aa3ff;
	--matig: #2a72d4;
	--zwaar: #1a4aa0;
	--thuiswerken: #f0a33c;
	--vrije_dag: #3ccfa5;
	--feestdag: #7bd16a;
	--ziek: #ef6f6f;

	/* type */
	--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-eyebrow: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-md: 14px;
	--fs-base: 16px;
	--fs-lg: 20px;
	--fs-xl: 26px;
	--fs-hero: 38px;

	/* spacing */
	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 20px;
	--s6: 24px;
	--s7: 32px;
	--s8: 36px;

	/* radii */
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 14px;
	--r-pill: 999px;

	/* chrome */
	--tabbar-h: 58px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: var(--fs-base)/1.5 var(--font);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a { color: inherit; }

h1 { font-size: var(--fs-xl); letter-spacing: -.02em; margin: 0 0 var(--s4); }
h2 {
	margin: 0 0 var(--s1);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--muted);
	font-weight: 600;
}
.eyebrow { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.muted { color: var(--muted); }

/* --- page frame ------------------------------------------------------- */

.page {
	flex: 1 0 auto;
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding: 0 var(--s5) var(--s7);
}

.site-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--fs-md);
	text-align: center;
	padding: var(--s4) var(--s5);
	/* clears the mobile tab bar */
	padding-bottom: calc(var(--s4) + var(--tabbar-h) + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
	.site-footer { padding-bottom: var(--s4); }
}

/* --- shared treatments ------------------------------------------------ */

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--s4) var(--s5);
}

.button {
	display: inline-block;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
	font-size: var(--fs-base);
	text-decoration: none;
	border: 1px solid transparent;
	padding: 11px var(--s5);
	border-radius: var(--r-md);
	cursor: pointer;
	white-space: nowrap;
}

.button:hover { background: #6cb6ff; }

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

.button-quiet:hover { background: var(--panel); }

.pill {
	display: inline-block;
	font-size: var(--fs-sm);
	padding: 5px var(--s3);
	border-radius: var(--r-pill);
	border: 1px solid var(--line);
	color: var(--muted);
	text-decoration: none;
}

.pill.on { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

:is(input, select, textarea) {
	width: 100%;
	background: var(--bg);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 10px var(--s3);
	font: inherit;
}

:is(input, select, textarea):user-invalid { border-color: var(--ziek); }
:is(input[type="checkbox"], input[type="radio"]) { width: auto; accent-color: var(--accent); }
label { display: block; font-size: var(--fs-md); color: var(--muted); margin-bottom: var(--s1); }

/* --- navigation: top bar (desktop) ------------------------------------ */

.topbar { border-bottom: 1px solid var(--line); padding: var(--s3) 0; margin-bottom: var(--s7); }

.topbar-inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 var(--s5);
	display: flex;
	align-items: center;
	gap: var(--s6);
}

.brand { font-weight: 700; letter-spacing: -.02em; text-decoration: none; }

.topbar nav { display: none; gap: 18px; margin-left: auto; font-size: var(--fs-md); }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }
.topbar nav a.on { color: var(--accent); font-weight: 600; }

.topbar .logout { margin-left: auto; color: var(--muted); text-decoration: none; font-size: var(--fs-md); }
.topbar .logout:hover { color: var(--ink); }
.topbar .whoami { display: none; color: var(--muted); font-size: var(--fs-md); }

@media (min-width: 768px) {
	.topbar nav { display: flex; }
	.topbar .logout { margin-left: 0; }
	.topbar .whoami { display: inline; }
}

/* --- navigation: bottom tab bar (mobile) ------------------------------ */

.tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	display: flex;
	background: var(--panel);
	border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
}

.tabbar a {
	flex: 1;
	min-height: var(--tabbar-h);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: var(--s2) var(--s1);
	color: var(--muted);
	text-decoration: none;
	font-size: var(--fs-xs);
}

.tabbar a i { font-size: var(--fs-lg); line-height: 1; }
.tabbar a.on { color: var(--accent); }
.tabbar a.on i { filter: drop-shadow(0 0 6px rgba(74, 163, 255, .35)); }

@media (min-width: 768px) {
	.tabbar { display: none; }
}

/* --- dashboard (variant D) -------------------------------------------- */

.section { border-top: 1px solid var(--line); padding-top: var(--s6); margin-top: var(--s7); }
.section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.sub { margin: 0 0 var(--s4); color: var(--muted); font-size: var(--fs-md); }

/* last ride + the action: at the top, because that button is used twice a day */
.last { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.last-body { min-width: 0; flex: 1; }
.last .day { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--s1); }
.last .ride { color: var(--muted); font-size: var(--fs-md); }
.last .ride + .ride { margin-top: 2px; }
.last .ride a { text-decoration: none; }
.last .ride a:hover { color: var(--ink); }
.last .note { font-style: italic; opacity: .8; }
.last .edit { opacity: .6; }

.years { display: flex; gap: var(--s1) 6px; flex-wrap: wrap; margin: var(--s6) 0; }

.hero { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.gauge {
	width: 168px;
	height: 168px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--track) 0);
}
.gauge div {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: var(--bg);
	display: grid;
	place-content: center; /* otherwise the two rows stretch and the number floats above the middle */
	gap: var(--s1);
	text-align: center;
}
.gauge b { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.03em; line-height: 1; display: block; }
.gauge small { font-size: var(--fs-md); }
.hero p { margin: 0; font-size: var(--fs-xl); line-height: 1.3; letter-spacing: -.02em; max-width: 26ch; }
.hero p b { color: var(--accent); }
.hero p span { color: var(--muted); display: block; font-size: var(--fs-md); letter-spacing: 0; margin-top: var(--s2); }

/* calendar: one cell per scheduled workday, colour from the domain tokens */
.yearblock { margin-bottom: 22px; }
.yearblock h3 { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--s2); font-weight: 600; letter-spacing: .1em; }
/* Weeks shrink until the width fits (54 weeks of 13px just don't fit);
   only below 7px per cell does the calendar scroll. */
.cal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(7px, 13px); gap: 3px; overflow-x: auto; padding-bottom: 6px; }
.week { display: grid; gap: 3px; }
.cell { aspect-ratio: 1; border-radius: 3px; background: transparent; }
.cell.gap, .legend i.gap { box-shadow: inset 0 0 0 1px var(--outline); }

.bar { display: flex; height: 22px; border-radius: var(--r-sm); overflow: hidden; background: var(--track); }
.bar span { display: block; }

.legend {
	list-style: none;
	display: flex;
	gap: var(--s5);
	flex-wrap: wrap;
	margin: var(--s3) 0 0;
	padding: 0;
	font-size: var(--fs-md);
	color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.legend.key { font-size: var(--fs-sm); gap: 6px 18px; }

.subsection { margin-top: 26px; }

.drops { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }
.drops i { font-size: var(--fs-xl); color: var(--outline); }
.drops i.on { color: var(--accent); }
.drops em { font-style: normal; color: var(--muted); font-size: var(--fs-md); margin-left: var(--s2); }
.drops em b { color: var(--ink); }

/* --- ritten: one row per day ------------------------------------------ */

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-bottom: var(--s6);
}

.filters .field { flex: 1 1 160px; min-width: 0; }
.filters .field-actions { display: flex; align-items: flex-end; gap: var(--s2); flex: 1 1 200px; }
.filters .field-actions .button { flex: 1; text-align: center; }

/* The left border carries the day state: --tone is a domain token from the
   palette above, set by commuteDayToken(). */
.dayrow {
	display: flex;
	gap: var(--s3);
	border-left: 3px solid var(--tone);
	border-radius: var(--r-sm);
	background: var(--panel);
	padding: var(--s2) var(--s3);
	margin-bottom: 5px;
}

.dayrow-off { background: transparent; }

.dayrow-date { width: 54px; flex: none; align-self: center; }
.dayrow-date b { display: block; font-size: var(--fs-md); white-space: nowrap; }
.dayrow-date span { color: var(--muted); font-size: var(--fs-xs); }

.dayrow-slots { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.dayrow-slot { min-width: 0; border-left: 1px solid var(--line); padding-left: var(--s3); }
.dayrow-slot-empty { color: var(--muted); font-size: var(--fs-sm); }
.dayrow-slot-empty .eyebrow { display: block; }
.dayrow-reason { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); }
/* A note on such a full-width line belongs right below it, not in a column. */
.dayrow-slots > .dayrow-note { grid-column: 1 / -1; }

.dayrow-ride { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); white-space: nowrap; }
.dayrow-edit { margin-left: auto; color: var(--muted); text-decoration: none; padding: 0 var(--s1); }
.dayrow-edit:hover { color: var(--ink); }

/* A long note must not stretch the row; the full text is in the title
   attribute. */
.dayrow-note {
	margin: 2px 0 0;
	color: var(--muted);
	font-size: var(--fs-xs);
	font-style: italic;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Below this width the directions stack and the empty column drops out:
   the same rendering, less width. */
@media (max-width: 520px) {
	.dayrow-slots { grid-template-columns: 1fr; gap: 2px; }
	.dayrow-slot-empty { display: none; }
}

.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: var(--s5); flex-wrap: wrap; }

/* --- forms: log and edit commute ------------------------------------- */

.field { margin-bottom: var(--s4); }
.field .hint { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s1); }

/* A checkbox sits beside its label, not below it. */
.field-check { display: flex; align-items: center; gap: var(--s2); }
.field-check label { margin: 0; color: var(--ink); }

.warn {
	border: 1px solid var(--thuiswerken);
	border-radius: var(--r-md);
	color: var(--thuiswerken);
	padding: var(--s2) var(--s3);
	font-size: var(--fs-md);
	margin-top: var(--s2);
}

.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
/* Delete is the only irreversible button: it stands apart, on the other side. */
.button-danger { background: transparent; color: var(--ziek); border-color: var(--ziek); }
.button-danger:hover { background: var(--ziek); color: var(--bg); }
.form-actions .button-danger { margin-left: auto; }

/* --- log commute: the block after saving ----------------------------- */
/* Says what was saved, what is set up next and where to correct it —
   compact, because during catch-up logging it comes back several times in a
   row and the form below it is the goal each time (#27). */

.saved {
	border: 1px solid var(--droog);
	border-left-width: 3px;
	border-radius: var(--r-md);
	background: var(--panel);
	padding: var(--s3) var(--s4);
	margin-bottom: var(--s5);
}

.saved-head { display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
.saved-head i { color: var(--droog); }
.saved-body { color: var(--muted); font-size: var(--fs-md); margin-top: var(--s1); }
.saved-body a { color: var(--accent); text-decoration: none; }
.saved-next { border-top: 1px solid var(--line); margin-top: var(--s3); padding-top: var(--s3); font-size: var(--fs-md); }

.saved-bad { border-color: var(--ziek); }
.saved-bad .saved-head i { color: var(--ziek); }

/* --- settings: the week strip ---------------------------------------- */
/* Seven days side by side read as a week; a grid of checkboxes doesn't.
   The checkbox itself lies invisibly over the tile — so click and keyboard
   simply stay those of a checkbox. */

.weekstrip { display: flex; gap: var(--s2); max-width: 560px; margin-bottom: var(--s5); }

.weekstrip label {
	flex: 1;
	position: relative;
	padding: var(--s3) var(--s1);
	text-align: center;
	font-size: var(--fs-md);
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	cursor: pointer;
	user-select: none;
	margin: 0; /* the global label rule sets a margin here that doesn't fit */
}

.weekstrip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.weekstrip label:has(:checked) {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}

.weekstrip label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- settings: the schedules, newest first --------------------------- */
/* Each one holds from its date until the next begins (#23). */

.schedule-from { max-width: 560px; }

.schedules { list-style: none; padding: 0; margin: 0; max-width: 560px; }

.schedule {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s3);
	padding: var(--s3) 0;
	border-bottom: 1px solid var(--line);
}

.schedule-date { display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
.schedule .button-danger { padding: var(--s2) var(--s3); }

/* --- login ------------------------------------------------------------ */
/* The only page without navigation: the card carries the brand name itself,
   and sits narrow and centred — on a phone it fills the width. */

.login { max-width: 360px; margin: var(--s7) auto 0; }
.login h1 { text-align: center; }
.login .button { width: 100%; }

/* The checkbox is the last field before the button and sets that gap itself. */
.login .field-check { margin-bottom: var(--s5); }

/* No tab bar on this page, so the footer doesn't need to leave room for it
   either. */
body:has(.login) .site-footer { padding-bottom: var(--s4); }