/* ==========================================================================
   people.css — de medewerkerspagina

   Overgenomen uit `Vleetle Medewerkers.dc.html`; de maten staan in
   `docs/medewerkers-ontwerp.md`. Het ontwerp zet zestig losse kleurwaarden in
   `style`-attributen en gebruikt geen enkele variabele. Hier komen ze uit
   `tokens.css`, en dat is geen vrijheid maar de regel: een hexwaarde die maar
   op één plek staat is een kleur die niemand ooit terugvindt.

   WAT ER ANDERS IS AAN DE KLEUREN, EN WAAROM DAT KLOPT:

   De vijf teams hebben in het ontwerp vijf eigen hexwaarden. Hier zijn het
   `--proj-1-bar` tot en met `--proj-5-bar` — het setje categoriekleuren dat de
   projectpagina al gebruikt, mét een bijbehorend vlak en een bijbehorende inkt,
   en alle drie al op contrast nagemeten. Vier van de vijf ontwerpkleuren lagen
   er al dicht tegenaan; de vijfde had een zesde palet betekend.

   De drie statussen worden `--good`, `--warning` en `--critical`. Dat zijn
   precies de drie die het ontwerp bedoelt, en het zijn de namen die de rest van
   de app er al voor heeft.

   `.mw-` als voorvoegsel, en niet `.emp-`: die tweede zat aan de oude tabel en
   `test/cssdubbel.py` bestaat omdat een hergebruikte naam op de verkeerde plek
   precies het verkeerde doet.
   ========================================================================== */

/* De pagina vult het scherm en groeit er niet overheen. Zo doet het ontwerp het
   ook: het document scrollt daar niet — 1000 pixels hoog in een venster van
   1000 — en alleen de lijst schuift in zijn eigen bak. Bij ons groeide de
   pagina door tot 1715 en scrollde het hele document mee, waardoor de kop, de
   tabbalk en de filters uit beeld liepen zodra je naar beneden ging. Dat zijn
   precies de dingen die je nodig hebt terwijl je aan het lezen bent.

   Dezelfde afspraak als `.page--word` en `.page--sheet`, en om dezelfde reden.
   De `max-width` van 1440 gaat eraf: die knijpt de lijst op een breed scherm
   tot een kolom met wit ernaast, terwijl het ontwerp de volle breedte gebruikt. */
.page--people {
  display: flex;
  flex-direction: column;
  max-width: none;
  min-height: 0;
  height: calc(100vh - var(--topbar-height));
  padding: var(--space-5) var(--space-5) 0;
}

/* Het ontwerp zet een minimum van 1080 px op de inhoud en laat de pagina
   daaronder zijwaarts wegschuiven; dat doen wij niet — `CLAUDE.md` regel 5 en
   `test/widenew.mjs` zeggen dat er niets buiten beeld mag vallen. Wat er hier
   gebeurt is dat de balken wikkelen en de lijst in zijn eigen bak schuift. */
.mw {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  gap: var(--space-4);
  container-type: inline-size;
}

/* ---- de kop ------------------------------------------------------------- */

.mw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

/* `flex-basis: 320px` en niet `auto`, want dat getal is wat de flexregel gebruikt
   om te beslissen of hij afbreekt. Met basis 0 paste alles altijd op één regel
   en werd de tekstkolom in plaats daarvan platgeknepen: op een venster van 1000
   bleef er 105 pixels over, wikkelde de ondertitel naar vier regels en stak de
   telling 71 pixels buiten zijn eigen kolom, precies achter de eerste
   signaalpil — die is dekkend, dus het getal was er wel en te lezen was het
   niet. Nu breekt de balk af zodra 320 plus de knoppen niet meer passen, en
   krijgt de tekst de volle breedte.

   `min-width: 0` blijft: onder de 320 mag hij nog steeds krimpen, want daar
   staan de knoppen allang op een eigen regel. */
.mw-head__text { min-width: 0; flex: 1 1 320px; }

/* Hier stond `flex-wrap: wrap` bij, als vangnet voor een telling die niet kan
   krimpen. Er weer uit: met de regel hierboven is de tekstkolom nooit smaller
   dan 320 zolang de knoppen ernaast staan, en daaronder staan ze al op een eigen
   regel. Gemeten op 390, 700, 900, 1000 en 1600 in beide talen — de titelregel is
   overal 24 pixels hoog en breekt dus nergens af. Een regel die nooit aan de
   beurt komt hoort er niet te staan; hij dekt niets af en de volgende die hem
   leest denkt van wel. */
