/* De opname in de nieuwe stijl (eigenaar, 11 oktober 2026; ontwerp "Opname-sectie1" tot en met "-sectie5",
   "Opname-sectie2-computer" en "Opname-dossier"). Bovenop `.os-ns` uit os-relaties.css: dezelfde kleuren,
   blokken en pillen. Tot 720px de telefoon met de vaste balk bovenaan; daarboven de lijst van secties links,
   die in beeld blijft. Knoppen en links minstens 44px hoog. */
.os-op {
  --op-groen: #2E7D32; --op-rood: #C62828; --op-geel: #F2B705; --op-grijs: #D5DAE1;
  --op-invoerrand: #8C939D; --op-huidig: #E8F0FA; --op-nodig: #FFF3E0;
  gap: 16px;
}
.os-op h1, .os-op h2, .os-op p { margin: 0; }
.os-op [hidden] { display: none !important; }

/* -- Bovenaan op de telefoon: ‹ Dossier, en de vaste balk met ‹, de sectie en › ---------------------- */
.os-op-boven { display: flex; align-items: center; margin: -8px -4px -8px; color: var(--ns-kop); }
.os-ns .os-op-terug { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 14px 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--ns-kop); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.os-ns .os-op-terug:hover { background: var(--ns-zweef); color: var(--ns-kop); }
.os-op-boven__wie { flex: 1; min-width: 0; padding-right: 12px; text-align: right; font-size: 13px; line-height: 18px; color: var(--ns-grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-op-vast { position: sticky; top: 56px; z-index: 20; margin: 0 -12px; padding: 0 8px; background: #EEF1F6; }
.os-op-nav { display: flex; align-items: center; gap: 2px; padding-top: 4px; }
.os-ns .os-op-pijl { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ns-kop); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.os-ns .os-op-pijl:hover { background: var(--ns-zweef); color: var(--ns-kop); }
.os-op-pijl--leeg { visibility: hidden; }
.os-op-lijst { flex: 1; min-width: 0; }
.os-op-lijst > summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 8px; box-sizing: border-box; border-radius: 16px; color: var(--ns-tekst); list-style: none; cursor: pointer; }
.os-op-lijst > summary::-webkit-details-marker { display: none; }
.os-op-lijst > summary:hover { background: var(--ns-zweef); }
.os-op-regel { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12px; line-height: 16px; color: var(--ns-kop); }
.os-op-titelregel { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 17px; line-height: 24px; font-weight: 600; }
.os-op-titelregel > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-op-titelregel > svg { flex: none; }
.os-op-stip { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.os-op-stip--groen { background: var(--op-groen); }
.os-op-stip--rood { background: var(--op-rood); }
.os-op-stip--geel { background: var(--op-geel); }
.os-op-stip--grijs { background: #fff; box-shadow: inset 0 0 0 1.5px var(--op-invoerrand); }

/* De balk met een vakje per sectie (vijf sinds 13 oktober 2026, elf bij oud formaat): grijs, rood, geel of groen; het
   vakje van nu hoger en met een rand. De balk telt zijn vakjes zelf. */
.os-op-balk { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: center; height: 24px; padding: 0 12px 6px; box-sizing: border-box; }
.os-op-balk > span { display: block; height: 6px; border-radius: 3px; background: var(--op-grijs); }
.os-op-balk > .is-groen { background: var(--op-groen); }
.os-op-balk > .is-rood { background: var(--op-rood); }
.os-op-balk > .is-geel { background: var(--op-geel); }
.os-op-balk > .is-huidig { height: 12px; box-shadow: 0 0 0 2px var(--ns-tekst); }
.os-op-balk--dossier { height: auto; padding: 0; }
.os-op-balk--dossier > span { height: 8px; }

/* De lijst van secties komt van onderen in beeld (telefoon). Een tik ernaast of Escape sluit hem. Zolang hij open
   is, komt de vaste kop boven de menubalk onderaan, anders valt de laatste sectie erachter (zie os-keten.css). */
.os-op-vast:has(.os-op-lijst[open]) { z-index: 66; }
.os-op-lijst__scrim, .os-op-lijst__paneel { display: none; }
.os-op-lijst[open] .os-op-lijst__scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(12, 18, 28, .36); }
.os-op-lijst[open] .os-op-lijst__paneel { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 calc(16px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: #fff; box-shadow: 0 -4px 24px rgba(12, 26, 43, .2); }
.os-op-lijst__greep { display: block; width: 32px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: #C4C9D1; }
.os-op-lijst__kop { padding: 0 24px 8px; font-size: 20px; line-height: 28px; font-weight: 400; color: var(--ns-tekst); }
.os-ns .os-op-sectie { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 56px; padding: 6px 24px; box-sizing: border-box; border: 0; background: transparent; color: var(--ns-tekst); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.os-ns .os-op-sectie:hover { background: var(--ns-zweef); color: var(--ns-tekst); }
.os-ns .os-op-sectie.is-huidig { background: var(--op-huidig); }
.os-op-sectie__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-op-sectie__titel { font-size: 15px; line-height: 20px; }
.os-op-sectie.is-huidig .os-op-sectie__titel { font-weight: 600; }
.os-op-sectie__status { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }

/* Het icoon bij een status: kleur staat nooit alleen. */
.os-op-icoon { flex: none; width: 22px; height: 22px; box-sizing: border-box; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.os-op-icoon--groen { background: var(--op-groen); color: #fff; }
.os-op-icoon--rood { background: var(--op-rood); color: #fff; }
.os-op-icoon--geel { background: var(--op-geel); color: var(--ns-tekst); }
.os-op-icoon--grijs { border: 2px solid var(--op-invoerrand); }

/* -- Computer: de lijst links, met de balk erboven, en de titel van de sectie ---------------------- */
.os-op-raster { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.os-op-zij { flex: 1 1 260px; max-width: 300px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; }
.os-op-zij__kop { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 20px 20px 4px 4px; background: #fff; }
.os-op-zij__naam { font-size: 14px; line-height: 20px; font-weight: 600; }
.os-op-zij__kop .os-op-balk { height: 14px; gap: 3px; padding: 0; }
.os-op-zij__kop .os-op-balk > span { height: 6px; }
.os-op-zij__kop .os-op-balk > .is-huidig { height: 12px; }
.os-op-zij__telling { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-zij__lijst { display: flex; flex-direction: column; padding: 8px; border-radius: 4px 4px 20px 20px; background: #fff; }
.os-op-zij__lijst .os-op-sectie { gap: 12px; min-height: 52px; padding: 4px 12px; border-radius: 12px; }
.os-op-zij__lijst .os-op-sectie__titel { font-size: 14px; }
.os-op-zij__lijst .os-op-sectie__status { font-size: 12px; line-height: 16px; }
.os-op-zij__lijst .os-op-icoon { width: 20px; height: 20px; }
.os-op-hoofd { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.os-op-titel { display: flex; flex-direction: column; gap: 4px; }
.os-op-titel .os-op-regel { font-size: 13px; line-height: 18px; gap: 8px; }
.os-op-titel h1 { font-size: 32px; line-height: 40px; font-weight: 400; color: var(--ns-tekst); }
.os-op-titel__sub { font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-op-kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.os-ns .os-op-kruimel a, .os-ns .os-op-kruimel button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ns-link); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.os-op-kruimel > span { color: var(--ns-grijs); }

/* -- Meldingen ----------------------------------------------------------------------------------- */
.os-op-opgeslagen { padding: 12px 16px; border-radius: 16px; background: #E3F1E4; color: #1D4D21; font-size: 15px; }
.os-op-melding { padding: 12px 16px; border-radius: 16px; background: var(--op-nodig); color: var(--ns-oranje); font-size: 15px; line-height: 22px; }
.os-op-melding--fout { background: #FCE4E4; color: #8E1B1B; }
.os-op-melding a { font-weight: 600; text-decoration: underline; }

/* -- Blokken en velden ---------------------------------------------------------------------------- */
.os-op-form { display: flex; flex-direction: column; gap: 24px; margin: 0; }
/* In een sectie zijn de blokken van het formulier blokken van de pagina, met dezelfde 24 px ertussen. Zo
   telt een sectie zonder velden (sectie 6: alleen regels) geen leeg blok mee. */
.os-op-hoofd > .os-op-form { display: contents; }
.os-op-blok { display: flex; flex-direction: column; }
.os-op-blok__titel { padding: 0 4px 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ns-kop); }
.os-op-blok__titel + .os-op-blok__uitleg { margin-top: -8px; }
.os-op-blok__uitleg { padding: 0 4px 8px; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-blok__kop { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 0 4px 4px; }
.os-op-blok__kop .os-op-blok__titel { flex: 1; min-width: 0; padding: 0; }
.os-op-rijen { display: flex; flex-direction: column; gap: 2px; }
.os-op-rijen > * { border-radius: 4px; background: #fff; }
.os-op-rijen > :first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.os-op-rijen > :last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.os-op-veld { display: flex; flex-direction: column; padding: 16px 16px 6px; scroll-margin-top: 150px; }
.os-op-veld--vast { padding-bottom: 16px; }
.os-op-veld__kop { display: flex; align-items: center; gap: 8px; }
.os-op-veld__label { min-width: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ns-tekst); }
.os-op-veld__kop > .os-op-veld__label { flex: 1; }
.os-op-veld__label .os-ns-let, .os-op-veld__label .os-op-label { margin-left: 6px; font-size: 13px; font-weight: 600; }
.os-op-label { color: var(--ns-grijs); }
.os-op-veld__uitleg { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-veld__invoer { min-width: 0; display: flex; flex-direction: column; }
.os-op-veld__invoer > :first-child { margin-top: 10px; }
.os-op-veld__fout { margin-top: 6px; font-size: 14px; line-height: 20px; color: #B3261E; }
.os-op-vraag { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--ns-tekst); }
.os-op-vraag > svg { flex: none; margin-top: 2px; color: var(--ns-link); }
.os-op-voorbeeld { margin: 2px 0 0 26px; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-codes { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ns-kop); }
.os-op-blok > .os-op-codes { margin: -4px 0 0; padding: 0 4px 8px; }
.os-op-sub { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.os-op-sub > label, .os-op-sublabel { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ns-kop); }

/* Invoer: 48px hoog, 12px rond, 16px tekst (geen zoom op de telefoon). */
.os-op .os-op-invoer, .os-op-veld input[type=text], .os-op-veld input[type=date], .os-op-veld input[type=number], .os-op-veld select, .os-op-veld textarea, .os-op-herkomst input[type=text], .os-op-herkomst input[type=date], .os-op-herkomst select, .os-op-regelform input[type=text], .os-op-regelform input[type=date], .os-op-regelform select, .os-op-regelform textarea {
  display: block; width: 100%; height: 48px; min-height: 0; box-sizing: border-box; margin: 0; padding: 0 14px; border: 1px solid var(--op-invoerrand); border-radius: 12px; background: #fff; color: var(--ns-tekst); font: inherit; font-size: 16px; line-height: 22px; box-shadow: none;
}
.os-op-veld textarea, .os-op-regelform textarea { height: 96px; min-height: 72px; padding: 11px 14px; line-height: 24px; resize: vertical; }
.os-op-veld textarea[rows="2"], .os-op-regelform textarea[rows="2"] { height: 72px; }
.os-op-veld select, .os-op-herkomst select, .os-op-regelform select { padding-right: 44px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2344474E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 22px; }
.os-op-veld :is(input, select, textarea):focus-visible, .os-op-herkomst :is(input, select):focus-visible, .os-op-regelform :is(input, select, textarea):focus-visible { outline: 2px solid var(--ns-link); outline-offset: -1px; }
.os-op-eenheid { position: relative; }
.os-op-eenheid > input { padding-right: 52px; }
.os-op-eenheid > span { position: absolute; top: 13px; right: 14px; font-size: 16px; line-height: 22px; color: var(--ns-grijs); pointer-events: none; }

/* Vinkjes: 20px, in een regel van minstens 44px. */
.os-op-vinkjes { display: flex; flex-wrap: wrap; column-gap: 24px; margin-top: 4px; }
.os-op-vinkje { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--ns-tekst); cursor: pointer; }
.os-op-vinkje input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ns-link); }
.os-op-vinkje--los { margin-top: 4px; }
.os-op-keuzes { display: flex; flex-direction: column; }
.os-op-keuzes > label, .os-op-keuzes li > label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; line-height: 20px; color: var(--ns-tekst); cursor: pointer; }
.os-op-keuzes input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ns-link); }
.os-op-keuzes ul { margin: 0; padding: 0; list-style: none; }

/* Wat open- en dichtklapt (Geen waarde, Toelichting, Anders, namelijk…): 280 ms, de inhoud in 200 ms.
   Dicht is de inhoud niet te bereiken (`visibility`), ook niet met Tab. */
.os-op-klap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 280ms cubic-bezier(.2, 0, 0, 1); }
.os-op-klap > div { min-height: 0; overflow: hidden; opacity: 1; transition: opacity 200ms linear, visibility 0s; }
.os-op-klap.is-dicht { grid-template-rows: 0fr; }
.os-op-klap.is-dicht > div { opacity: 0; visibility: hidden; transition: opacity 200ms linear, visibility 0s 280ms; }
@media (prefers-reduced-motion: reduce) { .os-op-klap, .os-op-klap > div { transition: none; } }
/* Dicht tussen de rijen (Handelsnaam, Eigen aanhef bij [Anders]): geen dubbele tussenruimte, en is hij de laatste
   rij, dan krijgt de rij erboven de ronde hoeken. */
.os-op-rijen > .os-op-klap.is-dicht { margin-top: -2px; }
.os-op-rijen > :has(+ .os-op-klap.is-dicht:last-child) { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }

/* Klopt nog bij een oude peildatum. */
.os-op-oud { display: flex; flex-direction: column; margin-top: 10px; padding: 8px 12px 0; border-radius: 12px; background: var(--op-nodig); }
.os-op-oud > p { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ns-oranje); }

/* De klant of de locatie als regel bovenaan. */
.os-op-wie { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 16px; box-sizing: border-box; border-radius: 20px; background: #fff; }
.os-op-wie__beeld { flex: none; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.os-op-wie__beeld--klant { background: #BFE3C6; color: #1D5A36; }
.os-op-wie__beeld--locatie { background: var(--ns-zacht); color: var(--ns-zacht-tekst); }
.os-op-wie__tekst { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-op-wie__label { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-wie__naam { font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.os-op-rijen > .os-op-wie { border-radius: 4px; }
.os-op-rijen > .os-op-wie:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }

/* De VRKI-versie in sectie 1. */
.os-op-versie, .os-op-lees { font-size: 16px; line-height: 24px; color: var(--ns-tekst); }
.os-op-versie__geldig { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }

/* Het gebruiksdoel als chips, met een kruisje en Toevoegen. Zonder JavaScript een lijst vinkjes. */
.os-op-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.os-op-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 0 0 14px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--op-invoerrand); font-size: 14px; line-height: 20px; color: var(--ns-tekst); }
.os-ns .os-op-chip__weg { width: 40px; height: 44px; margin: -4px 0; padding: 0; border: 0; background: transparent; color: var(--ns-kop); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.os-ns .os-op-tekstknop { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ns-link); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.os-ns .os-op-tekstknop:hover { background: rgba(31, 95, 168, .08); color: var(--ns-link-zweef); }
.os-op-chipkeuze { display: none; }
.os-op-chipkeuze.is-actief { display: block; }
.is-chips .os-op-chipvinkjes { display: none; }

/* Regels en bestanden: een blok per regel, met ⋮; daaronder "+ … toevoegen". */
.os-op-item { position: relative; display: flex; flex-direction: column; padding: 12px 4px 8px 16px; scroll-margin-top: 150px; }
/* Een regel zonder keuze onder de chips (anders, namelijk): in het veld, zonder eigen rand. */
.os-op-item.os-op-item--los { padding: 8px 0 0; }
.os-op-item__kop { display: flex; align-items: flex-start; gap: 4px; }
.os-op-item__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.os-op-item__waarde { font-size: 16px; line-height: 24px; color: var(--ns-tekst); overflow-wrap: anywhere; }
.os-op-item__sub { font-size: 14px; line-height: 20px; color: var(--ns-grijs); overflow-wrap: anywhere; }
.os-ns .os-op-item__bestand { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 48px; color: var(--ns-tekst); }
.os-op-item__bestandicoon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--op-huidig); color: var(--ns-link); display: flex; align-items: center; justify-content: center; }
/* Het voorbeeld van een foto, zoals voorheen in de opname: klein, onder de naam. */
.os-op-item__voorbeeld { display: block; max-width: 160px; height: auto; margin: 4px 12px 8px 52px; border-radius: 8px; border: 1px solid var(--ns-zacht); }
.os-op-item > .os-op-oordeel, .os-op-item > .os-op-klap, .os-op-item > .os-op-melding, .os-op-item > .os-op-oud { margin-right: 12px; }
.os-op-item .os-rp-meer > summary { width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--ns-kop); cursor: pointer; }
.os-op-item .os-rp-meer > summary::-webkit-details-marker { display: none; }
.os-op-item .os-rp-meer > summary:hover { background: var(--ns-zweef); }

/* Foto bij een punt (deel B, punt 10; ontwerp "Opname-sectie3" tot en met 5): de knop rechts van de titel of
   van de regel, de tegels van 64 px eronder. */
.os-op-foto { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -11px -8px -11px 0; padding: 0 8px; border: none; border-radius: 999px; background: transparent; color: var(--ns-link); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.os-op-item__kop > .os-op-foto { margin: 0; }
.os-op-foto:hover { background: var(--ns-zweef); }
.os-op-foto[aria-busy="true"] { opacity: .6; cursor: progress; }
/* De keuze achter Foto op een aanraakscherm (punt 7, 12 oktober 2026): Foto maken of Kies uit album, als
   een klein menu onder de knop, zoals de ⋮-menu's. os-opname.js zet het neer. */
.os-op-fotokeuze { position: absolute; z-index: 30; min-width: 200px; padding: 8px 0; border-radius: 16px; background: #fff; box-shadow: 0 6px 24px rgba(12, 26, 43, .22); }
.os-op-fotokeuze[hidden] { display: none; }
.os-op-fotokeuze > button { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 16px; border: 0; background: transparent; color: var(--ns-tekst); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.os-op-fotokeuze > button:hover, .os-op-fotokeuze > button:focus-visible { background: var(--ns-zweef); }
.os-op-tegels { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.os-op-item > .os-op-tegels { padding: 10px 12px 0 0; }
.os-op-tegels[hidden] { display: none; }
.os-op-tegel { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #E9EDF2; color: var(--ns-grijs); font-size: 13px; font-weight: 700; text-decoration: none; }
.os-op-tegel img { width: 100%; height: 100%; object-fit: cover; }
.os-op-veld__fout a, .os-op-veld__fout button { margin-left: 4px; padding: 0; border: none; background: none; color: var(--ns-link); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.os-ns .os-op-toevoegen { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 56px; padding: 0 16px; box-sizing: border-box; border: 0; background: #fff; color: var(--ns-link); font: inherit; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.os-ns .os-op-toevoegen:hover { background: #F5F8FC; color: var(--ns-link-zweef); }
.os-op-toevoegen > span:first-child { flex: none; width: 24px; display: flex; justify-content: center; }
.os-op-leegregel { padding: 14px 16px; font-size: 15px; line-height: 22px; color: var(--ns-grijs); }
.os-op-oordeel { display: flex; flex-direction: column; margin-top: 10px; }
.os-op-oordeel__kop { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ns-kop); }
.os-op-oordeel > .os-op-melding { margin: 6px 0 2px; font-size: 14px; }
.os-ns .os-op-installatie { display: flex; align-items: center; gap: 16px; min-height: 56px; color: var(--ns-tekst); text-decoration: none; }
.os-op-installatie__beeld { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--ns-zacht); color: var(--ns-zacht-tekst); display: flex; align-items: center; justify-content: center; }

/* Herkomst van de wijziging: alleen als een opgeslagen waarde verandert. */
.os-op-herkomst { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 20px; background: #fff; }
.os-op-herkomst__uitleg { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-herkomst__veld { display: flex; flex-direction: column; gap: 4px; }
.os-op-herkomst__veld > label, .os-op-herkomst__veld > span { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ns-tekst); }
.os-op-herkomst__veld > p { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }

/* Nog nodig en Nog leeg: een lijst met links naar het veld. */
.os-op-nodig { display: flex; flex-direction: column; padding: 16px 16px 6px; border-radius: 20px; background: var(--op-nodig); }
.os-op-nodig > h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ns-oranje); }
.os-op-nodig ul { margin: 4px 0 0; padding: 0 0 0 24px; color: var(--ns-tekst); font-size: 15px; }
.os-ns .os-op-nodig li a { display: inline-flex; align-items: center; min-height: 44px; }
.os-op-nodig--leeg { background: #fff; }
.os-op-nodig--leeg > h2 { color: var(--ns-kop); }
.os-op-nodig--leeg .os-op-icoon { width: 18px; height: 18px; }

/* Opslaan en Opslaan en verder. */
.os-op-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 4px; }
.os-ns .os-op-knop { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; box-sizing: border-box; border: 1px solid var(--ns-rand); border-radius: 999px; background: transparent; color: var(--ns-tekst); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.os-ns .os-op-knop:hover { background: var(--ns-zweef); color: var(--ns-tekst); }
.os-ns .os-op-knop--vol { padding: 0 24px; border-color: var(--ns-link); background: var(--ns-link); color: #fff; }
.os-ns .os-op-knop--vol:hover { border-color: var(--ns-link-zweef); background: var(--ns-link-zweef); color: #fff; }

/* De regels die een sectie zelf heeft (sectie 6, 8 en 10): een regel per rij, en een formulier eronder. */
.os-op-regelform { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.os-op-regelform .os-field { margin: 0; }
.os-op-regelform .os-label { display: block; margin-bottom: 4px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ns-kop); }
.os-op-regelform .os-help { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-regelform .os-field-error { margin: 6px 0 0; color: #B3261E; font-size: 14px; }

/* Het dossier. */
.os-op-dossierkop { display: flex; flex-direction: column; padding: 4px 8px 0; }
.os-op-dossierkop__soort { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ns-link); }
.os-op-dossierkop h1 { margin-top: 4px; font-size: 28px; line-height: 36px; font-weight: 400; color: var(--ns-tekst); overflow-wrap: anywhere; }
.os-op-dossierkop__adres { margin-top: 2px; font-size: 16px; line-height: 24px; color: var(--ns-tekst); }
.os-op-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.os-op-labels > span { padding: 2px 10px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 600; }
.os-op-labels__synth { background: #FDEBC8; color: #6B4500; }
.os-op-labels__oud { background: #E3E7ED; color: var(--ns-kop); }
/* De vraag in het dossier van een compacte werkofferte of directe levering (eigenaar, 25 oktober 2026; KB punt 55;
   borden "Dossier-werkofferte" en "Dossier-levering"): een witte kaart met de tekst, de vakgebieden als chips en de
   regel eronder. */
.os-op-vraag { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: #fff; }
.os-op-vraag__tekst { margin: 0; font-size: 16px; line-height: 24px; color: var(--ns-tekst); overflow-wrap: anywhere; }
.os-op-vraag__chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.os-op-vraag__chips:empty { display: none; }
.os-op-vraag__chip { padding: 2px 10px; border-radius: 999px; background: #E8F0FA; color: var(--ns-link); font-size: 13px; line-height: 20px; font-weight: 600; }
.os-op-vraag__noot { margin: 0; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-voortgang { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.os-op-voortgang__tekst { font-size: 15px; line-height: 22px; color: var(--ns-tekst); }
.os-op-voortgang .os-op-knop--vol { align-self: flex-start; }
.os-op-alle > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 12px 0 16px; color: var(--ns-link); font-size: 15px; font-weight: 600; list-style: none; cursor: pointer; }
.os-op-alle > summary::-webkit-details-marker { display: none; }
.os-op-alle > summary > span:first-child { flex: 1; }
.os-op-alle[open] .os-op-alle__dicht, .os-op-alle:not([open]) .os-op-alle__open { display: none; }
.os-op-alle__lijst { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; background: #EEF1F6; }
.os-op-alle__lijst > a { background: #fff; border-radius: 4px; }
.os-op-alle__lijst > a:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.os-op-rijen > .os-op-alle[open] { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.os-op-keten { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.os-op-keten > li { border-radius: 4px; background: #fff; }
.os-op-keten > li:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.os-op-keten > li:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.os-ns .os-op-stap { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 16px; box-sizing: border-box; border-radius: inherit; color: var(--ns-tekst); text-decoration: none; }
.os-ns a.os-op-stap:hover { background: rgba(27, 31, 38, .04); color: var(--ns-tekst); }
.os-op-stap__nr { flex: none; width: 32px; height: 32px; border-radius: 999px; background: #E3E7ED; color: var(--ns-kop); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.os-op-stap.is-nu .os-op-stap__nr { background: var(--ns-link); color: #fff; }
/* Zonder inbraakbeveiliging: Risicoklasse en Maatregelen niet nodig, lichter grijs met een streepje (bord
   "Dossier-zonder-inbraak", KB punt 52). */
.os-op-stap.is-nvt .os-op-stap__nr { background: #F1F3F6; color: #8A9099; }
.os-op-stap.is-nvt .os-op-stap__titel { color: var(--ns-grijs); }
.os-op-stap__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-op-stap__titel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; color: var(--ns-kop); }
.os-op-stap.is-nu .os-op-stap__titel { color: var(--ns-tekst); }
.os-op-stap__nu { padding: 1px 8px; border-radius: 999px; background: var(--ns-zacht); color: var(--ns-zacht-tekst); font-size: 12px; line-height: 18px; font-weight: 600; }
.os-op-stap__status { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-stap__pijl { flex: none; display: flex; color: var(--ns-kop); }
.os-op-stil { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }

@media (max-width: 720px) {
  .os-op { gap: 16px; padding-bottom: 24px; }
  .os-op-raster { display: block; }
  .os-op-hoofd { gap: 24px; }
  /* Van de balk tot de inhoud ~18 px, zoals in het ontwerp (eigenaar, 11 oktober; was ~50). De kop van de
     sectie is op de telefoon alleen voor schermlezers, dus telt hij niet als blok mee. */
  .os-op-titel { display: contents; }
  .os-op-vast { margin-bottom: -10px; }
}
@media (min-width: 721px) {
  .os-op { gap: 16px; }
  .os-op-vast, .os-op-boven { display: none; }
  /* Op de computer staan titel en uitleg links en het veld rechts. */
  .os-op-veld--breed { flex-direction: row; flex-wrap: wrap; column-gap: 32px; row-gap: 4px; padding: 16px 24px 12px; }
  .os-op-veld--breed > .os-op-veld__links { flex: 1 1 220px; max-width: 300px; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
  .os-op-veld--breed > .os-op-veld__links .os-op-veld__uitleg, .os-op-veld--breed > .os-op-veld__links .os-op-vraag { margin-top: 0; }
  .os-op-veld--breed > .os-op-veld__invoer { flex: 999 1 360px; }
  .os-op-veld--breed > .os-op-veld__invoer > :first-child { margin-top: 4px; }
  .os-op-veld--breed textarea:not([rows="2"]) { height: 120px; }
  .os-op-wie { padding: 8px 24px; }
  .os-op-nodig { padding: 16px 24px 6px; }
  .os-op-knoppen { gap: 12px; padding: 0; }
  .os-ns .os-op-knop--vol { padding: 0 28px; }
  .os-op-dossierkop { padding: 0; }
}

/* Waarde en vakjes naast elkaar op de computer (ontwerp "Pandgegevens-sectie3-computer"). */
.os-op-veld__rij { display: flex; flex-direction: column; }
.os-op-veld__waarde { min-width: 0; display: flex; flex-direction: column; }
.os-op-geen { display: flex; flex-direction: column; margin-top: 4px; }
@media (min-width: 721px) {
  .os-op-veld__rij { flex-direction: row; flex-wrap: wrap; align-items: flex-start; column-gap: 24px; }
  .os-op-veld__waarde { flex: 1 1 300px; max-width: 480px; }
  .os-op-veld__rij > .os-op-vinkjes { order: 2; min-height: 56px; align-items: center; margin-top: 0; column-gap: 20px; }
  .os-op-veld__rij > .os-op-oud { order: 3; flex: 1 1 100%; margin-top: 4px; }
  .os-op-veld--breed .os-op-oud, .os-op-veld__toelichting { max-width: 480px; }
}

/* Pandgegevens: rijen met het label, de waarde, de toelichting, "herkomst · datum" en ⋮. */
.os-op .os-rp-meer > summary:not(.os-op-pijl) { width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--ns-kop); list-style: none; cursor: pointer; }
.os-op .os-rp-meer > summary::-webkit-details-marker { display: none; }
.os-op .os-rp-meer > summary:hover { background: var(--ns-zweef); }
.os-op-pandrij { display: flex; align-items: flex-start; gap: 4px; min-height: 64px; padding: 0 4px 0 0; box-sizing: border-box; scroll-margin-top: 90px; }
.os-ns .os-op-pandrij__tekst { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 8px 10px 16px; border-radius: inherit; color: var(--ns-tekst); text-decoration: none; }
.os-ns a.os-op-pandrij__tekst:hover { background: rgba(27, 31, 38, .04); color: var(--ns-tekst); }
.os-op-pandrij__label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-pandrij__slot { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ns-kop); }
.os-op-pandrij__waarde { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 24px; color: var(--ns-tekst); overflow-wrap: anywhere; }
.os-ns a.os-op-pandrij__waarde { display: inline; color: var(--ns-link); }
.os-op-pandrij__noot { font-size: 14px; line-height: 20px; color: var(--ns-tekst); overflow-wrap: anywhere; }
.os-op-pandrij__sub { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-pandrij__let { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ns-oranje); }
.os-op-pandrij > .os-rp-meer { flex: none; margin-top: 10px; }
.os-op-pandrij > .os-op-tekstknop { flex: none; margin-top: 10px; }
.os-op-dossierkop__links { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-op-dossierkop .os-op-veld__uitleg, .os-op-dossierkop .os-op-codes { margin-top: 8px; }
.os-op-alle--los { border-radius: 20px; background: #fff; overflow: hidden; }
.os-op-alle--los .os-op-alle__lijst { border-top: 2px solid #EEF1F6; }
.os-op-alle--los .os-op-alle__lijst > .os-op-pandrij { background: #fff; border-radius: 4px; }
.os-op-alle--los .os-op-alle__lijst > :last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.os-op-rijen > .os-op-leegregel { margin: 0; }
.os-ns .os-op-leegregel a { font-weight: 600; }
@media (min-width: 721px) {
  .os-op-pandrij__tekst { padding-left: 24px; }
  /* Op de computer het label in een kolom van 220px naast de waarde (ontwerp "Pandgegevens-stijl-computer"). */
  .os-op-pandrij { min-height: 56px; }
}
.os-op-pandrij__waarde.os-ns-let { color: var(--ns-oranje); font-weight: 600; }

/* "In de BAG: …" met Overnemen en Negeren (deel B, punt 12), onder de rij of het veld. */
.os-op-pandrij:has(> .os-op-bag) { flex-wrap: wrap; }
.os-op-pandrij > .os-op-bag { flex-basis: 100%; margin: -6px 0 10px 16px; }
.os-op-bag { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; padding: 8px 12px; border-radius: 12px; background: #FFF3E0; }
.os-op-veld .os-op-bag { margin-top: 10px; }
.os-op-bag__tekst { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ns-tekst); }
.os-op-bag__tekst > svg { flex: none; color: var(--ns-oranje); }
.os-op-bag__knoppen, .os-op-bag__knoppen > form { display: flex; gap: 4px; }
.os-op-bag__klaar { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
@media (min-width: 721px) { .os-op-pandrij > .os-op-bag { margin-left: 24px; } }
.os-op-pandrij__waarde.os-ns-grijs { color: var(--ns-grijs); }
/* Een bestand op de regelpagina: de link, de maat en bij een foto het voorbeeld, zoals voorheen. */
.os-op-pandrij__bestand { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.os-op-pandrij__bestand img { display: block; max-width: 100%; height: auto; margin-top: 8px; border-radius: 12px; }
/* De link naar het bestand is een doel om aan te tikken: minstens 44 px hoog. */
.os-ns .os-op-pandrij__bestand > a { display: inline-flex; align-items: center; min-height: 44px; }

/* -- Het algemene formulier in de nieuwe stijl (werkpakket nieuwe stijl, eigenaar 12 oktober 2026) ------
   Alle formulieren onder Relaties, Locaties en Installaties (`relaties/formulier_ns.html` en
   `relaties/_ns_veld.html`), met dezelfde velden als de opname: ook e-mail, telefoon en web, een
   sterretje bij verplicht, keuzerondjes en vinkjes onder elkaar, en meldingen met een lijst. */
.os-op-veld input:is([type=email], [type=tel], [type=url], [type=search], [type=time], [type=datetime-local], [type=password]) {
  display: block; width: 100%; height: 48px; min-height: 0; box-sizing: border-box; margin: 0; padding: 0 14px; border: 1px solid var(--op-invoerrand); border-radius: 12px; background: #fff; color: var(--ns-tekst); font: inherit; font-size: 16px; line-height: 22px; box-shadow: none;
}
.os-op-verplicht { color: #B3261E; }
.os-op-keuzes label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; line-height: 20px; color: var(--ns-tekst); cursor: pointer; }
.os-op-keuzes > div { display: flex; flex-direction: column; }
.os-op-uitleg { padding: 0 4px; font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-op-uitleg--onder { padding-top: 8px; font-size: 13px; line-height: 18px; }
.os-op-uitleg a, .os-op-melding a { font-weight: 600; }
.os-op-melding--lijst { display: flex; flex-direction: column; gap: 6px; }
.os-op-melding ul { margin: 0; padding-left: 20px; }
.os-op-melding__stil { color: var(--ns-grijs); font-size: 13px; }
.os-op-melding__label { display: inline-block; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; }
.os-op-kandidaten { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.os-op-kandidaten > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .7); color: var(--ns-tekst); }
.os-op-melding .os-op-vinkje { color: var(--ns-tekst); }
.os-op-knoppen--los { padding: 0; }
.os-op-alle--eerder { margin-top: 12px; }

/* Een nieuwe relatie (eigenaar, 12 oktober 2026, punt 1 en 6; ontwerp "Relatie-nieuw-organisatie"): de rol als
   pillen met een vinkje bij de gekozen, de adresblokken met postcode, huisnummer en toevoeging naast elkaar,
   en "Dit adres is ook het". */
.os-op-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.os-op-pil { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; box-sizing: border-box; border: 1px solid var(--ns-rand); border-radius: 999px; background: #fff; color: var(--ns-tekst); font-size: 15px; font-weight: 600; cursor: pointer; }
.os-op-pil input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.os-op-pil__vinkje { display: none; }
.os-op-pil:has(input:checked) { border-color: var(--ns-zacht); background: var(--ns-zacht); color: #0D3C73; padding-left: 12px; }
.os-op-pil:has(input:checked) .os-op-pil__vinkje { display: inline-flex; }
.os-op-pil:has(input:focus-visible) { outline: 3px solid var(--ns-link); outline-offset: 2px; }
.os-op-pillen + .os-op-veld__uitleg { margin-top: 8px; }
fieldset.os-op-groep { margin: 0; min-width: 0; border: 0; }
fieldset.os-op-groep > legend { float: left; width: 100%; padding: 0; }
fieldset.os-op-groep > legend + * { clear: both; }
.os-op-adres__rij { display: grid; gap: 0 8px; }
.os-op-adres__rij--drie { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.os-op-adres__rij--twee { grid-template-columns: minmax(0, 1fr) 76px; }
.os-op-adres > .os-op-adres__rij:first-child > .os-op-sub, .os-op-adres > .os-op-sub:first-child { margin-top: 0; }
.os-op-adres__opzoeken { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; }
.os-op-adres__melding { flex: 1 1 200px; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-adres__melding:empty { display: none; }
.os-op-adres__melding.is-gevonden { color: #1D4D21; }
.os-ns .os-op-knop--klein { gap: 6px; min-height: 44px; padding: 0 16px; font-size: 14px; }
.os-op-keuzes__uitleg { margin: -6px 0 6px 30px; }
.os-op-knoppen--aanmaken { margin-top: 16px; }
.os-op-rolsub { margin-top: 12px; }
.os-op-rolsub .os-op-keuzes { margin-top: 4px; }
/* Een dichtgeklapt blok tussen de blokken van het formulier telt niet als ruimte mee (ontwerp: -24 px). */
.os-op-form > .os-op-klap { transition: grid-template-rows 280ms cubic-bezier(.2, 0, 0, 1), margin-top 280ms cubic-bezier(.2, 0, 0, 1); }
.os-op-form > .os-op-klap.is-dicht { margin-top: -24px; }
@media (prefers-reduced-motion: reduce) { .os-op-form > .os-op-klap { transition: none; } }
/* De fotoweergave (werkpakket nieuwe stijl): de foto groot in een wit vak, met de gegevens eronder. */
.os-op-fotoweergave__vak { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.os-op-fotoweergave__beeld { display: block; max-width: 100%; height: auto; border-radius: 12px; }
/* Zoeken in een formulier (werkpakket nieuwe stijl): het veld met Zoeken ernaast. */
.os-op-zoek { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.os-op-zoek__label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ns-tekst); }
.os-op-zoek__rij { display: flex; gap: 8px; }
.os-op-zoek__rij > input { flex: 1; min-width: 0; }
.os-op-zoek__rij > .os-op-knop { gap: 6px; }
.os-op-leegregel--los { border-radius: 20px; background: #fff; }

/* -- De opname in vijf secties (eigenaar, 13 oktober 2026; borden Opname-1 tot en met Opname-5) ------------------------ */
/* Bovenaan elke sectie wanneer je hem invult. */
.os-op-wanneer { margin: 0; font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
/* Het rode uitroepteken bij een verplicht veld dat leeg is: het icoon van Nog nodig, de stand van de laatste keer opslaan. */
.os-op-mist { display: inline-flex; flex: none; margin-left: 6px; vertical-align: -3px; color: #C62828; }
.os-op-titelrij { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.os-op-titelrij > .os-op-veld__label, .os-op-titelrij > .os-op-sublabel { display: inline-flex; align-items: center; }
/* + Toelichting: een knopje dat het veld opent en dan verdwijnt; zonder JavaScript een vinkje met dezelfde vorm. */
.os-op-plus { position: relative; display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; border-radius: 999px; color: var(--ns-link); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; }
.os-op-plus > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.os-op-plus:has(> input:checked) { display: none; }
.os-op-plus:has(> input:focus-visible) { outline: 2px solid var(--ns-link); outline-offset: 2px; }
.os-op-plus > svg { flex: none; }
.os-op-vinkjes > .os-op-plus { margin-left: -8px; }
/* Meer keuzes als knoppen met een vinkje (bord Opname-2). */
.os-op-pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.os-op-pil { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--op-invoerrand); border-radius: 10px; background: #fff; color: var(--ns-tekst); font-size: 14px; line-height: 20px; cursor: pointer; }
.os-op-pil > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.os-op-pil > .os-op-pil__vink { display: none; color: var(--ns-link); }
.os-op-pil:has(> input:checked) { border-color: var(--ns-link); background: #E8F0FA; }
.os-op-pil:has(> input:checked) > .os-op-pil__vink { display: inline-flex; }
.os-op-pil:has(> input:focus-visible) { outline: 2px solid var(--ns-link); outline-offset: 2px; }
.os-op-vraag--adviseur + .os-op-voorbeeld { margin-left: 0; }
.os-op-hint { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
/* Een vakgebied met zijn uitleg; de grondslag met de uitleg onder elke keuze. */
.os-op-keuzes .os-op-keuze__tekst { display: flex; flex-direction: column; }
.os-op-keuzes .os-op-keuze__uitleg { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-keuzes > label:has(.os-op-keuze__uitleg) { min-height: 56px; padding: 6px 0; box-sizing: border-box; }
/* Door … op …, met Wijzigen. */
.os-op-beoordeeld { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-op-beoordeeld .os-op-plus { color: var(--ns-link); }
.os-op-beoordeeld .os-op-plus:has(> input:checked) { display: inline-flex; }
.os-op-naast { display: flex; flex-wrap: wrap; gap: 12px; }
.os-op-naast > .os-op-sub { flex: 1 1 140px; }
/* Eerder vastgelegd: wat er bij een oudere opname al stond, alleen te lezen. */
.os-op-eerder { margin: 0; }
.os-op-eerder dt { font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-op-eerder dd { margin: 2px 0 8px; font-size: 15px; line-height: 22px; color: var(--ns-tekst); white-space: pre-line; }
/* De weg naar Risicoklasse voor de goederen en hun waarde. */
.os-op-wijzer { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 20px; background: #fff; font-size: 14px; line-height: 20px; color: var(--ns-tekst); }
.os-op-wijzer > button { align-self: flex-start; min-height: 44px; padding: 0; border: none; background: none; color: var(--ns-link); font: inherit; font-weight: 600; cursor: pointer; }
/* Besproken opties: wat de klant wil, als label (bord Opname-5); Optie toevoegen klapt het formulier open. */
.os-op-optie { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 13px; line-height: 18px; }
.os-op-optie--gewenst { background: #E3F1E4; color: #1D5A36; }
.os-op-optie--niet_gewenst { background: #ECEEF1; color: #44474E; }
.os-op-optie--nog_te_bepalen { background: #FFF3E0; color: #8A4A00; }
.os-op-nieuw > summary { list-style: none; }
.os-op-nieuw > summary::-webkit-details-marker { display: none; }
.os-op-nieuw[open] > summary { display: none; }