/* De letters van de werknemerskaart: brede technische kapitalen voor ARES
   en de kleine letters van de pas, zoals op een ruimtevaartembleem, en
   een smalle letter voor de naam. Alleen deze kaart gebruikt ze, dus ze
   worden hier geladen en niet op elke bladzijde. */
@import url("https://fonts.googleapis.com/css2?family=Michroma&family=Saira+Condensed:wght@500;600;700&family=Saira+Semi+Condensed:wght@400;500;600&display=swap");

/* ============================================================
   WERKNEMERSKAART — een pas van het Human Deployment Program
   ------------------------------------------------------------
   ARES zet de mensen in en geeft elke werknemer een pas. In het
   hoofdkantoor (css/hoofdkantoor.css) zit die in een sleeve met een
   bureau over één helft: als medewerker de bovenkant, na de promotie
   tot CEO de onderkant. Je ziet dus altijd de middenstrook met één
   helft, en elke stand is een complete pas:

     CEO          wit met blauw, een gouden chip, de uitgever en het
                  niveau CEO
     strook       blauw: foto met hologram, het personeelsnummer, de
                  naam, de functie en de tags
     medewerker   nachtblauw met wit, een zilveren chip, een
                  streepjescode van het personeelsnummer op een wit
                  label, en het niveau Medewerker

   Op het bord zie je zo in één oogopslag wie er leiding geeft: de
   enige lichte pas.

   De strook staat op top:50% met een verschuiving van de halve eigen
   hoogte, en beide helften worden berekend als calc(50% - strook/2).
   Procenten gaan over de binnenmaat van de kaart, dus de randdikte
   hoeft nergens in de som voor te komen — en inhoud in de ene helft
   kan de strook nooit verschuiven. De rand van het bureau valt precies
   op de rand van de strook.

   Alles is dicht van kleur. Een doorzichtig verloop wordt in Safari
   bij afdrukken een dicht vlak (zie docs/ontwerpgids.md, §3e).
   ============================================================ */
.card--crew{
  --c1:var(--type-crew-1); --c2:var(--type-crew-2);
  border-color:var(--wn-rand);
  box-shadow:none;
  background:var(--wn-rand);
}
/* Geen papierschaduw: die maakt de nacht grauw en het wit vuil. */
.card--crew::after{ content:none; }
/* Onder de naad tussen de CEO-helft en de strook ligt een smal wit vlak.
   Op die naad kleurt een pixel mee met wat eronder ligt, in een PDF en
   bij sommige zoomstanden. Was dat de donkere ondergrond van de kaart,
   dan stond er een donker lijntje boven de strook. */
.card--crew::before{
  content:""; position:absolute; left:0; right:0;
  top:calc(50% - var(--wn-strip-h) / 2 - 0.5*var(--mm)); height:var(--mm);
  background:var(--wn-wit);
}

