/* Eén stylesheet voor de hele app. Geen framework, geen buildstap.
   Kleuren via custom properties, zodat een thema één blok is. */

:root {
	--bg: #fbfaf8;
	--surface: #ffffff;
	--border: #e2ded7;
	--text: #23201c;
	--muted: #6b645c;
	--accent: #3a6b52;
	--radius: 10px;
	color-scheme: light;
}

/* DONKER HANGT AAN EEN ATTRIBUUT, NIET AAN EEN MEDIA QUERY.

   Gevraagd op 2026-08-12: "Voeg light modus toe. Zet de icon op de titelbalk ervij". De
   app volgde tot dan blind `prefers-color-scheme`, en daar kon je niets aan doen. Nu zet
   public/theme.js `data-theme="light"` of `"dark"` op <html> en staat er een knop in de
   balk.

   BEWUSTE KEUZE: de media query is er helemaal uit in plaats van er dubbel naast te
   staan. Anders staat elke donkere regel twee keer in dit bestand en loopt dat bij de
   volgende wijziging uit elkaar. Gevolg: zónder JavaScript is de app altijd licht.
   Praktisch niets, want zonder JavaScript laadt deze app geen enkele notitie — alles
   komt via fetch.

   `html[data-theme='dark']` (0,1,1) is specifieker dan `:root` (0,1,0), dus deze waarden
   winnen zonder dat er ergens `!important` bij hoeft. */
html[data-theme='dark'] {
	--bg: #1a1917;
	--surface: #232120;
	--border: #37342f;
	--text: #ece8e2;
	--muted: #a09a92;
	--accent: #7fb79a;
	/* Niet vergeten: zonder dit blijven scrollbars, dropdowns en de datum-kiezer van de
	   browser zelf licht, en dan klopt het halve scherm niet. */
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

/* Het HTML-attribuut `hidden` moet ALTIJD winnen.
   
   De browser regelt `hidden` met `display: none` in zijn eigen stylesheet, en élke eigen
   `display`-regel wint daarvan — ook `display: flex` in een klasse. Daardoor stond het
   hamburgermenu (`.menu { display: flex }`) permanent open, op desktop én mobiel, terwijl
   het attribuut netjes gezet werd. Gemeld op 2026-08-12 en gevonden met de e2e-test.
   
   Deze regel voorkomt dat voor het hele project in plaats van per element. `!important` is
   hier terecht: er is geen geval waarin een `display`-regel het van `hidden` hoort te
   winnen. */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	padding: 2rem 1.25rem;
	background: var(--bg);
	color: var(--text);
	/* `1rem` en niet `16px` (tot 2026-09-25 wel): bij de normale maat is dat hetzelfde,
	   maar alleen zo groeit de tekst mee met "grote letters op telefoon" hieronder. Met
	   een vaste 16px bleef juist de tekst van je notitie — de editor erft dit via
	   `font: inherit` — klein terwijl de rest van de app groter werd. */
	font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.shell {
	max-width: 44rem;
	margin: 0 auto;
}

h1 {
	margin: 0 0 0.25rem;
	font-size: 1.75rem;
	letter-spacing: -0.01em;
}

h2 {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.lead {
	margin: 0 0 1.75rem;
	color: var(--muted);
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.25rem;
}

dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1.25rem;
	margin: 0;
}

dt {
	color: var(--muted);
}

dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.ok {
	color: var(--accent);
	font-weight: 600;
}

.fail {
	color: #b4442f;
	font-weight: 600;
}

.next {
	margin-top: 1.75rem;
	color: var(--muted);
	font-size: 0.9375rem;
}

/* --- formulieren ---------------------------------------------------------- */

.shell.narrow {
	max-width: 24rem;
}

label {
	display: block;
	margin: 0.9rem 0 0.3rem;
	font-size: 0.875rem;
	font-weight: 600;
}

input[type="email"],
input[type="password"],
input[type="text"] {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
}

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

button {
	margin-top: 1.1rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--accent);
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

button:hover:not(:disabled) {
	filter: brightness(1.08);
}

button:disabled {
	opacity: 0.6;
	cursor: default;
}

.hint {
	margin: 0.5rem 0 0;
	color: var(--muted);
	font-size: 0.8125rem;
}

.error {
	margin: 0.9rem 0 0;
	padding: 0.5rem 0.7rem;
	border: 1px solid #b4442f;
	border-radius: 8px;
	color: #b4442f;
	background: color-mix(in srgb, #b4442f 8%, transparent);
	font-size: 0.875rem;
}

/* --- app-balk ------------------------------------------------------------- */
/* DE BALK PLAKT BOVENAAN.

   Gevraagd op 2026-08-12: "de titel ournotes MOET altijd in beeld blijven". Met
   `position: sticky` blijft de balk staan zodra je erlangs scrollt, zonder dat er
   ruimte gereserveerd hoeft te worden zoals bij `fixed`.

   De balk krijgt daarvoor een eigen achtergrond — anders scrollen de notities er
   dwars doorheen — en padding aan de zijkanten die met negatieve marges buiten de
   inhoud wordt getrokken, zodat de achtergrond doorloopt tot de rand van de shell. */

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	margin: 0 -0.5rem 1.25rem;
	padding: 0.4rem 0.5rem;
	background: var(--bg);
	/* Een streepje eronder, zodat je ziet dat de inhoud eronder doorschuift.
	   `sticky` heeft geen "ik plak nu"-selector, dus dit staat er altijd; subtiel
	   genoeg om bovenaan de pagina niet in de weg te zitten. */
	border-bottom: 1px solid var(--border);
}

/* De balk vóór het inloggen: alleen de licht/donker-knop, rechtsboven.

   Geen streepje eronder en niet plakkend: er staat één knop in, en een lijn over de
   volle breedte boven een inlogkaartje suggereert een balk die er niet is. */
.guestbar {
	position: static;
	justify-content: flex-end;
	margin-bottom: 0.5rem;
	padding-top: 0;
	border-bottom: none;
}

/* Links: ☰ vóór de titel.

   `flex-shrink: 0`, want dit deel mag NOOIT samengeknepen worden: als het krimpt
   lopen de knoppen erin buiten hun vak en komt de rechterkant van de balk er
   bovenop te liggen. Wat moet wijken bij te weinig ruimte staat rechts. */
.topbar-left {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-shrink: 0;
}

/* Het woordmerk op de andere pagina's: dezelfde tekst als de titel op het
   hoofdscherm, maar kleiner — daar staat de paginanaam eronder als <h1>. Het is
   tegelijk de weg terug naar je notities. */
.wordmark {
	color: var(--text);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.wordmark:hover {
	color: var(--accent);
}

/* ZOEKEN STAAT WAAR DE TITEL STOND.

   Hier hing een regel voor `.topbar h1` ("OurNotes hoort op één regel te blijven
   staan"). Die titel is er op 2026-09-05 uit gegaan: op een telefoon vulde de balk zich
   met tekst die je niets vertelt wat je nog niet weet. Op die plek staat nu het
   zoekveld.

   `flex: 1 1 auto` met `min-width: 0`: het veld pakt de ruimte die de balk overhoudt en
   krimpt mee tot niets in plaats van ☰ of de knoppen rechts van het scherm af te duwen.
   Een vaste breedte doet op 320px precies dat. */
.topbar-search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

.topbar-search input {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--border);
	/* Rond, zodat het als zoekveld leest en niet als het titelveld van een notitie. */
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	/* 1rem = 16px: onder 16px zoomt iOS Safari bij focus in op het veld, en dan staat
	   de hele pagina scheef. */
	font-size: 1rem;
}

/* Het aantal treffers staat ÍN het veld, rechts.

   Als losse tekst ernaast zou het bij elke toetsaanslag de balk verschuiven — en op
   320px is daar simpelweg geen plek voor. De ruimte ervoor wordt alleen vrijgemaakt
   zolang je echt zoekt (`.has-count`, gezet door app.js); anders kost een leeg vakje
   een derde van je typruimte. */
.topbar-search.has-count input {
	padding-right: 4.25rem;
}

.topbar-search .searchcount {
	position: absolute;
	right: 0.75rem;
	pointer-events: none;
}

.topbar-right {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.whoami {
	color: var(--muted);
	font-size: 0.875rem;
	/* Bij een lange naam liever afkappen dan de balk uit elkaar duwen. */
	max-width: 11rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* NOTITIE MAKEN: de + rechts in de balk.

   Hier stond een invoerveld "Notitie maken…" met een knop Maken eronder in de pagina
   (`.quickadd`, weg op 2026-09-05). Dit is de enige knop in de balk die iets máákt, dus
   hij mag als enige de accentkleur hebben — dan zoek je hem niet, ook niet tussen de
   andere icoonknoppen. */
.newnote-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
	color: var(--accent);
}

.newnote-button:hover:not(:disabled) {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* PRIVÉNOTITIES WEL OF NIET IN DE LIJST: het oog naast de +.

   Gevraagd op 2026-09-06: "In het hoofdscherm moet een toggle komen om te wel/niet de
   prive notes te laten zien."

   `is-on` betekent hier: het filter staat AAN, dus je privénotities staan er niet meer
   tussen. Dat is de stand die op moet vallen — een lijst waar stilletjes iets uit
   weggelaten wordt is erger dan een lijst met alles erin. Vandaar de accentkleur op
   precies die stand, en niet andersom.

   Welk oog je ziet staat hier en niet in app.js, net als bij maan/zon (`.theme-toggle`)
   en bij het slot van een notitie (`.privatebutton`): CSS is er vóór het script, dus er
   flikkert geen verkeerd icoon op. */
.privatefilter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
}

.privatefilter.is-on {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
	color: var(--accent);
}

.privatefilter:hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--accent);
}

