/* De huisstijl van Flexspecialisten. Kleuren en verhoudingen komen uit het
   brandbook; zie docs/huisstijl.md. Verander ze hier en nergens anders. */

:root {
  --blauw:      #25125c;
  --geel:       #fed268;
  --oranje:     #fb6113;
  /* De knop: wit op een dieper oranje. Wit op het huisstijloranje haalt
     3,08:1, blauw erop vond Brahim geen fijne kleurstelling (8 oktober).
     Dit haalt 4,61:1, bij hover 5,49:1. Het huisstijloranje blijft voor
     accenten: randen, de streep onder een tabblad, de rand van een vlak. */
  --knop:       #cc4a0b;
  --knop-hover: #b8420a;
  --donkergeel: #e6a903;

  /* Rust (besluit Brahim, 14 oktober). De schaal, de grijzen, randen,
     rondingen en schaduwen komen uit het design systeem dat Mindleaf
     gebruikt (Untitled UI, in Figma); het merk blijft van Flexspecialisten:
     blauw waar daar paars staat, oranje als knop, Arial als letter.

     Tekst in drie stappen: blauw voor wat je zoekt (een naam, een kop),
     grijs 600 voor de uitleg, grijs 500 voor wat erbij hoort. De pagina is
     bijna wit, wat je leest staat op witte kaarten met een rand die je net
     ziet. Kleur is voor wat iets betekent, niet voor vlakken. */
  --tekst:   var(--blauw);
  --zacht:   #535862;   /* text-tertiary (600) */
  /* Een stap donkerder dan text-quaternary (#717680): die haalde op wit net
     4,56:1 en op het grijs van de pagina 4,18. Nu 4,9:1 op de pagina. */
  --zachter: #676b74;
  /* De pagina een tint donkerder dan in het design systeem (bg-secondary,
     #fafafa). Een witte kaart op #fafafa scheelde 2 % en verdween op een
     laptopscherm; "weinig contrast" (Brahim, 15 oktober). */
  --pagina:  #f5f5f5;   /* bg-tertiary */
  --vlak:    #f5f5f5;   /* bg-tertiary */
  --rand:    #e0e2e5;   /* tussen border-secondary en -primary: kaarten en lijnen */
  --veld:    #d5d7da;   /* border-primary: invoervelden en knoppen */
  --lijn:    #eeeff1;   /* tussen de regels in een kaart */
  --wit:     #ffffff;
  --schaduw: 0 1px 3px rgba(10, 13, 18, .08), 0 1px 2px -1px rgba(10, 13, 18, .08);   /* shadow-sm */
  --goed:    #067647;   /* utility-success-700 */
  --fout:    #b42318;   /* utility-error-700 */

  /* De vier tonen van een status (kern/web/bouwstenen.py). Een toon heeft
     een tekstkleur, een vlak en een rand; meer niet. Oranje zit er bewust
     niet bij: dat is de kleur van een knop, en een label dat op een knop
     lijkt wordt aangeklikt. */
  --let-op:       #7a5600;
  --let-op-vlak:  #fffaeb;   /* utility-warning-50 */
  --let-op-rand:  var(--donkergeel);
  --goed-vlak:    #ecfdf3;   /* utility-success-50 */
  --fout-vlak:    #fef3f2;   /* utility-error-50 */
}

/* Drie breekpunten, en alleen deze drie. tests/test_bouwstenen.py houdt
   een vierde tegen.

     640 px   telefoon: tabellijsten vallen uiteen in blokken, knoppen 44 px
     800 px   het menu klapt in tot een knop bovenaan
     1024 px  ruimte voor twee kolommen (werklijst met het gesprek ernaast)

   Een media query kan geen variabele lezen, dus ze staan hier als afspraak
   en in de regels zelf als getal. */

/* Inter, meegeleverd en niet van Google Fonts: dan gaat er bij elke pagina
   geen IP-adres van een recruiter naar Google. Eén variabel bestand voor
   alle diktes, met de Poolse en Roemeense tekens erin. Licentie: SIL OFL
   1.1, zie letters/Inter-LICENSE.txt. */
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("letters/InterVariable.woff2") format("woff2");
}

* { box-sizing: border-box }

body {
  margin: 0;
  /* Inter (besluit Brahim, 14 oktober), de letter van het design systeem
     dat Mindleaf gebruikt. Het brandbook noemt Area, met Arial als
     alternatief; Inter wijkt daarvan af omdat hij op een scherm bij 12 tot
     14 px veel rustiger leest en de tussendiktes heeft waar de hiërarchie op
     rust. Arial blijft de terugval. */
  font: 14px/1.5 Inter, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--tekst);
  background: var(--pagina);
}

b, strong { font-weight: 600 }
a { color: var(--blauw) }
/* Oranje tekst op wit haalt 3,08:1; de streep eronder mag oranje zijn. */
a:hover { color: var(--blauw); text-decoration-color: var(--oranje) }

/* --- zijbalk --------------------------------------------------------- */

/* Het platform heeft een zijbalk en geen balk bovenaan: er komen modules bij,
   en een rij tabbladen die per module langer wordt past op geen scherm. Links
   staan je modules onder elkaar, met per module alleen de pagina's die jij
   nodig hebt. */
body.met-zijbalk { display: grid; grid-template-columns: 228px minmax(0, 1fr);
                   min-height: 100vh }
/* Licht, met het blauwe logo (besluit Brahim, 14 oktober). Het merk zit in
   het logo, de koppen en de oranje knop; een blauw vlak van 228 px over de
   hele hoogte trok meer aandacht dan het werk ernaast. */
.zijbalk {
  background: var(--wit); color: var(--tekst); border-right: 1px solid var(--rand);
  padding: 18px 12px 20px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Het brandbook vraagt ruimte rondom het logo ter grootte van twee keer de n
   uit 'specialisten'. Vandaar de marge, en niet krapper. */
.zijbalk .logo-link { display: block; padding: 4px 8px 22px }
.zijbalk .logo { height: 24px; width: auto; display: block }
.zijbalk a {
  display: flex; align-items: center; gap: 10px;
  color: var(--tekst); text-decoration: none; font-weight: 600;
  font-size: 14px; padding: 8px 12px; border-radius: 6px;
}
.zijbalk a:hover { color: var(--tekst); background: var(--pagina) }
/* Een icoon per pagina, zoals in de zijbalk van Mindleaf: grijs, en in de
   kleur van de tekst waar je bent. De titel neemt de ruimte, de teller staat
   rechts. */
.zijbalk a .titel { flex: 1 1 auto; min-width: 0 }
.zijbalk a .icoon { width: 18px; height: 18px; color: var(--zachter) }
.zijbalk a:hover .icoon, .zijbalk a.hier .icoon { color: var(--tekst) }
/* Waar je bent: een licht vlak en een oranje streep. Het enige accent in de
   zijbalk, en dezelfde streep als onder een tabblad. */
.zijbalk a.hier { color: var(--blauw); background: var(--pagina);
                  box-shadow: inset 3px 0 0 var(--oranje) }
.zijbalk .vandaag { margin-bottom: 8px }
.zijbalk .module { margin-top: 12px; display: flex; flex-direction: column; gap: 1px }
/* De titel klapt de module in, met dezelfde omgeklapte hoek als een sectie.
   Het getal blijft staan als hij dicht is: dan zie je toch wat er ligt. */
.zijbalk .moduletitel {
  display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  font-size: 12px; font-weight: 400; color: var(--zacht); padding: 4px 10px;
  border-radius: 6px;
}
.zijbalk .moduletitel::-webkit-details-marker { display: none }
.zijbalk .moduletitel .titel { flex: 1 1 auto; min-width: 0 }
.zijbalk .moduletitel::after {
  content: ""; flex: 0 0 auto; width: 5px; height: 5px;
  border-right: 1.5px solid var(--zachter); border-bottom: 1.5px solid var(--zachter);
  transform: rotate(-45deg) }
.zijbalk .module[open] > .moduletitel::after { transform: rotate(45deg); margin-top: -3px }
.zijbalk .moduletitel:hover { color: var(--tekst); background: var(--pagina) }
.zijbalk .moduletitel:hover::after { border-color: var(--tekst) }
.zijbalk .module.actief .moduletitel { color: var(--tekst) }
.zijbalk .module a { font-weight: 500 }
.zijbalk .module a.hier { font-weight: 600 }
/* Blauw en niet oranje: een teller is een getal en geen knop. */
.teller {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--blauw); color: var(--wit); font-size: 11px; font-weight: 600;
  line-height: 18px; text-align: center; letter-spacing: 0; text-transform: none;
}
/* Een kengetal is geen werk dat ligt: grijs, zonder vlak. */
.kengetal { font-size: 12px; font-weight: 500; color: var(--zachter);
            font-variant-numeric: tabular-nums }
