:root {
  color-scheme: light dark;
  --bg: #f6f8fa; --paneel: #ffffff; --rand: #d0d7de; --tekst: #1f2328; --dim: #656d76;
  --accent: #1a7f37; --accent-bg: #dafbe1; --waarsch: #9a6700; --fout: #cf222e;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --links: max(16px, env(safe-area-inset-left));
  --rechts: max(16px, env(safe-area-inset-right));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117; --paneel: #161b22; --rand: #30363d; --tekst: #e6edf3; --dim: #8b949e;
    --accent: #3fb950; --accent-bg: #12261a; --waarsch: #d29922; --fout: #f85149;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; background: var(--paneel); }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--tekst);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
header { padding: max(10px, env(safe-area-inset-top)) var(--rechts) 10px var(--links); background: var(--paneel); border-bottom: 1px solid var(--rand); }
.rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rij + .rij { margin-top: 8px; }
h1 { margin: 0; font-size: 16px; font-weight: 600; }
h1 span { color: var(--accent); }
.spacer { flex: 1; }
.chip { font: 12px var(--mono); padding: 2px 8px; border: 1px solid var(--rand); border-radius: 999px; color: var(--dim); white-space: nowrap; }
.chip[data-s="ok"] { color: var(--accent); border-color: var(--accent); }
.chip[data-s="pauze"], .chip[data-s="waarsch"] { color: var(--waarsch); border-color: var(--waarsch); }
.chip[data-s="fout"] { color: var(--fout); border-color: var(--fout); }
.knop, .seg button, input {
  font: inherit; color: var(--tekst); background: var(--bg); border: 1px solid var(--rand); border-radius: 8px; padding: 5px 10px;
  -webkit-appearance: none; appearance: none;
}
.knop, .seg button { cursor: pointer; touch-action: manipulation; }
.knop:hover, .seg button:hover { border-color: var(--dim); }
.knop:disabled { opacity: .5; cursor: default; }
.knop.klein { padding: 2px 10px; font-size: 12px; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.seg button[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); position: relative; z-index: 1; font-weight: 600; }
#zoek { flex: 1 1 220px; min-width: 0; max-width: 360px; }
input[type="date"] { min-width: 9.5em; }
.dag { color: var(--dim); display: inline-flex; align-items: center; gap: 6px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#log { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 8px 0 max(16px, env(safe-area-inset-bottom)); font: 13px/1.5 var(--mono); }
.regel { display: grid; grid-template-columns: 8ch 8ch 1fr; gap: 0 12px; padding: 1px var(--rechts) 1px var(--links); color: var(--dim); }
.regel.match { color: var(--tekst); border-left: 3px solid var(--accent); padding-left: calc(var(--links) - 3px); background: var(--accent-bg); }
.regel .tekst { overflow-wrap: anywhere; }
.regel.nieuw { animation: flits 1.6s ease-out; }
@keyframes flits { from { background: var(--accent); color: var(--bg); } }
@media (prefers-reduced-motion: reduce) { .regel.nieuw { animation: none; } }
.scheiding { padding: 10px var(--rechts) 2px var(--links); color: var(--dim); font: 12px var(--mono); text-transform: capitalize; }
.scheiding::before { content: "── "; }
.leeg { text-align: center; color: var(--dim); padding: 32px 16px; margin: 0; }
.pil { position: absolute; right: var(--rechts); bottom: max(16px, env(safe-area-inset-bottom)); padding: 10px 16px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--bg); font: 600 14px system-ui, -apple-system, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .35); touch-action: manipulation; }
.meer { margin: 8px auto max(16px, env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }

/* telefoon: compactere kop; zoekveld en datum delen een rij */
@media (max-width: 640px) {
  .seg { order: 1; } #pauze { order: 2; } #live { order: 3; }
  #zoek { order: 4; flex: 1 1 150px; min-width: 150px; max-width: none; }
  .dag { order: 5; flex: 0 0 auto; }
  .dag-t { display: none; }
  input[type="date"] { min-width: 0; width: 9.5em; }
  #bron { order: 9; flex-basis: 100%; border: 0; padding: 0; }
  #log { font-size: 14px; }
  .regel { grid-template-columns: 8ch 1fr; row-gap: 0; padding-top: 3px; padding-bottom: 3px; }
  .regel .ric { grid-column: 2; grid-row: 1; justify-self: end; }
  .regel .tekst { grid-column: 1 / -1; }
}
/* iPhone liggend (weinig hoogte): alles in één compact blok zodat de log ruimte houdt */
@media (max-height: 500px) {
  header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .rij { display: contents; }
  .rij + .rij { margin-top: 0; }
  #bron { display: none; }
  #zoek { flex: 1 1 140px; max-width: none; }
}
/* aanraakschermen: minimaal ~44 px doelen, en 16 px in invoervelden (anders zoomt iOS Safari in bij focus) */
@media (pointer: coarse) {
  .knop, .seg button, input { min-height: 44px; font-size: 16px; }
  .knop.klein { min-height: 36px; font-size: 14px; }
}
@media (pointer: coarse) and (max-height: 500px) {
  .knop, .seg button, input { min-height: 36px; }
}
@supports (-webkit-touch-callout: none) {      /* iOS Safari, ook op iPad met muis */
  input { font-size: 16px; }
}