/* ==========================================================================
   MAHSEN: pagina/werk.css
   Wat alleen /werk draagt, naast publiek.css (design-system.md §6 en §10).
   pages/werk/index hangt dit blad zelf, via partials/stijlblad in
   @push('stijl'), zodat het ná publiek.css komt en de andere pagina's het
   niet laden.

   Onder dezelfde regels als publiek.css, en op zijn tokens: geen eigen
   tokenblok, geen letter, geen basis (OntwerpregelsTest). Elke selector draagt
   een klasse die alleen deze pagina heeft; de paginakop, de kaart van het
   werk, de kolommen en de vragen staan in publiek.css, want een andere pagina
   draagt ze ook.
   ========================================================================== */

/* Een voorstel in zijn summary (partials/werk-voorstellen): "Voorstel:" vooraan
   in elke rij en niet alleen in de inleiding, zodat wie de summaries scant,
   het leest vóór de zaak. Een woord in de zin en geen label in kapitalen (§1),
   op dezelfde regel: op een eigen regel maakte het de twintig summaries op een
   gsm samen een half scherm langer. In zand-licht, want de vraag staat op
   walnoot-2, waar zand geen 4,5:1 haalt (§5.1).

   Op 320px schoof een lange samenstelling de vraag buiten beeld: de summary
   is een flexbox in een raster, en die krimpen allebei niet onder hun langste
   woord. Hier mag dat woord afbreken, met een koppelteken waar de browser
   Nederlands afbreekt en anders waar het moet: een summary van vier regels is
   een zin en geen kop, en een woord buiten beeld is erger dan een afgebroken
   woord. */
.voorstel { min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.voorstel-label { color: var(--zand-licht); }

/* Een voorstel als vraag (vraag--voorstel): de plus staat in de markup vóór de
   zin, zodat hij op een smalle gsm rechts bovenaan kan staan. Vanaf 30rem zet
   de flexbox van publiek.css hem weer rechts van de zin, zoals bij elke vraag.
   Daaronder loopt de zin onder de plus over de volle breedte, met minder
   binnenruimte: naast de plus bleven er op 320px 161px over, drie woorden per
   regel, en brak "dierenverzekering" met één letter op de volgende regel. */
.vraag--voorstel .plus { order: 1; }
@media (max-width: 29.9375rem) {
  .vraag--voorstel summary { display: block; padding: 0.875rem 0.875rem 1rem 1.125rem; }
  .vraag--voorstel .plus { float: right; margin: 0 0 0.375rem 0.75rem; }
  .vraag--voorstel .vraag-antwoord { padding-inline: 1.125rem 0.875rem; }
}

/* Op een gsm staan de twee kolommen onder elkaar, met de lucht van de vragen
   zelf (0.75rem in publiek.css) en niet die van twee kolommen: 40px tussen
   voorstel tien en elf leek een groep die niets betekent. Vanaf 62.5rem staan
   ze naast elkaar, en daar telt alleen de ruimte tussen de kolommen. */
.voorstel-kolommen { row-gap: 0.75rem; }