.zijbalk .ik { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rand) }
.zijbalk .ik .wie { font-size: 12px; color: var(--zachter); padding: 0 12px 6px;
                    overflow-wrap: anywhere }
.zijbalk .ik a { font-weight: 400; font-size: 13px }

/* De taalkeuze: drie woorden, geen knoppen in oranje. Oranje is een
   handeling in je werk; een taal kiezen doe je één keer. */
.taalkeuze { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 6px 0 }
.taalkeuze button {
  background: transparent; border: 0; color: inherit; padding: 6px 4px;
  min-height: 0; font-size: 12px; font-weight: 400;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* Wat je niet gekozen hebt in het lichtste grijs dat nog leest, niet met
   opacity: zacht op 70 % haalde 3,46:1. */
.zijbalk .taalkeuze button, .taal-los button { color: var(--zachter) }
.taalkeuze button:hover { background: transparent; color: var(--tekst) }
.taalkeuze button.hier { font-weight: 600; text-decoration: none; color: var(--tekst) }
.zijbalk .taalkeuze { color: var(--zacht) }
.taal-los { display: flex; justify-content: center; margin-top: 18px; color: var(--zacht) }
@media (max-width: 640px) { .taalkeuze button { min-height: 44px; padding: 10px 8px } }

/* --- Zoeken ----------------------------------------------------------- */

/* Bovenaan de zijbalk, onder het logo: het eerste wat je pakt als je iemand
   zoekt. Het lijstje eronder ligt over het menu heen en duwt het niet weg. */
.zoekbalk { position: relative; margin: 0 0 10px }
.zoekbalk .icoon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
                   width: 16px; height: 16px; color: var(--zachter); pointer-events: none }
.zoekbalk input[type=search] { width: 100%; padding-left: 32px; padding-right: 28px;
                               font-size: 14px }
.zoekbalk .sneltoets { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                       font: inherit; font-size: 11px; color: var(--zachter);
                       border: 1px solid var(--veld); border-radius: 4px; padding: 0 5px }
.zoekbalk input:focus ~ .sneltoets { display: none }
.zijbalk .zoek-snel { position: relative }
.zoek-snel-inhoud {
  background: var(--wit); border: 1px solid var(--rand); border-radius: 8px;
  box-shadow: var(--schaduw); padding: 8px; margin: -4px 0 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.zoekgroep { display: flex; flex-direction: column; gap: 1px }
.zoekgroep > .klein { padding: 2px 8px }
.zijbalk a.snel-treffer { flex-direction: column; align-items: flex-start; gap: 0;
                          font-weight: 500; padding: 6px 8px }
.zijbalk a.snel-treffer .titel { overflow-wrap: anywhere }
.zijbalk a.snel-alles { font-size: 13px; font-weight: 600; color: var(--blauw);
                        padding: 6px 8px; border-top: 1px solid var(--lijn) }
.zoekpagina { display: flex; gap: 8px; margin: 0 0 20px }
.zoekpagina input[type=search] { flex: 1 1 auto; min-width: 0 }
.treffer .onder { margin: 3px 0 0 }
.treffer .fragment { margin: 4px 0 0; color: var(--tekst) }
/* Geel en niet oranje: een markering is geen knop. */
mark { background: var(--geel); color: var(--blauw); border-radius: 2px; padding: 0 1px }
.kop .zoekknop { margin-left: auto; margin-right: 12px; color: var(--tekst) }
.kop .zoekknop .icoon { width: 20px; height: 20px; display: block }

/* De kopbalk is er alleen op een telefoon: logo en een menuknop. */
.kop { display: none }
.menuschakelaar { position: absolute; opacity: 0; pointer-events: none }

/* --- Vandaag ---------------------------------------------------------- */

.leeg p { margin: 0 0 6px }
.afgerond-vandaag { margin-top: 22px }
.afgerond-vandaag summary { cursor: pointer; font-weight: 600 }
.afgerond-vandaag .tabellijst { margin-top: 10px }
.tabellijst.gedaan .hoofd a { font-weight: 400; color: var(--zacht) }
.noteren { margin-top: 26px }
.noteren summary { cursor: pointer; font-weight: 600 }
.noteren form { margin-top: 12px; display: grid; gap: 8px; max-width: 560px }
.noteren input[type=text] { width: 100% }

main { max-width: 1000px; margin: 32px auto 80px; padding: 0 24px }
/* De tabellijst meet zijn ruimte aan het dichtstbijzijnde van deze twee. */
main, .lijst { container-type: inline-size }
/* In de grid zou main krimpen tot zijn inhoud: een korte lijst kwam dan smal
   in het midden te staan en een lange over de hele breedte. Altijd even breed. */
body.met-zijbalk main { width: 100% }

/* display-xs (24/32) voor de paginakop, text-md (16/24) voor een sectie. */
h1 { font-size: 24px; font-weight: 600; line-height: 32px; margin: 0 0 24px }
h2 { font-size: 16px; font-weight: 600; line-height: 24px; margin: 32px 0 12px }

h3 { font-size: 15px; font-weight: 600; margin: 0 }
p  { margin: 0 0 10px }

.zacht { color: var(--zacht) }
.klein { font-size: 12px; line-height: 18px }

/* --- vlakken en formulieren ------------------------------------------ */

.vak {
  border: 1px solid var(--rand); border-radius: 12px;
  padding: 16px 20px; margin: 0 0 16px; background: var(--wit);
  box-shadow: var(--schaduw);
}
/* Een lege lijst zegt wat er niet is, in een vlak dat niet om aandacht vraagt. */
/* Wit met een gestreepte rand van een invoerveld: in de kleur van de
   pagina zelf was hij er alleen voor wie hem al zocht. */
.vak.leeg { background: var(--wit); border: 1px dashed var(--veld); padding: 12px 16px;
            font-size: 13px; color: var(--zacht); box-shadow: none }

/* --- secties van een dossier ------------------------------------------ */

/* Een witte kaart met een kop die hem inklapt (b.sectie). Het pijltje
   rechts is een omgeklapte hoek, geen icoon: één regel minder om te laden. */
.sectie { background: var(--wit); border: 1px solid var(--rand); border-radius: 12px;
          box-shadow: var(--schaduw); margin: 0 0 16px; scroll-margin-top: 16px }
.sectie > summary { list-style: none; display: flex; align-items: center; gap: 12px;
                    padding: 16px 20px; cursor: pointer }
.sectie > summary::-webkit-details-marker { display: none }
.sectie > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 2px solid var(--zachter); border-bottom: 2px solid var(--zachter);
  transform: rotate(45deg); margin-top: -4px }
