/* Rol- en functiepagina's van Roosterplanning (/software/producten/roosterplanning/<rol>/ en /functies/).
   Alles onder main.rollen. Maten en toon overgenomen uit css/roosterplanning.css (main.rp), zodat deze
   pagina's er hetzelfde uitzien als de productpagina. Tekst: 05-uitingen/ROLLEN-EN-FUNCTIES-ROOSTERPLANNING.md. */

.rollen [id] { scroll-margin-top: 32px; }

/* Schermafbeelding: plat, 1 px rand, radius 0, nooit groter dan het bestand. Ronde 3 (28-09): elke uitsnede volgt een
   paneel-, kolom- of rijgrens, 1:1, hoogstens 770 CSS-px breed; maat per beeld in de HTML. Uitsneden: scratchpad rollen-crop3.py. */
.rollen .rl-scherm { width: fit-content; max-width: 100%; border: 1px solid var(--vlak-2); border-radius: 0; background: var(--papier); }
.rollen .rl-scherm img { display: block; max-width: 100%; height: auto; }
.rollen .rl-beeld { min-width: 0; }
.rollen .rl-bijschrift { display: block; margin-top: 12px; font: 400 16px/24px var(--sans); color: var(--steen); }
.rollen .rl-versie { display: block; max-width: 34em; margin-top: 6px; font: 400 16px/24px var(--sans); color: var(--steen); }

/* Lange samenstellingen ("informatiebeveiliging") breken op 375 af in plaats van de pagina te verbreden. */
.rollen :is(.rl-h1, .rl-h3, .h2) { overflow-wrap: break-word; }

/* ---------- Secties ---------- */
.rollen .rl-sectie { padding-top: var(--sectie); }
.rollen .rl-taken { padding-block: var(--sectie); background: var(--toon); }
.rollen .rl-sectiekop { margin-bottom: var(--dicht); }

/* ---------- Taken: tekst (5 kol.) naast beeld (7 kol.); zonder beeld staat de tekst net zo links onder de kop ---------- */
.rollen .rl-rij { display: grid; row-gap: 24px; }
.rollen .rl-rij + .rl-rij { margin-top: var(--dicht); }
.rollen .rl-h3 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.rollen .rl-rij__tekst { min-width: 0; }
.rollen .rl-rij__tekst .regel { max-width: 32em; text-wrap: pretty; }
.rollen .rl-rij .rl-h3 + .regel { margin-top: 16px; }
.rollen .rl-rij__beeld { min-width: 0; }

.rollen .rl-bewijs { margin-top: 20px; font-size: 16px; line-height: 1.55; color: var(--steen); }
.rollen .rl-vervolg { margin-top: 14px; }

/* Nog niet: label in mono, zin, link naar Wat nog komt. */
.rollen .rl-nognog { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--steen-licht); }
.rollen .rl-label { margin-right: 12px; font-size: 16px; color: var(--papier); }
.rollen .rl-nognog .link { padding-block: 4px; }

/* Voor: rollen als links op één regel. */
.rollen .rl-voor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 16px; font-size: 18px; line-height: 1.5; }
.rollen .rl-voor__label { color: var(--steen); }
.rollen .rl-voor ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.rollen .rl-voor a { display: inline-block; padding-block: 8px; color: var(--papier); text-decoration: underline 1px var(--steen); text-underline-offset: 4px; }
/* Rol zonder eigen pagina: gewone tekst. */
.rollen .rl-voor li > span { display: inline-block; padding-block: 8px; color: var(--steen-licht); }
@media (hover: hover) { .rollen .rl-voor a:hover { text-decoration-color: var(--koper); } }

/* ---------- Vragen: native details, zonder haarlijnen ---------- */
.rollen .rl-teken { flex: none; font: 400 22px/1 var(--mono); color: var(--steen); }
.rollen .rl-teken::after { content: "+"; }
.rollen details[open] > summary .rl-teken::after { content: "\2212"; }
.rollen summary { list-style: none; cursor: pointer; }
.rollen summary::-webkit-details-marker { display: none; }
.rollen .rl-vragen { display: grid; row-gap: 8px; min-width: 0; }
.rollen .rl-vragen summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: 14px; }
.rollen .rl-vraag { font-size: 20px; line-height: 1.35; font-weight: 500; color: var(--papier); }
.rollen .rl-antwoord { max-width: 40em; padding: 2px 48px 20px 0; }
.rollen .rl-antwoord .rl-nognog { margin-top: 12px; }
@media (hover: hover) { .rollen .rl-vragen summary:hover .rl-vraag { text-decoration: underline 1px var(--koper); text-underline-offset: 4px; } }

/* ---------- Andere rollen ---------- */
.rollen .rl-andere { padding-top: var(--dicht); }
.rollen .rl-rollen { display: flex; flex-wrap: wrap; gap: 0 32px; }
.rollen .rl-rollen li { font-size: 20px; line-height: 1.35; font-weight: 500; }
.rollen .rl-rollen [aria-current] { display: inline-block; padding-block: 10px; color: var(--steen); }
.rollen .rl-alle { margin-top: 16px; }

