/* ⛔ HET TEAL EN HET DONKERBLAUW ZIJN WEG — J180, 1 september 2026.
   Njusja, met een schermafdruk van /scan: *"nog steeds oude kleuren en slechte layout dit."*

   Drie keer `#20c9bd` en twee keer `#101828`: mintgroen als accent en marineblauw als knop. Dat is
   het palet van vóór de herbouw, en het staat op de pagina waar iemand zijn e-mailadres achterlaat
   — de duurste plek om er oud uit te zien.

   Het palet is sinds 27 augustus: crème is het vlak, **amber #C6892B is het accent in tekst**, en
   **violet #6B3FD4 is voor knoppen**. Dat is de werkverdeling die Njusja zelf vastlegde, en die
   staat nu ook hier. `#101828` (marineblauw) wordt violet, `#20c9bd` (mint) wordt amber.

   ⚠ De `!important`-vlaggen blijven staan. Ze zijn hier niet luiheid maar noodzaak: dit bestand
   ligt bovenop de gecompileerde Tailwind-subset in ceeme.css, en die wint anders op specificiteit.
   Zie de kop van dit bestand. */

/* ── De variabelen die deze pagina GEBRUIKT maar nergens ZETTE — S7, 6 september 2026 ──────────
   ceeme-scanvlak.js schrijft inline `var(--muted)`, `var(--ink)`, `var(--line)`, `var(--dim)` en
   `var(--paper)`; de markup zelf `var(--dim)` en `var(--line)`. Geen enkele stylesheet die /scan
   laadt, definieert die namen (ceeme-omhulsel.css gebruikt bewust `--ce-…`, ceeme-premium.css
   `--ceeme-…`). Een ongedefinieerde var() is in CSS geen fout maar een stille terugval naar
   "inherit" of "initial": de grijze tekst werd zwart, de lege meterboog werd onzichtbaar.

   Alleen hier gezet en niet in het omhulsel, want /scan is de enige pagina die ze gebruikt. Het
   zijn dezelfde tonen als `--ce-…`, onder de naam die het script al jaren draagt. */
:root {
  --ink: #17170F;
  --muted: #83837A;
  --dim: #83837A;
  --line: #E2E2D8;
  --paper: #F6F2E9;
  --amber: #C6892B;
  --violet: #6B3FD4;
}

/* ⛔ HIER STOND `color: #6B3FD4 !important` OP DE BODY — 6 september 2026.
   Daardoor stond ÉLKE letter op /scan in violet: de labels, de veldnamen, de voetnoot onder de
   knop. Njusja, met een schermafdruk: *"laypout nog steeds niet goed"*.

   De oorzaak is een vertaalfout van mij op 1 september. Toen verving ik `#101828` (marineblauw)
   door violet omdat violet de knopkleur is. Maar deze regel is geen knop — het is de tekstkleur
   van de hele pagina. De werkverdeling die Njusja vastlegde luidt: **amber is het accent in tekst,
   violet is voor KNOPPEN**. Een violette body maakt van de knopkleur de standaardkleur, en dan
   valt de knop niet meer op — precies het omgekeerde van wat de kleur moet doen.

   Nu staat hier de inkt van de rest van de site. */
body {
  padding: 0 !important;
  background: #fff !important;
  color: #221E18 !important;
}

.wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ⛔ `:not(.hidden)` IS HIER GEEN OPSMUK MAAR DE HELE REPARATIE — 6 september 2026.
   Njusja: *"scan gestart gebeurt dus niks, het blijft gewoon staan zoals het is... geen
   resultatenscherm"*. Drie klachten, één oorzaak, en hij stond in deze vijf regels.

   `ceeme-scanvlak.js` verbergt en toont de vier schermen met de klasse `hidden`:

       .hidden         { display: none }   specificiteit (0,1,0)
       #input.no-print { display: grid }   specificiteit (1,1,0)  ← wint altijd

   Een ID-selector wint van een klasse. Het formulier KON dus nooit verborgen worden. Het bleef
   staan, 5918 pixels hoog, en het laadscherm en het resultaat verschenen eronder — buiten beeld.
   Vandaar dat er "niets gebeurde": alles wérkte, je zag het alleen nooit.

   ⚠ DE LES, en die is breder dan deze pagina: wie een ID-selector gebruikt voor LAYOUT, moet de
   toestand meenemen waarin die layout niet mag gelden. Anders sloopt hij stil elke klasse die
   later probeert te verbergen. Gemeten in de live pagina, niet geredeneerd. */