.sectie[open] > summary::after { transform: rotate(-135deg); margin-top: 4px }
.sectie > summary:hover::after { border-color: var(--tekst) }
/* Het icoon voor de kop: grijs en dun, zoals de map in het Mindleaf-dossier. */
.icoon { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px;
         color: var(--zachter) }
.icoon svg { width: 100%; height: 100%; stroke-width: 1.75 }
.sectie > summary > .icoon { align-self: flex-start; margin-top: 2px }
.sectie-titel { display: block; font-size: 16px; line-height: 24px; font-weight: 600 }
.sectie-onder { display: block; font-size: 12px; line-height: 18px; color: var(--zacht) }
.sectie-inhoud { padding: 0 20px 20px }
/* Binnen een sectie is een vak geen tweede kaart: de rand zat er dubbel. */
.sectie-inhoud .vak:not(.leeg) { border: 0; box-shadow: none; padding: 0; background: none }
.sectie-inhoud > :last-child { margin-bottom: 0 }
/* Een kopje binnen een sectie, zoals "Basisdocumenten": klein en grijs. */
.sectielabel { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--zacht);
               margin: 16px 0 8px }
.sectie-inhoud > .sectielabel:first-child { margin-top: 0 }

/* Een aantal: een rustig pilletje, achter een kop of in de springlijst. */
.aantal, h2 > .zacht { display: inline-block; min-width: 20px; padding: 0 7px;
  margin-left: 4px; border-radius: 10px; background: var(--wit); color: var(--zacht);
  border: 1px solid var(--rand); font-size: 11px; font-weight: 600;
  line-height: 18px; text-align: center; vertical-align: 2px }

/* De sprong naar een sectie, onder de kop van een dossier. */
.springlijst { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px }
.springlijst a { display: inline-flex; align-items: center; padding: 6px 10px;
                 border-radius: 6px; color: var(--zacht); font-size: 14px;
                 font-weight: 600; text-decoration: none }
.springlijst a:hover { background: var(--vlak); color: var(--tekst) }
.velden { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px;
        color: var(--tekst) }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=url], input[type=search],
input[type=tel], select, textarea {
  font: inherit; padding: 9px 12px; border: 1px solid var(--veld);
  border-radius: 8px; background: var(--wit); color: inherit; min-width: 150px;
  box-shadow: var(--schaduw);
}
textarea { width: 100%; min-height: 150px; resize: vertical }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--oranje); outline-offset: 1px; border-color: transparent;
}

/* Wit op het knoporanje (4,61:1); zie --knop. Een knop zonder vlak heeft
   dezelfde kleur als tekst en rand. tests/test_bouwstenen.py rekent het
   contrast na. */
button {
  font: inherit; font-weight: 600; padding: 9px 16px; border: 1px solid var(--knop);
  background: var(--knop); color: var(--wit); border-radius: 8px; cursor: pointer;
  box-shadow: var(--schaduw);
}
button:hover { background: var(--knop-hover); border-color: var(--knop-hover) }
/* Wat geen hoofdhandeling is, vraagt geen kleur: een witte knop met een
   grijze rand. Zo is per scherm het ene oranje vlak ook echt het ene ding
   dat je moet doen. */
button.uit { background: var(--wit); color: var(--tekst); border-color: var(--veld);
             font-weight: 600 }
button.uit:hover { background: var(--pagina); border-color: var(--veld) }

.aanvinken { display: flex; align-items: center; gap: 7px; font-size: 13px;
             font-weight: 600 }
.aanvinken input { margin: 0 }

/* --- meldingen ------------------------------------------------------- */

.melding { border-radius: 10px; padding: 11px 14px; margin: 0 0 14px;
           font-size: 14px; border: 1px solid }