.privatefilter .icon-verborgen {
	display: none;
}

.privatefilter.is-on .icon-verborgen {
	display: inline;
}

.privatefilter.is-on .icon-zichtbaar {
	display: none;
}

/* Licht of donker: de omschakelknop.

   Welk icoon je ziet, is wat je aanzet — een maan als het nu licht is, een zon als het nu
   donker is. Dat staat in CSS en niet in theme.js, zodat er geen verkeerd icoon opflikkert
   voordat het script eraan komt. De tekst (`aria-label`/`title`) zet theme.js wel, want
   die kan CSS niet zetten.

   `:not([data-theme='dark'])` en niet `[data-theme='light']`: staat er helemaal geen
   attribuut (JavaScript uit), dan is de app licht en hoort de maan te staan. */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
}

.theme-toggle:hover:not(:disabled) {
	border-color: var(--border);
	color: var(--accent);
}

html[data-theme='dark'] .theme-toggle .icon-moon {
	display: none;
}

html:not([data-theme='dark']) .theme-toggle .icon-sun {
	display: none;
}

/* Vraag het aan Claude: een vonkje in de balk, naast licht/donker en uitloggen.

   Stond eerst als menu-item achter ☰. Gevraagd op 2026-08-12 om er een knop in de balk
   van te maken — het is de plek waar je hem verwacht, en achter het menu moest je er
   eerst naar zoeken.

   Het is een `<a>` en geen `<button>`, want het is navigatie naar /ai.html. Daarom deze
   drie regels: een link is standaard `inline` met een onderstreping, en dan staat het
   icoon niet in het midden van zijn vak zoals bij de knoppen ernaast. */
.ai-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	text-decoration: none;
}

.ai-button:hover {
	border-color: var(--border);
	color: var(--accent);
}

/* --- de balk van de notitiepagina ----------------------------------------
   Alleen knoppen, geen tekst (2026-09-05). De woorden zitten in `aria-label` en
   `title`, dus een schermlezer en een tooltip vertellen nog steeds wat er gebeurt. */

/* De knop Opslaan (een vinkje dat meekleurde met de stand) stond hier. Weg op
   2026-09-06: er wordt vanzelf opgeslagen, dus de knop deed niets wat niet toch gebeurde.
   De stand staat nog wel in woorden in de balk (`#save-state`). */

/* Verwijderen: rood bij aanwijzen, want dat wil je niet per ongeluk doen. Hier stond
   een knop met het wóórd Verwijderen; die was in een balk vol iconen de enige met
   tekst, en dat is precies wat er weg moest. */
.deletebutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
}

.deletebutton:hover:not(:disabled) {
	border-color: var(--border);
	color: #b4472f;
}

html[data-theme='dark'] .deletebutton:hover:not(:disabled) {
	color: #e08a72;
}

/* Privé of niet. De knop ÍS de stand: gedempt slot open = van jullie samen, accent slot
   dicht = alleen jij ziet hem. `aria-pressed` zegt datzelfde voor wie het niet ziet.

   Welk van de twee slotjes je ziet regelt de CSS op de klasse, net als bij maan/zon van
   licht-donker: dan flikkert er niets verkeerds op voordat het script eraan komt. */
.privatebutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
}

.privatebutton.is-on {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
	color: var(--accent);
}

.privatebutton:hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--accent);
}

.privatebutton .icon-dicht {
	display: none;
}

.privatebutton.is-on .icon-dicht {
	display: inline;
}

.privatebutton.is-on .icon-open {
	display: none;
}

/* Archief (2026-09-25). Zelfde opzet als het slot hierboven: gedempt = staat gewoon in het
   overzicht, accent = staat in het archief. Ook hier kiest de CSS het icoon op `is-on`, zodat
   er niets verkeerds opflikkert voordat het script eraan komt. */
.archivebutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
}

.archivebutton.is-on {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
	color: var(--accent);
}

.archivebutton:hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--accent);
}

.archivebutton .icon-terugzetten {
	display: none;
}

.archivebutton.is-on .icon-terugzetten {
	display: inline;
}

.archivebutton.is-on .icon-archiveer {
	display: none;
}

/* Kleur: een rondje in de huidige kleur met het palet erachter.

   Hier stond een <select> met kleurnamen. Die was op een telefoon breder dan drie
   knoppen samen — "geen kleur" moet er immers in passen — en je moest een lijst
   openklappen om te zien wat je koos. */
.colorwrap {
	position: relative;
	display: inline-flex;
}

.colorbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.colordot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--card-border, var(--border));
	background: var(--card-bg, var(--surface));
}

.colormenu {
	position: absolute;
	/* Naar links uitklappen: deze knop staat rechts in de balk, dus met `left: 0` valt
	   het palet op een telefoon van het scherm af. */
	right: 0;
	top: calc(100% + 0.35rem);
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(4, auto);
	gap: 0.35rem;
	padding: 0.45rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
}

.swatch {
	margin: 0;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--card-border, var(--border));
	border-radius: 50%;
	background: var(--card-bg, var(--surface));
	cursor: pointer;
}

.swatch:hover {
	filter: none;
	transform: scale(1.08);
}

/* Welke kleur aan staat: een ring eromheen. Een vinkje in het vakje zou op de lichtste
   kleuren wegvallen. */
.swatch.is-active {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Terug: een echte knop links in de balk.

   Was eerst `← Notities`: een klein pijltje met een tekstje ernaast, en dat is op een
   telefoon een slecht aanraakdoel. Gemeld op 2026-08-12: "de OurNotes-balk wordt ook
   de plek waar een knop moet om terug te gaan". Nu een knop van 44px met een
   pijl-icoon; de tekst zit in `aria-label`/`title`, dus een schermlezer en een
   tooltip vertellen nog steeds waar je heen gaat. */
.backbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	text-decoration: none;
}

.backbutton:hover {
	border-color: var(--border);
	color: var(--accent);
}

.topbar-right button.small {
	margin: 0;
}

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

.muted-card p {
	margin: 0;
}

/* --- beheerscherm --------------------------------------------------------- */

.table-scroll {
	overflow-x: auto;
}

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

th,
td {
	padding: 0.5rem 0.6rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

th {
	color: var(--muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

td.num,
th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

td.email {
	overflow-wrap: anywhere;
}

td.status {
	color: var(--muted);
	font-size: 0.8125rem;
}

tr.inactive td {
	opacity: 0.55;
}

td.actions {
	white-space: nowrap;
}

tr.needs-action {
	background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.reset-request {
	margin-bottom: 0.2rem;
	color: var(--accent);
	font-weight: 600;
}

.tag {
	display: inline-block;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 20%, transparent);
	color: var(--accent);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: 1px;
}

.tag-self {
	background: color-mix(in srgb, var(--border) 60%, transparent);
	color: var(--muted);
}

button.small {
	margin: 0.15rem 0.2rem 0.15rem 0;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	background: transparent;
	color: var(--text);
	border-color: var(--border);
}

button.small:hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--accent);
	filter: none;
}

button.small.danger:hover:not(:disabled) {
	border-color: #b4442f;
	color: #b4442f;
}

button.secondary {
	background: transparent;
	color: var(--text);
	border-color: var(--border);
	font-weight: 500;
}

label.checkbox {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-top: 1rem;
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.4;
}

label.checkbox input {
	margin-top: 0.2rem;
}

.password-box {
	border-color: var(--accent);
}

.password-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin: 0.75rem 0;
}

