/* ============================================================
   MIJLPALEN EN ONDERSCHEIDINGEN — losse tegels
   ------------------------------------------------------------
   Elk een tegeltje van 43 x 25,5 mm met een grijze metalen
   ondergrond en afgeronde hoeken, zoals de officiële tegels. Een
   mijlpaal heeft bovenin het getalvak, het kader en het TM-vak en
   eronder een gekleurde balk; een onderscheiding heeft sier om het
   kader en eronder een gouden banier met de naam in schuinschrift.
   De posities in millimeters staan in js/templates.js en komen als
   inline stijl op de onderdelen; hier staat wat voor elke tegel
   gelijk is.

   Stapelvolgorde, van onder naar boven: getalvakken, balkjes en
   vleugels, de balk of banier, de vulling met de fiches, het goud van
   het kader, het bolletje. Het goud ligt dus over de rand van de
   vulling heen, en het kader over het einde van de vakken.

   Alles is dicht (geen doorzichtig verloop), zodat het print zoals
   het op het scherm staat. De ondergrond is een plaatje, gemaakt met
   scripts/metaal.py.
   ============================================================ */

/* Het schuinschrift van de banier: een Goudy, zoals op de echte tegels. */
@import url("https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@1&display=swap");

.ma{
  position:relative; flex:0 0 auto; box-sizing:border-box;
  width:var(--ma-w); height:var(--ma-h);
  border-radius:var(--ma-r);
  background:#c8c9cc url("../assets/mijlpalen/metaal.png") center/100% 100% no-repeat;
  /* de snijrand, met een lichte rand erbinnen zoals bij gestanst karton */
  box-shadow:0 0 0 calc(0.22*var(--mm)) var(--ma-rand),
             inset 0 0 0 calc(0.3*var(--mm)) #e3e4e7;
  color:var(--ma-inkt);
  overflow:hidden;
}
.ma > *{ position:absolute; }

/* Een oude vouwtegel die nog niet is omgezet: twee tegels naast elkaar. */
.ma-paar{ display:flex; gap:calc(2*var(--mm)); flex:0 0 auto; }

/* ---------- Getalvak en TM-vak (alleen de mijlpaal) ---------- */
.ma__vak{ z-index:1; display:block; }
.ma__vak--r{ transform:scaleX(-1); }
.ma__getal, .ma__tm{
  z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; line-height:1;
  white-space:nowrap; overflow:visible;
}
.ma__getal{ font-size:var(--ma-getal); padding-top:calc(0.2*var(--mm)); }
.ma__tm{ font-size:calc(0.7 * var(--ma-getal)); padding-top:calc(0.15*var(--mm)); }
/* Een woord in plaats van een getal (BETAAL): kleiner, en zo nodig
   smaller gezet (T.fitMA). */
.ma__getal > span, .ma__tm > span{ display:inline-block; transform-origin:50% 50%; }
.ma__getal > .lang, .ma__tm > .lang{ font-size:.62em; letter-spacing:.02em; }

/* ---------- Sier (alleen de onderscheiding) ---------- */
.ma__vleugels{
  z-index:1; display:block;
  left:50%; transform:translateX(-50%);
  top:calc((8.6 - 1.1 - 3.25) * var(--mm));
  width:calc(34*var(--mm)); height:calc(6.5*var(--mm));
}
.ma__balkje{ z-index:1; }

/* ---------- De balk van een mijlpaal ----------
   Gekleurd, met een donkere rand, een lichte rand erbinnen en een
   glans aan de bovenkant. De schaduw eronder is getrapt in plaats van
   vervaagd (zie "Vervaagde schaduwen" in docs/ontwerpgids.md), net als bij de banier. */
