/*
 * Basisstijl van logger: mobile-first, systeemfont, geen CDN's en geen
 * externe fonts -- de CSP staat alleen de eigen origin toe en een
 * webfont van een derde partij zou daar stil op stuklopen.
 */

:root {
	--primair: #0f766e;
	--primair-donker: #115e56;
	--accent: #14b8a6;
	--achtergrond: #ffffff;
	--vlak: #f4f6f6;
	--tekst: #12211f;
	--tekst-zacht: #4a5b59;
	--rand: #d3dbda;
	/* Alleen voor onomkeerbare handelingen (account verwijderen). Donker
	   genoeg voor contrast op wit; de donkere variant staat hieronder. */
	--gevaar: #b42318;
	--tikdoel: 44px;
	/* Het palet van de gestapelde staaf en de kalender: acht kleuren die
	   ook naast elkaar nog uit elkaar te houden zijn, ontleend aan de
	   kleurenblind-veilige reeks van Okabe & Ito. Ze zijn NOOIT de enige
	   drager van betekenis -- elke cel draagt zijn keuze in de titel, de
	   staaf heeft een legenda en onder allebei staat dezelfde tabel.
	   Het aantal (acht) staat ook in web.Seriekleuren en in grafiek.js. */
	/* Okabe & Ito, de VOLLEDIGE reeks. De vorige set nam er vier van
	   over en verzon er vier bij; serie 0 en serie 5 waren daardoor
	   dezelfde blauwtint (ΔE 4), ook voor normaal zicht. Deze acht
	   zijn onderling te onderscheiden bij protanopie, deuteranopie en
	   tritanopie, en ze zijn in beide kleurschema's gelijk: het zijn
	   VLAKKEN en geen tekst, dus ze hoeven niet mee te dempen.
	   De tekstkleur per serie staat ernaast, want wit haalt op zes
	   van de acht het contrast niet. */
	--serie0: #0072b2;
	--serie0-tekst: #ffffff;
	--serie1: #e69f00;
	--serie1-tekst: #12211f;
	--serie2: #009e73;
	--serie2-tekst: #12211f;
	--serie3: #cc79a7;
	--serie3-tekst: #12211f;
	--serie4: #56b4e9;
	--serie4-tekst: #12211f;
	--serie5: #d55e00;
	--serie5-tekst: #12211f;
	--serie6: #f0e442;
	--serie6-tekst: #12211f;
	--serie7: #999999;
	--serie7-tekst: #12211f;
}

@media (prefers-color-scheme: dark) {
	:root {
		--primair: #14b8a6;
		--primair-donker: #0f766e;
		--accent: #5eead4;
		--achtergrond: #0d1413;
		--vlak: #16211f;
		--tekst: #e7efee;
		--tekst-zacht: #a6b7b4;
		--rand: #2a3a37;
		--gevaar: #f97066;
		/* Dezelfde reeks, opgelicht: op een bijna zwarte achtergrond
		   zakken de donkere varianten weg in het vlak. */
	}
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--tekst);
	background: var(--achtergrond);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.kop {
	padding: 1rem;
	border-bottom: 1px solid var(--rand);
}

.kop__naam {
	display: inline-flex;
	align-items: center;
	min-height: var(--tikdoel);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--primair);
	text-decoration: none;
}

.inhoud {
	flex: 1;
	width: 100%;
	max-width: 34rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 2.5rem;
}

h1 {
	margin: 0 0 1rem;
	font-size: 1.6rem;
	line-height: 1.25;
}

.uitleg {
	margin: 0 0 0.9rem;
	color: var(--tekst-zacht);
}

.aanmelden {
	margin-top: 1.75rem;
	padding: 1rem;
	background: var(--vlak);
	border: 1px solid var(--rand);
	border-radius: 0.75rem;
}

