/*
  Veldbook — one calm, restrained design system.

  Everything below the tokens takes its spacing, sizes, type and colours from them; test/styl.test.js
  checks that (no raw lengths or colours outside :root and media queries, no animation or gradients) and
  that every text colour meets WCAG AA on the surfaces it is used on. System fonts only; nothing is
  loaded from outside. Phone first (360 px and up); on wider screens the content is centred.
*/

:root {
  color-scheme: dark;

  /* Colour: dark neutrals, one earthy accent (ochre), and success / warning / danger. */
  --k-agter: #0F1512;          /* page background */
  --k-vlak: #172019;           /* cards */
  --k-vlak-hoog: #1F2A23;      /* pressed rows, secondary buttons */
  --k-lyn: #2A3730;            /* dividers (decorative) */
  --k-rand: #66786D;           /* input and control borders (3:1 or more) */
  --k-teks: #ECE7DC;
  --k-sag: #A3B1A8;            /* muted text */
  --k-aksent: #D9A54F;
  --k-op-aksent: #14110A;      /* text on the accent */
  --k-aksent-agter: #2C2414;
  --k-sukses: #86C99C;
  --k-sukses-agter: #16291D;
  --k-waarsku: #E8C15E;
  --k-waarsku-agter: #2B2512;
  --k-gevaar: #F08B7D;
  --k-op-gevaar: #1A0E0C;
  --k-gevaar-agter: #311B17;
  --k-fokus: #D9A54F;

  /* Spacing scale: the only distances used. */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-6: 32px;
  --r-7: 48px;

  /* Sizes */
  --tik-min: 44px;             /* smallest tap target */
  --tik: 48px;                 /* buttons and inputs */
  --ry-hoogte: 56px;           /* list rows */
  --nav-hoogte: 56px;
  --inhoud-breedte: 42rem;     /* content width on wide screens */
  --aanmeld-breedte: 22rem;
  --keuse-breedte: 8rem;       /* narrowest radio-button choice */
  --tyd-kolom: 6.5rem;         /* date column in the history */
  --blokkie: 24px;             /* checkbox */
  --merk: 5rem;                /* logo on the login page */
  --lyn-dik: 1px;
  --merk-dik: 3px;             /* side bar on messages, current tab marker */
  --fokus-dik: 3px;
  --fokus-afstand: 2px;
  --hoek: 12px;
  --hoek-groot: 16px;
  --hoek-pil: 999px;

  /* Type: one system stack and one size scale. */
  --f: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-oormerk: 2.25rem;        /* the ear tag on an animal's card */
  --t-titel: 1.625rem;         /* page title */
  --t-seksie: 1.0625rem;       /* section title */
  --t-liggaam: 1rem;           /* body (16 px: no zooming on iOS inputs) */
  --t-klein: 0.875rem;         /* small and muted */
  --t-mini: 0.8125rem;         /* badges */
  --lh: 1.5;
  --lh-styf: 1.25;
}

/* ---- Base --------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--k-agter); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f);
  font-size: var(--t-liggaam);
  line-height: var(--lh);
  color: var(--k-teks);
  background: var(--k-agter);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--k-aksent); text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: var(--fokus-dik) solid var(--k-fokus); outline-offset: var(--fokus-afstand); }
.n, time, .r { font-variant-numeric: tabular-nums; }
.sr {
  position: absolute; width: var(--lyn-dik); height: var(--lyn-dik); overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- Layout: header, content, bottom navigation -------------------------------------------------- */

.kop {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r-3);
  max-width: var(--inhoud-breedte); margin: 0 auto;
  padding: calc(var(--r-2) + env(safe-area-inset-top)) var(--r-4) 0;
}
.handelsmerk {
  display: inline-flex; align-items: center; min-height: var(--tik-min);
  color: var(--k-teks); text-decoration: none; font-size: var(--t-mini); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.kopaksies { display: flex; align-items: center; gap: var(--r-1); }
.kopaksies form, .taalvorm { margin: 0; }

.wrap {
  display: flex; flex-direction: column; gap: var(--r-4);
  max-width: var(--inhoud-breedte); margin: 0 auto;
  padding: var(--r-3) var(--r-4) var(--r-7);
}
body:has(.onder) .wrap { padding-bottom: calc(var(--nav-hoogte) + var(--r-7) + env(safe-area-inset-bottom)); }

.onder {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--k-vlak); border-top: var(--lyn-dik) solid var(--k-lyn);
  padding-bottom: env(safe-area-inset-bottom);
}
.onder .in { display: flex; max-width: var(--inhoud-breedte); margin: 0 auto; }
.onder a {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--nav-hoogte);
  border-top: var(--merk-dik) solid transparent;
  color: var(--k-sag); text-decoration: none; font-size: var(--t-klein); font-weight: 600;
}
.onder a[aria-current="page"] { color: var(--k-aksent); border-top-color: var(--k-aksent); }