.password-row code {
	flex: 1 1 12rem;
	padding: 0.5rem 0.7rem;
	font-size: 1.0625rem;
	letter-spacing: 0.04em;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow-wrap: anywhere;
}

.password-row button {
	margin: 0;
}

.warn {
	margin: 0.5rem 0 0;
	padding: 0.55rem 0.7rem;
	border-left: 3px solid var(--accent);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	color: var(--text);
	font-size: 0.8125rem;
}

/* Hier stonden de opmaakregels van het voortgangsblok (.chain, .phases) en van de
   work-in-progress-pagina (.badge, .card.highlight). Beide weg op 2026-08-12
   ("Voortgang moet uit de app"); ongebruikte CSS laten staan kost later alleen
   maar tijd bij het uitzoeken waar iets vandaan komt. */

.card + .card {
	margin-top: 1rem;
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: color-mix(in srgb, var(--border) 45%, transparent);
	padding: 0.1em 0.35em;
	border-radius: 4px;
}

/* --- notitieoverzicht ----------------------------------------------------- */

.toolbar-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.toolbar-row button {
	margin: 0;
}

.notelist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.notelist li + li {
	border-top: 1px solid var(--border);
}

.notelist li.empty {
	color: var(--muted);
	font-size: 0.875rem;
	padding: 0.25rem 0;
}

.notelink {
	display: block;
	padding: 0.6rem 0.2rem;
	color: inherit;
	text-decoration: none;
	border-radius: 6px;
}