.ma__balk{
  z-index:2; box-sizing:border-box;
  border:calc(0.25*var(--mm)) solid #2b2a27;
  border-radius:calc(0.5*var(--mm));
  background:linear-gradient(180deg, var(--b1) 0%, var(--b1) 22%, var(--b2) 100%);
  box-shadow:inset 0 0 0 calc(0.32*var(--mm)) rgba(255,255,255,.55),
             0 calc(0.25*var(--mm)) 0 calc(0.23*var(--mm)) rgba(0,0,0,.09),
             0 calc(0.25*var(--mm)) 0 0 rgba(0,0,0,.19);
}
.ma__balk--grijs     { --b1:var(--ma-balk-grijs-1);      --b2:var(--ma-balk-grijs-2); }
.ma__balk--wit       { --b1:var(--ma-balk-wit-1);        --b2:var(--ma-balk-wit-2); }
.ma__balk--blauw     { --b1:var(--ma-balk-blauw-1);      --b2:var(--ma-balk-blauw-2); }
.ma__balk--lichtblauw{ --b1:var(--ma-balk-lichtblauw-1); --b2:var(--ma-balk-lichtblauw-2); }
.ma__balk--blauwgrijs{ --b1:var(--ma-balk-blauwgrijs-1); --b2:var(--ma-balk-blauwgrijs-2); }
.ma__balk--groen     { --b1:var(--ma-balk-groen-1);      --b2:var(--ma-balk-groen-2); }
.ma__balk--bruin     { --b1:var(--ma-balk-bruin-1);      --b2:var(--ma-balk-bruin-2); }
.ma__balk--zand      { --b1:var(--ma-balk-zand-1);       --b2:var(--ma-balk-zand-2); }
.ma__balk--geel      { --b1:var(--ma-balk-geel-1);       --b2:var(--ma-balk-geel-2); }
.ma__balk--amber     { --b1:var(--ma-balk-amber-1);      --b2:var(--ma-balk-amber-2); }
.ma__balk--oranje    { --b1:var(--ma-balk-oranje-1);     --b2:var(--ma-balk-oranje-2); }
.ma__balk--rood      { --b1:var(--ma-balk-rood-1);       --b2:var(--ma-balk-rood-2); }
/* Twee balken lopen van links naar rechts: koud naar warm, en het
   groen-naar-oranje van Duizendpoot. */
.ma__balk--temperatuur{
  background:linear-gradient(90deg, var(--ma-balk-temp-koud) 0%, #a9bfd8 42%,
                             #f0a27e 58%, var(--ma-balk-temp-warm) 100%);
}
.ma__balk--divers{
  background:linear-gradient(90deg, var(--ma-balk-divers-1) 0%, #e2b832 50%,
                             var(--ma-balk-divers-2) 100%);
}
.ma__balk .ma__naam{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--ma-naam); letter-spacing:.11em; text-transform:uppercase;
  padding-top:calc(0.25*var(--mm));
}
.ma__balk .ma__naam > span{ margin-right:-.11em; }

/* ---------- De banier van een onderscheiding ----------
   Een gouden pil met een donkere rand en een lichte binnenrand; de
   glans loopt er schuin overheen, zoals op de echte tegels. */
.ma__banier{
  z-index:2; box-sizing:border-box;
  border:calc(0.25*var(--mm)) solid var(--ma-goud-rand);
  border-radius:calc(3.75*var(--mm));
  background:linear-gradient(100deg, var(--ma-goud-3) 0%, var(--ma-goud-1) 16%,
             var(--ma-goud-2) 38%, var(--ma-goud-3) 60%, var(--ma-goud-1) 84%, var(--ma-goud-2) 100%);
  box-shadow:inset 0 0 0 calc(0.35*var(--mm)) #fff0c8,
             0 calc(0.25*var(--mm)) 0 calc(0.23*var(--mm)) rgba(0,0,0,.09),
             0 calc(0.25*var(--mm)) 0 0 rgba(0,0,0,.19);
}
.ma__banier .ma__naam{
  font-family:"Sorts Mill Goudy","Goudy Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-style:italic; font-weight:400;
  font-size:var(--ma-sier); letter-spacing:.07em;
  color:var(--ma-sier-inkt);
  inset:0 calc(3*var(--mm));
  padding-top:calc(0.35*var(--mm));
}
.ma__banier .ma__naam > span{ margin-right:-.07em; }

.ma__naam{
  position:absolute; inset:0 calc(1.8*var(--mm));
  display:flex; align-items:center; justify-content:center;
  line-height:1; white-space:nowrap;
}
/* Te lange namen worden smaller gezet (zie T.fitMA in js/app.js), niet
   kleiner: zo blijven alle namen even hoog. */