/* ---- Page header and sections --------------------------------------------------------------------- */

.terug {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tik-min);
  margin-bottom: calc(-1 * var(--r-3));
  color: var(--k-sag); text-decoration: none; font-size: var(--t-klein); font-weight: 600;
}
.terug:hover { color: var(--k-teks); }
.bladkop-blok { display: flex; flex-direction: column; gap: var(--r-1); }
.bladkop { font-size: var(--t-titel); line-height: var(--lh-styf); font-weight: 700; letter-spacing: -0.01em; }
.onderskrif { color: var(--k-sag); }

.groep { display: flex; flex-direction: column; gap: var(--r-3); margin-top: var(--r-2); }
.sek { font-size: var(--t-seksie); line-height: var(--lh-styf); font-weight: 650; }

/* The animal's card: big ear tag, then class · camp · age on one quieter line, then badges. */
.dierkop { gap: var(--r-2); }
.dierkop .bladkop { font-size: var(--t-oormerk); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.meta { display: flex; flex-wrap: wrap; row-gap: var(--r-1); color: var(--k-sag); }
.meta li + li::before { content: "·"; padding: 0 var(--r-2); }

/* ---- Badges and chips ---------------------------------------------------------------------------- */

.etikette { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.etiket {
  display: inline-flex; align-items: center; padding: var(--r-1) var(--r-3);
  border: var(--lyn-dik) solid var(--k-lyn); border-radius: var(--hoek-pil);
  background: var(--k-vlak-hoog); color: var(--k-teks);
  font-size: var(--t-mini); font-weight: 600; line-height: var(--lh-styf); white-space: nowrap;
}
.etiket-gevaar { background: var(--k-gevaar-agter); border-color: var(--k-gevaar-agter); color: var(--k-gevaar); }
.etiket-waarsku { background: var(--k-waarsku-agter); border-color: var(--k-waarsku-agter); color: var(--k-waarsku); }
.etiket-sukses { background: var(--k-sukses-agter); border-color: var(--k-sukses-agter); color: var(--k-sukses); }

.chips { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tik-min);
  padding: 0 var(--r-4); border: var(--lyn-dik) solid var(--k-rand); border-radius: var(--hoek-pil);
  background: var(--k-vlak); color: var(--k-teks); text-decoration: none;
  font-size: var(--t-klein); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chip:hover { background: var(--k-vlak-hoog); }

/* ---- Cards, rows and fact lists ------------------------------------------------------------------- */

.kaart { background: var(--k-vlak); border: var(--lyn-dik) solid var(--k-lyn); border-radius: var(--hoek-groot); overflow: hidden; }

.ry {
  display: flex; align-items: center; gap: var(--r-3); min-height: var(--ry-hoogte);
  padding: var(--r-3) var(--r-4); border-top: var(--lyn-dik) solid var(--k-lyn);
}
.ry:first-child { border-top: 0; }
a.ry { color: inherit; text-decoration: none; }
a.ry:hover, a.ry:active { background: var(--k-vlak-hoog); }
.ry .l { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ry .l b { font-weight: 600; }
.ry .l small { color: var(--k-sag); font-size: var(--t-klein); }
.ry .r { flex: none; max-width: 50%; text-align: right; font-weight: 600; }
.pyl { flex: none; color: var(--k-sag); font-size: var(--t-seksie); }

.feite > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--r-4);
  min-height: var(--ry-hoogte); padding: var(--r-3) var(--r-4); border-top: var(--lyn-dik) solid var(--k-lyn);
}
.feite > div:first-child { border-top: 0; }
.feite dt { flex: none; color: var(--k-sag); }
.feite dd { min-width: 0; text-align: right; font-weight: 600; }
.feite dd small { display: block; color: var(--k-sag); font-size: var(--t-klein); font-weight: 400; }

/* The history: one row per entry — date, type, one line of detail. */
.tydlyn li {
  display: grid; grid-template-columns: var(--tyd-kolom) minmax(0, 1fr); column-gap: var(--r-3); align-items: baseline;
  padding: var(--r-3) var(--r-4); border-top: var(--lyn-dik) solid var(--k-lyn);
}
.tydlyn li:first-child { border-top: 0; }
.tydlyn time { color: var(--k-sag); font-size: var(--t-klein); }
.tydlyn .gebeur { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-1); }
.tydlyn .gebeur p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); }
.tydlyn .tipe { font-weight: 600; }
.tydlyn .detail { max-width: 100%; color: var(--k-sag); font-size: var(--t-klein); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tydlyn .gekanselleer .tipe, .tydlyn .gekanselleer .detail { color: var(--k-sag); text-decoration: line-through; }

/* ---- Buttons and links ---------------------------------------------------------------------------- */

.knop {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--tik);
  padding: var(--r-3) var(--r-5); border: var(--lyn-dik) solid var(--k-aksent); border-radius: var(--hoek);
  background: var(--k-aksent); color: var(--k-op-aksent);
  font-weight: 700; line-height: var(--lh-styf); text-align: center; text-decoration: none;
}
.knop.sag { background: var(--k-vlak-hoog); border-color: var(--k-rand); color: var(--k-teks); }
.knop.gevaar { background: var(--k-gevaar); border-color: var(--k-gevaar); color: var(--k-op-gevaar); }
.knop.klein { width: auto; min-height: var(--tik-min); padding: var(--r-2) var(--r-4); font-size: var(--t-klein); }
.knoppe { display: flex; flex-direction: column; gap: var(--r-3); }
.knoppe form { margin: 0; }
.afmeld { margin-top: var(--r-4); }