/* ---------- Raster ---------- */
@media (min-width: 900px) {
  .rollen .rl-rij, .rollen .rl-kol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); align-items: start; }
  .rollen .rl-rij__tekst { grid-column: 1 / 5; grid-row: 1; }
  /* fix4: beeld begint op kolom 5, dezelfde linkerrand als de tekst in rijen zonder beeld, Vragen en Andere rollen
     (x 504 bij 1440). Op eigen maat, nooit vergroot. */
  .rollen .rl-rij__beeld { grid-column: 5 / 13; grid-row: 1; justify-self: start; }
  /* fix3: taak zonder eigen scherm in het tweekolomspatroon van 'Vragen': kop links (kol. 1-4), tekst rechts (kol. 5-12).
     Geen leeg beeldvak. De laatste rij (1fr) neemt een kop op die hoger is dan de tekst, zodat de tekstblokken aaneensluiten. */
  .rollen .rl-rij:not(:has(.rl-rij__beeld)) .rl-rij__tekst { grid-column: 1 / 13; display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(3, auto) 1fr; align-items: start; }
  .rollen .rl-rij:not(:has(.rl-rij__beeld)) .rl-rij__tekst > * { grid-column: 5 / 13; }
  .rollen .rl-rij:not(:has(.rl-rij__beeld)) .rl-rij__tekst > .rl-h3 { grid-column: 1 / 5; grid-row: 1 / -1; }
  .rollen .rl-rij:not(:has(.rl-rij__beeld)) .rl-h3 + .regel { margin-top: 0; }
  .rollen .rl-kol { align-items: start; }
  .rollen .rl-kol > .h2 { grid-column: 1 / 5; }
  .rollen .rl-kol > .rl-vragen, .rollen .rl-kol > .rl-nav { grid-column: 5 / 13; }
  .rollen .rl-kol > .rl-vragen { margin-top: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rollen .knop:active { transform: none; }
}

/* ---------- Audit 28-09, baan L2 ---------- */
/* L2.3 /functies/ en /planner/ (look-b F6, look F7): elk scherm in dezelfde kolombreedte; te breed wordt rechts bijgesneden,
   nooit verkleind (ronde 2: 535 px in plaats van de hele kolom). Op smal geldt hetzelfde: 1:1, linksboven, de uitsneden volgen al paneelgrenzen. */
.rollen--vast .rl-scherm { width: min(100%, 535px); overflow: hidden; } /* ronde 2: vaste breedte = het smalste brede scherm (Publiceren, 534) */
/* Publiceren: bijgesneden boven de voetregel, zodat de uitleg daar niet in een smalle kolom valt. */
.rollen--vast .rl-uit--publiceren { height: 441px; }
.rollen--vast .rl-scherm img { max-width: none; }
@media (min-width: 900px) { .rollen--vast .rl-rij__beeld { justify-self: stretch; } }

/* L2.1 /medewerker/ onder 640 px: bijsnijden in plaats van verkleinen (look-b F2), per scherm het bewijs. */
@media (max-width: 639px) {
  /* Ronde 3: vak nooit groter dan het zichtbare deel (--uit-v, --uit-h); rechts gesneden = 32 px verloop (als .rp-uit). */
  .rollen .rl-uit { --uit-v: calc(var(--uit-b) + var(--uit-x, 0px) + 2px); --uit-f: clamp(0px, (100% - var(--uit-v) + 1px) * 1000, 64px); width: min(100%, var(--uit-v)); max-height: calc(var(--uit-h, 9999px) + var(--uit-y, 0px) + 2px); overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px + var(--uit-f)), transparent calc(100% + var(--uit-f))); mask-image: linear-gradient(to right, #000 calc(100% - 32px + var(--uit-f)), transparent calc(100% + var(--uit-f))); }
  .rollen .rl-uit img { max-width: none; width: var(--uit-b); height: auto; margin: var(--uit-y, 0px) 0 0 var(--uit-x, 0px); }
  .rollen .rl-uit--mwrooster { --uit-b: 588px; -webkit-mask-image: none; mask-image: none; } /* snijdt in de lege rechterhelft, geen verloop */                                   /* 700 x 0,84: dagen en diensten */
  .rollen .rl-uit--verlof { --uit-b: 534px; --uit-h: 625px; --uit-y: -225px; aspect-ratio: 5 / 6; } /* 1:1: kalender-onderrand, kost, saldo, beslist */
  .rollen .rl-uit--rooster { --uit-b: 507px; }                                     /* rooster 746 x 0,68 en teamrooster 757 x 0,67: namen en twee dagen, als het planbord */
}

/* L2.6 Tekstafstand (WCAG 1.4.12): vraag en antwoord breken af in plaats van de pagina te verbreden. */
.rollen .rl-vragen { overflow-wrap: break-word; }
.rollen .rl-vraag { min-width: 0; }
.rollen .rl-vragen { grid-template-columns: minmax(0, 1fr); }