.widget__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.widget__veld {
	width: 100%;
	/* 16px voorkomt dat iOS bij focus inzoomt op het formulier. */
	font-size: 1rem;
	min-height: var(--tikdoel);
	padding: 0.6rem 0.75rem;
	color: var(--tekst);
	background: var(--achtergrond);
	border: 1px solid var(--rand);
	border-radius: 0.5rem;
}

.widget__veld:focus-visible,
.knop:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--tikdoel);
	margin-top: 0.75rem;
	padding: 0.6rem 1.25rem;
	font: inherit;
	font-weight: 600;
	/* De ACHTERGRONDKLEUR als tekstkleur en niet hardcoded wit: in het
	   donkere schema is --primair licht (#14b8a6), en wit daarop haalt
	   2,5:1 -- onder de 4,5:1 die tekst nodig heeft. var(--achtergrond) is
	   in het lichte schema wit (dus ongewijzigd, 5,5:1) en in het donkere
	   schema bijna zwart (7,5:1). Eén regel voor beide schema's. */
	color: var(--achtergrond);
	background: var(--primair);
	border: 0;
	border-radius: 0.5rem;
	text-decoration: none;
	cursor: pointer;
}

.knop:hover {
	background: var(--primair-donker);
}

.knop--terug {
	width: auto;
	background: transparent;
	color: var(--primair);
	border: 1px solid var(--primair);
}

.knop--terug:hover {
	background: var(--vlak);
}

/* De onomkeerbare handeling ziet er ook onomkeerbaar uit: een omlijnde
   knop in waarschuwingsrood, niet de gewone primaire knop. Zo is "mijn
   account verwijderen" niet per ongeluk dezelfde tik als "opslaan". */
.knop--gevaar {
	background: transparent;
	color: var(--gevaar);
	border: 1px solid var(--gevaar);
}

.knop--gevaar:hover {
	/* Zelfde reden als bij .knop: --gevaar is in het donkere schema licht
	   (#f97066) en wit daarop haalt 2,8:1. */
	color: var(--achtergrond);
	background: var(--gevaar);
}

.voet {
	padding: 1rem;
	border-top: 1px solid var(--rand);
	font-size: 0.85rem;
	color: var(--tekst-zacht);
	text-align: center;
}

.voet p {
	max-width: 34rem;
	margin: 0 auto;
}

@media (min-width: 40rem) {
	.knop {
		width: auto;
	}
}

/*
 * Hoofdscherm na het inloggen: de lijst met logs, de lege staat en het
 * sessiebeheer.
 */

.leeg {
	margin: 1.5rem 0;
	padding: 1.25rem;
	color: var(--tekst-zacht);
	background: var(--vlak);
	border: 1px dashed var(--rand);
	border-radius: 0.75rem;
}

.sessie,
.account {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rand);
}

.sessie h2,
.account h2 {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

.sessie form,
.account form {
	margin: 0;
}

.sessie .uitleg,
.account .uitleg {
	margin-top: 1rem;
	font-size: 0.9rem;
}

/* ---- Downloaden ---- */

.export {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rand);
}