.mw-head__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

/* Het aantal collega's staat naast de titel en niet erin: het is een telling en
   geen naam, en een schermlezer die de kop voorleest hoort niet elke keer het
   getal mee te krijgen. */
.mw-head__count {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mw-head__sub {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mw-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* De drie tellers. Ze zijn knoppen en zien er ook zo uit: erop drukken filtert
   de lijst. In het ontwerp doet de eerste van de drie niets dan iets zeggen. */
.mw-signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
}

.mw-signal:hover { background: var(--surface-hover); }

.mw-signal--on {
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.mw-signal__n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.mw-signal--on .mw-signal__n { color: var(--accent-soft-ink); }

.mw-signal__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.mw-signal--new .mw-signal__dot { background: var(--chart-1); }
.mw-signal--leave .mw-signal__dot { background: var(--warning-ink); }
.mw-signal--expiring .mw-signal__dot { background: var(--critical-ink); }

/* ---- de tabbalk per team ------------------------------------------------ */

.mw-teams {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
  /* Zes tabbladen passen op een telefoon niet naast elkaar. Ze schuiven dan,
     en dat mag: een bak met `overflow-x: auto` is precies waar `widenew` een
     uitzondering voor maakt. Met `hidden` zou het net zo onzichtbaar zijn en
     wél omvallen. */
  overflow-x: auto;
  scrollbar-width: none;
}

.mw-teams::-webkit-scrollbar { display: none; }

.mw-team {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--text-md);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.mw-team:hover { color: var(--text-primary); }

.mw-team--on {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.mw-team__n {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mw-team__dot,
.mw-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--text-faint);
}

/* De vijf teams, uit het palet dat de projectpagina al gebruikt — en niet op
   volgorde maar op kleur: vier van de vijf die het ontwerp noemt staan er exact
   in (blauw, amber, groenblauw, violet), en de vijfde ligt er vlak naast. Op
   nummer toewijzen leverde twee groene teams naast elkaar op, en twee dingen
   die je uit elkaar moet houden horen niet dezelfde kleur te hebben.

   Staat er een zesde team in de gegevens, dan krijgt het de grijze stip
   hierboven — zichtbaar anders, en dat is beter dan stilletjes de kleur van
   Engineering. */
[data-team="Engineering"] .mw-dot, .mw-team[data-team="Engineering"] .mw-team__dot { background: var(--proj-2-bar); }
[data-team="Sales"] .mw-dot,       .mw-team[data-team="Sales"] .mw-team__dot       { background: var(--proj-3-bar); }
[data-team="Support"] .mw-dot,     .mw-team[data-team="Support"] .mw-team__dot     { background: var(--proj-4-bar); }
[data-team="Operations"] .mw-dot,  .mw-team[data-team="Operations"] .mw-team__dot  { background: var(--proj-1-bar); }
[data-team="Finance"] .mw-dot,     .mw-team[data-team="Finance"] .mw-team__dot     { background: var(--proj-5-bar); }

/* ---- de filterbalk ------------------------------------------------------ */

.mw-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Tweehonderdzestig, en dat is het getal uit het ontwerp. Zonder deze regel
   krijgt het veld de standaardbreedte van de browser — 213 pixels, en daar past
   "Zoek op naam, functie of team…" niet in: die tekst is er 200 breed en er bleef
   161 over. Je las "Zoek op naam, functie o" en dan hield het op.

   `.mw-bar .search` en niet `.search`, want die klasse is van de component en
   staat ook in de titelbalk, in Berichten en in de dialogen. Een breedte daarop
   is een breedte op vijf plekken. `max-width` erbij zodat hij op een telefoon
   meekrimpt in plaats van de balk uit te duwen. */
.mw-bar .search { width: 260px; max-width: 100%; }

.mw-bar__spacer { flex: 1; min-width: var(--space-2); }

.mw-bar__count {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* De schakelaar lijst / kaarten. */
.mw-views {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.mw-view {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}

.mw-view__icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.mw-view--on {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* Een filter is een knop met een menu eronder. Geen `<select>`: het ontwerp zet
   een telling achter elke optie, en dat kan een `<option>` niet dragen. */
.mw-filter { position: relative; }

.mw-filter__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-2-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-size: var(--text-xs);
  color: var(--text-primary);
  cursor: pointer;
}

.mw-filter__button:hover { border-color: var(--border-hover); }

.mw-filter__label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.mw-filter__value { font-weight: 500; }

.mw-filter__caret { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Een filter dat aanstaat zegt dat met kleur én met het woord dat erin staat.
   Alleen kleur zou het voor een deel van de lezers niet zeggen. */
.mw-filter--on .mw-filter__button {
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
}

.mw-filter--on .mw-filter__value { color: var(--accent-soft-ink); }

/* Een bovengrens op de hoogte, met een eigen schuif erin. Het menu klapt altijd
   naar beneden open; op een laag venster liep het daardoor onder de rand door,
   en een absoluut geplaatst ding dat onder de pagina uitsteekt laat het dócument
   scrollen — waarmee de kop en de filterbalk alsnog wegschuiven. Vandaag past
   het grootste menu (zes vestigingen) er ruim in; het is er voor het moment dat
   er een zevende bij komt. */
.mw-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  max-height: 260px;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}

.mw-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-2-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--text-xs);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.mw-menu__item:hover { background: var(--surface-hover); }

.mw-menu__text { flex: 1; min-width: 0; }

.mw-menu__n {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mw-menu__tick { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2; }

/* ---- de lijst ----------------------------------------------------------- */

/* Zes kolommen in één raster, en niet in een `<table>`. Dat is het ontwerp, en
   het heeft een reden die hier ook geldt: elke rij is één klikbaar vlak, en een
   `<tr>` die je als knop bedient is een `<tr>` waar de rand omheen springt. */
/* De schuifbeweging zit hier binnenin, in `.mw-list__scroll`, en niet meer in
   `.mw-main`. Dat is verhuisd om de kolomkoppen te kunnen laten staan, en het
   moest wel: `position: sticky` klikt vast aan de dichtstbijzijnde schuifbak, en
   dat is deze — `overflow-x: auto` maakt van de andere as ook `auto`, dat
   schrijft de spec voor. Zolang die bak zelf niet schoof plakte er niets, hoe
   ver `.mw-main` er daarboven ook aan trok.

   Het scheelt nog twee dingen. De horizontale schuifbalk stond onderaan een bak
   van dertienhonderd pixels — je moest eerst helemaal naar beneden om hem te
   pakken; nu staat hij onder wat je ziet. En `.mw-foot` — "Toon 24 meer" — staat
   nu vast onder de lijst in plaats van eronder weg te schuiven.

   Dat de lijst mág krimpen is nu de bedoeling: hij hoort precies te vullen wat
   er over is en van binnen te schuiven. Eerder stond hier `flex-shrink: 0`, want
   toen knipte `overflow: hidden` de rest eraf — elf van de vierentwintig rijen in
   beeld en geen schuifbalk om de rest te halen. Dat gat zit nu dicht aan de
   andere kant: er schuift iets. */
.mw-list {
  /* Zesendertig voor de knop plus één voor de onderrand. Hij staat hier en niet
     in de kopregel zelf, want de rijen eronder rekenen er ook mee. */
  --mw-kop-h: 37px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  overflow: hidden;
}

/* `.mw-grid` stond hier ook, en deed niets: in de kaartenstand is zijn ouder de
   klasseloze `lijf`-div met `display: block`, dus hij is daar geen flexitem.
   Dode CSS is niet ongevaarlijk — zie CLAUDE.md — dus hij gaat eruit in plaats
   van mee te liften op een selector die er wél toe doet. */
.mw-foot { flex-shrink: 0; }

/* Is er niets meer bij te laden, dan is het vak leeg — en een leeg flexitem
   kost nog steeds zijn tussenruimte van twaalf pixels. Dat viel niet op zolang
   de voet gewoon wegschoof; nu de lijst zelf op hoogte begrensd is, gaan die
   twaalf pixels van de lijst af. Zelfde regel als bij `.mw-warn-vak`. */
.mw-foot:empty { display: none; }

.mw-list__scroll { overflow: auto; }

/* De kolombreedtes komen uit het ontwerp, op één na: de statuskolom staat daar
   op 104 px, en dat is precies te krap voor "Opzegtermijn". In de schermafdruk
   van het ontwerp staat in die kolom alleen "In dienst" — het kortste van de
   drie — en dan valt het niet op. Hier is hij 118, want een pil die zijn eigen
   woord afkapt zegt niet meer wat de stand is. */
.mw-row {
  display: grid;
  grid-template-columns:
    minmax(250px, 1.4fr) minmax(160px, 1fr) 128px 120px 128px 118px;
  align-items: center;
  gap: var(--space-3);
  /* 250 + 160 + 128 + 120 + 128 + 118 is 904, en dat was het getal dat hier
     stond. Maar met `box-sizing: border-box` zit de opvulling ín die breedte en
     de tussenruimten er ook niet bij: 5 × 12 tussenruimte en 2 × 16 opvulling
     erbij is 996. Met 904 liep het raster zesentwintig pixels buiten zijn eigen
     rij zodra het detailpaneel openstond op een venster onder de 1640 — de
     achtergrond en de scheidingslijn hielden op waar de rij ophield, de
     kolommen niet, en de rechterrand was niet te bereiken. */
  min-width: 996px;
  padding: 9px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.mw-row:last-child { border-bottom: 0; }

/* De kop blijft staan. Zonder dat weet je na twintig rijen niet meer welke kolom
   welke is, en juist hier scheelt dat: "Locatie" en "Contractvorm" zijn allebei
   één woord in dezelfde grijstint, en "Amsterdam" naast "Vast" zegt niet uit
   zichzelf welk woord in welke kolom hoort.

   Hij schuift wél mee naar links en rechts, want dat hoort ook zo: de rij is
   minstens 996 pixels breed en de kop hoort boven zijn eigen kolom te blijven
   staan, niet boven een andere. Dat werkt vanzelf zodra hij in dezelfde
   schuifbak zit — sticky houdt alleen de as vast waar je een `top` op zet.

   De achtergrond moet dekkend zijn, en dat is `--surface-sunken` in allebei de
   thema's (#edf3f1 en #1c2928). Een halfdoorzichtige tint zou de rij die eronder
   doorloopt laten meelezen.

   Waar hij níét plakt: op een smal of een laag venster. Daar schuift de pagina
   als geheel en niet de lijst, en aan die beweging kan deze kop niet vastklikken
   — hij zit in een bak die horizontaal schuift, en zo'n bak ís een schuifbak, ook
   voor de andere as. Dat is geen instelling die we hier missen maar hoe sticky
   werkt. Zie de twee blokken onderaan dit bestand. */
.mw-head-row {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-strong);
  padding-top: 0;
  padding-bottom: 0;
  min-height: var(--mw-kop-h);
}

/* Het omhulsel dat de `columnheader` draagt. Het rasteritem is nu deze cel en
   niet meer de knop erin; hij mag daarom niets aan de maten toevoegen. */
.mw-colcel { display: flex; align-items: center; min-width: 0; }

.mw-col {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}

.mw-col:hover { color: var(--text-primary); }
.mw-col--on { color: var(--accent); }

.mw-col__arrow { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.mw-col[aria-sort="descending"] .mw-col__arrow { transform: rotate(180deg); }

/* De rij is een knop zonder knop te zijn: hij draagt `role="button"` en luistert
   zelf naar Enter en spatie. Zodra er ooit een tweede bediening ín een rij komt
   — een menu, een ster — moet dit omhulsel uit elkaar, want bediening in
   bediening bestaat niet. */
/* `scroll-margin-top` en niet uit voorzorg. Een rij is met Tab te bereiken, en
   de browser schuift hem dan met `block: "nearest"` in beeld — die rekent met de
   rand van de schuifbak en niet met wat er overheen plakt. De rij eronder kwam
   zo onder de kolomkoppen terecht: in focus, met een focusrand, en niet te
   lezen. */
.mw-person {
  cursor: pointer;
  text-align: left;
  min-height: 52px;
  scroll-margin-top: var(--mw-kop-h);
}

/* De focusrand naar bínnen. Een `outline` wordt geknipt door elke voorouder die
   `overflow` heeft, en dat zijn er hier twee: de rij die onderaan de schuifbak
   staat verloor zijn onderste streep — vier pixels, bij drie van de
   vierentwintig rijen — en een rij die half onder de plakkende koprij schuift
   verliest zijn bovenste, want die kop schildert eroverheen. Met `-2px` valt de
   rand binnen de rij en overkomt hem geen van beide. Dezelfde oplossing als bij
   `.chart__hit` in `components.css`. */
.mw-person:focus-visible { outline-offset: -2px; }

.mw-person:hover { background: var(--surface-hover); }
.mw-person--on { background: var(--accent-soft); }

.mw-person__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* De regelhoogtes staan er met een getal op en niet op de standaard. Het
   ontwerp zet de rij op 52 px: negen boven, negen onder, een randje, en
   drieëndertig voor de naam met het adres eronder. Met de standaardregelhoogte
   werd het zesenvijftig — vier pixels per rij, en dat is over vierentwintig
   rijen bijna een hele rij verschil. */
.mw-person__name {
  font-size: var(--text-sm);
  line-height: 18px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Het adres staat op `--text-secondary` en niet op `--text-muted`, waar het
   ontwerp het lichter zet. Op een gekozen rij — het zachte groen — haalde het
   in het donkere thema 4,11:1, en dat is onder de eis. Een adres is inhoud en
   geen bijschrift: je leest het om het over te typen. */
.mw-person__mail {
  font-size: var(--text-2xs);
  line-height: 15px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-person__cell {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-person__team { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

/* Een tijdelijk contract draagt zijn einddatum op een tweede regel. Dat is de
   informatie waar de hele kolom om draait; hem in een tooltip zetten zou hem
   verstoppen voor iedereen die niet met een muis werkt. */
.mw-person__ends {
  display: block;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.mw-person__ends--soon { color: var(--warning-ink); }
.mw-person__ends--past { color: var(--critical-ink); }

/* ---- de contractwaarschuwing -------------------------------------------- */

/* Hij staat er alleen als er iets te waarschuwen valt, en hij is te wegklikken
   noch te negeren: de knop ernaast filtert de lijst op precies die mensen. Een
   balk die je alleen kunt lezen is een balk die je na twee keer niet meer
   leest. */
.mw-warn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warning-line);
  border-radius: var(--radius-lg);
  background: var(--warning-bg);
  color: var(--warning-ink);
  font-size: var(--text-xs);
}

.mw-warn__icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mw-warn__text { flex: 1; min-width: 0; }

/* Is er niets te waarschuwen, dan is het vak leeg — maar een leeg flexitem
   krijgt nog steeds zijn tussenruimte van zestien pixels. Op een laag scherm is
   dat bijna een derde rij die aan niets opgaat. */
.mw-warn-vak:empty { display: none; }

/* ---- de kaarten --------------------------------------------------------- */

/* `auto-fill` en geen vast aantal kolommen: het raster telt zelf hoeveel er
   passen, en dat is waarom deze stand op een telefoon werkt waar de lijst moet
   schuiven. */
.mw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: var(--space-3);
}

/* De hele kaart is één knop. Dat kán hier, want er zit niets anders in — en het
   is precies waarom de rij in de lijst géén knop is maar een `div` met een rol:
   daar zou de focusrand over de volle breedte lopen. */
.mw-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  text-align: left;
  cursor: pointer;
}

.mw-card:hover { border-color: var(--border-hover); background: var(--surface-hover); }

.mw-card--on {
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
}

.mw-card__face {
  width: 40px;
  height: 40px;
  font-size: var(--text-xs);
}

.mw-card__name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 20px;
  /* Een lange naam breekt af in plaats van de kaart breder te maken: alle
     kaarten in een rij horen even breed te blijven. */
  overflow-wrap: anywhere;
}

.mw-card__role {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 17px;
}

.mw-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.mw-card__sep { color: var(--text-faint); }

/* ---- de voetknop -------------------------------------------------------- */

/* "Toon 24 meer" vervangt het bladeren van de oude pagina. Hij staat ónder de
   lijst en niet erboven: wat je zoekt is de volgende regel, en die staat waar
   je bent opgehouden met lezen. */
.mw-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 38px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

.mw-more:hover { background: var(--surface-hover); }

.mw-more__rest {
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- de statuspil ------------------------------------------------------- */

.mw-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: 600;
  white-space: nowrap;
}

.mw-status__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); flex-shrink: 0; }

.mw-status--active { background: var(--good-bg); color: var(--good-ink); }
.mw-status--active .mw-status__dot { background: var(--good-ink); }
.mw-status--leave { background: var(--warning-bg); color: var(--warning-ink); }
.mw-status--leave .mw-status__dot { background: var(--warning-ink); }
.mw-status--notice { background: var(--critical-bg); color: var(--critical-ink); }
.mw-status--notice .mw-status__dot { background: var(--critical-ink); }

/* ---- de avatar ---------------------------------------------------------- */

.mw-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--who-ink);
}

/* ---- het detailpaneel --------------------------------------------------- */

/* De lijst en het paneel naast elkaar, en samen vullen ze wat er van de hoogte
   over is. `min-width: 0` op de linkerhelft, want zonder dat duwt de lijst het
   paneel eruit in plaats van zelf te schuiven — dezelfde val als bij
   `.wp-split > .ws` in het werkblad. `min-height: 0` om dezelfde reden in de
   andere richting: zonder dat weigert een flexitem kleiner te worden dan zijn
   inhoud, en dan scrollt er niets maar groeit de pagina alsnog. */
.mw-body { display: flex; align-items: stretch; gap: var(--space-4); flex: 1; min-height: 0; }

/* Hier zit de schuifbeweging. De kop, de tabbalk en de filterbalk blijven
   staan; alleen de lijst en de voetknop gaan mee naar beneden. */
.mw-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}