.card--crew .wn__helft{
  position:absolute; left:0; right:0;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.wn__helft--ceo{
  top:0; height:calc(50% - var(--wn-strip-h) / 2);
  padding:calc(7*var(--mm)) calc(3.4*var(--mm)) calc(2.2*var(--mm));
  /* Het licht komt uit de strook: tegen de mensen aan is het wit het
     helderst, en de nacht het lichtst. */
  background:radial-gradient(90% 120% at 50% 100%,
    var(--wn-wit) 0%, var(--wn-wit-diep) 85%);
  color:var(--ink);
}
.wn__helft--mw{
  bottom:0; height:calc(50% - var(--wn-strip-h) / 2);
  padding:calc(2.2*var(--mm)) calc(3.4*var(--mm)) calc(7*var(--mm));
  background:radial-gradient(90% 120% at 50% 0%,
    var(--wn-nacht-gloed) 0%, var(--wn-nacht) 85%);
  color:var(--wn-wit-tekst);
}
.wn__helft > *{ position:relative; z-index:1; }

/* ---------- De golflijnen: het veiligheidspatroon van de pas ---------- */
.card--crew .wn__golf{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; pointer-events:none;
}
.wn__golf path{ fill:none; stroke-width:.13; }
.wn__helft--ceo .wn__golf path{ stroke:var(--wn-wit-golf); }
.wn__helft--mw  .wn__golf path{ stroke:var(--wn-nacht-golf); }
.wn__strip      .wn__golf path{ stroke:var(--wn-strook-golf); }

/* De microtekst langs de strook: een regel van een halve millimeter, net
   naast de strook, in een kleur vlak bij de ondergrond. */
.wn__helft > .wn__micro{
  position:absolute; left:0; right:0; z-index:0;
  height:calc(0.62*var(--mm));
  overflow:hidden; white-space:nowrap; text-align:center;
  font:400 calc(0.55*var(--mm))/calc(0.62*var(--mm)) var(--font-wn);
  letter-spacing:.08em;
}
.wn__helft--ceo > .wn__micro{ bottom:calc(0.6*var(--mm)); color:var(--wn-wit-micro); }
.wn__helft--mw  > .wn__micro{ top:calc(0.6*var(--mm)); color:var(--wn-nacht-micro); }

/* ---------- De regel van de pas: chip, uitgever, niveau ----------
   Bij de CEO bovenaan, bij de medewerker onderaan: de kant die uit de
   hoes steekt. */
.wn__helft > .wn__regel{
  position:absolute; z-index:1;
  left:calc(2.8*var(--mm)); right:calc(2.8*var(--mm));
  height:calc(4.4*var(--mm));
  display:flex; align-items:center; gap:calc(1.8*var(--mm));
}
.wn__helft--ceo > .wn__regel{ top:calc(1.9*var(--mm)); }
.wn__helft--mw  > .wn__regel{ bottom:calc(1.9*var(--mm)); }
/* Kosten linksboven of punten rechtsonder: dan schuift de regel op. */
.wn--kosten .wn__helft--ceo > .wn__regel{ left:calc(11.6*var(--mm)); }
.wn--punten .wn__helft--mw  > .wn__regel{ right:calc(13.4*var(--mm)); }

/* De chip: metaal met contacten, goud bij de CEO, zilver bij de
   medewerker. */
.wn__chip{
  flex:0 0 auto; display:block;
  width:calc(5.9*var(--mm)); height:calc(4.4*var(--mm));
  border-radius:calc(0.9*var(--mm));
  background:linear-gradient(135deg, var(--chip-1) 0%, var(--chip-2) 48%,
    var(--chip-1) 78%, var(--chip-2) 100%);
  box-shadow:inset 0 0 0 calc(0.18*var(--mm)) var(--chip-3),
             0 calc(0.15*var(--mm)) 0 calc(0.23*var(--mm)) rgba(0,0,0,.09),
             0 calc(0.15*var(--mm)) 0 0 rgba(0,0,0,.19);
}
.wn__chip svg{ display:block; width:100%; height:100%; }
.wn__chip path, .wn__chip rect{
  fill:none; stroke:var(--chip-3); stroke-width:.32; stroke-linecap:round;
}
.wn__chip--goud{
  --chip-1:var(--wn-chip-goud-1); --chip-2:var(--wn-chip-goud-2); --chip-3:var(--wn-chip-goud-3);
}
.wn__chip--zilver{
  --chip-1:var(--wn-chip-zilver-1); --chip-2:var(--wn-chip-zilver-2); --chip-3:var(--wn-chip-zilver-3);
}

/* De uitgever: het embleem en ARES, met het programma eronder. */
.wn__uitgever{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:calc(0.55*var(--mm));
  white-space:nowrap;
}
.wn__uitgever b{
  display:flex; align-items:center; gap:calc(0.9*var(--mm));
  font:400 calc(2.1*var(--mm))/1 var(--font-wn);
  letter-spacing:.26em; color:var(--wn-inkt);
}
.wn__uitgever small{
  font:400 calc(0.92*var(--mm))/1 var(--font-wn);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--wn-inkt-zacht);
}
.wn__embleem{
  flex:0 0 auto;
  width:calc(4*var(--mm)); height:calc(1.88*var(--mm));
  --wn-vlak:var(--wn-wit-diep);
}
.ares__veld{ fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; }
.ares__horizon{ fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; }
.ares__berg{
  fill:currentColor;
  stroke:var(--wn-vlak); stroke-width:1.6; stroke-linejoin:round;
  paint-order:stroke fill;
}

