/* ============================================================
   KAARTSTIJL TM_CARDMAKER — de projectkaart zoals tm_cardmaker hem
   tekent. Te kiezen op het printvel; de kaart zelf maakt
   js/cardmaker.js.

   Alle maten zijn pixels uit de sjablonen van tm_cardmaker
   (1703 x 2319), omgerekend met --cmk: de kaart van 63,5 mm is
   1546 van die pixels breed. --x0 en --y0 zijn de linkerboven-
   hoek van de kaart in het sjabloon, dus een plek op de kaart is
   calc(var(--cmk) * (x - var(--x0))). Zo schaalt alles mee met
   --mm, en dus met de printerkalibratie.

   Welke variant van het sjabloon (groot of klein beeld) bepaalt
   js/cardmaker.js; die zet de maten daarvan als --beeld-y,
   --onder-y enzovoort op de kaart. De plaatjes en letters staan in
   de submodule assets/cardmaker.
   ============================================================ */

@font-face{ font-family:'Pagella'; font-weight:400; font-style:normal;
  src:url('../assets/cardmaker/fonts/texgyrepagella-regular-webfont.ttf') format('truetype'); }
@font-face{ font-family:'Pagella'; font-weight:400; font-style:italic;
  src:url('../assets/cardmaker/fonts/texgyrepagella-italic-webfont.ttf') format('truetype'); }
@font-face{ font-family:'Pagella'; font-weight:700; font-style:normal;
  src:url('../assets/cardmaker/fonts/texgyrepagella-bold-webfont.ttf') format('truetype'); }
@font-face{ font-family:'Pagella'; font-weight:700; font-style:italic;
  src:url('../assets/cardmaker/fonts/texgyrepagella-bolditalic-webfont.ttf') format('truetype'); }

.card.cmk{
  --cmk: calc(var(--mm) * 0.04107374);
  --x0: 82.5;
  --y0: 94.8;
  --rechts: 1628.5;                    /* rechterkant van de kaart (x0 + 1546) */
  --bodem: 2237.3;                     /* onderkant van de kaart (y0 + 2142,5) */
  position:relative; display:block; box-sizing:border-box;
  width:var(--card-w); height:var(--card-h);
  border:0; border-radius:calc(var(--cmk) * 90);
  box-shadow:none; overflow:hidden;
  background:var(--cmk-papier); color:var(--cmk-inkt);
  font-family:'Pagella','Palatino Linotype',Palatino,'Book Antiqua',serif;
  font-size:calc(var(--cmk) * 47);
  line-height:1.18;
  text-align:left;
}
.card.cmk::after{ content:none; }

/* ---------- Het sjabloon en het beeld ----------
   Het sjabloon heeft een doorzichtig venster; het beeld ligt eronder.
   Het kader knipt alles weg wat buiten de gekleurde rand valt, ook
   het snijlijntje dat in de sjablonen van tm_cardmaker zit (en niet
   in elk sjabloon op dezelfde plek). Linksboven geen ronde hoek: daar
   steekt het kostenvakje uit.                                        */
.cmk__kader{
  position:absolute; overflow:hidden;
  left:calc(var(--cmk) * (117 - var(--x0)));
  top:calc(var(--cmk) * (129 - var(--y0)));
  width:calc(var(--cmk) * 1477);
  height:calc(var(--cmk) * 2074);
  border-radius:0 calc(var(--cmk) * 125) calc(var(--cmk) * 125) calc(var(--cmk) * 125);
}
.cmk__sjabloon{
  position:absolute; display:block; max-width:none;
  left:calc(var(--cmk) * -117); top:calc(var(--cmk) * -129);
  width:calc(var(--cmk) * 1703); height:calc(var(--cmk) * 2319);
  pointer-events:none;
}
/* Opzij 10 ruimer dan het venster (158 tot 1548), net als boven en
   onder (js/cardmaker.js): anders schemert de witte kaart erdoor. */
.cmk__beeld{
  position:absolute; overflow:hidden;
  left:calc(var(--cmk) * (148 - 117)); width:calc(var(--cmk) * 1410);
  top:calc(var(--cmk) * (var(--beeld-y) - 129));
  height:calc(var(--cmk) * var(--beeld-h));
}
.cmk__beeld > img{ display:block; width:100%; height:100%; object-fit:cover; }
.cmk__watermerk{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--cmk-papier); opacity:.3; font-size:calc(var(--cmk) * 420);
}

/* ---------- Kop: kosten, vereiste, tags, naam ---------- */
.cmk__kosten{
  position:absolute; display:flex; align-items:center; justify-content:center;
  left:calc(var(--cmk) * (141 - var(--x0))); top:calc(var(--cmk) * (196 - var(--y0)));
  width:calc(var(--cmk) * 200); height:calc(var(--cmk) * 120);
  font:400 calc(var(--cmk) * 136)/1 'Prototype',sans-serif; color:var(--cmk-inkt);
}