.notelink:hover {
	background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.notetitle {
	display: block;
	font-weight: 600;
}

.noteexcerpt {
	display: block;
	color: var(--muted);
	font-size: 0.875rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.notemeta {
	display: block;
	margin-top: 0.15rem;
	color: var(--muted);
	font-size: 0.75rem;
}

/* --- notitiepagina -------------------------------------------------------- */

.meta {
	margin: 0 0 0.75rem;
	color: var(--muted);
	font-size: 0.8125rem;
}

.title-input {
	width: 100%;
	margin-bottom: 0.75rem;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 1.25rem;
	font-weight: 600;
}

.body-input {
	width: 100%;
	min-height: 22rem;
	padding: 0.7rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	line-height: 1.6;
	resize: vertical;
}

.note-view {
	padding: 0.7rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	min-height: 12rem;
}

.note-view > :first-child { margin-top: 0; }
.note-view > :last-child { margin-bottom: 0; }
.note-view blockquote {
	margin: 0.6rem 0;
	padding-left: 0.8rem;
	border-left: 3px solid var(--border);
	color: var(--muted);
}
.note-view pre {
	padding: 0.6rem;
	border-radius: 6px;
	background: color-mix(in srgb, var(--border) 40%, transparent);
	overflow-x: auto;
}

.card.conflict {
	border-color: #b4442f;
	margin-bottom: 1rem;
}

.card.conflict h2 {
	color: #b4442f;
}

/* --- Quill-editor --------------------------------------------------------- */
/* De vormgeving van Quill zelf komt uit /vendor/quill.snow.css; dit past hem
   alleen in bij de rest van de app en zorgt dat hij in donkere modus leesbaar
   blijft (het snow-thema gaat van een lichte achtergrond uit). */

.quill-mount {
	background: var(--surface);
	border-radius: 0 0 8px 8px;
}

.ql-toolbar.ql-snow {
	border-color: var(--border) !important;
	border-radius: 8px 8px 0 0;
	background: var(--bg);
}

/* ONZE EIGEN KNOP-REGELS BLIJVEN BUITEN DE WERKBALK.

   Gemeld op 2026-08-12: "op een mobieltje is de tekstopmaak van de richttext editor
   verminkt omdat het lettertype dan te groot is van bold, italic etc."

   De oorzaak zat in onze eigen opmaak, niet in Quill. Quill's `.ql-toolbar button`
   zet wel `width`/`height`/`padding`, maar géén `margin` en géén `min-height`. Onze
   algemene `button`-regel zet `margin-top: 1.1rem` en op een smal scherm daarbovenop
   `min-height: 44px` + `display: inline-flex` — en die drie sloegen dus wél door naar
   elke knop in de werkbalk. Met knoppen die zwevend naast elkaar staan (`float`) gaf
   dat een uit elkaar getrokken werkbalk met scheve iconen.

   Deze selectors zijn specifiek genoeg (0,2,1) om onze algemene regels te overrulen,
   zonder `!important` en zonder aan Quill zelf te komen. */
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker {
	margin: 0;
	min-height: 0;
	font-weight: normal;
}

.ql-toolbar.ql-snow button {
	display: inline-block;
	align-items: initial;
}

/* "Afgevinkte regels wissen" (2026-09-25) staat uit zolang er niets afgevinkt is. Quill
   kent geen uitgeschakelde knoppen in zijn werkbalk en tekent hem dus even donker als de
   rest; zonder deze regel lijkt hij kapot als een tik niets doet. De klasse twee keer, zodat
   hij het wint van Quill's eigen knopregels (die hebben dezelfde vorm). */
.ql-toolbar.ql-snow.ql-snow button.ql-wis-afgevinkt:disabled {
	opacity: 0.35;
	cursor: default;
}

.ql-container.ql-snow {
	border-color: var(--border) !important;
	border-radius: 0 0 8px 8px;
	font: inherit;
}

.ql-editor {
	min-height: 20rem;
	color: var(--text);
	line-height: 1.6;
}

.ql-editor.ql-blank::before {
	color: var(--muted) !important;
	font-style: normal;
}

/* DE AFVINKLIJST IN DE EDITOR (2026-09-15: "Dan kan ik lijsten maken en deze afvinken").

   Quill tekent het vakje zelf, als `::before`-teken op een `.ql-ui`-element dat hij in elk
   lijstitem zet. Twee dingen kloppen daar niet voor deze app:

   1. KLEUR. Het snow-thema zet dat vakje vast op `#777`, en dat gaat uit van een lichte
      achtergrond. In donkere modus is het daarmee nauwelijks te zien — precies het teken
      waar het hier om draait.
   2. TREFVLAK. Het teken is ~1,2 em breed, dus een kleine 20 px. Dat is te krap om met een
      duim te raken, en afvinken op een telefoon is waar deze functie voor gevraagd is. De
      padding vergroot het aanraakvlak; de even grote negatieve marge haalt diezelfde ruimte
      er in de opmaak weer af, zodat er niets verschuift.

      ALLEEN LINKS EN RECHTS, met opzet. Er zit hier ruimte naast het vakje (het item
      springt 1,5 em in) maar niet erboven en eronder: de regels van een lijst staan ~26 px
      uit elkaar, dus verticale padding zou het trefvlak van het ene item over dat van het
      volgende heen leggen. Dan vink je bij een tik net boven een vakje het item erbóven af
      — erger dan een klein trefvlak, want je ziet niet meteen dat het misging.

   `.ql-editor` STAAT ER TWEE KEER, net als bij de werkbalk verderop in dit bestand. De
   regel van Quill (`.ql-editor li[data-list=checked] > .ql-ui { color: #777 }`) heeft
   precies dezelfde specificiteit als deze, en quill.snow.css wordt ná app.css ingeladen —
   dus zonder dat extra beetje gewicht wint Quill en blijft het vakje grijs. */
.ql-editor.ql-editor li[data-list='checked'] > .ql-ui,
.ql-editor.ql-editor li[data-list='unchecked'] > .ql-ui {
	color: var(--text);
	padding: 0 0.45rem;
	margin: 0 -0.45rem;
}

/* Afgevinkt is af. Dit vervangt wat er handmatig gebeurde: een regel doorhalen als hij
   klaar was (zie migratie 012). De doorhaling hoort nu bij het vinkje en niet meer bij de
   tekst, dus bij het uitvinken gaat hij vanzelf weer weg. */
.ql-editor li[data-list='checked'] {
	text-decoration: line-through;
	opacity: 0.65;
}

/* En het vakje zélf blijft eronderuit: een streep dwars door een ☑ maakt er geen ☑ meer
   van. Dat gaat hier vanzelf goed — `.ql-ui` staat op `position: absolute`, en een
   doorhaling loopt niet door in iets wat buiten de tekststroom staat — maar het staat er
   expliciet bij als vangnet. Een `text-decoration` van een ouder is namelijk NIET met een
   `none` op een gewoon inline-kind terug te draaien; zou Quill die absolute positionering
   ooit loslaten, dan is dit het punt waar het misgaat en niet een regel die het repareert. */
.ql-editor.ql-editor li[data-list='checked'] > .ql-ui {
	text-decoration: none;
}

.ql-editor blockquote {
	border-left: 3px solid var(--border);
	padding-left: 0.8rem;
	color: var(--muted);
}

.ql-editor pre {
	background: color-mix(in srgb, var(--border) 40%, transparent);
	color: var(--text);
	border-radius: 6px;
}

/* AFBEELDINGEN IN DE NOTITIE (2026-09-06: "Ik wil ook fotos en plaatjes kunnen toevoegen
   aan een notitie").

   De grootte staat HIER en niet in de HTML van de notitie: de sanitizer laat op een
   `<img>` alleen `src` en `alt` door, dus er is geen `width` in de opgeslagen tekst die
   deze regel kan overrulen. Eén plek waar staat hoe groot een plaatje in beeld komt.

   `max-width: 100%` samen met `height: auto` is wat een liggende foto van een telefoon
   binnen de kolom houdt in plaats van de hele pagina breder te maken. */
.ql-editor img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	/* Als blok op zijn eigen regel: een foto van 1600 px midden in een zin levert een
	   regelhoogte van een halve pagina op. */
	display: block;
	margin: 0.4rem 0;
}

/* Quill zet een blauw kader om de aangeklikte afbeelding; in het donkere thema is dat
   dezelfde accentkleur als de rest. */
.ql-editor img.ql-selected {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* HET BESTANDSKIEZERTJE VAN DE FOTOKNOP.

   Dat is een echt <input type="file"> dat public/afbeeldingen.js in de pagina zet en
   aanklikt. Hij staat BUITEN BEELD en niet op `display: none`: Safari op iOS opent voor een
   verborgen invoerveld niet altijd de bestandskiezer, en dan gebeurt er bij een tik op de
   fotoknop niets. Dit is de standaardtruc daarvoor — in beeld voor de browser, niet voor
   het oog. In de CSS en niet als style-attribuut, want de CSP staat op
   `style-src 'self'`. */
.buiten-beeld {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* De iconen van het snow-thema zijn donkere strokes; die moeten lichter. */
html[data-theme='dark'] .ql-snow .ql-stroke { stroke: var(--muted) !important; }
html[data-theme='dark'] .ql-snow .ql-fill { fill: var(--muted) !important; }
html[data-theme='dark'] .ql-snow .ql-picker-label { color: var(--muted) !important; }
html[data-theme='dark'] .ql-snow .ql-picker-options { background: var(--surface) !important; }
html[data-theme='dark'] .ql-snow button:hover .ql-stroke,
html[data-theme='dark'] .ql-snow button.ql-active .ql-stroke { stroke: var(--accent) !important; }
html[data-theme='dark'] .ql-snow button:hover .ql-fill,
html[data-theme='dark'] .ql-snow button.ql-active .ql-fill { fill: var(--accent) !important; }
html[data-theme='dark'] .ql-snow .ql-tooltip {
	background: var(--surface) !important;
	border-color: var(--border) !important;
	box-shadow: none !important;
	color: var(--text) !important;
}
html[data-theme='dark'] .ql-snow .ql-tooltip input[type="text"] {
	background: var(--bg) !important;
	border-color: var(--border) !important;
	color: var(--text) !important;
}

/* Terugvalmodus: dan is de textarea juist wél zichtbaar. */
#editor-holder.plain-mode .body-input {
	display: block;
}

/* --- deelpaneel: weg -------------------------------------------------------
   Hier stond de opmaak van het deelpaneel: een sharelijst met namen en adressen, twee
   rolknoppen (`.segmented`, "mag lezen" / "mag wijzigen") en een toevoegformulier. Alles
   weg op 2026-09-06 met de sharetabel zelf: delen is één slot in de balk geworden. */

select {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: 0.875rem;
}

/* --- versielabel ---------------------------------------------------------- */
/* De draaiende versie, opgehaald bij de server. Klein en terzijde: het is voor
   als je wilt weten wát er draait, niet iets om steeds naar te kijken. */

.release {
	color: var(--muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.card > .release {
	margin: -0.15rem 0 0.9rem;
	display: block;
}

/* ==========================================================================
   Keep-achtig kaartenoverzicht + mobiel
   ==========================================================================
   Opzet geleend van Google Keep: een raster van kaarten in plaats van een lijst,
   kleur per notitie, vastgeprikt bovenaan, en een snelle invoerbalk erboven.
   Wat we NIET hebben overgenomen staat in PLAN.md §9 (labels, archief, vinklijsten,
   slepen om te herordenen).

   Mobiel-eerst: de basisregels gelden voor een telefoon, de media queries voegen
   kolommen toe op bredere schermen. */

/* --- zoeken en een notitie maken ----------------------------------------- */
/* Beide zaten hier als een eigen regel onder de balk: `.quickadd` (een invoerveld
   "Notitie maken…" met een knop Maken) en `.searchrow` (een zoekveld met het aantal
   treffers ernaast). Samen twee volle regels tekst boven je notities.

   Gevraagd op 2026-09-05: "we richten ons nu op de mobiele versie. Deze is te
   onduidelijk omdat er teveel tekst zichtbaar is." Ze staan nu allebei in de balk —
   zoeken als veld (`.topbar-search`), maken als + (`.newnote-button`). Wat er nog van
   over is, is deze klasse voor het aantal treffers. */

.searchcount {
	color: var(--muted);
	font-size: 0.8125rem;
	white-space: nowrap;
}

/* --- het raster ----------------------------------------------------------- */

.notesection + .notesection {
	margin-top: 1.75rem;
}

.notesection h2 {
	margin-bottom: 0.6rem;
}

.notegrid {
	display: grid;
	gap: 0.75rem;
	/* Eén kolom op een telefoon; auto-fill vult er meer bij zodra het past. De
	   kaarten houden zo een leesbare breedte in plaats van uit te rekken. */
	grid-template-columns: 1fr;
}

@media (min-width: 30rem) {
	.notegrid {
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	}
}

.gridempty {
	margin: 0;
	color: var(--muted);
	font-size: 0.875rem;
}

/* Het kopje boven de archiefweergave (2026-09-25): "Archief" links, de weg terug rechts.
   Mag op een smal scherm over twee regels, zodat de link niet buiten beeld loopt. */
.archiefkop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	margin: 0 0 0.75rem;
}

.archiefkop h2 {
	margin: 0;
}

.archiefkop a {
	font-size: 0.875rem;
}

/* --- de kaart ------------------------------------------------------------- */

.notecard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--card-border, var(--border));
	border-radius: var(--radius);
	background: var(--card-bg, var(--surface));
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Een hover-schaduw hoort niet op een aanraakscherm: daar blijft hij hangen na
   een tik. Alleen tonen waar echt met een muis gewezen wordt. */
@media (hover: hover) and (pointer: fine) {
	.notecard:hover {
		box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
	}
}

.notecard:focus-within {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.notecard-link {
	display: block;
	flex: 1 1 auto;
	padding: 0.8rem 0.85rem 0.6rem;
	color: inherit;
	text-decoration: none;
	/* De hele kaart is aanraakbaar; een klein tekstlinkje is op een telefoon niet
	   te raken. */
	min-height: 4.5rem;
}

.notecard-title {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	/* Lange titels afkappen na twee regels in plaats van de kaart oprekken. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* De samenvatting mag opmaak bevatten (vet, cursief, onderstreept, doorhalen) sinds
   2026-09-06. Wat er via de server binnenkomt is opgeschoond met een kleine allowlist
   (zie excerptHtml), maar een <strong> kan de regelhoogte wel laten verspringen — vandaar
   dat de opmaak hieronder dezelfde maat houdt als de rest van de tekst. */
.notecard-excerpt strong,
.notecard-excerpt b {
	font-weight: 600;
}

.notecard-excerpt em,
.notecard-excerpt i {
	font-style: italic;
}

/* Een lijstje is op de kaart ook een lijstje. Gevraagd op 2026-09-06: "bij het
   boodschappen lijstje is er een bullet list. Maar deze wordt nog niet goed getoond in het
   startscherm overzicht van de notes. Dit moet wel."

   De server stuurt hoogstens vier regels mee (MAX_KAART_REGELS in src/domain/sanitize.ts),
   dus deze lijst kan de kaart niet oprekken. */
.notecard-excerpt ul,
.notecard-excerpt ol {
	margin: 0;
	/* Net genoeg voor het bolletje: op een telefoon is de kaart smal, en elke millimeter
	   inspringing gaat van de tekst af. */
	padding-left: 1.05rem;
}

/* WELK TEKEN ER VOOR EEN ITEM STAAT.

   Quill 2 schrijft bullets als `<ol><li data-list="bullet">`: het lijsttype staat op het
   ITEM en niet op de lijst. Zonder de twee regels hieronder krijgt een boodschappenlijstje
   dus nummers, want de browser ziet een <ol>. In de editor lost Quill dat zelf op met een
   `.ql-ui`-element dat hij in elk item zet; dat element bestaat alleen tijdens het
   bewerken en staat niet in de opgeslagen HTML.

   Vier gevallen, en ze moeten alle vier goed: ul zonder type (bolletje), ol zonder type
   (nummer, bijvoorbeeld geplakte HTML), en ol met data-list bullet of ordered. */
.notecard-excerpt li {
	list-style-type: disc;
}

.notecard-excerpt ol > li {
	list-style-type: decimal;
}

.notecard-excerpt ol > li[data-list='bullet'] {
	list-style-type: disc;
}

/* DE AFVINKLIJST OP DE KAART (2026-09-15: "Bij de lijsten moet naast de standaard bullet
   lists een variant komen met checkboxes. Dan kan ik lijsten maken en deze afvinken.")

   Een half afgevinkt boodschappenlijstje moet op het overzicht te herkennen zijn, anders
   zie je vier regels staan zonder te zien dat ze al af zijn.

   WAAROM ::before EN NIET `list-style-type: '☑ '`. Een tekenreeks als lijstteken kan pas
   sinds Safari 17; op een oudere iPhone valt de browser dan terug op géén teken, en dan
   staat er een lijst zonder vakjes. Een ::before-teken werkt overal en is bovendien gewoon
   tekst, dus een schermlezer leest hem voor — "aangevinkt" is hier informatie en geen
   opsmuk. De marker zelf gaat daarom uit (`list-style-type: none`): anders staat er een
   bolletje én een vakje. */
.notecard-excerpt ol > li[data-list='checked'],
.notecard-excerpt ol > li[data-list='unchecked'] {
	list-style-type: none;
}

.notecard-excerpt li[data-list='unchecked']::before {
	content: '\2610\00a0';
}

.notecard-excerpt li[data-list='checked']::before {
	content: '\2611\00a0';
}

/* HET VAKJE ALS APART BLOKJE.

   `display: inline-block` is hier geen opmaakkeuze maar de enige manier om de doorhaling
   hieronder buiten het vakje te houden. Een `text-decoration` van een ouder loopt door over
   al zijn gewone inline-kinderen en is daar met `text-decoration: none` NIET terug te
   draaien — een atomair inline-blok is de uitzondering die de regel wel tegenhoudt. Zonder
   deze regel staat er een streep dwars door de ☑, en dan is het geen ☑ meer. */
.notecard-excerpt li[data-list='checked']::before,
.notecard-excerpt li[data-list='unchecked']::before {
	display: inline-block;
}

/* Afgevinkt is af: dezelfde doorhaling die je in de editor ziet. Dat de tekst lichter is
   dan de rest scheelt op een kaart van vier regels het meest — je oog gaat naar wat er nog
   moet gebeuren. */
.notecard-excerpt li[data-list='checked'] {
	text-decoration: line-through;
	opacity: 0.65;
}

.notecard-excerpt {
	margin: 0;
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.notecard-excerpt.is-empty {
	font-style: italic;
	opacity: 0.7;
}

.notecard-meta {
	margin: 0.6rem 0 0;
	color: var(--muted);
	font-size: 0.75rem;
}

/* HET FOTOTEKEN OP DE KAART.

   De afbeelding zelf staat niet op de kaart (zie excerptHtml in src/domain/sanitize.ts:
   een foto op vier regels is óf een postzegel óf de hele kaart, en het overzicht zou bij
   elke verversing evenveel afbeeldingen ophalen als er notities zijn). Maar dát er een
   foto in zit, hoort er wel op te staan — anders is een notitie die alleen uit een foto
   bestaat een lege kaart.

   Een teken in de voetregel dus, naast de tijd en het woord "privé", in dezelfde
   gedempte kleur. */
.notecard-meta .fototeken {
	/* Iets groter dan de tekst eromheen, want het is een pictogram van 12 px. */
	font-size: 0.9em;
	line-height: 1;
	vertical-align: -0.05em;
}

/* Hier stond `.notecard-actions`: een rijtje onderaan elke kaart. Eerst met een
   keuzelijst voor de kleur, daarna alleen nog met vastprikken. Allebei weg op 2026-09-05
   — kleur hoort bij het bewerken van een notitie, en vastprikken "voegt niets toe" in een
   lijst die al op datum staat. Een kaart is nu één link en verder niets. */

.iconbutton {
	margin: 0;
	padding: 0.35rem 0.5rem;
	min-width: 44px;
	min-height: 36px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
}

.iconbutton:hover:not(:disabled) {
	border-color: var(--border);
	filter: none;
}

/* --- notitiekleuren -------------------------------------------------------
   Namen uit src/domain/note-colors.ts. Per thema een eigen waarde: in de donkere
   modus zijn dit gedempte tinten, want een pastelgeel vlak is daar een lamp. */

.note-color-default { --card-bg: var(--surface); }
.note-color-geel    { --card-bg: #fdf6d3; --card-border: #f0e4a8; }
.note-color-oranje  { --card-bg: #fde9d3; --card-border: #f2d3ac; }
.note-color-rood    { --card-bg: #fbdcd8; --card-border: #f0bdb6; }
.note-color-groen   { --card-bg: #dcf0e0; --card-border: #b6dcc0; }
.note-color-blauw   { --card-bg: #d8e8f7; --card-border: #b3cfe8; }
.note-color-paars   { --card-bg: #e8ddf6; --card-border: #cfbce8; }
.note-color-grijs   { --card-bg: #eceae7; --card-border: #d8d4cf; }

html[data-theme='dark'] .note-color-geel    { --card-bg: #3a3418; --card-border: #4d4520; }
html[data-theme='dark'] .note-color-oranje  { --card-bg: #3b2c18; --card-border: #4f3b20; }
html[data-theme='dark'] .note-color-rood    { --card-bg: #3a2220; --card-border: #4f2d2a; }
html[data-theme='dark'] .note-color-groen   { --card-bg: #1e3226; --card-border: #294432; }
html[data-theme='dark'] .note-color-blauw   { --card-bg: #1d2b3a; --card-border: #27394e; }
html[data-theme='dark'] .note-color-paars   { --card-bg: #2b2339; --card-border: #3a304d; }
html[data-theme='dark'] .note-color-grijs   { --card-bg: #2a2826; --card-border: #393633; }

/* ==========================================================================
   Mobiel: telefoon en tablet
   ========================================================================== */

html {
	/* Voorkomt dat Safari op een telefoon de tekst in liggende stand opblaast. */
	-webkit-text-size-adjust: 100%;

	/* RUIMTE HOUDEN VOOR DE PLAKKENDE BALK.

	   Zonder dit scrollt de browser een element precies tot bovenaan het scherm — dus
	   tot ONDER de balk, die daar blijft plakken. Gevolg: je klikt op de werkbalk van
	   de editor en raakt in plaats daarvan een knop uit de balk. Precies dat gebeurde
	   in de e2e-test: de klik werd onderschept door een knop uit de plakkende balk.

	   `scroll-padding-top` geldt voor alles wat de browser zelf in beeld schuift:
	   scrollIntoView, een anker in de URL, en het veld dat focus krijgt met Tab. */
	scroll-padding-top: 5rem;
}

body {
	/* Ruimte voor de notch en de home-balk van een iPhone. */
	padding-left: max(1rem, env(safe-area-inset-left));
	padding-right: max(1rem, env(safe-area-inset-right));
	padding-bottom: max(2rem, env(safe-area-inset-bottom));
	/* Niets mag horizontaal scrollen; dat is op een telefoon het verschil tussen
	   bruikbaar en onbruikbaar.

	   `clip` EN NIET `hidden`. Met `overflow-x: hidden` wordt de body een
	   scroll-container, en dan werkt `position: sticky` van de balk niet meer: die
	   plakt dan aan een container die zelf nooit scrollt, dus aan niets. `clip`
	   snijdt wel af maar maakt géén scroll-container — precies wat hier moet. */
	overflow-x: clip;
}

@media (max-width: 32rem) {
	body {
		padding-top: 1rem;
	}

	h1 {
		font-size: 1.4rem;
	}

	.card {
		padding: 0.9rem;
	}

	.topbar {
		gap: 0.5rem;
	}

	/* HET HOOFDSCHERM: één regel — ☰, het zoekveld, en rechts Claude en +.

	   Eerder ging `.topbar-right` hier op volle breedte, waardoor de balk twee regels
	   werd. Dat kan niet meer: de balk plakt bovenaan en moet dus zo laag mogelijk
	   blijven.

	   Er staan sinds 2026-09-05 vier dingen in deze balk in plaats van zes: licht/donker
	   en uitloggen zijn naar het menu gegaan. Dat is precies de ruimte die het zoekveld
	   nodig heeft. */
	#panel-app .topbar,
	#panel-app .topbar-right {
		flex-wrap: nowrap;
		gap: 0.25rem;
	}

	/* DE NAAM VERVALT OP EEN TELEFOON.

	   In v1.7.1 ging `.whoami` hier al van 7rem naar 5rem toen de thema-knop erbij kwam,
	   met de notitie "op 390px is dat precies vol". Nu staat er een zoekveld in de balk,
	   en dat wil elke pixel die het krijgen kan.

	   Je eigen naam is het eerste dat mag wijken: je weet zelf wie je bent, en dit is een
	   app voor twee mensen op hun eigen telefoon. Vanaf 32rem staat de naam er gewoon. */
	#panel-app .whoami {
		display: none;
	}

	/* DE NOTITIEPAGINA PAST WEER OP ÉÉN REGEL.

	   Hier stond `width: 100%` op `.topbar-right`: die balk had naast terug en OurNotes
	   ook kleur (een keuzelijst met kleurnamen!), vastprikken, Opslaan en Verwijderen — en
	   dat paste op 390px niet op één regel — `.topbar-left` werd samengeknepen tot bijna
	   niets en de knoppen liepen eronderuit.

	   Sinds 2026-09-05 zijn het allemaal icoonknoppen van 44px zonder tekst, en is de
	   keuzelijst een rondje geworden. Gemeten op 390px: alles staat op één regel en de
	   balk is nog maar de helft zo hoog. De regel die er twee van maakte moest dus juist
	   weg. */
	#panel-note .topbar,
	#panel-note .topbar-right {
		flex-wrap: nowrap;
		gap: 0.25rem;
	}

	/* Op het hoofdscherm vervalt `.whoami` helemaal (zie hierboven). Deze klasse wordt
	   ook gebruikt voor de opslag-indicator op de notitiepagina (`#save-state`), en die
	   moet juist wél leesbaar blijven — dus hier alleen een grens tegen uitrekken en
	   geen `display: none`. */
	.whoami {
		max-width: 5rem;
	}

	/* Wat op een smal scherm mag wijken. */
	.hide-narrow {
		display: none;
	}

	/* Aanraakdoelen: 44px hoog, ook de kleine knoppen. De werkbalk van Quill valt
	   hier bewust buiten (zie het blok "onze eigen knop-regels blijven buiten de
	   werkbalk"): die knoppen krijgen daar hun eigen maat. */
	button,
	.backbutton {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.backbutton {
		min-width: 44px;
		justify-content: center;
	}

	button.small {
		min-height: 38px;
		padding: 0.4rem 0.7rem;
		font-size: 0.8125rem;
	}

	/* Alle invoervelden op 16px, anders zoomt iOS bij focus in. */
	input,
	select,
	textarea {
		font-size: 1rem;
	}

	.title-input {
		font-size: 1.1rem;
	}

	/* Hier stond het deelpaneel op een smal scherm (één kolom, rolknoppen die de breedte
	   delen). Dat paneel bestaat sinds 2026-09-06 niet meer. */
}

/* --- de beheerstabel wordt kaarten op een smal scherm ---------------------
   Een tabel met vijf kolommen past niet op een telefoon. In plaats van hem te
   laten scrollen wordt elke rij een blokje met labels ervoor. */

@media (max-width: 40rem) {
	#users thead {
		display: none;
	}

	#users,
	#users tbody,
	#users tr,
	#users td {
		display: block;
		width: 100%;
	}

	#users tr {
		margin-bottom: 0.9rem;
		padding-bottom: 0.6rem;
		border-bottom: 2px solid var(--border);
	}

	#users td {
		border: none;
		padding: 0.15rem 0;
	}

	/* Labels voor de kolommen die zonder kop onduidelijk zijn. */
	#users td.num::before {
		content: "Notities: ";
		color: var(--muted);
	}

	#users td.num {
		text-align: left;
	}

	#users td.actions {
		white-space: normal;
		margin-top: 0.4rem;
	}

	.table-scroll {
		overflow-x: visible;
	}
}

/* --- Quill op een klein scherm ------------------------------------------- */

@media (max-width: 32rem) {
	/* DE WERKBALK MOET KLEIN ZIJN.

	   Gevraagd op 2026-09-05: "verder mag bij de editor de header met speciale acties
	   (vet, cursief etc.) kleiner, want dat neemt te veel plek in." Op een telefoon vulde
	   hij met knoppen van 36px twee regels van samen ~90px — boven een tekstveld dat zelf
	   niet veel hoger is.

	   Knoppen van 30px met 4px padding houden een icoon van 22px over: nog steeds goed te
	   raken (Quill's eigen maat is 24px) en samen een stuk minder hoog. De gaten ertussen
	   zijn ook krapper, zodat er meer knoppen op een regel passen. */
	.ql-toolbar.ql-snow {
		padding: 0.15rem 0.2rem;
	}

	.ql-snow .ql-formats {
		margin-right: 0.35rem !important;
	}

	/* De klasse staat er twee keer in om Quill's eigen `.ql-snow.ql-toolbar button` te
	   overrulen: dat is dezelfde specificiteit, en quill.snow.css wordt ná app.css
	   ingeladen — dus zonder dat extra beetje gewicht wint Quill. Gemeten: de knoppen
	   bleven anders 24px. */
	.ql-toolbar.ql-snow.ql-snow button {
		width: 30px;
		height: 30px;
		padding: 4px;
	}

	.ql-toolbar.ql-snow .ql-picker-label {
		padding-left: 0.3rem;
	}

	/* Wat de werkbalk kleiner maakt, komt het tekstveld ten goede. */
	.ql-editor {
		min-height: 16rem;
		padding: 0.6rem;
	}

	/* Quill's link-tooltip staat standaard absoluut en valt van een smal scherm af. */
	.ql-snow .ql-tooltip {
		left: 0.5rem !important;
		max-width: calc(100vw - 3rem);
	}
}

/* --- hamburgermenu -------------------------------------------------------- */
/* Alles wat je zelden nodig hebt achter één knop: Vraag het aan Claude, de
   versiehistorie en gebruikersbeheer. Op een telefoon is er geen ruimte voor een
   rij losse knoppen, en op een groot scherm oogt het rustiger. De knop staat
   linksboven, vóór de titel. */

.menu-wrap {
	position: relative;
}

.menu-toggle {
	font-size: 1.1rem;
	border-color: var(--border);
}

.menu {
	position: absolute;
	/* NAAR RECHTS UITKLAPPEN vanaf de linkerkant van de ☰-knop. De knop staat
	   linksboven, dus met `right: 0` zou het menu naar links openklappen — en dan
	   voor een deel buiten het scherm vallen. Op mobiel was dat eerder al gemeten:
	   het menu begon op x=−57. */
	left: 0;
	right: auto;
	top: calc(100% + 0.35rem);
	z-index: 20;
	min-width: 12rem;
	/* Het menu groeit mee met zijn langste item ("Vraag het aan Claude") in plaats van
	   dat het woord over twee regels breekt; `white-space: nowrap` op de items hieronder
	   doet dat werk. Op een smal scherm blijft de max-width uit de media query de grens. */
	width: max-content;
	display: flex;
	flex-direction: column;
	padding: 0.3rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
}

.menu a,
.menu button {
	margin: 0;
	white-space: nowrap;
	/* Ruimte tussen het icoon en het woord: sinds 2026-09-05 staan licht/donker en
	   uitloggen hier, en die hebben er allebei een icoon voor staan. */
	gap: 0.55rem;
	padding: 0.6rem 0.7rem;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	/* Aanraakdoel: makkelijk met een duim te raken. */
	min-height: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.menu a:hover,
.menu button:hover {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--text);
	filter: none;
	border: none;
}

/* Een icoon in een menu-item mag nooit meekrimpen met het woord ernaast. */
.menu svg {
	flex: 0 0 auto;
}

/* LICHT/DONKER, UITLOGGEN EN CLAUDE STAAN IN HET MENU (zie index.html, 2026-09-05).

   Daar zijn het menu-items en geen icoonknoppen in de balk. Twee dingen moeten dus
   terug: de gewone tekstkleur in plaats van het gedempte grijs van een balkknop, en
   `flex-start` in plaats van de `center` die ze als icoonknop hebben.

   Zonder dat laatste centreert de knop zijn icoon-plus-woord in de volle breedte van
   het menu-item, en staat het woord dus verder naar rechts dan de items eronder. Precies
   dat viel op: "in het menu is nu de donkere modus scheef uitgelijnd". */
.menu .theme-toggle,
.menu .logout-button,
.menu .ai-button {
	justify-content: flex-start;
	color: var(--text);
}

/* Uitloggen blijft rood bij aanwijzen: het is een handeling die je niet per ongeluk
   wilt doen. Dit moet specifieker dan `.menu button:hover`, want die zet de kleur
   terug op --text. */
.menu .logout-button:hover {
	color: #b4472f;
}

html[data-theme='dark'] .menu .logout-button:hover {
	color: #e08a72;
}

.menu-release {
	padding: 0.4rem 0.7rem 0.2rem;
	border-top: 1px solid var(--border);
	margin-top: 0.2rem;
	color: var(--muted);
	font-size: 0.6875rem;
}

/* Op een smal scherm mag het menu wat breder, maar nooit breder dan het scherm.

   BEWUST `absolute` en niet `fixed`. Met `position: fixed` én `top: auto` houdt de
   browser de statische positie aan, maar dan ten opzichte van het VIEWPORT — het menu
   bleef daardoor bij het scrollen in beeld hangen. Gemeld op 2026-08-12: "mijn menu
   blijft hangen in beeld op mijn mobiel". Met `absolute` hangt het aan de balk. Nu de
   balk zelf plakt, blijft het menu dus netjes onder de ☰-knop staan waar je hem
   opende. */
@media (max-width: 32rem) {
	.menu {
		min-width: 12rem;
		/* Niet breder dan het scherm, ook niet als een menu-item lang is. */
		max-width: calc(100vw - 2rem);
	}
}

/* De stand van een aan/uit-item in het menu ("aan"/"uit"), rechts uitgelijnd.
   Voor "grote letters op telefoon": op een laptop verandert er bij een tik niets
   zichtbaars, dus moet je aan het item zelf kunnen zien hoe hij staat. */
.menu-stand {
	margin-left: auto;
	padding-left: 0.75rem;
	color: var(--muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

.grote-letters-toggle[aria-checked='true'] .menu-stand {
	color: var(--accent);
	font-weight: 600;
}

/* ==========================================================================
   Grote letters op een telefoon
   ========================================================================== */

/* Gevraagd op 2026-09-25 door Dirk: "Mogelijkheid inbouwen om in te zoomen. Vooral handig
   op kleinere schermen zoals een mobiele telefoon. Maak dit een gebruikersinstelling
   waarin aangegeven kan worden om automatisch grotere letters te zien op een mobiele
   telefoon of niet."

   HOE: de basismaat van de pagina gaat van 16 naar 20px. Vrijwel alles in dit bestand
   staat in `rem`, dus de letters, de regelafstand, de marges eromheen en de kaarten
   groeien in één keer mee — één regel in plaats van een grotere variant van elke
   tekstregel die bij de volgende wijziging uit elkaar loopt.

   WAT NIET MEEGROEIT, met opzet: wat in `px` staat. Dat zijn de aanraakdoelen van 44px,
   de iconen en de werkbalk van de editor. Die zijn al op een duim gemaakt; ze groter
   maken kost alleen ruimte in de balk, die op 390px precies vol is (☰, zoeken, oog, +).
   Gevraagd is grotere letters, geen grotere knoppen.

   ALLEEN OP EEN TELEFOON: dezelfde grens van 32rem als de rest van de telefoonregels
   hierboven. "Mobiel" betekent in deze app de kleine viewport (CLAUDE.md). Een `rem` in
   een media query rekent met de maat van de browser en niet met die van deze pagina, dus
   de grote letters schuiven de grens niet op: een scherm dat telefoon is, blijft dat.

   Aan of uit komt van het attribuut `data-grote-letters` op <html>, dat
   public/tekstgrootte.js vóór de eerste weergave zet uit wat je account zegt. Pinch-zoom
   is er daarnaast altijd nog: de viewport-meta verbiedt het nergens, en
   test/grote-letters.test.ts houdt dat zo. */
@media (max-width: 32rem) {
	html[data-grote-letters='ja'] {
		font-size: 125%;
	}

	/* Het menu-item is het langste in het menu; met grote letters mag het afbreken in
	   plaats van buiten een 320px-scherm te lopen. */
	html[data-grote-letters='ja'] .menu .grote-letters-toggle {
		white-space: normal;
	}
}

/* --- update-melding ------------------------------------------------------- */
/* Zelfde plek als in kompas-vue: rechtsonder, boven de inhoud, niet blokkerend.
   Op een telefoon over de volle breedte onderaan, want rechtsonder is daar precies
   waar je duim zit. */

.updatebanner {
	position: fixed;
	right: 1rem;
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 100;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	max-width: 22rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--accent) 60%, black);
	border-radius: 10px;
	background: var(--accent);
	color: #fff;
	box-shadow: 0 6px 24px rgb(0 0 0 / 28%);
}

.updatebanner-title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

.updatebanner-release {
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.updatebanner-hint {
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	opacity: 0.9;
}

.updatebanner-button {
	margin: 0;
	flex: 0 0 auto;
	min-height: 40px;
	padding: 0.4rem 0.7rem;
	border: none;
	border-radius: 8px;
	background: #fff;
	color: var(--accent);
	font-size: 0.8125rem;
	font-weight: 700;
}

.updatebanner-button:hover:not(:disabled) {
	filter: brightness(0.95);
}

.updatebanner-dismiss {
	margin: 0;
	flex: 0 0 auto;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font-size: 0.9rem;
	opacity: 0.8;
}

.updatebanner-dismiss:hover {
	opacity: 1;
	filter: none;
}

@media (max-width: 32rem) {
	.updatebanner {
		left: 0.75rem;
		right: 0.75rem;
		max-width: none;
	}
}

/* ==========================================================================
   Beheerscherm: kaarten in plaats van een tabel
   ==========================================================================
   Een tabel met vijf kolommen leest op een telefoon niet, en ook op een breed
   scherm moest je raden welke knop bij welke rij hoorde. Nu staat alles van één
   persoon bij elkaar, met de gevaarlijke actie visueel apart. */

.sectionhead {
	margin: 1.75rem 0 0.6rem;
}

.count {
	color: var(--muted);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.usercard + .usercard {
	margin-top: 0.75rem;
}

.usercard.is-inactive {
	opacity: 0.75;
	border-style: dashed;
}

.usercard.needs-action {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.usercard-head {
	margin-bottom: 0.6rem;
}

.usercard-name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.usercard-email {
	margin: 0.1rem 0 0;
	color: var(--muted);
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}

.usercard-alert {
	margin: 0 0 0.6rem;
	padding: 0.45rem 0.6rem;
	border-left: 3px solid var(--accent);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	color: var(--text);
	font-size: 0.8125rem;
	font-weight: 600;
}

.usercard-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
}

.usercard-facts dt {
	color: var(--muted);
}

.usercard-facts dd {
	margin: 0;
}

.usercard-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.usercard-actions button {
	margin: 0;
}

button.small.primary {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* De onomkeerbare actie staat apart en onderaan, met een scheiding ervoor. Zo klik
   je er niet op omdat hij naast "Naam wijzigen" stond. */
.usercard-danger {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.75rem;
	padding-top: 0.7rem;
	border-top: 1px dashed color-mix(in srgb, #b4442f 45%, var(--border));
	color: var(--muted);
	font-size: 0.75rem;
}

.usercard-danger button {
	margin: 0;
	border-color: color-mix(in srgb, #b4442f 50%, var(--border));
	color: #b4442f;
}

.usercard-danger button:hover:not(:disabled) {
	background: color-mix(in srgb, #b4442f 12%, transparent);
	border-color: #b4442f;
}

.tag-off {
	background: color-mix(in srgb, #b4442f 18%, transparent);
	color: #b4442f;
}

/* "Mag Claude gebruiken". Een eigen kleur, want dit is geen rol maar een recht dat
   apart aan- en uitgezet wordt — en het enige recht waarmee er code op de server
   verandert. Dat mag opvallen in de lijst. */
.tag-ai {
	background: color-mix(in srgb, #6b5bd6 18%, transparent);
	color: #5a49c9;
}

html[data-theme='dark'] .tag-ai {
	background: color-mix(in srgb, #a99cf5 22%, transparent);
	color: #b6abff;
}

/* --- formulieren naast elkaar op een breed scherm ------------------------- */

.formrow {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
	.formrow {
		grid-template-columns: 1fr 1fr;
	}
}

.formfield label {
	margin-top: 0;
}

label.checkbox .hint {
	display: block;
	margin-top: 0.1rem;
}

.infocard {
	margin-top: 1.25rem;
	background: color-mix(in srgb, var(--border) 22%, var(--surface));
}

.explain {
	display: block;
	margin: 0;
}

.explain dt {
	margin-top: 0.6rem;
	color: var(--text);
	font-weight: 700;
	font-size: 0.875rem;
}

.explain dd {
	margin: 0.1rem 0 0;
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.plainlist {
	margin: 0;
	padding-left: 1.2rem;
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ==========================================================================
   Vraag het aan Claude
   ========================================================================== */

.requestlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.requestlist li + li {
	border-top: 1px solid var(--border);
}

/* Het verzoek zelf neemt de ruimte; het prullenbakje staat er rechts naast. */
.requestlist li.requestitem {
	display: flex;
	gap: 0.25rem;
	align-items: center;
}

.requestdelete {
	flex: 0 0 auto;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
}

.requestdelete:hover:not(:disabled) {
	border-color: #b4472f;
	color: #b4472f;
}

html[data-theme='dark'] .requestdelete:hover:not(:disabled) {
	border-color: #e08a72;
	color: #e08a72;
}

.requestlist li.empty {
	color: var(--muted);
	font-size: 0.875rem;
}

.requestlink {
	display: grid;
	gap: 0.15rem;
	width: 100%;
	margin: 0;
	padding: 0.7rem 0.3rem;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	min-height: 44px;
}

.requestlink:hover {
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	filter: none;
	border: none;
}

.requesttitle {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.requestmeta,
.requesthint {
	color: var(--muted);
	font-size: 0.75rem;
}

.statusbadge {
	justify-self: start;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: color-mix(in srgb, var(--border) 60%, transparent);
	color: var(--muted);
}

.badge-awaiting_approval {
	background: color-mix(in srgb, var(--accent) 22%, transparent);
	color: var(--accent);
}

.badge-running,
.badge-needs_proposal,
.badge-approved {
	background: color-mix(in srgb, #b08900 22%, transparent);
	color: #8a6d00;
}

.badge-done {
	background: color-mix(in srgb, var(--accent) 30%, transparent);
	color: var(--accent);
}

.badge-failed {
	background: color-mix(in srgb, #b4442f 18%, transparent);
	color: #b4442f;
}

html[data-theme='dark'] .badge-running,
html[data-theme='dark'] .badge-needs_proposal,
html[data-theme='dark'] .badge-approved {
	color: #e0c060;
}

/* --- het gesprek ---------------------------------------------------------- */

.conversation {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0.75rem 0 1.25rem;
}

.bubble {
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--bg);
}

.bubble-assistant {
	border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
	background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.bubble-who {
	margin: 0 0 0.4rem;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bubble-body > :first-child {
	margin-top: 0;
}

.bubble-body > :last-child {
	margin-bottom: 0;
}

.bubble-body h3,
.bubble-body h4,
.bubble-body h5 {
	margin: 0.8rem 0 0.3rem;
	font-size: 0.875rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text);
}

.bubble-body ul {
	margin: 0.3rem 0;
	padding-left: 1.2rem;
}

.bubble-body li {
	margin: 0.15rem 0;
}

/* ==========================================================================
   Versiehistorie
   ========================================================================== */

.release-card + .release-card {
	margin-top: 0.75rem;
}

.release-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
	cursor: pointer;
	/* Aanraakdoel: de hele regel is aan te tikken. */
	min-height: 40px;
	padding: 0.2rem 0;
}

.release-summary::marker {
	color: var(--muted);
}

.release-version {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.release-title {
	color: var(--accent);
	font-weight: 600;
}

.release-date {
	color: var(--muted);
	font-size: 0.8125rem;
	margin-left: auto;
}

.release-body {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--border);
	font-size: 0.9375rem;
}

.release-body h3,
.release-body h4,
.release-body h5 {
	margin: 0.9rem 0 0.3rem;
	font-size: 0.875rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text);
}

.release-body ul {
	margin: 0.3rem 0;
	padding-left: 1.2rem;
	line-height: 1.55;
}

.release-body blockquote {
	margin: 0.5rem 0;
	padding-left: 0.7rem;
	border-left: 3px solid var(--border);
	color: var(--muted);
}

.menu-scheiding {
	height: 1px;
	margin: 0.25rem 0.3rem;
	background: var(--border);
}

@media (max-width: 32rem) {
	.release-date {
		margin-left: 0;
		width: 100%;
	}
}

/* --- waarschuwingskaart --------------------------------------------------- */
/* Voor situaties waarin de app wel werkt maar iets ernaast niet: zoals een
   achtergrondwerker die uit staat. Opvallend, maar niet als fout. */

.warncard {
	border-color: #b08900;
	background: color-mix(in srgb, #b08900 10%, var(--surface));
}

.warncard h2 {
	color: #8a6d00;
}

.warncard code {
	overflow-wrap: anywhere;
}

html[data-theme='dark'] .warncard h2 {
	color: #e0c060;
}

/* Gewone tekstinvoer voor een AI-verzoek. Geen richtext: dit is een opdracht die in een
   prompt terechtkomt, en dan hoort er te staan wat je typt. */
.body-input.plaintext {
	min-height: 11rem;
	font-family: inherit;
	line-height: 1.55;
}

.body-input.plaintext::placeholder {
	color: var(--muted);
	opacity: 0.75;
}

/* Uitklapbaar voorbeeld bij een formulier. Beter dan een placeholder met meerdere
   regels: die neemt de indentatie van de HTML mee en dan staan er tabs in beeld. */
.voorbeeld {
	margin-top: 0.6rem;
	padding: 0.5rem 0.7rem;
	border: 1px dashed var(--border);
	border-radius: 8px;
	font-size: 0.875rem;
}

.voorbeeld summary {
	cursor: pointer;
	color: var(--accent);
	font-weight: 600;
	min-height: 32px;
	display: flex;
	align-items: center;
}

.voorbeeld p {
	margin: 0.5rem 0 0;
	color: var(--muted);
}