/* ============================================================
   CHARON STYX — de afrekening
   ------------------------------------------------------------
   Wat Styx betaalt als je zijn opdracht haalt (T.afrekeningCard in
   js/templates.js). Het is het contract na afloop, maar omgekeerd: de
   opdracht is goud op nacht, de afrekening donker op goud en wit. Zo
   zie je op tafel meteen wat een opdracht is en wat een beloning. De
   lijst, de kop, de letters en de opbouw komen uit css/styx.css; hier
   staan de omgekeerde kleuren. De tegenprestatie staat groot in het
   midden, in een krans van stralen met een gloed erachter, en onderaan
   is het zegel verbroken. De rug blijft donker: een verzegelde brief.

   Net als op het contract is alles dicht van kleur: de gloed en de
   stralen zijn verlopen die in de ondergrond van de kaart eindigen,
   niet in doorzichtig. Zo printen ze in Safari net als op het scherm.
   ============================================================ */

/* ---------- De voorkant: goud en wit, met donkere letters ----------
   Bovenin iets lichter, zoals de lucht op het contract iets lichter is;
   waar de krans begint is het overal hetzelfde goud, zodat zijn gloed
   en stralen er zonder naad in overlopen. De zon van het contract
   (onderin) ligt hier achter de tegenprestatie, in de krans. */
.card--afrekening{
  --c2:var(--afr-rand);
  border-color:var(--afr-rand);
  background:linear-gradient(180deg, var(--afr-papier-licht) 0%, var(--afr-papier) 36%);
  color:var(--styx-nacht);
}
.card--afrekening::before, .card--afrekening-rug::before{ content:none; }

.card--afrekening .styx__lijn{ stroke:var(--styx-nacht); }
.card--afrekening .styx__lijn--fijn{ stroke:var(--styx-goud-diep); }
.card--afrekening .styx__hoekster{ fill:var(--styx-nacht); }
/* Het embleem iets kleiner dan op het contract: het midden heeft hier
   de ruimte nodig. De sleuf tussen rivier en sikkel heeft de kleur van
   het papier waar het embleem staat. */
.card--afrekening .styx__embleem{
  width:calc(7*var(--mm)); height:calc(7*var(--mm));
  color:var(--styx-nacht);
  --gat:color-mix(in srgb, var(--afr-papier-licht) 72%, var(--afr-papier));
}
.card--afrekening .styx__nr,
.card--afrekening .styx__artikel,
.card--afrekening .styx__clausule b{ color:var(--styx-goud-donker); }
.card--afrekening .styx__nr::before, .card--afrekening .styx__nr::after{ background:var(--styx-goud-diep); }
.card--afrekening .styx__naam,
.card--afrekening .styx__doel,
.card--afrekening .styx__tekst,
.card--afrekening .of{ color:var(--styx-nacht); }
.card--afrekening .styx__tekst strong{ color:var(--styx-goud-donker); }
.card--afrekening .styx__verhaal,
.card--afrekening .styx__clausule > span{ color:var(--afr-inkt-zacht); }

/* ---------- I. De tegenprestatie ----------
   Geen lijn met een kopje eronder, zoals op het contract, maar het kopje
   in de lijn, zoals het nummer bovenaan. Dat scheelt een regel, en die
   gaat naar het midden. */
.afr__beloning{ border-top:0; padding-top:0; }
/* Eén laag lager dan de rest van de kaart (css/styx.css zet alles op 1):
   de gloed van de krans reikt tot in het verhaal, en moet daar onder de
   letters liggen in plaats van erover. */
.card--afrekening > .afr__beloning{ z-index:0; }
.afr__beloning > .styx__artikel{
  display:flex; align-items:center; gap:calc(1.5*var(--mm));
  padding-left:0; white-space:nowrap;
}
.afr__beloning > .styx__artikel::before, .afr__beloning > .styx__artikel::after{
  content:""; flex:1 1 auto; height:calc(0.18*var(--mm));
  background:var(--styx-goud-diep);
}

.afr__schat{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:calc(22*var(--mm));
  margin-top:calc(0.9*var(--mm));
}
/* De krans ligt onder alles van de tegenprestatie, ook onder het kopje
   en de tekst, waar hij al bijna in de ondergrond is opgegaan. */
.afr__stralen{
  position:absolute; left:50%; top:50%; z-index:-1;
  width:calc(40*var(--mm)); height:calc(40*var(--mm));
  transform:translate(-50%, -50%);
}
/* Op de voorkant: een witte gloed met stralen van dieper goud, die in
   het papier overgaan. Op de rug: een gouden gloed met lichte stralen,
   die in de nacht overgaan. */
.afr-voor__gloed-0{ stop-color:var(--afr-licht); }
.afr-voor__gloed-1{ stop-color:var(--afr-licht-rand); }
.afr-voor__straal-0{ stop-color:var(--afr-schaduw); }
.afr-voor__straal-1{ stop-color:var(--afr-schaduw-rand); }
.afr-voor__rand{ stop-color:var(--afr-papier); }
.afr-rug__gloed-0{ stop-color:var(--afr-gloed); }
.afr-rug__gloed-1{ stop-color:var(--afr-gloed-rand); }
.afr-rug__straal-0{ stop-color:var(--afr-straal); }
.afr-rug__straal-1{ stop-color:var(--afr-straal-rand); }
.afr-rug__rand{ stop-color:var(--styx-nacht); }