#input.no-print:not(.hidden) {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto !important;
  padding: clamp(36px, 4vw, 64px) 0 60px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}

.scan-hero-copy,
.scan-form-card {
  min-width: 0;
}

/* Hier stonden `#input .lockup`, `#input .mark` en `#input .wm`: drie regels om een tweede
   merkteken (het oude, de boog met het bolletje) te verbergen. Dat teken is uit de markup (S1),
   dus deze regels zijn weg — een regel die iets verbergt dat niet bestaat, is een strik voor de
   volgende die `.mark` wil gebruiken. */

#input .langbar {
  justify-content: flex-start !important;
  margin: 0 0 20px !important;
}

#input h1 {
  max-width: 700px !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: clamp(30px, 6vw, 50px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#input h1 .accent {
  color: #C6892B !important;
}

#input .lede {
  max-width: 620px !important;
  margin: 22px 0 0 !important;
  text-align: left !important;
  color: #667085 !important;
  font-size: clamp(15px, 2.4vw, 18px) !important;
  line-height: 1.5 !important;
}

#input .measure-claim {
  margin: 28px 0 0 !important;
  padding: 16px 20px;
  border: 1px solid rgba(219, 228, 232, .95) !important;
  border-left: 4px solid #C6892B !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 60px rgba(32, 53, 65, .08) !important;
}
/* De kop en de zin stonden tegen elkaar aan ("We schatten niet.Deze gratis scan…") — gezien op
   Njusja's schermafdruk van 6 september. Een <strong> is inline; hij hoort hier een regel te zijn. */
#input .measure-claim strong { display: block; margin: 0 0 4px; font-size: 16px; color: #221E18 }
#input .measure-claim span { display: block; color: #5A564F; font-size: 14.5px; line-height: 1.55 }

/* ⛔ HET MUNTGROEN ZAT NOG IN DE KAART — 6 september 2026.
   Njusja: *"dat oude muntgroen nog aanwezig"*, met een schermafdruk van de rechterbovenhoek van de
   formulierkaart. J180 verving de drie keer `#20c9bd`, maar deze stond als `rgba(32, 201, 189, …)`
   geschreven — dezelfde kleur in een andere spelling — en is toen gemist. Een zoekopdracht op een
   hexcode vindt geen rgba. Nu het amber van het palet, even licht. */
.scan-form-card {
  border: 1px solid rgba(219, 228, 232, .95);
  background:
    radial-gradient(circle at 88% 6%, rgba(198, 137, 43, .14), transparent 34%),
    rgba(255, 255, 255, .94);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 28px 86px rgba(32, 53, 65, .14);
}