/* Het niveau: CEO of Medewerker, als label op de pas. De spatiëring
   staat ook achter de laatste letter; de kleinere opvulling rechts
   haalt dat weg. */
.wn__niveau{
  flex:0 0 auto; margin-left:auto;
  padding:calc(0.65*var(--mm)) calc(1.25*var(--mm)) calc(0.65*var(--mm)) calc(1.6*var(--mm));
  border-radius:calc(0.8*var(--mm));
  font:400 calc(1.6*var(--mm))/1 var(--font-wn);
  letter-spacing:.24em; text-transform:uppercase;
  white-space:nowrap;
}
.wn__helft--ceo .wn__niveau{ background:var(--wn-inkt); color:var(--wn-wit); }
.wn__helft--mw  .wn__niveau{ background:var(--wn-wit-tekst); color:var(--wn-nacht); font-size:calc(1.45*var(--mm)); letter-spacing:.18em; }

/* De streepjescode van het personeelsnummer, met eronder wat hij zegt
   en de operatie waarin deze werknemer aankwam. */
.wn__code{
  flex:0 1 calc(19*var(--mm)); min-width:0;
  display:flex; flex-direction:column; gap:calc(0.45*var(--mm));
}
/* Is de regel krap (met punten rechtsonder), dan wordt de code smaller.
   De strepen staan op een wit label: op de nacht blijft hij zo te
   scannen. */
.wn__streep{
  display:block; box-sizing:border-box;
  width:100%; height:calc(3.2*var(--mm));
  padding:calc(0.3*var(--mm)) calc(0.5*var(--mm));
  border-radius:calc(0.4*var(--mm));
  background:var(--wn-wit);
  fill:var(--wn-inkt);
}
.wn__code small{
  font:400 calc(0.92*var(--mm))/1 var(--font-wn);
  letter-spacing:.12em; text-transform:uppercase; color:var(--wn-wit-zacht);
  white-space:nowrap; overflow:hidden;
}

/* De inhoud zoekt het midden van zijn eigen helft op. */
.wn__inhoud{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:calc(1.1*var(--mm));
}

/* ---------- De middenstrook ---------- */
.wn__strip{
  position:absolute; left:0; right:0; z-index:2;
  top:50%; transform:translateY(-50%);
  height:var(--wn-strip-h);
  display:flex; align-items:center; gap:calc(3.3*var(--mm));
  padding:0 calc(2.6*var(--mm)) 0 calc(2.4*var(--mm));
  /* Een rustig verloop, zodat de golflijnen overal even zacht zijn. */
  background:linear-gradient(180deg, var(--wn-strook-1), var(--wn-strook-2));
  color:#fff;
  /* Het lichte randje aan de CEO-kant valt onder de rand van het bureau. */
  --wn-randje:calc(0.3*var(--mm));
  box-shadow:inset 0 var(--wn-randje) 0 var(--wn-strook-lijn);
}
.wn__strip > *{ position:relative; z-index:1; }
/* De golflijnen beginnen onder dat randje: anders lopen de toppen van de
   bovenste golf er als donkere boogjes doorheen. */
.wn__strip > .wn__golf{
  position:absolute; z-index:0;
  top:var(--wn-randje); height:calc(100% - var(--wn-randje));
}