.skakel {
  display: inline-flex; align-items: center; min-height: var(--tik-min); padding: 0 var(--r-2);
  color: var(--k-sag); text-decoration: none; font-size: var(--t-klein); font-weight: 600;
}
.skakel:hover { color: var(--k-teks); }
.tydlyn .skakel, .ry > .skakel { color: var(--k-aksent); padding: 0; }

/* Quick actions on an animal's card: big buttons, two per row on a phone. */
.aksies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-3); }

/* ---- Messages and empty states --------------------------------------------------------------------- */

.flits {
  padding: var(--r-3) var(--r-4); border: var(--lyn-dik) solid var(--k-lyn); border-left-width: var(--merk-dik);
  border-radius: var(--hoek); background: var(--k-vlak); font-weight: 600;
}
.flits-sukses { border-color: var(--k-sukses-agter); border-left-color: var(--k-sukses); background: var(--k-sukses-agter); }
.flits-fout { border-color: var(--k-gevaar-agter); border-left-color: var(--k-gevaar); background: var(--k-gevaar-agter); }
.flits-waarsku { border-color: var(--k-waarsku-agter); border-left-color: var(--k-waarsku); background: var(--k-waarsku-agter); }

.leeg {
  display: flex; flex-direction: column; align-items: center; gap: var(--r-3);
  padding: var(--r-6) var(--r-5); text-align: center;
  background: var(--k-vlak); border: var(--lyn-dik) solid var(--k-lyn); border-radius: var(--hoek-groot);
  color: var(--k-sag);
}
.leeg-titel { color: var(--k-teks); font-size: var(--t-seksie); font-weight: 600; }
.leeg .knop { margin-top: var(--r-2); }

/* ---- Forms ---------------------------------------------------------------------------------------- */

.vorm { display: flex; flex-direction: column; gap: var(--r-4); }
.vorm .kaart { overflow: visible; }
.veld { display: flex; flex-direction: column; gap: var(--r-2); padding: var(--r-4); border-top: var(--lyn-dik) solid var(--k-lyn); }
.veld:first-child { border-top: 0; }
.veld label, .veld legend { color: var(--k-sag); font-size: var(--t-klein); font-weight: 600; }
.veld .invoer { display: flex; align-items: center; gap: var(--r-3); }
.veld input:not([type="checkbox"]):not([type="radio"]), .veld select, .veld textarea, .soekvorm input, .am .velde input {
  width: 100%; min-width: 0; min-height: var(--tik); padding: var(--r-3);
  border: var(--lyn-dik) solid var(--k-rand); border-radius: var(--hoek);
  background: var(--k-agter); color: var(--k-teks);
}
.veld textarea { min-height: calc(var(--tik) * 2); resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus, .soekvorm input:focus, .am .velde input:focus { border-color: var(--k-aksent); }
.veld .eh { flex: none; min-width: var(--r-6); color: var(--k-sag); font-weight: 600; }
.veld .hulp { color: var(--k-sag); font-size: var(--t-klein); }
.veld .fout { color: var(--k-gevaar); font-size: var(--t-klein); font-weight: 600; }
.het-fout input, .het-fout select, .het-fout textarea { border-color: var(--k-gevaar); }

fieldset.veld { display: block; margin: 0; min-width: 0; border: 0; border-top: var(--lyn-dik) solid var(--k-lyn); }
fieldset.veld:first-child { border-top: 0; }
fieldset.veld legend { float: left; width: 100%; padding: 0; margin-bottom: var(--r-2); }
.keuses { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--keuse-breedte), 1fr)); gap: var(--r-2); }
fieldset.veld .fout { margin-top: var(--r-2); }
.keusie { position: relative; }
.keusie input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.keusie span {
  display: flex; align-items: center; justify-content: center; height: 100%; min-height: var(--tik);
  padding: var(--r-2) var(--r-3); border: var(--lyn-dik) solid var(--k-rand); border-radius: var(--hoek);
  background: var(--k-agter); color: var(--k-teks); font-weight: 600; text-align: center;
}
.keusie input:checked + span {
  background: var(--k-aksent-agter); border-color: var(--k-aksent); color: var(--k-aksent);
  box-shadow: inset 0 0 0 var(--lyn-dik) var(--k-aksent);
}
.keusie input:focus-visible + span { outline: var(--fokus-dik) solid var(--k-fokus); outline-offset: var(--fokus-afstand); }

