/* app.kantnoot.nl: dezelfde huisstijl als www.kantnoot.nl (app/site/site.css).
   Grafiet en aluminium, REC-rood als hoofdaccent, VU-amber als tweede accent. */

:root {
  --grafiet: #1C1F22;
  --grafiet-2: #2A2D31;
  --zwart: #0E1012;
  --staal: #50555C;
  --aluminium: #C9CCCF;
  --papier: #F4F4EF;
  --papier-2: #F9F9F6;
  --wit: #FFFFFF;
  --lijn: #DCDDD6;
  --lijn-2: #C9CBC4;
  --tekst: #1C1F22;
  --tekst-2: #3D4247;
  --tekst-3: #5A6067;
  --rec: #E0503C;
  --accent: #C8402F;
  --vu: #E39B2D;
  --fout: #A3261A;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--papier); color: var(--tekst);
  font-family: var(--sans); font-size: 16px; line-height: 1.5; overflow-wrap: break-word;
}
h1, h2, p, ul, ol, figure { margin: 0; }
h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 600; }
a { color: var(--tekst); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--mono); }
.gedempt { color: var(--tekst-3); font-size: 15px; }
.verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.overslaan {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 14px; background: var(--grafiet); color: var(--papier); border-radius: 6px;
}
.overslaan:focus { top: 12px; color: var(--papier); }

.kop { background: var(--grafiet); color: var(--papier); }
.kop__binnen {
  max-width: 960px; margin: 0 auto; padding: 16px 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.merk { display: flex; align-items: center; gap: 10px; color: var(--papier); text-decoration: none;
  font-size: 20px; font-weight: 600; }
.merk:hover { color: var(--wit); }
.kop nav { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.kop nav a { color: var(--aluminium); text-decoration: none; padding: 8px 4px; }
.kop nav a:hover, .kop nav a[aria-current="page"] { color: var(--wit); text-decoration: underline;
  text-decoration-color: var(--rec); }

main { max-width: 960px; margin: 0 auto; padding: 40px 24px 64px; display: grid; gap: 28px; }
.smal { max-width: 480px; }
.paneel {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 24px;
  display: grid; gap: 16px;
}
.bovenregel { font-family: var(--mono); font-size: 13px; color: var(--tekst-3);
  letter-spacing: 0.04em; text-transform: uppercase; }

form { display: grid; gap: 16px; }
.veld { display: grid; gap: 6px; }
label, legend { font-weight: 500; }
.hulp { font-size: 14px; color: var(--tekst-3); }
input[type="email"], input[type="password"], input[type="text"], input[type="url"],
input[type="date"], input[type="datetime-local"], input[type="number"], input[type="file"], select, textarea {
  font: inherit; color: var(--tekst); background: var(--papier-2);
  border: 1px solid var(--lijn-2); border-radius: 6px; padding: 11px 12px; min-height: 44px; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--grafiet); }
fieldset { border: 1px solid var(--lijn); border-radius: 8px; padding: 16px; margin: 0; display: grid; gap: 12px; }
.vinkje { display: flex; gap: 10px; align-items: flex-start; }
.vinkje input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--accent); }

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.knop-rec, .knop-licht {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer;
  padding: 12px 22px; font: inherit; font-size: 16px; text-decoration: none; border-radius: 8px;
}
.knop-rec {
  background: var(--grafiet-2); color: var(--papier); font-weight: 600; border: 2px solid var(--zwart);
  box-shadow: inset 0 3px 0 var(--staal), 0 5px 0 var(--zwart);
}
.knop-rec:hover { color: var(--wit); }
.knop-rec:active { transform: translateY(4px); box-shadow: inset 0 3px 0 var(--staal), 0 1px 0 var(--zwart); }
.knop-rec__lamp { width: 14px; height: 14px; border-radius: 50%; background: var(--rec); flex: none; }
.knop-licht { background: transparent; color: var(--tekst); font-weight: 500; border: 1px solid var(--lijn-2); }
.knop-licht:hover { border-color: var(--tekst); }
.knop-uit { font: inherit; cursor: pointer; background: transparent; color: var(--aluminium);
  border: 1px solid var(--staal); border-radius: 6px; min-height: 40px; padding: 6px 14px; }
.knop-uit:hover { color: var(--wit); border-color: var(--aluminium); }
.kop form { display: inline; }

.fout {
  border-left: 4px solid var(--rec); background: #FBEDEA; color: var(--fout);
  padding: 12px 14px; border-radius: 4px; font-weight: 500;
}
.let-op { border-left: 4px solid var(--vu); background: #FBF3E5; padding: 12px 14px; border-radius: 4px; }
.gelukt { border-left: 4px solid var(--grafiet); background: var(--papier-2); padding: 12px 14px; border-radius: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-weight: 600; color: var(--tekst-2); }
.label { display: inline-block; font-family: var(--mono); font-size: 13px; padding: 2px 8px;
  border-radius: 999px; background: var(--grafiet-2); color: var(--papier); }
.status { font-family: var(--mono); font-size: 13px; }
.status--fout { color: var(--fout); }
audio { width: 100%; max-width: 420px; }
.fragmenten { list-style: none; padding: 0; display: grid; gap: 10px; }
.fragmenten li { display: grid; gap: 4px; }

.voet { border-top: 1px solid var(--lijn); }
.voet__binnen { max-width: 960px; margin: 0 auto; padding: 20px 24px 32px; font-size: 14px; color: var(--tekst-3); }

@media (max-width: 560px) {
  main { padding: 28px 16px 48px; }
  .paneel { padding: 18px; }
  th, td { padding: 8px 4px; }
}