.melding.fout { background: var(--fout-vlak); border-color: #fecdca; color: var(--fout) }
.melding.let-op { background: var(--let-op-vlak); border-color: #fedf89; color: var(--let-op) }

/* --- kandidaten ------------------------------------------------------ */

/* Een witte kaart, zoals elk vak. Zonder vlak stond de regel grijs op het
   grijs van de pagina, met een witte tabellijst erin: een kaart in een
   kaart, twee randen om dezelfde kandidaten. */
.rij {
  border: 1px solid var(--rand); border-radius: 12px; background: var(--wit);
  box-shadow: var(--schaduw); padding: 16px 20px; margin: 0 0 16px;
}
.rij .bovenaan { display: flex; justify-content: space-between; gap: 14px;
                 align-items: flex-start }
.rij .score { white-space: nowrap; font-weight: 600; font-size: 15px }
.rij .voldoet { color: var(--goed) }

.bellen { font-weight: 600 }
.bellen a { text-decoration: none }

.merk {
  display: inline-block; font-size: 12px; font-weight: 500; line-height: 18px;
  padding: 1px 8px; margin: 3px 4px 0 0;
  border: 1px solid var(--rand); border-radius: 99px; background: var(--pagina);
}
/* Wat een kandidaat wél heeft, zacht groen zoals "Compleet" (besluit Brahim,
   14 oktober); wat hij mist blijft kaal, zodat in één oogopslag zichtbaar is
   waar de match op rust. Dit was geel, maar tien vacatures onder elkaar
   werden een gele muur; geel blijft voor grote vlakken. */
.merk.voor { background: var(--goed-vlak); border-color: #abefc6; color: var(--goed) }
/* Houding is geen eis en telt niet mee (zie matchen): hij staat erbij, maar
   gestreept en grijs. Met opacity .55 haalde hij geen 4,5:1 meer. */
.merk.houding { background: var(--wit); border-style: dashed; border-color: var(--veld);
                color: var(--zachter) }

/* --- de bouwstenen: statuslabel, stip, tegel -------------------------- */

/* Eén vorm voor elke status, in een van vier tonen. Het woord komt van de
   module; de kleur zegt alleen of iemand ernaar moet kijken. */
/* Kleine letters: een label leest als een woord, zoals de huisstijl het
   noemt ("ligt er te lang"). In kapitalen brak een lang label op een
   telefoon over twee regels en schreeuwde het. */
.status { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 9px 1px 8px;
          border-radius: 99px; vertical-align: middle; max-width: 100%;
          border: 1px solid transparent }
.status::before { content: ""; display: inline-block; width: 6px; height: 6px;
                  border-radius: 50%; background: currentColor; margin-right: 6px;
                  vertical-align: 1px; opacity: .8 }
/* Geen nowrap: "lijkt een ziekmelding, hoort in Salesforce" is langer dan
   een telefoon breed is, en dan schuift het hele dossier zijwaarts. */
.status.rust   { background: var(--pagina);      color: var(--zacht); border-color: var(--rand) }
.status.goed   { background: var(--goed-vlak);   color: var(--goed);  border-color: #abefc6 }
.status.let-op { background: var(--let-op-vlak); color: var(--let-op); border-color: #fedf89 }
.status.fout   { background: var(--fout-vlak);   color: var(--fout);  border-color: #fecdca }

/* Een regel met een toon krijgt een rand links, geen kleurvlak: de lijst
   moet rustig blijven, je leest hem tientallen keren per dag. */
.rand-goed   { border-left: 3px solid var(--goed) !important }
.rand-let-op { border-left: 3px solid var(--let-op-rand) !important }
.rand-fout   { border-left: 3px solid var(--fout) !important }
.rand-rust   { border-left: 3px solid var(--rand) !important }

/* Rechts in een regel: wat je ermee kunt. Op een telefoon eronder. */
.rij .zijkant { text-align: right; white-space: nowrap }
.rij .zijkant form { margin: 6px 0 0 }
/* De tabellijst in een regel is geen tweede kaart maar het onderste deel
   van dezelfde: van rand tot rand, met één lijn tussen kop en kandidaten. */
.rij .tabellijst { margin: 14px -20px 0; width: calc(100% + 40px);
                   border: 0; border-top: 1px solid var(--lijn); border-radius: 0;
                   box-shadow: none; background: none }
.rij > .tabellijst:last-child { margin-bottom: -16px }
.rij .tabellijst > tbody > tr > :first-child { padding-left: 20px }
.rij .tabellijst > tbody > tr > :last-child { padding-right: 20px }

/* Op de werklijst staan eigenaar en "alle kandidaten" naast elkaar. */
.rij.plek .zijkant { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                     justify-content: flex-end }
.rij.plek .zijkant form { margin: 0 }
.rij.plek .zijkant select { font-size: 13px; padding: 6px 10px; min-width: 0 }

/* De kop van een pagina met rechts wat je ervan ziet. */
.paginakop { display: flex; align-items: center; justify-content: space-between;
             flex-wrap: wrap; gap: 12px 16px; margin: 0 0 20px }
.paginakop h1 { margin: 0 }
.paginakop .schakelaar { margin: 0 }
.overzicht { margin: 0 0 24px }
.overzicht-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
                   margin-top: 12px; color: var(--zacht) }
.overzicht-onder:empty { display: none }
.overzicht-onder .merk { margin: 0 }
.overzicht-onder .rechts { margin-left: auto }
.overzicht details { margin-top: 10px }
.overzicht details p { margin: 8px 0 0; max-width: 720px }

/* --- inloggen -------------------------------------------------------- */

.inlogvlak { max-width: 380px; margin: 70px auto; }
.inlogvlak .merkkop { text-align: center; margin-bottom: 22px }
.inlogvlak .merkkop img { height: 34px }
.inlogvlak label { margin-top: 12px }
.inlogvlak input { width: 100% }
.inlogvlak button { width: 100%; margin-top: 18px }
.inlogvlak .toelichting { font-size: 13px; color: var(--zacht); text-align: center; margin: 10px 0 0 }
.inlogvlak .of { font-size: 13px; color: var(--zacht); text-align: center; margin: 22px 0 0 }
/* Een pagina voor wie niet inlogt maar wel leest, zoals de woninginfo voor
   een kandidaat: breder dan het inlogvlak, met hetzelfde logo erboven. */
.losvlak { max-width: 720px; margin: 24px auto; }
.losvlak .merkkop { margin-bottom: 18px }
.losvlak .merkkop img { height: 34px }
.losvlak .fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.losvlak .fotos img { flex: 1 1 200px; min-width: 0; height: 200px; object-fit: cover; border-radius: 8px }

table { border-collapse: collapse; width: 100%; font-size: 14px }
th, td { text-align: left; padding: 6px 10px 6px 0; vertical-align: top }
th { font-weight: 600; width: 160px; color: var(--zacht) }

/* In een dossier weegt het antwoord, niet de vraag: "Telefoon" in vet grijs
   sprong eruit en het nummer niet. */
table.gegevens th { font-weight: 400; font-size: 13px }
table.gegevens td { font-weight: 600 }
table.gegevens td .zacht, table.gegevens td .klein { font-weight: 400 }

/* --- het oordeel van de recruiter ------------------------------------ */

.oordeel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rand) }
.knopje { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px;
          border-radius: 99px; border: 1px solid var(--rand);
          background: var(--wit); color: var(--tekst); cursor: pointer }
.knopje:hover { border-color: var(--oranje) }
.knopje.ja.gekozen { background: var(--goed); border-color: var(--goed); color: var(--wit) }
.knopje.nee.gekozen { background: var(--vlak); border-color: var(--zacht); color: var(--zacht) }
.oordeel .redenen { font-size: 13px; padding: 5px 8px; min-width: 200px }
.oordeel .uitkomst.fout { color: var(--fout) }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px }
details summary { cursor: pointer }

/* --- stand van de taken ---------------------------------------------- */

.stip { display:inline-block; width:9px; height:9px; border-radius:50%;
        margin-right:7px; vertical-align:middle }
.stip.goed   { background:var(--goed) }
.stip.let-op { background:var(--let-op-rand) }
.stip.fout   { background:var(--fout) }
.stip.rust   { background:var(--rand) }
/* 34 px hoog: op een scherm met muis is 32 px de ondergrens. */
button.klein { font-size:13px; padding:7px 12px; border-radius:8px }
.melding { background:var(--vlak); border-color:var(--rand); color:var(--tekst) }

/* --- het overzicht ---------------------------------------------------- */

.stand { display:flex; flex-wrap:wrap; gap:10px }
.tegel { border:1px solid var(--rand); border-radius:12px; padding:12px 16px;
         min-width:120px; background:var(--wit); display:flex; flex-direction:column-reverse;
         box-shadow:var(--schaduw) }
.tegel b { display:block; font-size:24px; line-height:1.15; font-weight:600 }
.tegel span { font-size:12px; color:var(--zacht); margin-bottom:4px }
/* De toon als stip voor het woord, niet als gekleurd vlak: zes gele tegels
   naast elkaar werden een muur. */
.tegel.let-op span::before, .tegel.goed span::before, .tegel.fout span::before {
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:6px; vertical-align:1px }
.tegel.let-op span::before { background:var(--let-op-rand) }
.tegel.goed span::before   { background:var(--goed) }
.tegel.fout span::before   { background:var(--fout) }
a.tegel { text-decoration:none; color:inherit }
a.tegel:hover { border-color:var(--oranje) }
a.tegel.gekozen { border-color:var(--blauw); box-shadow: inset 0 0 0 1px var(--blauw) }
a.knopje { text-decoration:none; display:inline-block }
.paginaknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px }
.paginering { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px }
a.knopje.gekozen { background:var(--blauw); border-color:var(--blauw); color:var(--wit) }

/* Op een telefoon is de kopbalk de eerste die overloopt: logo, tabbladen,
   e-mailadres en Uitloggen passen niet op één regel van 390 px, en de hele
   pagina gaat er zijwaarts van scrollen. De balk mag daarom afbreken, en het
   e-mailadres verdwijnt — wie is ingelogd weet de recruiter zelf. */
@media (max-width: 800px) {
  body.met-zijbalk { display: block }
  .kop { display: flex; align-items: center; justify-content: space-between;
         background: var(--wit); border-bottom: 1px solid var(--rand);
         padding: 12px 16px; position: sticky; top: 0; z-index: 10 }
  .kop .logo { height: 22px; width: auto; display: block }
  .menuknop { color: var(--tekst); font-weight: 600; font-size: 14px; cursor: pointer;
              padding: 10px 4px; min-height: 44px; display: flex; align-items: center;
              gap: 6px }
  .menuschakelaar:focus-visible ~ .kop .menuknop { outline: 2px solid var(--oranje) }
  .zijbalk { display: none; position: static; height: auto; border-right: 0;
             border-bottom: 1px solid var(--rand) }
  .zijbalk .logo-link { display: none }
  .menuschakelaar:checked ~ .zijbalk { display: flex }
  /* Een link naar #gesprek zette de kop precies onder de vaste kopbalk. */
  main [id] { scroll-margin-top: 80px }
  main { padding: 0 16px }
}

/* De drie uitkomsten. Op een telefoon worden het duimdoelen: 44 px hoog en
   over de volle breedte, met ruimte tot de schermrand. Wie belt houdt het
   toestel in één hand en raakt anders net de verkeerde knop. */
.uitkomsten { width: 230px; text-align: right; white-space: nowrap }
.gedaanregel { margin: 4px 0; display: flex; align-items: center;
               gap: 8px; flex-wrap: wrap }

@media (max-width: 640px) {
  .uitkomsten { width: auto; text-align: left; white-space: normal }
  .oordeel { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 }
  .oordeel .knopje { flex: 1 1 30%; min-height: 44px; font-size: 14px }
  .oordeel .redenen { flex: 1 1 100%; min-height: 44px }
  .gedaanregel .knopje { min-height: 44px }
}

/* De regel waar iemand nog meer staat: een tweede regel onder de reden, want
   het is context en geen reden om te bellen. */
.dubbel { display: block; margin-top: 2px; font-style: italic }

/* --- de tabellijst ------------------------------------------------------ */

/* Voor wat je afwerkt: de werklijst, Vandaag, de afgeronde taken. De cellen
   hebben een rol (zie _bouwstenen.html) en de rol bepaalt waar ze op een
   telefoon komen. */
/* Een witte kaart met dunne lijnen tussen de regels, op het grijs van de
   pagina. Elke lijst ziet er zo uit, op elk scherm. */
table.tabellijst { width: 100%; font-size: 14px; line-height: 20px; background: var(--wit);
                   border: 1px solid var(--rand); border-radius: 12px;
                   border-collapse: separate; border-spacing: 0;
                   box-shadow: var(--schaduw) }
.tabellijst > thead th { font-size: 12px; font-weight: 600; color: var(--zacht);
                         text-align: left; padding: 10px 12px 8px 0; width: auto;
                         border-bottom: 1px solid var(--lijn) }
.tabellijst > thead th:first-child { padding-left: 16px }
.tabellijst > tbody > tr > th, .tabellijst > tbody > tr > td {
  padding: 13px 12px 13px 0; vertical-align: baseline; text-align: left;
  border-top: 1px solid var(--lijn); width: auto; color: inherit }
.tabellijst > tbody > tr > :first-child { padding-left: 16px }
.tabellijst > tbody > tr > :last-child { padding-right: 16px }
.tabellijst > tbody > tr:first-child > * { border-top: 0 }
.tabellijst .hoofd { font-weight: 600 }
.tabellijst .hoofd a { text-decoration: none }
.tabellijst .hoofd a:hover { text-decoration: underline }
.tabellijst .toelichting { color: var(--zacht) }
.tabellijst .getal { color: var(--zachter); font-size: 13px }
.tabellijst .getal { white-space: nowrap; font-variant-numeric: tabular-nums }
.tabellijst .acties { text-align: right; white-space: nowrap }
.tabellijst .acties > form, .tabellijst .acties > details { display: inline-block; margin: 0 0 0 6px;
                                                            vertical-align: baseline }
/* Overdragen is een knop naast Klaar, geen grijze tekst van 19 px hoog. */
.tabellijst .overdragen summary { cursor: pointer; font-size: 13px; font-weight: 600;
                                  list-style: none; display: inline-block;
                                  padding: 6px 12px; border: 1px solid var(--rand);
                                  border-radius: 8px }
.tabellijst .overdragen summary::-webkit-details-marker { display: none }

/* Vaste kolommen per rol, niet per inhoud. Elke plek op de werklijst en elk
   blok op Vandaag is een eigen tabel; met breedtes naar de inhoud kreeg de
   reden bij de ene plek 139 px en bij de volgende 68, terwijl de naamkolom
   voor twee derde leeg stond, en sprongen de knoppen per blok heen en weer.
   Nu staat dezelfde rol op elke tabel van de pagina op dezelfde plek en
   krijgt de toelichting wat overblijft. Niet bij een tabel met kopregel:
   die staat alleen op zijn pagina, en een vaste tabel leest zijn breedtes
   uit de eerste rij -- de kop, die geen rollen kent. */
table.tabellijst:not(:has(> thead)) { table-layout: fixed }
/* Ruim genoeg voor "100% ✓" met de noemer eronder. Met 64 px viel het
   vakje over de naam heen ("van 34Brahim"). */
.tabellijst td.scorecel { width: 100px }
/* Een naam naast een nummer is kort; een taak zonder nummer deelt de
   ruimte met zijn toelichting. */
.tabellijst tr:has(> .contact) > .hoofd { width: 20% }
/* 150 en niet 130: "+359 880 000 106" liep tegen de toelichting aan. */
.tabellijst .contact    { width: 150px }
.tabellijst .getal      { width: 110px }
.tabellijst .acties     { width: 250px }
.tabellijst .hoofd, .tabellijst .contact { overflow-wrap: break-word }
.tabellijst .getal { overflow: hidden; text-overflow: ellipsis }
/* Goed, Af en Niet bereikt op één regel, rechts, zonder de lijn die het
   oordeel buiten een tabel boven zich heeft. */
.tabellijst .acties > .oordeel { justify-content: flex-end; margin: 0; padding: 0;
                                 border: 0 }
.tabellijst .oordeel .knopje { white-space: nowrap }
/* Opengeklapt is Overdragen een vak onder de knop, niet een formulier in
   de kolom: die is vast 250 px, en de keuzelijst met Geef door ernaast
   duwde de pagina zijwaarts. */
.tabellijst .overdragen { position: relative }
.tabellijst .overdragen[open] form { display: flex; gap: 8px; align-items: center;
                                     flex-wrap: wrap; position: absolute; right: 0;
                                     top: calc(100% + 6px); z-index: 5; width: 280px;
                                     padding: 12px; background: var(--wit);
                                     border: 1px solid var(--rand); border-radius: 8px;
                                     box-shadow: 0 6px 18px rgba(37,18,92,.12);
                                     white-space: normal; text-align: left }
.tabellijst .overdragen[open] select { flex: 1 1 100% }
.tabellijst .overdragen label { font-size: 13px; margin: 0 }
.tabellijst.rand-let-op, .tabellijst.rand-fout, .tabellijst.rand-goed, .tabellijst.rand-rust {
  border-left-width: 0 !important }
.tabellijst.rand-let-op > tbody > tr > :first-child { box-shadow: inset 3px 0 0 var(--let-op-rand) }
.tabellijst.rand-fout   > tbody > tr > :first-child { box-shadow: inset 3px 0 0 var(--fout) }
.tabellijst.rand-goed   > tbody > tr > :first-child { box-shadow: inset 3px 0 0 var(--goed) }

/* Heeft de lijst minder dan 640 px, dan is een rij geen tabelrij meer maar
   een blok. De ruimte telt, niet het scherm: op een telefoon is dat hetzelfde,
   maar de werklijst staat vanaf 1024 px naast het gesprek, en daar kreeg de
   tabel op een laptop 420 px voor 620 px aan vaste kolommen -- de reden
   stond letter voor letter onder elkaar.

   Onder 640 px is een rij geen tabelrij meer maar een blok. De desktoptabel
   geperst in 390 px gaf vier kolommen van elk te weinig ruimte: de reden
   brak over zes regels, het nummer stond klein weggedrukt en de pagina
   scheurde zijwaarts. Zelfde inhoud, andere vorm.

   De hoofdcel bovenaan, want dat is wat je zoekt; het nummer direct eronder.
   Kleine cellen (een tijd, een aantal) naast elkaar op één regel. De knoppen
   onderaan over de volle breedte, 44 px hoog: wie belt houdt het toestel in
   één hand en raakt anders net de verkeerde knop. */
@container (max-width: 640px) {
  table.tabellijst, .tabellijst > tbody { display: block }
  .tabellijst > thead { display: none }
  .tabellijst > tbody > tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
    padding: 12px 14px; border-top: 1px solid var(--lijn);
  }
  .tabellijst > tbody > tr:first-child { border-top: none }
  /* `display: flex` wint het anders van het hidden-attribuut, waardoor alle
     onderbouwingen openstonden en de pagina 96.379 px hoog werd. */
  .tabellijst > tbody > tr[hidden] { display: none }
  .tabellijst > tbody > tr > th, .tabellijst > tbody > tr > td {
    display: block; width: auto !important; padding: 0; border: 0; text-align: left;
    flex: 0 1 auto;
  }
  .tabellijst .hoofd { order: -2; flex-basis: 100%; font-size: 16px }
  .tabellijst .contact { order: -1; flex-basis: 100%; font-size: 16px; margin-bottom: 2px }
  .tabellijst .toelichting { flex: 1 1 200px; margin-bottom: 6px }
  /* Een gegeven dat op een eigen regel hoort, tussen de hoofdcel en de getallen:
     de accountmanager boven bedden, bezet en vrij. */
  .tabellijst .eigen-regel { flex-basis: 100% }
  /* Een lege cel kost op een telefoon anders een lege regel. */
  .tabellijst > tbody > tr > td:empty { display: none }
  .tabellijst td[data-kop]::before { content: attr(data-kop) ": "; color: var(--zacht) }
  .tabellijst .acties { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px;
                        margin-top: 6px }
  .tabellijst .acties > form, .tabellijst .acties > details { margin: 0; flex: 1 1 30% }
  .tabellijst .acties button, .tabellijst .acties .knopje,
  .tabellijst .overdragen summary {
    width: 100%; min-height: 44px; font-size: 14px }
  .tabellijst .overdragen summary {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rand); border-radius: 8px; color: var(--tekst);
    font-weight: 600 }
  .tabellijst .overdragen[open] { flex-basis: 100% }
  /* "toch niet" is de weg terug, geen hoofdhandeling: geen volle breedte. */
  .tabellijst .acties button.alslink { width: auto; min-height: 44px }
  .tabellijst .overdragen[open] form { position: static; width: auto; padding: 0;
                                       border: 0; box-shadow: none; margin-top: 8px }
  .tabellijst .overdragen[open] select { flex: 1 1 100%; min-height: 44px }
  .tabellijst.rand-let-op > tbody > tr, .tabellijst.rand-fout > tbody > tr,
  .tabellijst.rand-goed > tbody > tr { padding-left: 12px }
  .tabellijst.rand-let-op > tbody > tr { box-shadow: inset 3px 0 0 var(--let-op-rand) }
  .tabellijst.rand-fout   > tbody > tr { box-shadow: inset 3px 0 0 var(--fout) }
  .tabellijst.rand-goed   > tbody > tr { box-shadow: inset 3px 0 0 var(--goed) }
  .tabellijst > tbody > tr > :first-child { box-shadow: none !important; padding-left: 0 !important }
  .tabellijst > tbody > tr > :last-child { padding-right: 0 }
  .rij .tabellijst > tbody > tr > :last-child { padding-right: 0 }

}

