/* ============================================================================
   Instellingen als regels — de vormgeving
   ============================================================================

   Het uitgangspunt: dit is een document dat je leest, met knoppen die in de tekst
   staan. Alles hier volgt daaruit.

   * De **regelhoogte is 1,95** in plaats van de gebruikelijke 1,5. Een invoerveld
     dat op de grondlijn van de tekst meeloopt heeft die lucht nodig, anders raken
     de regels elkaar en wordt de zin een blok.
   * De **maatlijn is 60 tekens**. Langer en het oog raakt de volgende regel kwijt;
     dit is leestekst, geen tabel.
   * De knoppen **tonen zich pas als je ze nadert**. In rust is het een zin met een
     dikgedrukt getal erin. Bij aanwijzen of focus verschijnen de plus en de min en
     licht de omranding op. Een veld dat altijd als veld schreeuwt maakt van elke
     zin weer een formulier — precies wat dit scherm niet moet zijn.
   * De **cijfers staan in tabelcijfers** en op gewicht 700. Het getal is waar het
     om gaat; dat mag je zien.
   ========================================================================= */

/* --- Het blad -------------------------------------------------------------- */

.instelblad {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  gap: var(--ruimte-6);
  align-items: start;
}

/* --- De rail --------------------------------------------------------------- */

.instelrail {
  position: sticky; top: var(--ruimte-4);
  display: flex; flex-direction: column; gap: var(--ruimte-4);
  max-block-size: calc(100dvh - var(--ruimte-8));
}

.railzoek {
  display: flex; align-items: center; gap: var(--ruimte-2);
  padding: 0 var(--ruimte-3);
  background: var(--vlak); border: 1px solid var(--border);
  border-radius: var(--radius-2); min-block-size: var(--raakvlak);
  transition: border-color var(--duur-snel), box-shadow var(--duur-snel);
}
.railzoek:focus-within { border-color: var(--accent-vorm); box-shadow: var(--focus-gloed); }
.railzoek svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.railzoek input {
  flex: 1; min-inline-size: 0; border: none; background: none; padding: 0;
  font-size: var(--tekst-l); color: var(--text-primary);
}
.railzoek input:focus-visible { outline: none; box-shadow: none; }

.railnav { flex: 1; min-block-size: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.railgroep + .railgroep { margin-top: var(--ruimte-5); }
.railkop {
  display: flex; align-items: center; gap: var(--ruimte-2);
  font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 0 var(--ruimte-2) var(--ruimte-2);
}
.railkop svg { width: 15px; height: 15px; }
.railnav ul { list-style: none; margin: 0; padding: 0;
  border-inline-start: 2px solid var(--border); margin-inline-start: var(--ruimte-3); }
.railnav li[hidden] { display: none; }
.railnav a {
  display: block; padding: var(--ruimte-2) var(--ruimte-3);
  margin-inline-start: -2px; border-inline-start: 2px solid transparent;
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--tekst-l); font-weight: 550;
  transition: color var(--duur-snel), border-color var(--duur-snel);
}
.railnav a:hover { color: var(--text-primary); }
/* De actieve markering is de lijn zelf, niet een vlak eromheen: de rail ís een
   verticale lijn, dus het onderdeel waar je staat kleurt dat stuk lijn. */
.railnav a[aria-current] {
  color: var(--accent-tekst); font-weight: 650;
  border-inline-start-color: var(--accent-vorm);
}
.railnoot { margin: 0; padding: 0 var(--ruimte-2);
  font-size: var(--tekst-m); color: var(--text-muted); }

/* --- De inhoud ------------------------------------------------------------- */

.instelinhoud { min-inline-size: 0; padding-bottom: var(--ruimte-9); }

.hoofdstuk + .hoofdstuk { margin-top: var(--ruimte-8); }
.hoofdstuk[hidden], .deel[hidden] { display: none; }

.hoofdstukkop {
  font-size: var(--tekst-sectie); font-weight: 700; letter-spacing: -.015em;
  margin: 0 0 var(--ruimte-5);
  padding-bottom: var(--ruimte-3); border-bottom: 1px solid var(--border-strong);
}

.deel + .deel { margin-top: var(--ruimte-6); }
.deelkop {
  font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 var(--ruimte-3);
}
/* Na een sprong in de rail krijgt de kop de focus; die moet dan wel te zien zijn. */
.deelkop:focus-visible { outline: 2px solid var(--accent-vorm); outline-offset: 4px;
  border-radius: var(--radius-1); }

.deelregels {
  background: var(--vlak); border: 1px solid var(--border-strong);
  border-radius: var(--radius-3); box-shadow: var(--schaduw-1);
  overflow: hidden;
}

/* --- Eén regel ------------------------------------------------------------- */