.export h2 {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

/* De knoppen naast elkaar, met genoeg ruimte ertussen om op een telefoon
   niet de verkeerde te raken; de tikdoelen zelf komen van .knop. */
.export__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* ---- Lijst met logs op het hoofdscherm ---- */

.loglijst {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.loglijst__item {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem;
	margin-bottom: 0.6rem;
	background: var(--vlak);
	border: 1px solid var(--rand);
	border-radius: 0.75rem;
}

.loglijst__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.loglijst__naam {
	font-weight: 600;
	color: var(--tekst);
	text-decoration: none;
	/* Het hele blokje is aanraakbaar, ook met een korte naam. */
	min-height: var(--tikdoel);
	display: flex;
	align-items: center;
}

.loglijst__type {
	font-size: 0.85rem;
	color: var(--tekst-zacht);
}

.loglijst__pijlen {
	display: flex;
	gap: 0.35rem;
	flex-shrink: 0;
}

.loglijst__pijlen form {
	margin: 0;
}

.pijl {
	width: var(--tikdoel);
	height: var(--tikdoel);
	margin: 0;
	font-size: 1.1rem;
	color: var(--primair);
	background: var(--achtergrond);
	border: 1px solid var(--rand);
	border-radius: 0.5rem;
	cursor: pointer;
}

.pijl:disabled {
	color: var(--tekst-zacht);
	opacity: 0.4;
	cursor: default;
}

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

/* ---- Een type kiezen ---- */

.typelijst {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.typelijst__item {
	margin-bottom: 0.6rem;
}

.typelijst__knop {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-height: var(--tikdoel);
	padding: 0.8rem 1rem;
	color: var(--tekst);
	background: var(--vlak);
	border: 1px solid var(--rand);
	border-radius: 0.75rem;
	text-decoration: none;
}

.typelijst__knop:hover {
	border-color: var(--primair);
}

.typelijst__naam {
	font-weight: 600;
	color: var(--primair);
}

.typelijst__uitleg {
	font-size: 0.9rem;
	color: var(--tekst-zacht);
}

/* ---- Het formulier van een log ---- */

.logformulier {
	margin-top: 1.5rem;
	padding: 1rem;
	background: var(--vlak);
	border: 1px solid var(--rand);
	border-radius: 0.75rem;
}

.veld {
	margin-bottom: 1.25rem;
}

.widget__uitleg {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	color: var(--tekst-zacht);
}

.widget__veld--tekstvak {
	font-family: inherit;
	resize: vertical;
}

.veld__fout,
.fout {
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #b3261e;
}

@media (prefers-color-scheme: dark) {
	.veld__fout,
	.fout {
		color: #ffb4ab;
	}
}

.fout {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border: 1px solid currentColor;
	border-radius: 0.5rem;
}

.keuzegroep {
	margin: 0;
	padding: 0;
	border: 0;
}

.keuzegroep__optie {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	min-height: var(--tikdoel);
	padding: 0.25rem 0;
}

.keuzegroep__optie input {
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
	accent-color: var(--primair);
}

.keuzegroep__uitleg {
	color: var(--tekst-zacht);
	font-size: 0.85rem;
}

/* ---- Voorbeeld van de invoer ---- */

.voorbeeld {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rand);
}

.voorbeeld h2 {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

.invoer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0.75rem 0;
}

.invoer--getal {
	justify-content: space-between;
}

.invoer__knop {
	min-width: var(--tikdoel);
	min-height: var(--tikdoel);
	padding: 0 0.9rem;
	font: inherit;
	font-weight: 600;
	color: var(--primair);
	background: var(--achtergrond);
	border: 1px solid var(--primair);
	border-radius: 0.5rem;
}

/* Ja/nee en keuze hebben weinig, brede knoppen; de schaal heeft er veel
   smalle. Dat verschil staat hier en niet als extra class in de gedeelde
   knoprij-partial: het is vormgeving, en de partial gaat over WAT er
   gepost wordt. */
.invoer--janee .invoer__knop,
.invoer--keuze .invoer__knop {
	flex: 1 1 8rem;
}

.invoer__waarde {
	font-size: 1.5rem;
	font-weight: 700;
}

.invoer__eenheid {
	font-size: 1rem;
	font-weight: 400;
	color: var(--tekst-zacht);
}

.invoer__labels {
	display: flex;
	justify-content: space-between;
	margin: 0;
	font-size: 0.85rem;
	color: var(--tekst-zacht);
}

.invoer__duurveld {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.invoer__duurveld .widget__veld {
	width: 4.5rem;
}

.invoer__duurlabel {
	color: var(--tekst-zacht);
}

/* ---- Optielijst van een keuze-log ---- */

.optielijst {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.optielijst__regel {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--rand);
}

.optielijst__regel .widget__veld {
	flex: 1 1 10rem;
}

.optielijst__verbergen {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	min-height: var(--tikdoel);
	flex-shrink: 0;
}

.optielijst__verbergen input {
	width: 1.2rem;
	height: 1.2rem;
	accent-color: var(--primair);
}

/* Een rij waarvan de opgeslagen instellingen onleesbaar waren, en de
   melding in de plaats van een voorbeeld dat niet te tekenen is. */

.loglijst__kapot,
.invoer__melding {
	display: block;
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: #b3261e;
}

@media (prefers-color-scheme: dark) {
	.loglijst__kapot,
	.invoer__melding {
		color: #ffb4ab;
	}
}

/* ---- Invoeren op het hoofdscherm ---- */

/* De widget staat op een eigen regel onder naam en pijltjes: op een
   telefoon van 390 px past hij niet naast de tekst, en de knoppen moeten
   groot blijven (44 px tikdoel). */
.loglijst__item {
	flex-wrap: wrap;
}

.invoerform {
	flex: 1 1 100%;
	margin: 0;
}

.invoerform--bezig {
	opacity: 0.6;
}

/* Kort groen randje als bevestiging dat het opgeslagen is: de pagina
   herlaadt niet, dus zonder signaal is er niets te zien (spec, story 42). */
.invoerform--gelukt .invoer {
	outline: 2px solid var(--primair);
	outline-offset: 4px;
	border-radius: 0.5rem;
}

.invoerform__fout {
	margin: 0.25rem 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #b3261e;
}

.invoerform__extra {
	margin-top: 0.4rem;
	font-size: 0.9rem;
}

.invoerform__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tikdoel);
	min-height: var(--tikdoel);
	color: var(--tekst-zacht);
	cursor: pointer;
}

.invoerform__label {
	display: block;
	margin: 0.4rem 0 0.15rem;
	font-size: 0.85rem;
	color: var(--tekst-zacht);
}

/* De waarde van een getal-log: zonder JavaScript een invoerveld, met
   JavaScript een knop die dat veld opent. */
.invoer__waarde {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.invoer__waardeknop {
	font: inherit;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--tekst);
	background: none;
	border: none;
	border-bottom: 1px dashed var(--rand);
	min-height: var(--tikdoel);
	padding: 0 0.3rem;
	cursor: pointer;
}

.invoer__veld {
	font: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	width: 6rem;
	min-height: var(--tikdoel);
	padding: 0 0.4rem;
	color: var(--tekst);
	background: var(--achtergrond);
	border: 1px solid var(--rand);
	border-radius: 0.5rem;
}

/* De bufferknop van een knoprij: hij vangt implicit submission (Enter) op
   zodat die niet de eerste echte knop indrukt. Visueel weg, maar NIET
   display:none en NIET disabled -- een uitgeschakelde knop is geen default
   button en dan schuift de rol door naar de knop die hij moest afschermen. */
.invoer__buffer {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* "Opslaan" staat als eerste submit-knop in de DOM (zodat Enter hem kiest
   en niet de − knop) en hoort visueel achteraan: order schuift hem daar
   naartoe zonder de DOM-volgorde aan te raken. */
.invoer__opslaan {
	order: 1;
	min-height: var(--tikdoel);
	padding: 0 1rem;
	font: inherit;
	font-weight: 600;
	color: var(--achtergrond);
	background: var(--primair);
	border: 1px solid var(--primair);
	border-radius: 0.5rem;
}

.loglijst__dag {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primair);
}

/* De laatste waarde naast de naam: dezelfde regel als de dagstatus. */
.loglijst__laatste {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tekst);
}