/* Het paneel schuift apart. Sticky zou hier niet werken: het staat naast de
   schuifbak en niet erin. */
.mw-detail {
  width: 344px;
  flex-shrink: 0;
  align-self: flex-start;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  animation: mw-slide var(--duration-base) var(--ease);
}

@keyframes mw-slide {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

/* Wie liever geen beweging ziet, krijgt hem niet. */
@media (prefers-reduced-motion: reduce) {
  .mw-detail { animation: none; }
}

.mw-detail__top { display: flex; align-items: flex-start; gap: var(--space-3); }

.mw-detail__face {
  width: 56px;
  height: 56px;
  font-size: var(--text-lg);
}

.mw-detail__who { flex: 1; min-width: 0; }

.mw-detail__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.mw-detail__role {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.mw-detail__close { flex-shrink: 0; }

.mw-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.mw-detail__section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.mw-detail__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* De zeven regels. Een raster en geen `<dl>` met zwevende breedtes: de labels
   horen onder elkaar uit te lijnen, ook als er "In dienst" naast "Uren" staat. */
.mw-fields { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-2) var(--space-3); }

.mw-fields__key { font-size: var(--text-xs); color: var(--text-muted); }

.mw-fields__val {
  font-size: var(--text-xs);
  color: var(--text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.mw-detail__warn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2-5);
  border: 1px solid var(--warning-line);
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  font-size: var(--text-2xs);
  color: var(--warning-ink);
}

.mw-detail__warn-icon { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }

.mw-project {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-primary);
  text-decoration: none;
}