/* Geen vereiste: het smalle gele strookje naast de kosten, zoals in
   elk sjabloon van tm_cardmaker. */
.cmk__geeneis{
  position:absolute; display:block;
  left:calc(var(--cmk) * (369 - var(--x0))); top:calc(var(--cmk) * (200 - var(--y0)));
  width:calc(var(--cmk) * 45); height:calc(var(--cmk) * 122);
}

/* Het vereiste-vakje groeit mee met wat erin staat. Het plaatje van
   tm_cardmaker wordt met border-image uitgerekt: de streepjes links en
   de randen blijven even dik, alleen het midden wordt breder. Wat erin
   staat mag er boven en onder uitsteken, dus er wordt niets afgeknipt. */
.cmk__eis{
  position:absolute; box-sizing:border-box;
  left:calc(var(--cmk) * (371 - var(--x0))); top:calc(var(--cmk) * (190 - var(--y0)));
  height:calc(var(--cmk) * 124); min-width:calc(var(--cmk) * 268);
  max-width:calc(var(--cmk) * var(--eis-max, 1100));
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--cmk) * 12 * var(--f,1));
  padding:0 calc(var(--cmk) * 16) 0 calc(var(--cmk) * 26);
  border-style:solid;
  border-width:calc(var(--cmk) * 12) calc(var(--cmk) * 12) calc(var(--cmk) * 12) calc(var(--cmk) * 30);
  border-image:url('../assets/cardmaker/requisites/min_small.png') 25 25 25 62 fill stretch;
  font:400 calc(var(--cmk) * 88 * var(--f,1))/1 'Prototype',sans-serif; color:var(--cmk-inkt);
  white-space:nowrap;
}
.cmk__eis--max{ border-image-source:url('../assets/cardmaker/requisites/max_big.png'); }
.cmk__max{ font-size:.62em; letter-spacing:.04em; text-transform:uppercase; }
.cmk__eistekst{ display:inline-flex; align-items:center; gap:.12em; }
/* Fiches en tags zijn 140 hoog, iets hoger dan het vakje (124): ze
   steken er boven en onder een stukje uit, zoals op de officiële
   kaarten. Ook eigen tags en het bolletje voor verschillende tags; het
   hart en de andere vormen worden een vijfde groter.
   Kaartfiches niet: die staan rechtop en zijn al hoog genoeg, dus die
   houden hun maat (1,15em is de 101 van voorheen; .89em is 78/88). In
   een productiekader blijft het fiche ook 101, zodat het kader als
   geheel net zo ver uitsteekt als de rest. */
.cmk__eis .res--png, .cmk__eis .res--png > img{ height:1.6em; }
.cmk__eis .res--png > img{ width:1.6em; }
.cmk__eis .tag, .cmk__eis .verschil{ width:1.6em; height:1.6em; }
.cmk__eis .res:not(.res--png, .res--vorm-verschil){ font-size:1.06em; }
.cmk__eis .prod .res--png, .cmk__eis .prod .res--png > img{ height:1.15em; }
.cmk__eis .prod .res--png > img, .cmk__eis .res--card > img{ width:1.15em; height:1.15em; }
.cmk__eis .res.res--vorm-wnkaart, .cmk__eis .res.res--vorm-pkaart{ font-size:.89em; }

/* Van links naar rechts in de volgorde van de kaart, maar de eventtag
   zet js/cardmaker.js altijd achteraan: helemaal rechts. */
.cmk__tags{
  position:absolute; display:flex; gap:calc(var(--cmk) * 9);
  right:calc(var(--cmk) * (var(--rechts) - 1544)); top:calc(var(--cmk) * (138 - var(--y0)));
}
.cmk__tag{ display:block; width:calc(var(--cmk) * 227); height:calc(var(--cmk) * 227); border-radius:50%; }
.cmk__tag--eigen{ display:flex; align-items:center; justify-content:center; font-size:calc(var(--cmk) * 130); }

/* Niet tot de rand van de titelband: die loopt aan de uiteinden rond. */
.cmk__naam{
  position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center;
  left:calc(var(--cmk) * (303 - var(--x0))); width:calc(var(--cmk) * 1100);
  top:calc(var(--cmk) * (345 - var(--y0))); height:calc(var(--cmk) * 112);
  font:400 calc(var(--cmk) * 95 * var(--f,1))/1 'Prototype',sans-serif; color:var(--cmk-inkt);
  text-transform:uppercase; text-align:center; white-space:nowrap;
}
.cmk__naam > span{ display:block; }
.cmk__naam small{ display:block; font-size:.42em; letter-spacing:.08em; margin-top:.15em; }
/* Prototype staat hoog in zijn regel; op twee regels iets omlaag. */
.cmk__naam--twee{ white-space:normal; line-height:.92; padding-top:calc(var(--cmk) * 8); box-sizing:border-box; }