/* Twee kolommen: de regel zelf, en waar hij vandaan komt.

   De zin is op 60 tekens gekapt omdat dat leest; de kaart is breder omdat een
   kaart die om de tekst heen krimpt er smal en onaf uitziet. Die overgebleven
   breedte is geen restruimte maar een kolom met een taak: het zegel dat zegt dat
   de wet dit voorschrijft, en de systeemsleutel voor als je erover moet bellen. */
.instelregel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: var(--ruimte-5);
  align-items: start;
  padding: var(--ruimte-5);
  border-bottom: 1px solid var(--border);
  transition: background var(--duur-snel);
}
.regeltekst { min-inline-size: 0; }
.regelherkomst {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--ruimte-2);
  padding-top: 5px;
}
.instelregel:last-child { border-bottom: none; }
.instelregel:hover { background: var(--vlak-zacht); }
.instelregel[hidden] { display: none; }

/* De wettelijke regels krijgen een gegraveerde streep links. Geen vlak: het is
   geen waarschuwing, het is een herkomst. */
.instelregel.wettelijk { box-shadow: inset 3px 0 0 var(--svs-secundair); }

.regelzin {
  margin: 0;
  max-inline-size: 60ch;
  font-size: var(--tekst-xl);
  line-height: 1.95;
  color: var(--text-primary);
}

.regelwaarom {
  margin: var(--ruimte-2) 0 0; max-inline-size: 62ch;
  font-size: var(--tekst-m); line-height: 1.55; color: var(--text-secondary);
}
.zegel {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  margin-top: 1px; padding: 2px 9px 2px 7px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pil);
  background: var(--vlak-diep); color: var(--svs-secundair);
  font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.zegel svg { width: 12px; height: 12px; }

/* De systeemsleutel: aanwezig voor wie hem nodig heeft bij een vraag aan de
   bouwer, en verder volledig uit de weg. Hij verschijnt bij aanwijzen. */
.regelsleutel {
  font-family: var(--letter-vast); font-size: var(--tekst-xs);
  line-height: 1.4; color: var(--text-muted);
  overflow-wrap: anywhere; user-select: all;
}

/* Zonder stand geen ruimte: een lege regel mag niet meetellen in de rusthoogte,
   anders staat er onder elke zin een gat te wachten op iets wat er niet is. */
.regelstand:not([data-stand]), .regelstand[data-stand=""] { display: none; }
.regelstand {
  display: flex; align-items: center; gap: var(--ruimte-2);
  margin-top: var(--ruimte-3); font-size: var(--tekst-m); font-weight: 600;
  color: var(--text-secondary);
}
.regelstand[data-stand="bewaard"] { color: var(--accent-tekst); }
.regelstand[data-stand="mislukt"] { color: var(--danger); }
.standactie:empty { display: none; }
.terugknop {
  border: 1px solid var(--border-strong); background: var(--vlak);
  border-radius: var(--radius-pil); padding: 2px 10px;
  font-size: var(--tekst-m); font-weight: 600; color: var(--text-secondary);
  cursor: pointer;
}
.terugknop:hover { border-color: var(--border-interactive); color: var(--text-primary); }

/* --- De stelknop: een getal dat je kunt bijstellen, in de zin ---------------

   Dit is het hart van het scherm. In rust: een dikgedrukt getal met zijn eenheid,
   op een zacht groen vlak, met de tekst meelopend op de grondlijn. Bij aanwijzen
   of focus: een rand, en de plus en de min schuiven open.

   `grid-template-columns` met `0fr` → `1fr` laat de knoppen groeien vanuit niets,
   zodat de zin niet verspringt zolang je er niet bent. */
.stelknop {
  display: inline-grid;
  grid-template-columns: 0fr auto auto 0fr;
  align-items: center;
  vertical-align: baseline;
  margin: 0 1px;
  padding: 1px 5px;
  border: 1px solid transparent; border-radius: var(--radius-2);
  background: var(--accent-zacht);
  transition: border-color var(--duur-snel), grid-template-columns var(--duur-normaal)
              var(--soepel), background var(--duur-snel), box-shadow var(--duur-snel);
}
.stelknop:hover, .stelknop:focus-within {
  grid-template-columns: 1fr auto auto 1fr;
  border-color: var(--accent-rand); background: var(--vlak);
}
.stelknop:focus-within { border-color: var(--accent-vorm); box-shadow: var(--focus-gloed); }