.ma__naam > span{ display:inline-block; transform-origin:50% 50%; }

/* ---------- Het kader ---------- */
.ma__kader{ z-index:3; }
.ma__stuk{ position:absolute; }
.ma__goud{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Rechthoekige kaders: één plaatje, opgerekt met border-image. De
   hoeken blijven zoals ze zijn, alleen de stukken ertussen rekken mee.
   De dikte van de rand schaalt mee met het kader (inline stijl). */
.ma__rand{
  position:absolute; inset:0;
  border:calc(1.25*var(--mm)) solid transparent;
  border-image:url("../assets/mijlpalen/kader-rechthoek.png") 18 stretch;
}
.ma__plek{ position:absolute; overflow:hidden; }
.vul--licht{ background:var(--ma-vul-licht); }
.vul--wit{ background:#fff; }
.vul--donker{ background:var(--ma-vul-donker); }
.vul--mars{ background:var(--ma-vul-mars); }
.vul--productie{
  background:#8a5a2b url("../assets/upstream/images/misc/production.png") center/cover;
}
/* De fiches: midden in het gat, zo groot als past (T.fitMA). */
.ma__inhoud{
  /* max-content: anders mag een absoluut geplaatst blok maar de helft
     van het gat breed zijn (vanaf left:50%) en krimpen de plaatjes mee. */
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max-content;
  display:inline-grid; grid-auto-flow:row; gap:.12em;
  justify-items:center; align-items:center;
  font-size:10px; line-height:1; white-space:nowrap;
}
.ma__inhoud:empty{ display:none; }
/* Plaatjes op hun echte verhouding: een tegel is een zeshoek en geen
   vierkant, dus zo vult hij een zeshoekig gat helemaal. */
.ma__plek .res--png > img{ width:auto; height:1.45em; }
.ma__plek .res--png.res--card > img{ width:auto; height:calc(var(--kaartfiche) * 1em); }
/* Geen slagschaduw in een kader: het goud geeft al diepte. */
.ma__plek .vorm{ filter:none; }

/* ---------- Bolletje rechtsboven: keuzeregels ----------
   Uit Customizing Mars; de officiële tegels hebben het niet, maar een
   eigen tegel mag het nog steeds hebben. */
.ma__merk{
  z-index:4;
  right:calc(1.3*var(--mm)); top:calc(1.2*var(--mm));
  width:calc(3.6*var(--mm)); height:calc(3.6*var(--mm)); box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:calc(0.18*var(--mm)) solid var(--ma-inkt);
  font-family:var(--font-display); font-weight:700;
  font-size:calc(1.95*var(--mm)); line-height:1; padding-top:calc(0.15*var(--mm));
  overflow:hidden;
}
.ma__merk--blauw { background:var(--ma-merk-blauw);  --diep:var(--ma-merk-blauw-diep); }
.ma__merk--groen { background:var(--ma-merk-groen);  --diep:var(--ma-merk-groen-diep); }
.ma__merk--roze  { background:var(--ma-merk-roze);   --diep:var(--ma-merk-roze-diep); }
.ma__merk--paars { background:var(--ma-merk-paars);  --diep:var(--ma-merk-paars-diep); }
.ma__merk--geel  { background:var(--ma-merk-geel);   --diep:var(--ma-merk-geel-diep); }
.ma__merk--oranje{ background:var(--ma-merk-oranje); --diep:var(--ma-merk-oranje-diep); }
/* Alleen een getal, zonder bolletje */
.ma__merk--wit{ border-color:transparent; background:none; }
/* Een gestippeld rondje */
.ma__merk--stippel{ border:calc(0.2*var(--mm)) dotted var(--ma-inkt); background:#fff; }
/* Verbodsteken: dikke ring en een schuine streep in de diepe tint */
.ma__merk--verbod{ border:calc(0.5*var(--mm)) solid var(--diep); }
.ma__merk--verbod::after{
  content:""; position:absolute; left:50%; top:-10%; bottom:-10%;
  width:calc(0.5*var(--mm)); margin-left:calc(-0.25*var(--mm));
  background:var(--diep); transform:rotate(45deg);
}