/* Gedeelde basis: rustige typografie, herkenbare acties en bereikbare bediening. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-canvas); color: var(--color-ink); font: 18px/1.55 var(--font-body); }
button, input, select { font: inherit; color: inherit; }
button, a, input, select, summary { touch-action: manipulation; }
a { color: inherit; }
button { cursor: pointer; min-height: var(--target-size); padding: 10px 14px; font-weight: 650; background: var(--color-surface); }
button, input, select { border: 1px solid var(--color-control-border); border-radius: var(--radius-control); }
button:hover { background: var(--color-tint); border-color: var(--color-action); }
button:disabled { opacity: .55; cursor: not-allowed; }
input:not([type=checkbox]), select { min-height: var(--target-size); width: 100%; padding: 10px 12px; background: var(--color-surface); font-size: 17px; }
input[type=checkbox] { width: 23px; height: 23px; accent-color: var(--color-action); flex-shrink: 0; }
:where(input, select, button, a, summary):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
label { display: block; font-size: 16px; font-weight: 650; }
h1, h2, h3, h4, p { margin-top: 0; }
h2 { font-size: 24px; letter-spacing: -.6px; margin-bottom: 0; }
h3 { font-size: 19px; margin-bottom: 8px; }
p { margin-bottom: 12px; }
summary { cursor: pointer; min-height: var(--target-size); padding: 12px 0; font-size: 15px; }
.primary { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; background: var(--color-action); color: white; border: 1px solid var(--color-action); font-size: 18px; }
.primary:hover { background: var(--color-action-hover); color: white; }
.secondary { background: var(--color-tint); }
.quiet { background: transparent; }
.text-button { border-color: transparent; background: transparent; text-decoration: underline; font-size: 14px; padding: 8px 4px; }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--target-size); }
.help { font-size: 15px; color: var(--color-muted); line-height: 1.5; margin: 6px 0 12px; }
.error { padding: 14px; background: #fff0e9; color: #7d2d1b; border-left: 3px solid #a33c22; font-size: 16px; }
.skip { position: absolute; top: -100px; left: 12px; z-index: 10; background: white; padding: 12px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
[hidden] { display: none !important; }