.stelknop input {
  /* De knop groeit met het getal en niet verder: een vak van vaste breedte laat
     dode ruimte in de zin staan, en dat is precies wat een zin geen zin meer
     maakt. `field-sizing` doet dit waar het bestaat; het `ch`-vangnet eronder
     dekt de rest. */
  field-sizing: content;
  inline-size: calc(var(--tekens, 2) * 1ch + 6px);
  min-inline-size: 1.6ch; max-inline-size: 8ch;
  border: none; background: none; padding: 0 3px; margin: 0;
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-primary); text-align: center;
  -moz-appearance: textfield;
}
@supports (field-sizing: content) { .stelknop input { inline-size: auto; } }
.stelknop input[data-tekens="1"] { --tekens: 1; }
.stelknop input[data-tekens="2"] { --tekens: 2; }
.stelknop input[data-tekens="3"] { --tekens: 3; }
.stelknop input[data-tekens="4"] { --tekens: 4; }
.stelknop input[data-tekens="5"] { --tekens: 5; }
.stelknop input[data-tekens="6"] { --tekens: 6; }
.stelknop input::-webkit-outer-spin-button,
.stelknop input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stelknop input:focus-visible { outline: none; box-shadow: none; }

.stel-eenheid {
  font-size: var(--tekst-l); font-weight: 600; color: var(--text-secondary);
  padding-inline-end: 1px; white-space: nowrap;
}

.stel-min, .stel-plus {
  display: grid; place-items: center; overflow: hidden;
  inline-size: 100%; min-inline-size: 0; block-size: 22px;
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--accent-tekst); opacity: 0;
  transition: opacity var(--duur-snel), background var(--duur-snel);
  border-radius: var(--radius-1);
}
.stelknop:hover .stel-min, .stelknop:hover .stel-plus,
.stelknop:focus-within .stel-min, .stelknop:focus-within .stel-plus { opacity: 1; }
.stel-min:hover, .stel-plus:hover { background: var(--accent-zacht); }
.stel-min svg, .stel-plus svg { width: 15px; height: 15px; }

/* Onder de vingerbreedte hebben de plus en de min geen zin: daar is het getal zelf
   het veld, en het toetsenbord van de telefoon doet de rest. */
@media (hover: none) {
  .stelknop, .stelknop:hover, .stelknop:focus-within {
    grid-template-columns: 0fr auto auto 0fr;
  }
  .stelknop:hover .stel-min, .stelknop:hover .stel-plus,
  .stelknop:focus-within .stel-min, .stelknop:focus-within .stel-plus { opacity: 0; }
  .stelknop input { min-inline-size: 3ch; }
}

/* --- De schakelaar in de zin ----------------------------------------------- */

.zinschakelaar {
  display: inline-flex; vertical-align: baseline; margin: 0 2px;
  padding: 2px; gap: 2px;
  background: var(--vlak-diep); border: 1px solid var(--border);
  border-radius: var(--radius-pil);
}
.zinschakelaar button {
  border: none; background: none; cursor: pointer;
  padding: 1px 12px; border-radius: var(--radius-pil);
  font: inherit; font-size: var(--tekst-l); font-weight: 600;
  color: var(--text-secondary); white-space: nowrap;
  transition: background var(--duur-snel), color var(--duur-snel);
}
.zinschakelaar button:hover { color: var(--text-primary); }
/* De gekozen kant is marineblauw gevuld — dezelfde taal als de actieve filterchip
   in het werkbonnenportaal, zodat "dit staat aan" er overal hetzelfde uitziet. */
.zinschakelaar button[aria-checked="true"] {
  background: var(--svs-secundair); color: #fff;
}
.zinschakelaar button:focus-visible { outline: none; box-shadow: var(--focus-gloed); }

/* --- De reeks: losse momenten in plaats van "90,60,30" ---------------------- */

.reeksveld {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px;
  vertical-align: baseline; margin: 0 2px;
}
.reekschip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 4px 1px 10px; border-radius: var(--radius-pil);
  background: var(--accent-zacht); border: 1px solid var(--accent-rand);
  font-size: var(--tekst-l); font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--accent-tekst); white-space: nowrap;
}
/* De eenheid hoort één keer achter de reeks, niet in elke chip. Met de eenheid
   per chip las de zin "Waarschuw 90 dagen 60 dagen 30 dagen vóór de vervaldatum"
   en hield hij op een zin te zijn. */
.reekseenheid { font-size: var(--tekst-l); font-weight: 600;
  color: var(--text-secondary); margin-inline-start: 2px; }
.reekschip button {
  display: grid; place-items: center; inline-size: 20px; block-size: 20px;
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--accent-tekst); opacity: .55; border-radius: var(--radius-pil);
  transition: opacity var(--duur-snel), background var(--duur-snel);
}
.reekschip button:hover { opacity: 1; background: rgba(60, 122, 31, .12); }
.reekschip button svg { width: 13px; height: 13px; }

.reeks-erbij input {
  inline-size: 4.5ch; padding: 1px 6px; text-align: center;
  border: 1px dashed var(--border-interactive); border-radius: var(--radius-pil);
  background: none; font: inherit; font-size: var(--tekst-l); font-weight: 650;
  color: var(--text-primary); -moz-appearance: textfield;
}
.reeks-erbij input::-webkit-outer-spin-button,
.reeks-erbij input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.reeks-erbij input::placeholder { color: var(--text-muted); font-weight: 700; }
.reeks-erbij input:focus-visible {
  outline: none; border-style: solid; border-color: var(--accent-vorm);
  box-shadow: var(--focus-gloed);
}