/* De pasfoto, staand zoals op een echte pas. Iets hoger dan de strook,
   zodat hij er boven en onder net uitsteekt. */
.wn__foto{
  flex:0 0 auto;
  width:calc(14*var(--mm)); height:calc(18*var(--mm));
  border-radius:calc(1.5*var(--mm)); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--art-bg, var(--type-crew-2));
  border:calc(0.45*var(--mm)) solid var(--wn-wit);
  box-shadow:0 0 0 calc(0.22*var(--mm)) var(--wn-rand);
  /* De slagschaduw is een filter: een vervaagde box-shadow wordt in een
     PDF uit Chrome een donker vlak (zie "Vervaagde schaduwen" in docs/ontwerpgids.md). */
  filter:drop-shadow(0 calc(0.3*var(--mm)) calc(0.4*var(--mm)) rgba(0,0,0,.45));
}
.wn__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.wn__ic{ font-size:calc(8*var(--mm)); color:rgba(255,255,255,.9); }

/* Het hologram: een parelmoeren zegel met het embleem, half over de
   hoek van de foto, zoals op een echte pas. Het blijft binnen de strook,
   dus je ziet het in beide standen. */
.wn__strip > .wn__holo{
  position:absolute; z-index:2;
  left:calc(13.6*var(--mm)); bottom:calc(0.9*var(--mm));
  width:calc(5.4*var(--mm)); height:calc(5.4*var(--mm));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  /* Een lineair verloop: een conic-gradient laat Safari bij afdrukken
     helemaal weg, dan was het hologram op papier doorzichtig. */
  background:linear-gradient(125deg, var(--wn-holo-1) 0%, var(--wn-holo-2) 28%,
    var(--wn-holo-3) 50%, var(--wn-holo-4) 72%, var(--wn-holo-5) 100%);
  box-shadow:0 0 0 calc(0.25*var(--mm)) var(--wn-wit),
             0 calc(0.2*var(--mm)) 0 calc(0.33*var(--mm)) rgba(0,0,0,.1),
             0 calc(0.2*var(--mm)) 0 0 rgba(0,0,0,.22);
  color:var(--wn-holo-inkt);
}
.wn__holo-embleem{
  width:calc(3.7*var(--mm)); height:calc(1.74*var(--mm));
  margin-top:calc(-0.2*var(--mm));
  --wn-vlak:var(--wn-holo-4);
}

/* Het personeelsnummer, als veld op de pas. */
.card--crew .wn__id{
  display:flex; align-items:center; gap:calc(0.8*var(--mm));
  width:max-content; margin-bottom:calc(0.9*var(--mm));
  padding-right:calc(0.8*var(--mm));
  border:calc(0.2*var(--mm)) solid var(--wn-strook-lijn);
  border-radius:calc(0.6*var(--mm));
  font:400 calc(1.15*var(--mm))/1 var(--font-wn);
  letter-spacing:.12em; text-transform:uppercase;
  color:#fff; text-shadow:none; opacity:1;
}
.wn__id b{
  font-weight:400;
  padding:calc(0.38*var(--mm)) calc(0.7*var(--mm)) calc(0.38*var(--mm)) calc(0.82*var(--mm));
  background:var(--wn-strook-lijn); color:var(--wn-strook-2);
}

.wn__naam{
  flex:1 1 auto; min-width:0;
  font:600 calc(4*var(--mm))/1 var(--font-wn-naam);
  text-transform:uppercase; letter-spacing:.02em;
  text-shadow:0 calc(0.22*var(--mm)) 0 var(--wn-nacht-gloed);
  /* Afbreken alleen op spaties. Past één woord niet op een regel, dan
     pas midden in dat woord, en zonder afbreekstreepje. */
  overflow-wrap:break-word; hyphens:manual;
}
/* Neemt de naam drie regels of meer, dan zet T.fitCards deze klasse:
   een stap kleiner, zodat de strook niet volloopt. */