@media (max-width: 640px) {
  /* Een regel in een gewone lijst: wat je ermee kunt komt eronder. */
  .rij .bovenaan { flex-wrap: wrap }
  .rij .zijkant { text-align: left; flex-basis: 100% }
  .rij.plek .zijkant { justify-content: flex-start }
  .rij { padding: 14px 16px }
  .rij .tabellijst { margin: 12px -16px 0; width: calc(100% + 32px) }
  .rij > .tabellijst:last-child { margin-bottom: -14px }
  .rij .zijkant .knopje, .rij .zijkant button { min-height: 44px; display: inline-flex;
                                                align-items: center }

  table.gegevens td { font-size: 16px }
  /* Een gegeven: label boven de waarde, niet in een kolom van 160 px. */
  table.gegevens, table.gegevens tbody, table.gegevens tr { display: block }
  table.gegevens tr { padding: 6px 0 }
  table.gegevens th, table.gegevens td { display: block; width: auto; padding: 0 }
}

/* De kop klapt in op een telefoon. Twee tegels van 65 px boven elkaar plus de
   schakelaars namen 179 px van de 844 in beslag, en dat is ruimte die van de
   eerste kandidaat afging. Zelfde cijfers, op één regel. */
@media (max-width: 640px) {
  .stand { gap: 8px; align-items: center }
  .stand .tegel {
    display: flex; align-items: baseline; gap: 5px;
    padding: 5px 9px; font-size: 13px;
  }
  .stand .tegel b { font-size: 16px }
  .stand .tegel span { font-size: 12px }
  .vak { padding: 12px }
}