.blokkie label { display: flex; align-items: center; gap: var(--r-3); min-height: var(--tik-min); color: var(--k-teks); font-size: var(--t-liggaam); font-weight: 400; }
.blokkie input, .kiesry input { flex: none; width: var(--blokkie); height: var(--blokkie); margin: 0; accent-color: var(--k-aksent); }

.soekvorm { display: flex; gap: var(--r-2); }
.soekvorm input { flex: 1; background: var(--k-vlak); }
.soekvorm .knop { flex: none; min-height: var(--tik); }

/* Pick-list rows (move several animals at once): the whole label is the tap target. */
.kiesry { padding: 0 var(--r-2) 0 0; }
.kiesry label { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--r-3); min-height: var(--ry-hoogte); padding: var(--r-2) var(--r-4); cursor: pointer; }
.kiesry span { display: flex; flex-direction: column; }
.kiesry span b { font-weight: 600; }
.kiesry span small { color: var(--k-sag); font-size: var(--t-klein); }
.kiesry .pyl { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tik-min); min-height: var(--tik-min); text-decoration: none; }

/* Collapsible sections (no JavaScript). */
.seksie > summary {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: var(--ry-hoogte); padding: var(--r-3) var(--r-7) var(--r-3) var(--r-4);
  border: var(--lyn-dik) solid var(--k-lyn); border-radius: var(--hoek-groot); background: var(--k-vlak);
  list-style: none; cursor: pointer;
}
.seksie > summary::-webkit-details-marker { display: none; }
.seksie > summary::after { content: "›"; position: absolute; right: var(--r-4); top: 50%; translate: 0 -50%; color: var(--k-sag); font-size: var(--t-seksie); }
.seksie[open] > summary::after { rotate: 90deg; }
.seksie > summary b { font-weight: 600; }
.seksie > summary small { color: var(--k-sag); font-size: var(--t-klein); }
.seksie[open] > summary { margin-bottom: var(--r-3); }

/* ---- Login ---------------------------------------------------------------------------------------- */

.aanmeldblad .wrap { min-height: 100vh; min-height: 100dvh; justify-content: center; }
.am { display: flex; flex-direction: column; align-items: center; gap: var(--r-5); width: 100%; max-width: var(--aanmeld-breedte); margin: 0 auto; }
.am .merk { width: var(--merk); height: auto; }
.am .wm { font-size: var(--t-seksie); font-weight: 700; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; }
.am .velde { display: flex; flex-direction: column; gap: var(--r-2); width: 100%; }
.am .velde label { margin-top: var(--r-2); color: var(--k-sag); font-size: var(--t-klein); font-weight: 600; }
.am .velde input { background: var(--k-vlak); }
.am .velde .fout { min-height: var(--r-5); color: var(--k-gevaar); font-size: var(--t-klein); font-weight: 600; }
.am-taal { display: flex; justify-content: center; }
.am-skakels { color: var(--k-sag); font-size: var(--t-klein); text-align: center; }
.am-skakels a { display: inline-flex; align-items: center; min-height: var(--tik-min); }

/* Sign-up: the same card, as wide as the content; the honeypot field is never shown to people. */
.am-breed { max-width: var(--inhoud-breedte); align-items: stretch; }
.am-breed .merk, .am-breed .wm { align-self: center; }
.am-breed .onderskrif { text-align: center; }
.heuning { display: none; }

/* ---- Legal pages and the footer ----------------------------------------------------------------- */

.regs { display: flex; flex-direction: column; gap: var(--r-5); }
.regs section { display: flex; flex-direction: column; gap: var(--r-2); }
.regs h2 { font-size: var(--t-seksie); line-height: var(--lh-styf); font-weight: 650; }
.voet { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--r-5); margin-top: var(--r-6); font-size: var(--t-klein); }
.voet a { display: inline-flex; align-items: center; min-height: var(--tik-min); color: var(--k-sag); }
.voet a:hover { color: var(--k-teks); }

/* ---- Wider screens: same layout, more room; buttons size to their text --------------------------- */

@media (min-width: 40rem) {
  .kop { padding-left: var(--r-5); padding-right: var(--r-5); }
  .wrap { padding-left: var(--r-5); padding-right: var(--r-5); }
  .knop { width: auto; }
  .knoppe { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .aksies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aksies .knop, .am .knop { width: 100%; }
  .leeg .knop { min-width: calc(var(--keuse-breedte) * 1.5); }
}