/* ---------- De vlakken met wat de kaart doet ---------- */
.cmk__boven, .cmk__onder{
  position:absolute;
  left:calc(var(--cmk) * (180 - var(--x0))); width:calc(var(--cmk) * 1346);
}
.cmk__boven{
  top:calc(var(--cmk) * (var(--boven-y) - var(--y0)));
  height:calc(var(--cmk) * var(--boven-h));
  display:flex; flex-direction:column; justify-content:center;
}
.cmk__onder{
  top:calc(var(--cmk) * (var(--onder-y) - var(--y0)));
  height:calc(var(--cmk) * var(--onder-h));
  display:block;
}
/* Gewoon blok, geen flex: anders loopt de tekst niet om de schijf. */
.cmk__inhoud{ display:block; margin-top:calc(var(--cmk) * var(--onder-pad, 0)); }

/* Uitsparingen: tekst loopt om het kaartnummervakje en om de ronde
   puntenschijf heen, zoals op de officiële kaarten. Alleen gewone
   regels doen dat, dus alles hieronder is display:block. */
.cmk__uit--nr{ float:right; width:calc(var(--cmk) * 112); height:calc(var(--cmk) * var(--nr-h)); }
.cmk__uit--vp{
  float:right; clear:right;
  width:calc(var(--cmk) * 390);
  height:calc(var(--cmk) * (var(--onder-h) - var(--nr-h)));
  shape-outside:circle(calc(var(--cmk) * 213) at calc(var(--cmk) * 210.5) calc(var(--cmk) * var(--vp-cy)));
}

.cmk .cblocks, .cmk .cb{
  display:block; margin:0; padding:0; gap:0;
  background:none; border:0; border-radius:0; box-shadow:none;
}
.cmk .cb + .cb{ margin-top:calc(var(--cmk) * 26 * var(--schaal,1)); }
.cmk .cb__lbl{
  display:block; margin-bottom:calc(var(--cmk) * 6);
  font:400 calc(var(--cmk) * 40 * var(--schaal,1))/1 'Prototype',sans-serif;
  letter-spacing:.12em; text-align:center; opacity:.65;
}
.cmk .cb__row{
  display:block; margin:0; gap:0; text-align:center;
  font-size:calc(var(--cmk) * 118 * var(--schaal,1) * var(--rij,1));
  line-height:1.5;
}
.cmk .cb__row > *{ vertical-align:middle; margin:0 .13em; }
/* Staande kaartfiches zijn hoger dan het vakje waarin ze staan; zonder
   dit vallen ze over de uitleg eronder. */
.cmk .res--vorm-wnkaart, .cmk .res--card, .cmk .res--vorm-pkaart{ height:auto; }
.cmk__spatie{ display:inline-block; width:.3em; }

/* Uitleg: rechtop, tussen haakjes, in de Palatino-achtige letter van
   tm_cardmaker. Onderaan links uitgelijnd, in het effectvlak gecentreerd. */
.cmk .cb__noot, .cmk .cb__note, .cmk .cmk__vrij{
  display:block; margin:calc(var(--cmk) * 8) 0 0; padding:0;
  font:400 calc(var(--cmk) * 47 * var(--schaal,1))/1.18 'Pagella','Palatino Linotype',Palatino,serif;
  font-style:normal; color:var(--cmk-inkt); opacity:1; text-align:left;
}
.cmk__boven .cb__noot, .cmk__boven .cb__note, .cmk__boven .cmk__vrij{ text-align:center; }
.cmk .cb__noot::after, .cmk .cb__note::after{ padding-right:0; }
.cmk .cblocks + .cblocks{ margin-top:calc(var(--cmk) * 26 * var(--schaal,1)); }

/* Getallen en woordjes tussen de fiches in de letter van de kaart.
   Een woordje tussen de fiches ("PER", "ONTVANG JE") staat op vaste
   leesbare grootte en breekt zelf af: het krimpt niet mee als de
   iconen in de rij kleiner moeten. */
.cmk .res__n, .cmk .tekst, .cmk .of{ font-family:'Prototype',sans-serif; font-weight:400; }
.cmk .of{ font-size:.5em; margin:0 .25em; }
.cmk .cb__row .tekst{
  font-size:calc(var(--cmk) * 50 * var(--schaal,1)); line-height:1.05;
  max-width:calc(var(--cmk) * 470); letter-spacing:.02em;
  white-space:pre-wrap;
}