/* Het percentage is een uitklapper. Het ziet er klikbaar uit omdat het dat is;
   een getal waar niemand op klikt omdat het er niet klikbaar uitziet, is nog
   steeds een getal zonder uitleg. */
.knopje-score {
  font: inherit; font-weight: 600; cursor: pointer;
  /* De kleur expliciet. De algemene button-regel zet wit op oranje; met
     alleen `background: none` erbovenop werd dit wit op wit, en waren 55 van
     de 117 percentages onzichtbaar -- inclusief de knop naar de onderbouwing. */
  color: var(--tekst);
  background: none; border: 1px solid var(--rand);
  border-radius: 6px; padding: 3px 6px; white-space: nowrap;
}
.knopje-score:hover { border-color: var(--blauw) }
.knopje-score[aria-expanded="true"] { background: var(--blauw); color: var(--wit) }
.knopje-score.voldoet { border-color: var(--goed); color: var(--goed) }
.knopje-score.voldoet[aria-expanded="true"] { background: var(--goed); color: var(--wit) }

tr.uitleg > td { padding: 0 0 10px 0 }
table.opbouw { width: auto; font-size: 13px; margin: 2px 0 0 38px }
table.opbouw td { padding: 1px 10px 1px 0; vertical-align: top }
table.opbouw .cijfer { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums }
table.opbouw tr.mist .cijfer { color: var(--fout) }
table.opbouw tr.onbekend { color: var(--zacht) }
table.opbouw tr.totaal td { border-top: 1px solid var(--rand);
                            padding-top: 4px; font-weight: 600 }

