/* NIETS LOOPT UIT ZIJN VAK — de hygiëne-laag van de opmaak.

   Eén onderwerp, dus één bestand: geen enkele tekst en geen enkel element mag
   buiten het vak vallen waar het in hoort. Dat klinkt vanzelfsprekend en is het
   niet -- een rooster- of flexkind mag standaard NIET kleiner worden dan zijn
   inhoud, dus één lange naam duwde een kaart uit zijn lijst en een e-mailadres
   zonder spaties deed hetzelfde met een rij.

   Gemeten met .memory/proefvaart/shots/keuring.py, die elk scherm afloopt en
   vier dingen telt: een pagina die opzij kan schuiven, tekst die wordt
   afgeknipt, inhoud onder een vaste balk, en een knop met scheve tekst. Van 150
   bevindingen naar 1 (2026-08-29).

   Geladen door beide kanten van het systeem, na hun eigen stijlblad. */

/* De vereniging van beide kanten van het systeem: de lijsten van het beheer én
   die van de site. Bij het samenvoegen tot één laag viel de tweede helft er
   eerst uit -- de pop-up-rijen liepen daardoor meteen weer over. */
:where(.grid, .prod-list, .roo-scroll, ul, ol, dl, .adm-form, .kaart-lijst,
       .wp-grid, .wp-pages, .set-grid,
       .popup-poll, .popup-poll__row, .popup-past li, .reviews-grid) > * {
  min-width: 0;
}
/* Een keuzevakje met tekst ernaast hoort een RIJ te zijn. Het stond als losse
   inline-doos in zijn label en stak er aan de rechterkant uit; de tekst liep er
   omheen in plaats van ernaast. Nu staan vakje en tekst op één lijn, met een
   vaste tussenruimte -- dat is wat de eigenaar bedoelt met uitgelijnd. */
.adm-form label:has(> input[type="checkbox"]),
.adm-form label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.adm-form label > input[type="checkbox"],
.adm-form label > input[type="radio"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

/* Een invoerveld is van zichzelf zo breed als zijn `size`, niet als zijn vak.
   Zonder deze twee regels stak het uit zijn label -- en op een telefoon uit de
   pagina. */
:where(input, select, textarea) {
  max-width: 100%;
  box-sizing: border-box;
}
/* Breken is de norm, niet de uitzondering. Per element opsommen wie mag
   breken werkt niet: er is altijd een span met een naam erin die er niet bij
   stond (de roosterregel was er zo een). Dit erft naar alles. */
body {
  overflow-wrap: break-word;
}
/* Een adres of code zonder spaties mag ook middenin breken -- anders is er geen
   plek waar het KAN breken. */
:where(.lid-email, .prod-code, code, .mono) {
  overflow-wrap: anywhere;
}

/* De opslaanbalk hoort tégen de onderrand van het scherm te staan.

   Hij plakte op `bottom: 0` binnen een pagina die zelf nog 3rem onderruimte
   had, dus hij zweefde een stukje boven de rand -- en in dat stukje bleef de
   volgende rij zichtbaar. Dat is precies wat de eigenaar zag: "onder de opslaan
   knop loopt er iets door". De pagina geeft haar onderruimte nu aan het
   formulier, zodat de balk de onderrand raakt en er niets meer achter
   vandaan komt. */
.admin-main:has(.set-savebar) {
  padding-bottom: 0;
}
.admin-main:has(.set-savebar) > form {
  padding-bottom: 0.9rem;
}

/* En de rij die achter de balk verdwijnt lost op in plaats van afgesneden te
   worden. Een harde snede leest als een fout; een overgang leest als bedoeld. */
.set-savebar {
  position: sticky;
}
.set-savebar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.6rem;
  background: linear-gradient(to top, var(--a-bg, var(--paper)), transparent);
  pointer-events: none;
}