/* Toegankelijkheidslaag. De componenten zijn met inline styles opgemaakt en die kunnen geen
   :focus-visible of media queries uitdrukken — dat staat daarom hier. Doel: WCAG 2.1 AA. */

:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
outline:2px solid var(--focus-ring);
outline-offset:2px;
border-radius:inherit;
}

/* Checkbox, Radio en Switch gebruiken een visueel verborgen echte input met een gestileerde
   span ernaast; de ring moet de zichtbare box volgen, niet de verborgen input. */
.psy-control-input:focus-visible + .psy-control-box{
outline:2px solid var(--focus-ring);
outline-offset:2px;
}

/* Input verbergt de eigen outline zodat de pill-vorm heel blijft; de ring komt op de schil,
   zodat focus nooit alleen door een randkleur wordt aangegeven. */
.psy-input-shell:focus-within{
outline:2px solid var(--focus-ring);
outline-offset:2px;
}

.psy-visually-hidden{
position:absolute;
width:1px;height:1px;
margin:-1px;padding:0;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
border:0;
}

.psy-skip-link{
position:absolute;
left:var(--space-4);
top:calc(-1 * var(--space-8));
z-index:1000;
background:var(--midnight);
color:var(--text-on-dark);
font-family:var(--font-sans);
font-size:var(--text-sm);
padding:var(--space-3) var(--space-5);
border-radius:var(--radius-pill);
text-decoration:none;
transition:top var(--dur-fast) var(--ease-brand);
}
.psy-skip-link:focus{top:var(--space-4);}

/* 44px minimum voor tikbare elementen op touch; op desktop met een muis mag 36px, dat haalt
   de WCAG 2.2 AA-drempel van 24px ruim. */
.psy-target{min-width:44px;min-height:44px;}

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

@media (prefers-contrast:more){
:root{
--text-secondary:var(--plum);
--text-muted:var(--plum);
--border-subtle:var(--stone);
--border-control:var(--plum);
}
}