@container (max-width: 640px) {
  .tabellijst td.scorecel { flex: 0 0 auto }
  .tabellijst > tbody > tr.uitleg > td { flex-basis: 100% }
  .tabellijst .acties > .oordeel { flex: 1 1 100%; display: flex; flex-wrap: wrap;
                                   gap: 8px; margin: 6px 0; white-space: normal }
  .tabellijst .oordeel .knopje { flex: 1 1 30%; min-height: 44px }
  .tabellijst .oordeel .redenen { flex: 1 1 100%; min-height: 44px }
  /* Smal scherm: het cijfer naast het label houden en niet erboven. Een
     rechts uitgelijnde kolom die bijna even breed is als de tekst leest als
     twee losse regels. */
  table.opbouw { margin-left: 0; width: 100% }
  table.opbouw .cijfer { width: 72px; text-align: left }
}

/* Een afgehandelde regel blijft staan maar dringt niet meer. De uitkomst en
   de weg terug staan op de plek van de knoppen, zodat je ziet dat je klik is
   aangekomen zonder dat je veertien schermen moet scrollen. */
/* Alleen de inhoud wordt dof. Met de hele rij erbij werd de uitkomst het
   kleinste ding van de regel en leek de optionele reden uitgeschakeld. */
.uitkomst-vast { font-size: 14px }
/* Dof met een kleur en niet met opacity: op 55 % haalde de reden 2,53:1. */
tr.afgehandeld > :not(.acties), tr.afgehandeld > :not(.acties) a { color: var(--zachter) }
tr.afgehandeld:hover > :not(.acties), tr.afgehandeld:hover > .hoofd a { color: var(--tekst) }

/* Het gesprek met een kandidaat. Van hem af links, van ons rechts, en wat er
   verder gebeurde ertussenin — dezelfde ordening als een berichtenapp, omdat
   dat de vorm is waarin iedereen een gesprek leest. */
.tijdlijn .beurt { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px }
.tijdlijn .bel {
  max-width: 62%; padding: 8px 12px; border-radius: 12px;
  background: var(--vlak); border: 1px solid var(--rand);
}
.tijdlijn .bel .wat { margin: 0 }
.tijdlijn .bel .bron { margin: 2px 0 0 }
.tijdlijn .wanneer { white-space: nowrap }
.tijdlijn .markering { margin: 0 0 4px }

.tijdlijn .beurt.in .bel { border-bottom-left-radius: 3px }
.tijdlijn .beurt.uit { flex-direction: row-reverse }
.tijdlijn .beurt.uit .bel {
  background: #eef0fb; border-color: #d7dbf3; border-bottom-right-radius: 3px;
}
/* Wat wij onder elkaar vastlegden is geen bericht aan de kandidaat en hoort
   daarom niet aan een kant te hangen. */
.tijdlijn .beurt.intern { justify-content: center }
.tijdlijn .beurt.intern .bel {
  background: none; border-style: dashed; max-width: 78%;
}

.gesprek .schrijven { margin-top: 16px; border-top: 1px solid var(--rand);
                      padding-top: 12px }

/* Op een telefoon blijft van hem links en van ons rechts. Beide over de
   volle breedte maakte een achtergrondtint het enige verschil, en die zie je
   in de zon niet. De tijd komt onder het bericht, aan dezelfde kant. */
@media (max-width: 640px) {
  .tijdlijn .bel { max-width: 85% }
  .tijdlijn .beurt { flex-wrap: wrap }
  .tijdlijn .beurt .wanneer { width: 100% }
  .tijdlijn .beurt.uit .wanneer { text-align: right }
  .tijdlijn .beurt.intern .wanneer { text-align: center }
}

/* Werklijst en gesprek naast elkaar. Doorklikken naar het dossier en terug
   kost de recruiter zijn plek in de lijst; het gesprek hoort ernaast te staan
   terwijl hij belt. Pas vanaf 1024 px, want daaronder is er geen ruimte voor
   twee kolommen en blijft het dossier de plek. */
.gesprekpaneel { display: none }

@media (min-width: 1024px) {
  /* De pagina mag hier breder dan de 1060 px die de rest aanhoudt: met een
     kolom van 380 px ernaast houdt de lijst anders te weinig over. */
  main:has(.werkblad) { max-width: 1440px }
  /* De kolom komt er pas bij als er iemand gekozen is (werklijst.html). */
  .werkblad.met-gesprek {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px; align-items: start;
  }
  .werkblad.met-gesprek .gesprekpaneel {
    display: block; position: sticky; top: 16px;
    max-height: calc(100vh - 32px); overflow-y: auto;
  }
  .paneelsluiten { text-align: right; margin: 0 0 4px }
  .gesprekpaneel .vak { margin-bottom: 0 }
}

/* Welke regel je hebt opengeslagen. Een lichte rand en niet een vlak: de
   lijst moet rustig blijven, je leest hem tientallen keren per dag. */
tr.gekozen th a { text-decoration-thickness: 2px }
tr.gekozen { box-shadow: inset 3px 0 0 var(--blauw) }
/* Op de werklijst is de kandidaat een heel blok, niet één rij. */
.rij.gekozen { box-shadow: inset 3px 0 0 var(--blauw) }
.rij.gekozen h3 a { text-decoration-thickness: 2px }

.paneelkop { display: flex; justify-content: space-between; align-items: baseline;
             gap: 10px; margin: 0 0 8px }
.paneelkop h3 { margin: 0 }
.paneelkop .bellen { white-space: nowrap; font-weight: 600 }

/* Een knop die eruitziet als een link: weghalen is geen hoofdhandeling en
   hoort niet met een oranje vlak om aandacht te vragen. */
button.alslink { background: none; border: none; padding: 0; font: inherit;
                 color: var(--zacht); text-decoration: underline;
                 cursor: pointer }
button.alslink:hover { color: var(--fout) }

/* Geen enkele losse tekenreeks mag de pagina zijwaarts uit beeld duwen. Dat
   gebeurde met een bestandsnaam van 64 tekens: het dossier werd 574 px breed
   op een telefoonscherm van 375, en dan schuift de hele pagina heen en weer
   terwijl je met iemand aan de lijn zit. De naam zelf is nu leesbaar gemaakt,
   maar er komt ooit een lange mailadres of URL langs en dan geldt hetzelfde. */
.rij, .vak, .beurt .bel, .tabellijst .toelichting { overflow-wrap: anywhere; }

/* Wat de kandidaat werkelijk bereikt, staat in een eigen kader. Er stonden
   drie gelijkvormige oranje knoppen onder elkaar -- vastleggen, mailen,
   appen -- waarvan de eerste een interne aantekening is en de andere twee
   onherroepelijk. Op 390 px recht boven elkaar. Eén rand en één kop maken
   het verschil zichtbaar zonder dat er een tussenscherm bij hoeft. */
.naar-buiten {
  margin-top: 14px; padding: 12px 14px 14px;
  border: 1px solid var(--rand); border-left: 3px solid var(--oranje);
  border-radius: 8px; background: var(--vlak);
}
.naar-buiten-kop { margin: 0 0 8px; font-weight: 600; text-transform: none }
.kanaalkeuze { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px }

/* De noemer onder het percentage. Zonder dat getal zegt 100 % minder dan het
   lijkt: uit zes punten -- spreekt Nederlands, woont dichtbij -- stond het
   boven 97 % uit tweeënzestig punten met heftruck en reachtruck erin. Mager
   gemarkeerd zodra er zo weinig te toetsen viel dat het cijfer weinig waard
   is; de volgorde van de lijst verandert er niet door, de lezing wel. */
