/* Penseelwijzer (post 16023). Alleen geladen op pagina's met marker ns-pw-tool. */
.ns-pw-tool { --pw-px: 3.7795px; margin: 1.4rem 0 1.8rem; }
.ns-pw-stappen { list-style: none; margin: 0 !important; padding: 0 !important; counter-reset: none; }
.ns-pw-stap { margin: 0 0 1.6rem !important; padding: 0; }
.ns-pw-kop { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.35; text-transform: none; letter-spacing: 0; }
.ns-pw-kop span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #1d3b45; color: #fff; font-size: .9rem; flex: none; }
.ns-pw-tool p { line-height: 1.7; }
.ns-pw-kaartvak { overflow-x: auto; padding: 6px 0 10px; }
.ns-pw-kaart { position: relative; aspect-ratio: 53.98 / 85.6; width: 204px; border: 2px solid #1d3b45; border-radius: 10px; background: repeating-linear-gradient(90deg, #f6f8f9 0 9px, #edf1f2 9px 10px); }
.ns-pw-kaart span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-weight: 700; font-size: .9rem; color: #1d3b45; background: #fff; padding: 0 6px; border-radius: 4px; white-space: nowrap; }
.ns-pw-label { display: block; font-weight: 700; margin: 10px 0 6px; text-transform: none !important; letter-spacing: 0 !important; font-size: 1rem; }
.ns-pw-label--klein { font-weight: 600; font-size: .92rem; }
html body .ns-pw-schuif { width: 100%; max-width: 520px; accent-color: #1d3b45; min-height: 44px; margin: 0; }
html body .ns-pw-schuif:focus-visible { outline: 3px solid #e2a23b; outline-offset: 2px; }
.ns-pw-klein { font-size: .92rem; opacity: .85; margin: 6px 0 0; }
.ns-pw-keuzes { display: flex; flex-wrap: wrap; gap: 8px; margin: .6rem 0 .4rem; }
.ns-pw-keuze { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 64px; min-height: 78px; padding: 8px 6px 6px; border: 2px solid transparent; border-radius: 8px; background: #f1f4f5; cursor: pointer; margin: 0 !important; text-transform: none !important; font-weight: 400 !important; transition: border-color .18s ease, background-color .18s ease; }
.ns-pw-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ns-pw-keuze b { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.ns-pw-keuze:has(input:checked) { border-color: #1d3b45; background: #fff; }
.ns-pw-keuze:has(input:focus-visible) { outline: 3px solid #e2a23b; outline-offset: 2px; }
.ns-pw-vorm { display: block; width: calc(var(--mm) * var(--pw-px)); height: calc(var(--mm) * var(--pw-px)); }
.ns-pw-vorm--vak { border: 1px solid #333; background: #fff; }
.ns-pw-vorm--stip { border-radius: 50%; background: #1d3b45; }
html body .ns-pw-getal { width: 7.5em; min-height: 44px; font-size: 1rem; padding: 0 10px; border: 2px solid #c9d2d6; border-radius: 8px; box-shadow: none; margin: 0; }
html body .ns-pw-getal:focus-visible { outline: 3px solid #e2a23b; outline-offset: 2px; border-color: #1d3b45; }
.ns-pw-uit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px; align-items: center; padding: 18px 0; border-top: 2px solid #1d3b45; border-bottom: 2px solid #1d3b45; margin: 0 0 .8rem; }
.ns-pw-beelden { display: flex; gap: 10px; }
.ns-pw-beeld { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 140px; min-width: 120px; background: #f6f8f9; border-radius: 8px; padding: 12px; margin: 0 !important; }
.ns-pw-beeld figcaption { font-size: .8rem; opacity: .75; margin: 0; }
.ns-pw-vak--groot { width: 96px !important; height: 96px !important; }
.ns-pw-stip--groot { width: calc(96px * var(--verh, 0)) !important; height: calc(96px * var(--verh, 0)) !important; }
.ns-pw-vak { position: relative; display: flex; align-items: center; justify-content: center; width: calc(var(--vak, 3) * var(--pw-px)); height: calc(var(--vak, 3) * var(--pw-px)); border: 1px solid #222; background: #fff; transition: width .35s ease, height .35s ease; }
.ns-pw-stip { display: block; width: calc(var(--stip, 0) * var(--pw-px)); height: calc(var(--stip, 0) * var(--pw-px)); border-radius: 50%; background: #e2a23b; opacity: .9; flex: none; transition: width .35s ease, height .35s ease, background-color .2s ease; }
.ns-pw-uit[data-oordeel="krap"] .ns-pw-stip { background: #c46a1f; }
.ns-pw-uit[data-oordeel="te-breed"] .ns-pw-stip { background: #b2382a; }
.ns-pw-titel { font-weight: 800; font-size: 1.15rem; margin: 0 0 .3rem; }
.ns-pw-oordeel p { margin: 0 0 .4rem; }
.ns-pw-melding { font-weight: 600; color: #b2382a; }
@media (max-width: 600px) {
  .ns-pw-uit { grid-template-columns: 1fr; }
  .ns-pw-beeld { flex: 1 1 0; min-width: 0; }
  .ns-pw-keuze { min-width: calc(25% - 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .ns-pw-vak, .ns-pw-stip, .ns-pw-keuze { transition: none; }
}