.wn__naam--klein{ font-size:calc(3.3*var(--mm)); }
.wn__rol{
  display:block; margin-top:calc(0.7*var(--mm));
  font:500 calc(2.05*var(--mm))/1.12 var(--font-wn-tekst);
  text-transform:none; letter-spacing:.01em;
  color:var(--wn-strook-lijn);
}

.wn__tags{
  flex:0 0 auto; display:flex; gap:calc(0.7*var(--mm));
  font-size:calc(4.3*var(--mm));
}
/* Meerdere tags schuiven een stukje over elkaar, als een stapeltje
   munten. De linker ligt bovenop; een schaduwrand houdt ze los van
   elkaar. */
.wn__tags:has(.tag + .tag){ gap:0; }
.wn__tags .tag + .tag{ margin-left:calc(-1.5*var(--mm)); }
.wn__tags .tag{
  position:relative;
  box-shadow:var(--tag-binnen),
             calc(0.35*var(--mm)) 0 0 calc(0.4*var(--mm)) rgba(0,0,0,.11),
             calc(0.35*var(--mm)) 0 0 0 rgba(0,0,0,.25);
}
.wn__tags .tag:nth-child(1){ z-index:4; }
.wn__tags .tag:nth-child(2){ z-index:3; }
.wn__tags .tag:nth-child(3){ z-index:2; }
.wn__tags .tag:nth-child(4){ z-index:1; }

/* ---------- Kosten en punten ---------- */
.wn__cost{
  position:absolute; z-index:3;
  left:calc(1.7*var(--mm)); top:calc(1.7*var(--mm));
}
.wn__voet{
  position:absolute; right:calc(1.2*var(--mm)); bottom:calc(1.2*var(--mm)); z-index:3;
}

/* ---------- De blokken ----------
   Op een halve kaart is minder ruimte, dus de blokken iets compacter.
   Past het dan nog niet, dan zet T.fitCards --wn-schaal lager: alles in
   de helft wordt samen kleiner, de regel en de strook blijven staan. */
.card--crew .wn__inhoud{ --wn-schaal:1; }
.card--crew .cb{
  padding:calc(0.9*var(--mm)*var(--wn-schaal)) calc(1*var(--mm))
          calc(1.1*var(--mm)*var(--wn-schaal));
  gap:calc(0.5*var(--mm)*var(--wn-schaal));
}
.card--crew .cb__row{
  font-size:calc(4.3*var(--mm)*var(--wn-schaal));
  gap:calc(1.3*var(--mm)*var(--wn-schaal));
}
.card--crew .cblocks{ gap:calc(0.9*var(--mm)*var(--wn-schaal)); }
.card--crew .cb__noot{ font-size:calc(1.95*var(--mm)*var(--wn-schaal)); }
.card--crew .cb__note{ font-size:calc(2.1*var(--mm)*var(--wn-schaal)); }

/* Op het wit (de CEO): witte blokken met een blauwe zweem in de rand. */
.wn__helft--ceo .cb{
  background:var(--wn-blok);
  box-shadow:inset 0 0 0 calc(0.22*var(--mm)) var(--wn-blok-rand);
}
.wn__helft--ceo .cb--action{
  border-color:var(--wn-inkt-zacht); box-shadow:none;
}

/* Op de nacht (de medewerker): donkere blokken met een dunne rand,
   lichte letters. */
.wn__helft--mw .cb{
  background:var(--wn-blok-nacht);
  box-shadow:inset 0 0 0 calc(0.22*var(--mm)) var(--wn-blok-nacht-rand);
}
.wn__helft--mw .cb--action{
  border-color:var(--wn-wit-zacht); box-shadow:none;
}
.wn__helft--mw .cb__noot, .wn__helft--mw .cb__note{ color:var(--wn-wit-zacht); opacity:1; }
.wn__helft--mw .of{ color:var(--wn-wit-tekst); }