/* --- Meerkeuze: de handelingen onder het vierogenprincipe ------------------- */

.keuzeveld { display: flex; flex-wrap: wrap; gap: var(--ruimte-2);
  margin-top: var(--ruimte-3); }
.keuzechip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2) var(--ruimte-2);
  border: 1px solid var(--border); border-radius: var(--radius-2);
  background: var(--vlak); color: var(--text-secondary);
  font-size: var(--tekst-l); font-weight: 600; cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel),
              color var(--duur-snel);
}
.keuzechip svg {
  width: 15px; height: 15px; flex: none;
  color: var(--accent-tekst);
  /* Het vinkje neemt zijn plek altijd in, ook als het niet zichtbaar is: anders
     verspringt de rij bij elke klik. */
  opacity: 0; transition: opacity var(--duur-snel);
}
.keuzechip:hover { border-color: var(--border-interactive); color: var(--text-primary); }
.keuzechip[aria-pressed="true"] {
  background: var(--accent-zacht); border-color: var(--accent-rand);
  color: var(--accent-tekst);
}
.keuzechip[aria-pressed="true"] svg { opacity: 1; }
.keuzechip:focus-visible { outline: none; box-shadow: var(--focus-gloed); }

/* --- Vrije tekst in de zin -------------------------------------------------- */

.zintekst { display: inline-block; vertical-align: baseline; margin: 0 2px; }
.zintekst input {
  min-inline-size: 22ch; inline-size: 30ch; max-inline-size: 100%;
  padding: 1px 10px; border: 1px solid transparent;
  border-bottom-color: var(--border-interactive); border-radius: var(--radius-1);
  background: var(--vlak-zacht);
  font: inherit; font-weight: 600; color: var(--text-primary);
  transition: border-color var(--duur-snel), background var(--duur-snel),
              box-shadow var(--duur-snel);
}
.zintekst input::placeholder { font-weight: 400; color: var(--text-muted); }
.zintekst input:hover { background: var(--vlak); border-color: var(--border-strong); }
.zintekst input:focus-visible {
  outline: none; background: var(--vlak);
  border-color: var(--accent-vorm); box-shadow: var(--focus-gloed);
}

/* --- De weergavekeuze in de kop -------------------------------------------- */

.weergavekeuze {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--vlak-diep); border: 1px solid var(--border);
  border-radius: var(--radius-pil);
}
.weergavekeuze button {
  border: none; background: none; cursor: pointer;
  padding: 6px 14px; border-radius: var(--radius-pil);
  font-size: var(--tekst-l); font-weight: 600; color: var(--text-secondary);
  transition: background var(--duur-snel), color var(--duur-snel);
}
.weergavekeuze button:hover { color: var(--text-primary); }
.weergavekeuze button[aria-pressed="true"] {
  background: var(--vlak); color: var(--text-primary); box-shadow: var(--schaduw-1);
}
.weergavekeuze button:focus-visible { outline: none; box-shadow: var(--focus-gloed); }

.geenresultaat {
  margin: var(--ruimte-6) 0 0; padding: var(--ruimte-5);
  background: var(--vlak); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-3); color: var(--text-secondary);
  max-inline-size: 60ch;
}

/* --- Smaller ---------------------------------------------------------------
   Onder 1023px wordt de rail een horizontale strook boven de inhoud: een lijst
   van twaalf ankers naast een kolom van 60 tekens past niet, en de rail
   wegstoppen zou de indeling die dit scherm juist leesbaar maakt onzichtbaar
   maken. */
@media (max-width: 1023px) {
  .instelblad { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); }
  .instelrail { position: static; max-block-size: none; }
  .railnav { display: flex; gap: var(--ruimte-4); overflow-x: auto;
    padding-bottom: var(--ruimte-2); }
  .railgroep + .railgroep { margin-top: 0; }
  .railnav ul { display: flex; gap: var(--ruimte-1); border-inline-start: none;
    margin-inline-start: 0; }
  .railnav a { white-space: nowrap; border-inline-start: none;
    border-radius: var(--radius-pil); border: 1px solid var(--border);
    background: var(--vlak); margin-inline-start: 0; }
  .railnav a[aria-current] {
    background: var(--accent-zacht); border-color: var(--accent-rand);
  }
  .railnoot { display: none; }
  .regelzin { font-size: var(--tekst-l); line-height: 1.85; }
  .instelregel { padding: var(--ruimte-4); }
  .instelregel { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-3); }
  .regelherkomst { flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: var(--ruimte-3); padding-top: 0; }
}