*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; font-family: var(--os-font-family); background: var(--os-color-canvas); }
/* Een anker en een veld met focus komen niet onder de vaste kopbalk (58 px) terecht. */
html { scroll-padding-top: 74px; }
body { margin: 0; color: var(--os-color-text); background: var(--os-color-canvas); font-family: var(--os-font-family); font-size: var(--os-type-body); font-weight: 400; line-height: 1.42; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
a { color: var(--os-color-action); text-underline-offset: 2px; }
a:hover { color: var(--os-color-action-strong); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: var(--os-space-4); font-size: var(--os-type-page-title); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
h2 { font-size: var(--os-type-alert-title); line-height: 1.16; }
code, .os-tabular { font-variant-numeric: tabular-nums lining-nums; }
.os-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.os-skip-link { position: fixed; z-index: 1000; top: var(--os-space-3); left: var(--os-space-3); transform: translateY(-150%); padding: var(--os-space-4) var(--os-space-5); color: #fff; background: var(--os-color-shell-deep); border-radius: var(--os-radius-sm); }
.os-skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--os-focus); outline-offset: 3px; }
::selection { color: var(--os-color-shell-deep); background: #bce9ff; }

/* R0.3 accessibility and resilient reflow completion. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--os-color-focus, #2b78c5);
  outline-offset: 2px;
}

:where(p, li, dd, dt, label, button, a, th, td) {
  overflow-wrap: break-word;
}

@media (max-width: 48rem) {
  :where(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea, [role="button"]) {
    min-block-size: 2.75rem;
  }
}

/* Een tabel schaalt niet onder de min-content van haar langste woord, en
   `overflow-wrap: break-word` verandert die min-content niet -- alleen `anywhere`
   doet dat. Zonder deze regel liep `os-data-table` over tussen ongeveer 330px en
   430px: precies de band waar elke telefoon zit, en net buiten de 20rem-regel
   hieronder die de tests vastpinnen. Gemeten met r02/scripts/meet_reflow.py. */
@media (max-width: 48rem) {
  :where(table) { min-inline-size: 0; max-inline-size: 100%; }
  :where(th, td) { overflow-wrap: anywhere; }
}

@media (max-width: 20rem) {
  html { min-inline-size: 0; }
  body { min-inline-size: 0; overflow-x: hidden; }
  :where(main, section, article, aside, form, fieldset, table, [role="dialog"]) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  :where(h1, h2, h3, p, li, dd, dt, label, button, a, th, td) {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --os-color-border: #536273; --os-color-text-muted: #3f4c5c; }
  :where(.os-card, .os-panel, [role="dialog"], input, select, textarea) {
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [role="button"], [role="tab"]) {
    forced-color-adjust: auto;
  }
  :where([aria-current="page"], [aria-selected="true"]) {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }
}