.uitleg--slot {
	font-size: 0.85rem;
}

/* ---- Geschiedenis van één log ---- */

.geschiedenis {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.geschiedenis__item {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0.75rem;
	margin-bottom: 0.6rem;
	background: var(--vlak);
	border: 1px solid var(--rand);
	border-radius: 0.75rem;
}

.geschiedenis__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.geschiedenis__wanneer {
	font-size: 0.85rem;
	color: var(--tekst-zacht);
	/* Cijfers onder elkaar, zodat een kolom datums niet danst. */
	font-variant-numeric: tabular-nums;
}

.geschiedenis__waarde {
	font-weight: 600;
}

.geschiedenis__notitie {
	font-size: 0.9rem;
	color: var(--tekst-zacht);
}

.geschiedenis__acties {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* De knoppen naast een entry zijn klein, maar houden het tikdoel van 44
   px: op een telefoon staat "verwijderen" naast "bewerken". */
.knop--klein {
	width: auto;
	margin-top: 0;
	padding: 0.4rem 0.8rem;
	font-size: 0.9rem;
}

.geschiedenis__voet {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* De gegevens van één entry op de verwijderbevestiging. Bewust NIET
   ".geschiedenis__samenvatting" genoemd: dat is de naam van de KPI-blokken
   die in een later ticket op de detailpagina komen, en die brengen hun
   eigen stijl mee. Een stijl die er alvast staat onder de naam van iets
   dat nog niet bestaat, is een stijl waarvan niemand meer weet wat hem
   aanstuurt. */
.entrygegevens {
	margin: 1rem 0;
	padding: 0.75rem;
	background: var(--vlak);
	border: 1px solid var(--rand);
	border-radius: 0.75rem;
}

.entrygegevens dt {
	font-size: 0.85rem;
	color: var(--tekst-zacht);
}

.entrygegevens dd {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.paginering {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.paginering__stand {
	font-size: 0.85rem;
	color: var(--tekst-zacht);
}

/* De knop die de waarde draagt die er NU staat, op het bewerkformulier.
   Alleen kleur is niet genoeg: aria-pressed staat er ook op, en een rand
   maakt het verschil zichtbaar in hoog-contrastmodus. */
.invoer__knop--actief {
	color: var(--achtergrond);
	background: var(--primair);
	border-color: var(--primair);
	box-shadow: inset 0 0 0 2px var(--achtergrond);
}

.invoerform--bewerken {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 1rem 0;
}

/* ── Grafiek en kerncijfers ─────────────────────────────────────────── */

.grafiek {
	margin: 1.5rem 0;
}

.grafiek__kop {
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

/* De kerncijfers op één rij, drie naast elkaar; op een smal scherm mogen
   ze afbreken in plaats van te knijpen. */
.kpi {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0;
}

/* Een kolom met de waarde ONDERAAN: de labels zijn niet even lang ("Ja in
   periode" tegenover "Langste reeks in periode") en met een gewone
   blokindeling begon elk cijfer op een andere hoogte, precies bij de rij
   die je juist naast elkaar wilt lezen. */
.kpi__cel {
	flex: 1 1 6rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--vlak);
	border-radius: 0.5rem;
	padding: 0.6rem 0.75rem;
}

/* Zachte tekst via de kleurvariabele en niet via opacity: de rest van de
   app doet het zo, en opacity dempt ook de achtergrond mee en is in
   forced-colors-modus onvoorspelbaar. */
.kpi__label {
	font-size: 0.75rem;
	color: var(--tekst-zacht);
	margin: 0;
}

.kpi__waarde {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0.15rem 0 0;
	/* Cijfers die onder elkaar staan lezen alleen rustig met vaste
	   breedte; anders springt de rij bij elke periodewissel. */
	font-variant-numeric: tabular-nums;
}

.kpi__eenheid {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--tekst-zacht);
}

/* Een vaste hoogte, want Chart.js meet zijn container. Zonder hoogte groeit
   de canvas bij elke resize-ronde door. */
.grafiek__vlak {
	position: relative;
	height: 16rem;
	margin-bottom: 0.75rem;
}

.grafiek__vlak canvas {
	max-width: 100%;
}

.grafiek__knoppen,
.periodeknoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

/* Twee knoprijen onder elkaar zagen er als één groep uit; de aria-labels
   bestaan alleen voor een schermlezer. Een streep maakt de scheiding ook
   zichtbaar. */
.grafiek__knoppen--vorm {
	padding-top: 0.5rem;
	border-top: 1px solid var(--rand);
	margin-bottom: 1rem;
}

/* De knoppen in deze rijen zijn OMLIJND en de gekozen knop is gevuld.
   Eerder droegen actief en inactief precies dezelfde achtergrond,
   tekstkleur en randbreedte -- gemeten nul verschil -- en kon je dus niet
   zien welke periode je bekeek. De inset-rand houdt het verschil ook
   staan in hoog-contrastmodus, net als bij .invoer__knop--actief. */
.grafiek__knoppen .knop,
.periodeknoppen .knop {
	background: transparent;
	color: var(--primair);
	border: 1px solid var(--primair);
}

.grafiek__knoppen .knop--actief,
.periodeknoppen .knop--actief {
	background: var(--primair);
	color: var(--achtergrond);
	border-color: var(--primair);
	box-shadow: inset 0 0 0 2px var(--achtergrond);
}

/* Alleen voor hulpsoftware: uit beeld, maar wel voorgelezen. */
.visueel-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* De dagreeks als tekst, het alternatief voor wie de canvas niet ziet. */
.grafiek__waarden,
.waardenlijst {
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

.grafiek__waarden summary,
.waardenlijst summary {
	min-height: var(--tikdoel);
	display: flex;
	align-items: center;
	color: var(--primair);
	cursor: pointer;
}

.grafiek__waarden table,
.waardenlijst table {
	width: 100%;
	border-collapse: collapse;
}

.grafiek__waarden th,
.grafiek__waarden td,
.waardenlijst th,
.waardenlijst td {
	padding: 0.3rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--rand);
}

.grafiek__waarden td,
.waardenlijst td {
	font-variant-numeric: tabular-nums;
}


/* ── Kalender en tijdlijn ───────────────────────────────────────────── */

/* Het dagraster van een keuze-log. Zeven kolommen die op maandag beginnen;
   de lege cellen vóór de eerste dag houden elke datum onder zijn weekdag.
   Geen canvas: een raster van cellen met hun datum erin is gewone HTML, en
   dan werkt hij ook zonder JavaScript. */
.kalender {
	margin-bottom: 0.75rem;
}

.kalender__weekdagen,
/* De legenda: gekleurd stipje met de naam ernaast, zodat kleur niet de
   enige drager is. */
.kalender__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.kalender__legenda li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.kalender__stip {
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 0.2rem;
	border: 1px solid var(--rand);
}

.kalender__raster {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.25rem;
}

.kalender__weekdagen {
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
}

/* ---- Heatmap (ja/nee) ---- */

/* Het dagraster is een TABEL en geen canvas: dertien rijen van zeven
   cellen, maandag eerst. Rijen zijn weken en niet andersom, want dertien
   kolommen naast elkaar passen niet op 390 pixels -- en een raster dat
   horizontaal scrolt, verbergt precies de vergelijking waar het voor
   bestaat. */
.heatmap {
	margin: 1.5rem 0;
}

.heatmap__kop {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
}

.heatmap__samenvatting {
	margin: 0.75rem 0;
}

.heatmap__raster {
	width: 100%;
	max-width: 22rem;
	border-collapse: collapse;
	table-layout: fixed;
}

.heatmap__weekdag {
	padding: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--tekst-zacht);
	text-align: center;
}

.kalender__dag,
.kalender__leeg {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.3rem;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

/* Een dag zonder entry is leeg en niet nul: hij houdt de vorm van het
   raster en draagt geen kleur. */
.kalender__dag {
	background: var(--vlak);
	color: var(--tekst-zacht);
	border: 1px solid var(--rand);
}

/* De tekstkleur hangt aan de SERIE en niet aan "gevuld". Eén vaste witte
   tekst haalde op zes van de acht paletkleuren de 4,5:1 niet (oranje
   3,87:1, groen 3,42:1, roze 3,06:1) -- en de cel met een onbekende optie
   kreeg wit op de paginakleur, 1,08:1: een dagnummer dat er niet meer was
   terwijl de tabel eronder wel een regel toonde. */
.kalender__dag--gevuld {
	border-color: transparent;
	font-weight: 600;
}

.kalender__dag--kleur0 { background: var(--serie0); color: var(--serie0-tekst); }
.kalender__dag--kleur1 { background: var(--serie1); color: var(--serie1-tekst); }
.kalender__dag--kleur2 { background: var(--serie2); color: var(--serie2-tekst); }
.kalender__dag--kleur3 { background: var(--serie3); color: var(--serie3-tekst); }
.kalender__dag--kleur4 { background: var(--serie4); color: var(--serie4-tekst); }
.kalender__dag--kleur5 { background: var(--serie5); color: var(--serie5-tekst); }
.kalender__dag--kleur6 { background: var(--serie6); color: var(--serie6-tekst); }
.kalender__dag--kleur7 { background: var(--serie7); color: var(--serie7-tekst); }

/* Een dag met een waarde die bij geen enkele optie meer hoort. Hij MOET
   opvallen -- dat is de cel die iets weet wat het register niet meer kent
   -- dus een eigen rand in plaats van een kleur die er niet is. */
.kalender__dag--onbekend {
	background: var(--vlak);
	color: var(--tekst);
	border: 2px dashed var(--tekst-zacht);
	font-weight: 600;
}

/* In hoog-contrastmodus overschrijft het systeem elke achtergrondkleur.
   Zonder een tweede drager is de kalender dan een kaal getallenraster:
   acht opties, één kleur. De randbreedte verschilt daarom per serie en
   blijft wél staan. */
@media (forced-colors: active) {
	.kalender__dag--gevuld {
		border-style: solid;
		border-color: currentColor;
	}

	.kalender__dag--kleur0, .kalender__dag--kleur4 { border-width: 1px; }
	.kalender__dag--kleur1, .kalender__dag--kleur5 { border-width: 2px; }
	.kalender__dag--kleur2, .kalender__dag--kleur6 { border-width: 3px; }
	.kalender__dag--kleur3, .kalender__dag--kleur7 { border-width: 4px; }
}

/* De tijdlijn van een tekst-log: geen grafiek, want aan een dagboekregel
   valt niets te tekenen. */
.tijdlijn {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.tijdlijn__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.6rem 0.75rem;
	margin-bottom: 0.4rem;
	background: var(--vlak);
	border-radius: 0.5rem;
	/* Een streep aan de kant maakt van losse blokken één lijn door de
	   tijd; zonder dat leest het als een stapel kaartjes. */
	border-left: 3px solid var(--primair);
}

.tijdlijn__wanneer {
	font-size: 0.75rem;
	color: var(--tekst-zacht);
	font-variant-numeric: tabular-nums;
}

.tijdlijn__tekst {
	/* Regeleindes van de gebruiker blijven staan: een dagboekregel met een
	   opsomming erin hoort niet als één alinea te lezen. */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.tijdlijn__notitie {
	font-size: 0.85rem;
	color: var(--tekst-zacht);
	overflow-wrap: anywhere;
}

.heatmap__week {
	width: 2.2rem;
	padding-right: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--tekst-zacht);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.heatmap__cel {
	padding: 1px;
	text-align: center;
}

/* Het vierkantje zelf. Vaste verhouding via aspect-ratio en niet via een
   hoogte in pixels: de cel schaalt dan mee met de breedte van het scherm
   en blijft vierkant. */
.heatmap__dag {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 0.2rem;
	border: 1px solid var(--rand);
	background: transparent;
}

/* De drie standen verschillen in VULLING en RAND en niet alleen in kleur:
   een raster dat alleen met tint werkt, is voor wie kleuren slecht ziet
   één grijs vlak. De tekst per cel staat er bovendien altijd bij (alleen
   voor hulpsoftware), en de legenda noemt ze bij naam. */
.heatmap__dag--ja {
	background: var(--primair);
	border-color: var(--primair);
}

.heatmap__dag--nee {
	background: var(--rand);
	border-color: var(--tekst-zacht);
}

/* De rand van een lege dag is --tekst-zacht en niet --rand: die laatste
   haalt op de achtergrond 1,3:1, en een stand die de legenda bij naam
   noemt is een grafisch element dat 3:1 nodig heeft. Nu 6,6:1 (licht) en
   7,9:1 (donker). */
.heatmap__dag--leeg {
	background: transparent;
	border-style: dashed;
	border-color: var(--tekst-zacht);
}

/* Een dag die nog moet komen is geen gemiste dag: geen rand, dus ook
   zichtbaar anders dan een lege dag -- die heeft er juist wel een. */
.heatmap__dag--toekomst {
	background: transparent;
	border-color: transparent;
}

/* In hoog-contrastmodus overschrijft het systeem achtergrond en randkleur;
   alleen de VORM blijft. Zonder deze regels worden ja en nee allebei een
   leeg vierkantje met een dunne rand, en houdt een ziende gebruiker 91
   gelijke vakjes over -- de tekst per cel is alleen voor hulpsoftware.
   Dezelfde truc als bij .grafiek__knoppen .knop--actief. */
@media (forced-colors: active) {
	.heatmap__dag {
		border-style: solid;
		border-width: 1px;
	}

	.heatmap__dag--ja {
		border-width: 4px;
	}

	.heatmap__dag--nee {
		border-width: 1px;
	}

	.heatmap__dag--leeg {
		border-style: dashed;
		border-width: 1px;
	}

	.heatmap__dag--toekomst {
		border-style: none;
	}
}

.heatmap__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: var(--tekst-zacht);
}

.heatmap__legenda li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

/* In de legenda staat het vierkantje naast de tekst en niet als blok: daar
   is het een pictogram van vaste maat en geen cel van het raster. */
.heatmap__legenda .heatmap__dag {
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	aspect-ratio: auto;
	flex-shrink: 0;
}

/* ---- Archief ---- */

/* De link naar het archief staat onder de lijst en niet erin: hij hoort
   bij het beheer van de logs en niet bij het loggen zelf. */
.archieflink {
	margin: 1.5rem 0 0;
}

.archieflink a {
	color: var(--tekst-zacht);
	min-height: var(--tikdoel);
	display: inline-flex;
	align-items: center;
}

.archieflijst {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.archieflijst__item {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem;
	margin-bottom: 0.6rem;
	background: var(--vlak);
	border: 1px solid var(--rand);
	border-radius: 0.75rem;
}

.archieflijst__item form {
	margin: 0;
}

/* De twee acties naast elkaar en niet elk over de volle breedte: .knop
   erft width:100% en margin-top, en daardoor viel de lijst per item anders
   uiteen en werd de gevaarknop het grootste tikdoel. Zelfde vorm als
   .loglijst__pijlen. */
.archieflijst__acties {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-shrink: 0;
}

.archieflijst__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.archieflijst__naam {
	font-weight: 600;
	color: var(--tekst);
	text-decoration: none;
	min-height: var(--tikdoel);
	display: flex;
	align-items: center;
}

.archieflijst__type,
.archieflijst__datum {
	font-size: 0.85rem;
	color: var(--tekst-zacht);
}

/* ---- Opruimen op het bewerkscherm ---- */

.beheer {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rand);
}

.beheer h2 {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

.beheer form {
	margin: 0 0 0.75rem;
}