/* Getal en fiches: dezelfde rij als op het contract, maar groter. Zo
   breed als de kaart, zodat T.fitCards ziet wanneer een lange rij (de
   bonussen van de Laadsteiger) er niet op past. */
.afr__doel{ position:relative; width:100%; height:100%; margin-top:0; }
.afr__doel .styx__getal{ font-size:calc(11*var(--mm)); }
.afr__doel .styx__fiches{ font-size:calc(8*var(--mm)); }

/* Een extra kamer van het hoofdkantoor, in het klein en in een gouden
   lijstje. De tekening zelf staat in millimeters (css/hoofdkantoor.css),
   dus hij wordt als geheel verkleind: een kamer van 98 mm hoog wordt
   21 mm, zo hoog als het midden min het lijstje. */
.afr__kamer{
  position:relative; display:flex;
  padding:calc(0.45*var(--mm));
  border-radius:calc(1*var(--mm));
  /* Een eigen stapel, zodat het lijstje eronder achter de kamer blijft. */
  isolation:isolate;
}
/* Het lijstje met zijn slagschaduw is een eigen laag onder de kamer. Een
   vervaagde box-shadow wordt in een PDF uit Chrome een donker vlak; een
   filter gaat goed, maar op het lijstje zelf zou hij de hele kamer tot
   plaatje maken (zie "Vervaagde schaduwen" in docs/ontwerpgids.md). */
.afr__kamer::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; background:var(--styx-goud-diep);
  filter:drop-shadow(0 calc(0.4*var(--mm)) calc(0.6*var(--mm)) rgba(0,0,0,.35));
}
.afr__kamer .hq-kamer{ zoom:.215; }

/* ---------- Het gebroken zegel ----------
   Twee keer het zegel van het contract, elk afgeknipt langs dezelfde
   barst. De linkerhelft zakt een tikje en draait linksom, de rechter
   draait rechtsom. */
.afr__breuk{
  position:relative;
  width:calc(11.5*var(--mm)); height:calc(11.5*var(--mm));
  margin-bottom:calc(-2.4*var(--mm));
}
.afr__breuk > .styx__zegel{ position:absolute; inset:0; width:100%; height:100%; margin:0; }
.afr__breuk > .styx__zegel:first-child{
  clip-path:polygon(0 0, 53% 0, 47% 16%, 55% 31%, 45% 48%, 54% 63%, 46% 80%, 51% 100%, 0 100%);
  transform:translate(calc(-0.55*var(--mm)), calc(0.3*var(--mm))) rotate(-8deg);
}
.afr__breuk > .styx__zegel:last-child{
  clip-path:polygon(53% 0, 100% 0, 100% 100%, 51% 100%, 46% 80%, 54% 63%, 45% 48%, 55% 31%, 47% 16%);
  transform:translate(calc(0.55*var(--mm)), 0) rotate(6deg);
}

/* ============================================================
   De rug: een verzegelde brief
   ------------------------------------------------------------
   De lijst en de nacht van het contract. De klep van de envelop loopt
   van de bovenhoeken naar het zegel, dat hier nog heel is; achter het
   zegel schemeren de stralen al. Zo ligt de stapel als een stapel
   brieven op tafel, en is hij nooit te verwarren met de opdrachten (die
   hebben zijn poster als rug).
   ============================================================ */
.card--afrekening-rug{ align-items:center; background:var(--styx-nacht); }
/* De klep ligt boven de gloed en onder het zegel: zijn lijnen houden op
   aan de rand van het zegel (T.afrekeningRug rekent dat uit). */
.card--afrekening-rug > .afr-rug__klep{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  fill:none; stroke:var(--styx-goud-diep); stroke-width:.22; stroke-linecap:round;
}
.card--afrekening-rug > .styx__merk{ margin-top:calc(1.4*var(--mm)); }
/* Het zegel staat precies in het midden van de kaart. */
.card--afrekening-rug > .afr-rug__zegel{
  position:absolute; left:50%; top:50%; z-index:1;
  width:calc(22*var(--mm)); height:calc(22*var(--mm));
  transform:translate(-50%, -50%);
}
.afr-rug__zegel .afr__stralen{ width:calc(50*var(--mm)); height:calc(50*var(--mm)); z-index:0; }
.afr-rug__zegel .styx__zegel{ position:relative; z-index:3; width:100%; height:100%; margin:0; }
.card--afrekening-rug > .afr-rug__titel{ margin-top:auto; }
.afr-rug__titel{
  font:700 calc(4.6*var(--mm))/1 var(--font-styx);
  letter-spacing:.3em; padding-left:.3em; text-transform:uppercase;
  color:var(--styx-goud-licht);
}
.afr-rug__onder{
  margin:calc(2.2*var(--mm)) 0 calc(6*var(--mm));
  font:italic 500 calc(3*var(--mm))/1.1 var(--font-styx-tekst);
  color:var(--styx-ivoor-zacht);
}