/* Productiekader zoals tm_cardmaker het tekent: de bruine textuur in
   tegeltjes, een grijze verlooprand en daarbinnen een bruine. Drie
   klassen diep, want html[data-skin="officieel"] .prod in
   components.css weegt anders zwaarder. */
.card.cmk .prod{
  border-radius:0;
  border:calc(var(--cmk) * 7) solid transparent;
  padding:.16em .24em;
  gap:.16em;
  background:
    url('../assets/cardmaker/productionboxes/nxn.png') 0 0/calc(var(--cmk) * 41) calc(var(--cmk) * 41) repeat padding-box,
    linear-gradient(var(--cmk-prod-rand-boven), var(--cmk-prod-rand-onder)) border-box;
  box-shadow:inset 0 0 0 calc(var(--cmk) * 7) var(--cmk-prod-binnen);
}

.cmk__pijl{ display:inline-block; height:.8em; width:auto; }
.cmk__dubbel{ display:inline-block; height:.8em; width:auto; }

/* ---------- Onderrand: set, sfeerzin, nummer, id, punten ----------
   Linksonder de set (de operatie, zoals OP-001), klein en grijs zodat
   hij in het metaal valt; de
   sfeerzin staat gecentreerd in wat er rechts daarvan overblijft, tot
   aan de puntenschijf. js/cardmaker.js houdt de inhoud erboven. */
.cmk__voet{
  position:absolute; display:flex; align-items:flex-end;
  gap:calc(var(--cmk) * 40);
  left:calc(var(--cmk) * (190 - var(--x0)));
  right:calc(var(--cmk) * (var(--rechts) - 1516));
  bottom:calc(var(--cmk) * (var(--bodem) - 2128));
}
.cmk--vp .cmk__voet{ right:calc(var(--cmk) * (var(--rechts) - 1130)); }
.cmk__set{
  flex:none; margin-left:calc(var(--cmk) * 10);   /* wat verder van de ronde hoek */
  font:400 calc(var(--cmk) * 44)/1 'Prototype',sans-serif;
  letter-spacing:.08em; color:var(--cmk-set-inkt); white-space:nowrap;
}
.cmk__sfeer{
  flex:1 1 auto;
  font:italic 400 calc(var(--cmk) * 44 * var(--schaal,1))/1.16 'Pagella','Palatino Linotype',Palatino,serif;
  text-align:center; color:var(--cmk-inkt);
}

/* De id in het lipje tussen het beeld en het onderste vlak (bij blauw
   een bolletje), waar tm_cardmaker "FAN MADE" zet. */
.cmk__id{
  position:absolute;
  left:calc(var(--cmk) * (var(--lip-x) - var(--x0)));
  top:calc(var(--cmk) * (var(--lip-y) - var(--y0)));
  transform:translate(-50%, -50%);
  font:400 calc(var(--cmk) * 50)/1 'Prototype',sans-serif;
  letter-spacing:.06em; color:var(--cmk-id-inkt); white-space:nowrap;
}

/* De puntenschijf: de lege schijf van tm_cardmaker met het getal of
   "1/" en een fiche erop. Het plaatje heeft lucht rondom de schijf;
   die valt hier buiten het vak. */
.cmk__vp{
  position:absolute; display:flex; align-items:center; justify-content:center;
  left:calc(var(--cmk) * (1148 - var(--x0))); top:calc(var(--cmk) * (1752 - var(--y0)));
  width:calc(var(--cmk) * 397); height:calc(var(--cmk) * 397);
  color:var(--cmk-inkt);
}
.cmk__vp > img{
  position:absolute; display:block; max-width:none;
  left:calc(var(--cmk) * -31.3); top:calc(var(--cmk) * -31.3);
  width:calc(var(--cmk) * 460.7); height:calc(var(--cmk) * 460.7);
}
.cmk__vp > span{ position:relative; display:inline-flex; align-items:center; white-space:nowrap; }
.cmk__vpgetal{ font:400 calc(var(--cmk) * 250 * var(--f,1))/1 'Prototype',sans-serif; padding-top:.04em; }
.cmk__vpper, .cmk__vptekst{ font:400 calc(var(--cmk) * 120 * var(--f,1))/1 'Prototype',sans-serif; gap:.06em; }
.cmk__vpn{ font-size:1.15em; }

/* De onzichtbare kopie waarin js/cardmaker.js meet (op vaste schaal). */
.cmk-meetbak{
  position:absolute; left:-40000px; top:0;
  visibility:hidden; pointer-events:none;
}