/* Grijs en niet doorzichtig: groen op 70 % haalde 3,18:1. In een groen
   of opengeklapt vakje neemt de noemer de kleur van het cijfer over. */
.score .basis { display: block; font-size: 10px; font-weight: 400;
                line-height: 1.1; color: var(--zacht) }
.score.voldoet .basis, .score[aria-expanded="true"] .basis { color: inherit }
/* Geen rood. Dat is in dit scherm al bezet: "mist" in de uitklap en "Af" na
   een klik. Met rood voor een magere noemer stond er rood ín een groen
   voldoet-vakje bij 22 van de 115 regels, en dan betekent de kleur niets
   meer. Een magere basis is geen fout maar een waarschuwing dat het cijfer
   weinig zegt; iets meer contrast is daarvoor genoeg. */
.score .basis.mager { color: inherit; font-weight: 600 }

/* --- wat ligt er ------------------------------------------------------- */

/* De wachttijd is waar de volgorde op staat, dus die mag zwaarder wegen dan
   de rest van de regel. "Ligt er 40 minuten" is iets waar iemand naar
   handelt; een tijdstip van binnenkomst niet. */
.wachttijd b { font-size: 19px; line-height: 1.1 }

/* Kiezen wat je ziet: één vorm, de pil (zie schakelaar in _bouwstenen.html). */
.schakelaar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px }
.velden .schakelaar, .paginaknoppen .schakelaar { margin: 0 }

/* --- duimdoelen ---------------------------------------------------------- */

/* 44 px voor alles wat je op een telefoon aantikt, niet alleen in de
   tabellijst. Daarbuiten was het menu 33 px, een tabblad 27, een
   filterknopje 29 en het telefoonnummer -- het ding waarvoor je de lijst
   opent -- 18. Eén blok hier, zodat geen scherm het zelf hoeft te regelen. */
@media (max-width: 640px) {
  .zijbalk a { min-height: 44px }
  a.knopje, summary.knopje, .knopje, a.tegel, .rij .zijkant a {
    min-height: 44px; display: inline-flex; align-items: center;
    justify-content: center }
  .stand a.tegel { display: flex }
  input:not([type=checkbox]):not([type=radio]), select, button { min-height: 44px }
  /* Padding en geen flex: met flex verdwijnt het pijltje van de uitklapper. */
  details > summary:not(.knopje) { padding: 11px 0; min-height: 44px }
  details.sectie > summary { padding: 14px 16px }
  .sectie-inhoud { padding: 0 16px 16px }
  .springlijst a { min-height: 44px }
  /* Een link die alleen op zijn regel staat is een knop zonder rand. */
  p > a:only-child, .kop > a { display: inline-flex; align-items: center;
                               min-height: 44px }
  .rij h3 a, table.gegevens a { display: inline-flex; align-items: center;
                                min-height: 44px }
  a[href^="tel:"], a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px }
}
@container (max-width: 640px) {
  .tabellijst .hoofd a, .tabellijst .contact a {
    display: flex; align-items: center; min-height: 44px }
}

/* Een label dat een schermlezer wel hoort maar dat niet in beeld hoeft:
   naast een keuzelijst in een rij zegt de kolom al waar het om gaat. */
.verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* De intake bovenaan een dossier: van wie, en wat er nog moet. */
.vak.intake { border-left: 4px solid var(--oranje) }
.vak.intake p { margin: 0 0 10px }
.vak.intake form { margin: 0 }

/* Verdelen (de triage): keuzelijst, Verdelen en Niet geschikt op één regel,
   op één hoogte. Waarom het voorstel zo is, staat onder de toelichting. */
.verdeelbalk { align-items: center; margin-bottom: 12px }
.voorstel-waarom { display: block; color: var(--zachter) }
/* Waar een nieuwe kandidaat vandaan komt, onder zijn naam. */
.herkomst { display: block; font-weight: 400; color: var(--zachter) }
.tabellijst.verdelen .acties > form.velden { display: inline-flex; flex-wrap: nowrap;
                                             align-items: center; gap: 6px }
.tabellijst.verdelen .acties > *, .tabellijst.verdelen .acties select { vertical-align: middle }
/* Hier niet vast: met een vaste breedte voor de knoppen bleef er in een
   smaller venster voor de toelichting een strook over, en brak "nog geen
   cv" per letter af. Deze lijst staat alleen op zijn pagina, dus er is
   geen tweede tabel om mee uit te lijnen. */
@container (min-width: 641px) {
  table.tabellijst.verdelen { table-layout: auto }
  .tabellijst.verdelen tr:has(> .contact) > .hoofd { width: auto }
  .tabellijst.verdelen .contact, .tabellijst.verdelen .getal,
  .tabellijst.verdelen .acties { width: 1%; white-space: nowrap }
  .tabellijst.verdelen .acties select { width: 150px }
}

/* Een rij met vier uitkomsten naast elkaar (de intake): de knoppen lopen
   door naar een tweede regel in plaats van buiten de lijst. In het Pools en
   Engels zijn ze een stuk langer dan in het Nederlands. */
@container (min-width: 641px) {
  .tabellijst.uitkomsten .acties { white-space: normal; width: 360px }
  .tabellijst.uitkomsten .acties > form,
  .tabellijst.uitkomsten .acties > details { margin: 0 0 6px 6px }
}

/* Iza beslist (Vacatures bij Iza): een keuzelijst en drie uitkomsten. Ook
   die lopen door naar een tweede regel, en de select past in zijn vak. */
@container (min-width: 641px) {
  .tabellijst.beslissen .acties { white-space: normal; width: 360px }
  .tabellijst.beslissen .acties > form,
  .tabellijst.beslissen .acties > details { display: inline-block; margin: 0 0 6px 6px }
  .tabellijst.beslissen .acties select { max-width: 100% }
}

/* De werklijst per stap: één set knoppen onder de naam. Een keuze die meer
   vraagt dan een klik (nu niet, niet geschikt, melden met een reden) klapt
   open onder de knop in plaats van een tweede pagina te openen. Knoppen van
   44 px, want er wordt ook vanaf een telefoon gebeld. */
.stapknoppen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
               margin: 10px 0 4px }
.stapknoppen > form.inline { display: inline-flex; flex-wrap: wrap; align-items: center;
                             gap: 6px; margin: 0 }
.stapknoppen .knopje, details.keuze > summary.knopje { min-height: 44px }
details.keuze > summary.knopje { list-style: none; display: inline-flex; align-items: center }
details.keuze > summary::-webkit-details-marker { display: none }
details.keuze[open] { flex-basis: 100% }
details.keuze > form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                       margin: 8px 0 0; padding: 10px; border: 1px solid var(--lijn);
                       border-radius: 8px; background: var(--vlak) }
details.keuze > form textarea, details.keuze > form label.boven { flex-basis: 100% }
details.keuze fieldset.kaal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 16px;
                              border: 0; margin: 0; padding: 0 }
details.keuze fieldset.kaal legend { padding: 0; margin-bottom: 4px; font-weight: 600 }
.stapuitleg { margin: 0 0 10px }
.tijdlijnregel { overflow-wrap: anywhere }
.uitkomsten details.keuze { display: inline-block; margin: 0 0 6px 6px; text-align: left }