.mw-project:hover { background: var(--surface-hover); }

.mw-project__code {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mw-project__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mw-detail__none { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

.mw-mates { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.mw-mate {
  border: 0;
  padding: 0;
  background: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* ---- smal --------------------------------------------------------------- */

/* Een mediaquery meet het vénster; dit is een kolom die smal kan zijn terwijl
   het venster dat niet is — zodra het detailpaneel opengaat. Dus `@container`
   op `.mw` zelf. */
@container (max-width: 700px) {
  .mw-head__actions { width: 100%; }
  .mw-bar__spacer { flex-basis: 100%; min-width: 0; }
  /* Naast elkaar past niet meer. Het paneel gaat dan boven de lijst staan en
     over de volle breedte — niet eronder, want je hebt er net op geklikt.

     `align-items: stretch` erbij, en dat is niet overbodig: hierboven staat
     `flex-start`, zodat het paneel niet zo hoog wordt als de lijst. In een
     kolom is dat de bréédte, en dan krimpt de lijst naar zijn eigen inhoud —
     achthonderdnegentig pixels — in plaats van mee te rekken. Dezelfde val als
     `margin-inline: auto` op een flexitem. */
  /* `order` op het paneel en géén `column-reverse`, en dat is geen smaak.
     `column-reverse` draait ook de schuifóórsprong om: `scrollTop: 0` is dan
     onderaan en naar boven schuiven levert negatieve getallen op. De pagina
     opende daardoor op de laatste rijen — op 390 pixels stond je bij rij twintig
     van de vierentwintig, zonder kolomkop in beeld, en het wiel naar beneden
     deed niets omdat je er al was. `order: -1` zet het paneel bovenaan zonder
     de richting van de bak aan te raken. Op de tabvolgorde maakt het geen
     verschil: `order` verandert de tekenvolgorde en niet de DOM, net als
     `column-reverse`. */
  .mw-body { flex-direction: column; align-items: stretch; overflow-y: auto; }
  /* Twee schuifbakken naast elkaar werkt; twee ónder elkaar niet — dan weet je
     nooit welke er beweegt. Op smal schuift het geheel, en de balken erboven
     blijven staan.

     `flex: 0 0 auto` en dat is de hele reden dat dit werkt. Met `flex: 1` en
     `min-height: 0` — wat hierboven staat, want daar schuift `.mw-main` zelf —
     krimpt de dóós tot wat er past terwijl de lijst er met `overflow: visible`
     buiten steekt. Uitstekende inhoud telt niet mee voor de schuifruimte van de
     ouder: `.mw-body` had scrollHeight 280 op een lijst van 7858, en dan schuift
     er nergens iets. Op 390 pixels stonden er vijf van de honderdachtenveertig
     rijen in beeld en waren de andere honderddrieënveertig niet te bereiken —
     ook niet met het wiel, ook niet met `scrollIntoView`.

     Hier plakken de kolomkoppen dus niet: de beweging zit in `.mw-body` en de
     kop kan daar niet aan vastklikken. Dat is de prijs, en hij is hier het
     laagst — op deze breedte schuif je de rij toch al zijwaarts om hem te
     lezen. */
  .mw-main { flex: 0 0 auto; overflow-y: visible; padding-bottom: 0; }
  .mw-detail { order: -1; width: 100%; max-height: none; overflow-y: visible; }
}

/* Een heel laag venster. Onder ongeveer een halve schermhoogte is er van de
   vaste hoogte niets zinnigs meer over: de kop, de tabbalk en de filterbalk
   eten alles op en er blijft minder dan één rij over. Dan is een pagina die
   gewoon groeit en meescrollt het eerlijke antwoord.

   Zonder deze regel klemde `.mw-main` op de twintig pixels van zijn eigen
   opvulling — opvulling krimpt niet mee — en ging het document alsnog scrollen,
   met de kop en de filters eruit. Precies de stand die het ontwerp uitsluit.

   560 en niet 520. Bij 520 bleef er een band van twintig pixels over waarin de
   vaste hoogte nog gold maar een opengeklapt filtermenu er net onderuit stak —
   en dan gaat het document alsnog schuiven. Een band van twintig pixels is geen
   band waarin je erop kunt vertrouwen dat iemand niet terechtkomt. */
@media (max-height: 560px) {
  .page--people { height: auto; min-height: 0; padding-bottom: var(--space-5); }
  .mw-body { overflow-y: visible; }
  /* Géén `flex: 0 0 auto` hier, en dat is precies waar het misging. Die regel
     stond er, overgenomen uit het blok hierboven — maar dáár is `.mw-body` een
     kolom en gaat `flex-basis` over de hóógte. Op een breed en laag venster is
     hij een rij, en dan is het de bréédte: `.mw-main` kromp naar zijn inhoud en
     die inhoud heeft een rij van 996 pixels. Hij stond dus vast op 1017 breed,
     wat het venster ook deed.

     Dat gaf drie dingen tegelijk. Op 1000 tot 1300 breed stak de lijst tot 281
     pixels buiten het scherm, in bakken met `overflow: visible`, dus met een
     document dat zijwaarts schoof. Op 1280x500 was het nog één pixel — net onder
     de drempel van `test/widenew.mjs`. En op 1600x560 bleef er een lege strook
     van 299 pixels rechts staan die er één vensterpixel hoger niet was.

     Wat dit blok nodig heeft is de hoogte loslaten, niet de breedte. `flex: 1`
     uit de basisregel blijft dus staan; op smal-én-laag wint het `@container`
     blok hierboven met zijn `flex: 0 0 auto`, en dáár klopt het wel. */
  .mw-main { overflow-y: visible; padding-bottom: 0; }
  .mw-detail { max-height: none; overflow-y: visible; }
}