.scan-form-card .field {
  margin: 0 0 16px !important;
}
.scan-form-card .field label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; color: #221E18 }
.scan-form-card .field .opt { font-weight: 400; color: #83837A }

/* ⚠ `:not([type="checkbox"])` — J180. Deze regel gold voor ÉLKE input in de kaart, dus ook voor
   het vinkje "Ik heb (nog) geen website": dat werd 100% breed met een minimumhoogte van 52 px, en
   het label ernaast werd door de flexbox naar de rand geduwd en brak in vier regels. Op Njusja's
   schermafdruk is het een groot afgerond vierkant met de tekst er los naast.

   Het `style="width:auto"` dat er inline op stond, verloor van de `!important` hier. Een selector
   die "elke input" zegt en een keuzevakje bedoelt niet mee te nemen, hoort dat te zeggen. */
.scan-form-card input:not([type="checkbox"]) {
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid rgba(210, 222, 228, .95) !important;
  font-size: 15px !important;
  min-height: 52px !important;
  padding: 0 14px;
  background: #fff;
  color: #221E18;
}
.scan-form-card input:not([type="checkbox"]):focus { outline: 2px solid #C6892B; outline-offset: 1px }
/* En het vinkje zelf: een normaal keuzevakje in het accent van het palet. */
.scan-form-card input[type="checkbox"] {
  width: 17px !important; height: 17px !important; min-height: 0 !important;
  flex: 0 0 auto; accent-color: #6B3FD4;
}

.scan-form-card .btn {
  width: auto !important;
  min-height: 58px !important;
  border-radius: 999px !important;
  padding-inline: 30px !important;
  background: #6B3FD4 !important;
  color: #F6F2E9 !important;
  box-shadow: none !important;
  border: 0;
  font: 700 15px/1 "Manrope", system-ui, sans-serif;
  cursor: pointer;
}
.scan-form-card .btn:hover { background: #5A31BE !important }

.scan-form-card .note,
.scan-form-card .consent {
  margin: 10px 0 0 !important;
  color: #83837A !important;
  font-size: 12.5px !important;
  line-height: 1.5;
  text-align: left !important;
}
.scan-form-card .note { font-family: "Space Mono", ui-monospace, monospace; font-size: 11.5px !important }

.scan-form-card .toolteaser {
  margin: 18px 0 0 !important;
  color: #667085 !important;
  text-align: left !important;
  font-size: 13.5px;
  line-height: 1.5;
}
.scan-form-card .toolteaser a { color: #A8721F }

/* `.scan-romp` is de wikkel die bouw-scan.mjs om de copy schrijft (J154: bewust niet `hw-copy`).
   Hij staat hier in de selector zodat de regel bij de romp hoort en niet bij elke `.lp`. */
#input .lp.scan-romp {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 1060px !important;
  margin: 76px auto 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 28px 86px rgba(32, 53, 65, .10) !important;
}

@media (max-width: 860px) {
  /* Zelfde `:not(.hidden)` als hierboven — anders wint deze regel op een smal scherm alsnog van
     `.hidden` en blijft het formulier op mobiel wél staan. Eén reparatie op twee plaatsen. */
  #input.no-print:not(.hidden) {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 640px);
    padding-top: 48px !important;
  }

  #input h1,
  #input .lede {
    text-align: left !important;
  }

  .scan-form-card {
    padding: 22px;
  }
}

/* ══ DE DRIE ANDERE SCHERMEN DELEN ÉÉN BREEDTE ═══════════════════════════════════════════════
   Laadscherm, foutscherm en rapport. Geen `display` in deze regel — dat is precies wat bij
   `#input.no-print` van `.hidden` won (zie boven). Breedte en marge raken `display: none` niet. */
#loading, #errorBox, #result {
  width: min(960px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 0 60px;
}
@media (max-width: 860px) { #loading, #errorBox, #result { width: calc(100% - 32px) } }

/* ══ HET LAADSCHERM — 6 september 2026 ══════════════════════════════════════════════════════════
   Njusja: *"wordt er geen bericht weergegeven bij het starten van de scan"*.

   Er stond wél een spinner in de HTML, maar hij mat **0 bij 0 pixels**: `.loadwrap`, `.loader` en
   de klassen erin hadden in de héle site geen enkele CSS-regel. Een SVG zonder breedte, zonder
   hoogte en zonder opmaak klapt samen tot niets. Wat overbleef was één regel tekst op een verder
   lege pagina, dertig tot zestig seconden lang.

   ⚠ Dit is exact hetzelfde patroon als de zeven menuklassen van 31 augustus (J165), en het is de
   derde keer in dit project. En bij het nameten van het hele scherm bleek het niet bij zes klassen
   te blijven: het RAPPORT eronder had er ook geen (zie §HET RAPPORT). Zie taak S4.

   ⛔ EN DE SPINNER WAS HET OUDE MERK — S1. Wat ik in sessie 19 zichtbaar maakte, was een boog met
   een bolletje: mijn eigen natekening van jaren terug. Njusja: *"dat merkteken bestaat al lang
   niet meer!!!!"* Het echte merk is de STIPPENRING (public/logo-dot.svg, lib/logomerk.js). Die
   staat nu inline in de markup, met per stip haar klokstand in `--i`.

   De beweging: een licht dat rond de ring loopt, dezelfde als in de kop van het omhulsel
   (`kp-signaal` in ceeme-omhulsel.css), maar hier op de KLOKSTAND en niet op het volgnummer —
   72 stappen van 5°, zodat de vier bogen tegelijk oplichten en het één wijzer wordt. Kleur en
   niet dekking, om dezelfde reden als daar: kleur verschilt ook op een paar pixels. */
.loadwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  /* Een laadscherm moet het BEELD vullen dat het formulier achterlaat. Zonder deze hoogte klapt de
     pagina in tot een paar regels, en dan lijkt het alsof er niets gebeurt — wat er gebeurde. */
  min-height: min(62vh, 520px);
  padding: 40px 24px;
  text-align: center;
}

.loader {
  width: clamp(112px, 15vw, 150px);
  height: auto;
  overflow: visible;
  color: #17170F;   /* de ring is currentColor: inkt op wit, zoals logo-dot.svg op crème */
}

/* 3.2 s voor één ronde, 72 stippen: 3.2 / 72 = 0.0444 s per stap. Negatieve vertraging, zodat
   de ring al vol staat op het moment dat het scherm verschijnt — geen lege eerste seconde. */
.ld-stip {
  animation: ld-signaal 3.2s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.0444s);
}
@keyframes ld-signaal {
  0%, 76%  { fill: currentColor; opacity: .38 }
  86%      { fill: #C6892B;      opacity: 1 }
  96%,100% { fill: currentColor; opacity: .38 }
}

.loadwrap .status {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  color: #221E18;
}

/* Beweging uit: de ring staat stil en VOL — in inkt, goed leesbaar. Een leeg vak zou hier
   hetzelfde probleem geven als een onzichtbare spinner. */
@media (prefers-reduced-motion: reduce) {
  .ld-stip { animation: none; opacity: 1 }
}

/* ══ HET FOUTSCHERM ═══════════════════════════════════════════════════════════════════════════ */
.err {
  padding: 18px 20px;
  border: 1px solid rgba(198, 137, 43, .55);
  border-left: 4px solid #C6892B;
  border-radius: 8px;
  background: #fff;
  color: #221E18;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px;
}
.err:empty { display: none }

/* De secundaire knop: violet als omtrek, want violet is de knopkleur en dit is geen hoofdactie. */
.again {
  display: inline-block;
  padding: 12px 22px;
  border: 1.5px solid #6B3FD4;
  border-radius: 999px;
  background: #fff;
  color: #6B3FD4;
  font: 700 14px/1 "Manrope", system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.again:hover { background: #6B3FD4; color: #F6F2E9 }
.again.ghost { border-color: #E2E2D8; color: #3A3A31 }
.again.ghost:hover { background: #F6F2E9; color: #17170F }
.again:disabled { opacity: .5; cursor: default }

/* ══ HET RAPPORT — S7, 6 september 2026 ══════════════════════════════════════════════════════
   Live nagemeten op /nl/scan: van de 127 klassen op de pagina hadden er 36 geen enkele CSS-regel,
   en de klassen die ceeme-scanvlak.js pas ná de meting in de pagina schrijft (chip, badge, act,
   fstep, rktable …) hadden er ook geen — 60 in totaal. Het hele resultaatscherm, van de kop tot de
   fix-knop, was kale HTML. Niemand zag het, want de scan had nog nooit echt gedraaid (S6).

   Hier is het rapport in het palet van de site: wit vlak, inkt, amber als accent in tekst, violet
   alleen op knoppen. Scores krijgen de INKT-schaal en geen rood/groen (J157); status (geciteerd ·
   vermeld · ontbreekt) draagt amber-tonen mét een woord ernaast, zodat kleur nooit de enige
   drager is. Geen ID-selector zet hier een `display` (zie de les bij `#input.no-print`). */

/* De kop van het rapport: wie, wanneer, en het merk. */
.rephead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 18px;
  margin: 0 0 22px;
  border-bottom: 1px solid #E2E2D8;
}
.rephead .who {
  font: 800 clamp(22px, 3vw, 30px)/1.1 "Manrope", system-ui, sans-serif;
  letter-spacing: -.01em;
  color: #17170F;
  overflow-wrap: anywhere;
}
.rephead .meta {
  text-align: right;
  font: 400 11px/1.5 "Space Mono", ui-monospace, monospace;
  color: #83837A;
  white-space: nowrap;
}
.rephead .wmini { font-weight: 700; color: #17170F }
.rephead .rep-merk { display: block; width: 40px; height: 40px; flex: none }

/* De sectiekop: dezelfde vorm als "In het kort" op de rest van de site (hw-kort-h). */
.sec {
  font: 700 11px/1.4 "Space Mono", ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A8721F;
  margin: 34px 0 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(34, 30, 24, .1);
}

/* Overall GEO readiness: de stuurbare meter bovenaan. */
.rdybox {
  padding: 18px 20px;
  border: 1px solid #E2E2D8;
  border-radius: 8px;
  background: #F6F2E9;
  margin: 0 0 22px;
}
.rdytop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.rdytitle { font: 800 15px/1.3 "Manrope", system-ui, sans-serif; color: #17170F }
.rdynum { font: 400 13px/1.3 "Space Mono", ui-monospace, monospace; color: #3A3A31 }
.rdynum b { font-size: 22px; color: #17170F }
.rdybar { height: 8px; border-radius: 999px; background: #E2E2D8; margin: 12px 0 10px; overflow: hidden }
.rdybar span { display: block; height: 100%; border-radius: 999px; background: #17170F; transition: width .9s cubic-bezier(.65, 0, .35, 1) }
.rdynote { margin: 0; font-size: 13px; line-height: 1.55; color: #5A564F; max-width: 70ch }

/* De drie meters. Elke boog is een halve cirkel (r=90, lengte 282.74 — dezelfde ARC als in
   ceeme-scanvlak.js), het script schuift de dashoffset. Zonder `stroke-dasharray` hier tekent
   die offset niets: dat was de tweede reden dat de meters leeg bleven. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 8px;
}
.gauge {
  text-align: center;
  padding: 18px 12px 16px;
  border: 1px solid #E2E2D8;
  border-radius: 8px;
  background: #fff;
}
.gauge svg { width: min(100%, 200px); height: auto; display: block; margin: 0 auto -6px; overflow: visible }
.g-bg { fill: none; stroke: #E2E2D8; stroke-width: 12; stroke-linecap: round }
.g-fg {
  fill: none;
  stroke: #17170F;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 282.74;
  stroke-dashoffset: 282.74;
  transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1);
}
.gauge .num {
  font: 800 34px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: -.02em;
  color: #17170F;
  margin: -34px 0 10px;
  position: relative;
}
.gauge .num small { font-size: 13px; font-weight: 600; color: #83837A; letter-spacing: 0 }
.glabel { font: 700 14px/1.3 "Manrope", system-ui, sans-serif; color: #17170F }
.gsub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #83837A }
@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr }
  .gauge svg { width: min(100%, 180px) }
}

/* Het oordeel en de samenvatting. */
.verdict {
  margin: 30px 0 6px;
  text-align: center;
  font: 800 clamp(22px, 3vw, 28px)/1.2 "Manrope", system-ui, sans-serif;
  letter-spacing: -.01em;
  color: #17170F;
}
.verdict:empty { display: none }
.vsum {
  margin: 12px auto 0;
  max-width: 68ch;
  text-align: center;
  font-size: 16px;
  line-height: 1.65;
  color: #3A3A31;
}
.vsum:empty { display: none }

/* De fase-ladder: zes treden, de bereikte in amber. */
.fasebox {
  margin: 18px auto 0;
  max-width: 560px;
  padding: 16px 18px;
  border: 1px solid #E2E2D8;
  border-radius: 8px;
  background: #F6F2E9;
  text-align: center;
}
.fsteps { display: flex; gap: 5px; justify-content: center; margin: 0 0 10px }
.fstep { display: block; width: 34px; height: 7px; border-radius: 999px; background: #E2E2D8 }
.fstep.on { background: #C6892B }
.ftitle { margin: 0 0 4px; font: 800 15px/1.3 "Manrope", system-ui, sans-serif; color: #17170F }
.fsub { margin: 0; font-size: 13px; line-height: 1.55; color: #5A564F }

/* De kaart: één per vraag, en voor elk blok dat het script vult. */
.rcard {
  padding: 18px 20px;
  border: 1px solid #E2E2D8;
  border-radius: 8px;
  background: #fff;
  margin: 0 0 12px;
}
.rcard .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 8px }
.rq { font: 700 15.5px/1.4 "Manrope", system-ui, sans-serif; color: #17170F }
.ra { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: #5A564F }
.rcard .ra:last-child { margin-bottom: 0 }
.rcard b { color: #17170F }

/* Status: geciteerd · vermeld · ontbreekt — amber-tonen, altijd mét het woord erbij. */
.badge {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  font: 700 10.5px/1.4 "Space Mono", ui-monospace, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.b-cite    { background: #C6892B; color: #F6F2E9 }
.b-mention { background: rgba(198, 137, 43, .16); color: #8F6118 }
.b-miss    { background: #EEE9DF; color: #83837A }

/* De namen die de AI noemde, in volgorde. `me` is de gescande, `win` de eerste. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #E2E2D8;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.4;
  color: #3A3A31;
}
.chip .cn { font: 700 10.5px/1 "Space Mono", ui-monospace, monospace; color: #83837A }
.chip.win { border-color: #17170F; color: #17170F }
.chip.me { border-color: #C6892B; background: rgba(198, 137, 43, .1); color: #17170F; font-weight: 700 }
.chip.me .cn { color: #A8721F }
.src-badge {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #F6F2E9;
  font: 700 9.5px/1.5 "Space Mono", ui-monospace, monospace;
  color: #83837A;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* De ranglijst: wie staat vooraan. Cijfers in mono, jouw rij in amber. */
.rktable { width: 100%; border-collapse: collapse; font-size: 13.5px }
.rktable th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #E2E2D8;
  font: 700 10.5px/1.4 "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #83837A;
}
.rktable td { padding: 9px 10px; border-bottom: 1px solid rgba(34, 30, 24, .07); color: #3A3A31; vertical-align: top }
.rktable td:first-child, .rktable td:nth-child(n+3) { font-family: "Space Mono", ui-monospace, monospace; font-size: 12.5px; white-space: nowrap }
.rktable tr.yourow td { background: rgba(198, 137, 43, .1); color: #17170F; font-weight: 700 }
.rktable tr:last-child td { border-bottom: 0 }
#rankCard { overflow-x: auto }

/* De acties: genummerd, met de basis erbij — vastgesteld of aanname. */
.act {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(34, 30, 24, .08);
}
.act:first-child { border-top: 0 }
.an { font: 700 13px/1.6 "Space Mono", ui-monospace, monospace; color: #A8721F }
.at { margin: 0 0 3px; font: 700 15px/1.4 "Manrope", system-ui, sans-serif; color: #17170F }
.ad { margin: 0; font-size: 14px; line-height: 1.6; color: #5A564F }
.basis {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font: 700 10px/1.5 "Space Mono", ui-monospace, monospace;
  letter-spacing: .04em;
  vertical-align: middle;
  white-space: nowrap;
}
.basis.bv { background: #17170F; color: #F6F2E9 }
.basis.ba { border: 1px solid #E2E2D8; color: #83837A }

/* De vijf pijlers. De kaart hier; de rijen erin (vinkje, naam, chip) staan nog inline in
   ceeme-scanvlak.js — status mag daar groen/rood zijn, want er staat een glyph naast (J157). */
#pillList { margin: 0 0 6px }
.pill { border: 1px solid #E2E2D8; border-radius: 8px; margin: 0 0 8px; background: #fff; overflow: hidden }

/* Voetnoten en de kleine lettertjes — in het rapport, in het foutscherm en onder de knop. */
.note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #83837A;
  max-width: 78ch;
}
.note a { color: #A8721F }

/* Het fix-pakket: crème kaart, violet knop — de enige hoofdactie van het rapport. */
.fixblock {
  padding: 28px 24px;
  border: 1px solid #E2E2D8;
  border-radius: 8px;
  background: #F6F2E9;
}
.fixblock h4 { margin: 0 0 8px; font: 800 clamp(19px, 2.4vw, 24px)/1.2 "Manrope", system-ui, sans-serif; color: #17170F }
.fixblock p { font-size: 14.5px; line-height: 1.6; color: #3A3A31 }
.fixbtn {
  display: inline-block;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  background: #6B3FD4;
  color: #F6F2E9;
  font: 700 15px/1 "Manrope", system-ui, sans-serif;
  cursor: pointer;
}
.fixbtn:hover { background: #5A31BE }

.actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0 }

/* Het regeltje onderaan de toepassing, boven de voettekst van het omhulsel. */
.foot {
  width: min(960px, calc(100% - 44px));
  margin: 0 auto;
  padding: 18px 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  border-top: 1px solid rgba(34, 30, 24, .1);
  font: 400 11.5px/1.6 "Space Mono", ui-monospace, monospace;
  color: #83837A;
}
.foot a { color: #A8721F; text-decoration: none }
.foot b { color: #17170F }

/* Afdrukken (de eigenaar kan het rapport als PDF bewaren): alleen het rapport, zonder kaartranden
   die een printer als grijze vlakken tekent. */
@media print {
  #loading, #errorBox, .foot, .no-print { display: none !important }
  #result { width: 100%; padding: 0 }
  .rcard, .gauge, .rdybox, .fasebox { box-shadow: none; break-inside: avoid }
}