/* Ontwerptokens.
   De reekskleuren en de grijstinten komen uit een gevalideerd palet: gecheckt op
   lichtheidsband, chroma, kleurenblindheid-afstand en contrast, in beide modi.
   Niet zelf bijkleuren dus -- de volgorde van de reeksen is de veiligheid: in een
   gestapelde balk raken alleen buren elkaar, en dat zijn precies de paren die
   doorgerekend zijn. tests/test_palet.py bewaakt dat.

   Reeks 9 t/m 16 zijn dezelfde acht tinten in een tweede toon: donkerder op een
   licht vlak, lichter op een donker vlak. Acht losse tinten is de grens van wat
   te onderscheiden is; een negende verzinnen werkt niet, een tweede toon wel --
   lichtheidsverschil overleeft kleurenblindheid beter dan tintverschil. */

:root {
  color-scheme: light;

  --vlak:        #f9f9f7;   /* pagina */
  --kaart:       #fcfcfb;   /* vlak waarop grafieken staan */
  --inkt:        #0b0b0b;
  --inkt-2:      #52514e;
  --inkt-3:      #898781;
  --raster:      #e1e0d9;
  --basislijn:   #c3c2b7;
  --rand:        rgba(11, 11, 11, .10);

  --op:          #006300;   /* stijging = goed */
  --af:          #d03b3b;
  --goed:        #0ca30c;

  --reeks-1: #2a78d6;
  --reeks-2: #eb6834;
  --reeks-3: #1baf7a;
  --reeks-4: #eda100;
  --reeks-5: #e87ba4;
  --reeks-6: #008300;
  --reeks-7: #4a3aa7;
  --reeks-8: #e34948;
  --reeks-9:  #003f82;      /* vanaf hier de tweede toon: donkerder */
  --reeks-10: #9b3500;
  --reeks-11: #026c49;
  --reeks-12: #9d6a04;
  --reeks-13: #ab3568;
  --reeks-14: #004200;
  --reeks-15: #1d005b;
  --reeks-16: #91111b;
  --reeks-rest: #898781;    /* de samengevouwen staart, voorbij de zestiende */

  --menu-breedte: 232px;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-thema="licht"])) {
    color-scheme: dark;
    --vlak:      #0d0d0d;
    --kaart:     #1a1a19;
    --inkt:      #ffffff;
    --inkt-2:    #c3c2b7;
    --inkt-3:    #898781;
    --raster:    #2c2c2a;
    --basislijn: #383835;
    --rand:      rgba(255, 255, 255, .10);
    --op:        #0ca30c;

    --reeks-1: #3987e5;
    --reeks-2: #d95926;
    --reeks-3: #199e70;
    --reeks-4: #c98500;
    --reeks-5: #d55181;
    --reeks-6: #008300;
    --reeks-7: #9085e9;
    --reeks-8: #e66767;
    --reeks-9:  #6eaeff;    /* op zwart gaat de tweede toon juist omhoog */
    --reeks-10: #ff8357;
    --reeks-11: #4ec494;
    --reeks-12: #f1ab43;
    --reeks-13: #ff78a5;
    --reeks-14: #3da938;
    --reeks-15: #b5b0fe;
    --reeks-16: #ff9a97;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vlak);
  color: var(--inkt);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: inherit; }

/* ------------------------------------------------------------- indeling -- */

.omhulsel { display: flex; min-height: 100vh; }

.menu {
  width: var(--menu-breedte);
  flex: 0 0 var(--menu-breedte);
  background: var(--kaart);
  border-right: 1px solid var(--rand);
  padding: 20px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.merk {
  font-weight: 650;
  font-size: 15px;
  padding: 0 20px 18px;
  letter-spacing: -.01em;
}
.merk small { display: block; font-weight: 400; color: var(--inkt-3); font-size: 12px; }

.menu nav { display: flex; flex-direction: column; gap: 1px; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px;
  color: var(--inkt-2);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
}
.menu a:hover { background: color-mix(in srgb, var(--inkt) 4%, transparent); color: var(--inkt); }
.menu a.actief { color: var(--inkt); font-weight: 600; border-left-color: var(--reeks-1);
                 background: color-mix(in srgb, var(--reeks-1) 8%, transparent); }
.menu a .ic { width: 17px; text-align: center; opacity: .85; }

.menu .kop {
  padding: 16px 20px 6px; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--inkt-3); font-weight: 600;
}

.menu .uitloggen { padding: 18px 20px 0; margin-top: 10px;
                   border-top: 1px solid var(--rand); }
.menu .uitloggen .knop { width: 100%; justify-content: center; color: var(--inkt-3); }
.menu .uitloggen .knop:hover { color: var(--inkt); }

.inhoud { flex: 1; min-width: 0; padding: 22px 30px 60px; }

.balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.balk h1 { font-size: 21px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
.balk .sub { color: var(--inkt-3); font-size: 13px; margin-top: 2px; }
.balk .rechts { display: flex; gap: 8px; align-items: center; }

/* -------------------------------------------------------------- knoppen -- */

.knop {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--rand);
  background: var(--kaart); color: var(--inkt);
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: none;
}
.knop:hover { background: color-mix(in srgb, var(--inkt) 5%, var(--kaart)); }
.knop.primair { background: var(--reeks-1); border-color: transparent; color: #fff; font-weight: 550; }
.knop.primair:hover { filter: brightness(1.07); }
.knop.klein { padding: 5px 10px; font-size: 13px; }
.knop.gevaar { color: var(--af); border-color: color-mix(in srgb, var(--af) 40%, var(--rand)); }
.knop.gevaar:hover { background: color-mix(in srgb, var(--af) 12%, var(--kaart)); border-color: var(--af); }

/* De twee knoppen per bezit: groen erbij, rood eraf. De kleur is hier een
   handvat, geen informatie -- het teken (+ en ×) zegt hetzelfde, zodat het ook
   werkt als je rood en groen niet uit elkaar houdt. */
.knop.toevoegen, .knop.weghalen {
  width: 30px; padding: 5px 0; justify-content: center;
  font-size: 16px; line-height: 1; font-weight: 600;
}
.knop.toevoegen { color: var(--goed); border-color: color-mix(in srgb, var(--goed) 40%, var(--rand)); }
.knop.toevoegen:hover { background: color-mix(in srgb, var(--goed) 14%, var(--kaart)); border-color: var(--goed); }
.knop.weghalen { color: var(--af); border-color: color-mix(in srgb, var(--af) 40%, var(--rand)); }
.knop.weghalen:hover { background: color-mix(in srgb, var(--af) 14%, var(--kaart)); border-color: var(--af); }

/* --------------------------------------------------------------- kaarten -- */

.kaart {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.kaart > h2 {
  margin: 0 0 4px; font-size: 15px; font-weight: 600;
}
.kaart > .toelichting { color: var(--inkt-3); font-size: 13px; margin: 0 0 16px; }

.rooster { display: grid; gap: 16px; }
.rooster.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rooster.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rooster.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rooster.k3, .rooster.k4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px)  { .rooster.k2, .rooster.k3, .rooster.k4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- getallen tonen -- */

/* Het ene getal waar de pagina mee opent. Proportionele cijfers: tabular maakt
   een groot getal onnodig los. */
.hoofdgetal {
  font-size: 52px; font-weight: 650; letter-spacing: -.02em; line-height: 1.05;
  margin: 2px 0 6px;
}
.tegel .label { color: var(--inkt-3); font-size: 13px; }
.tegel .waarde { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin-top: 3px; }
.tegel .delta { font-size: 13px; margin-top: 3px; color: var(--inkt-2); }

.op  { color: var(--op); }
.af  { color: var(--af); }
.stil { color: var(--inkt-3); }

/* --------------------------------------------------------------- tabellen -- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--raster); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--inkt-3); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: color-mix(in srgb, var(--inkt) 3%, transparent); }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; }
td.dun { color: var(--inkt-3); }

.sleutel {            /* het gekleurde blokje naast een naam in een tabel */
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 8px; vertical-align: baseline;
}

/* ------------------------------------------------- deel-van-het-geheel -- */

/* Een liggende gestapelde balk. De scheiding tussen segmenten is een gat in de
   achtergrondkleur van 2px -- geen randje, want dat is inkt die geen data is. */
.stapel { display: flex; gap: 2px; height: 22px; margin: 6px 0 14px; }
.stapel .deel { height: 100%; min-width: 3px; }
.stapel .deel:first-child { border-radius: 5px 0 0 5px; }
.stapel .deel:last-child  { border-radius: 0 5px 5px 0; }
.stapel .deel:only-child  { border-radius: 5px; }

.legenda { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: var(--inkt-2); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }

/* Losse balk per rij (voor concentratie per broker) */
.balkje { height: 8px; border-radius: 0 4px 4px 0; min-width: 2px; display: block; }

/* --------------------------------------------------------------- grafiek -- */

.grafiek { width: 100%; display: block; }
/* De grafiek wordt met preserveAspectRatio="none" uitgerekt. Zonder dit is een
   lijn van 2px op een smal scherm horizontaal dunner dan verticaal -- goed
   zichtbaar op een telefoon, waar de x-schaal veel kleiner is. */
.grafiek .lijn, .grafiek .raster, .grafiek .as,
.grafiek .punt, .grafiek .draadkruis { vector-effect: non-scaling-stroke; }
.grafiek .raster { stroke: var(--raster); stroke-width: 1; }
.grafiek .as { stroke: var(--basislijn); stroke-width: 1; }
.grafiek .lijn { fill: none; stroke: var(--reeks-1); stroke-width: 2;
                 stroke-linejoin: round; stroke-linecap: round; }
.grafiek .vlakvulling { fill: var(--reeks-1); opacity: .10; }
.grafiek .tekst { fill: var(--inkt-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafiek .punt { fill: var(--reeks-1); stroke: var(--kaart); stroke-width: 2; }
.grafiek .draadkruis { stroke: var(--basislijn); stroke-width: 1; }

.tooltip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--kaart); border: 1px solid var(--rand); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.14);
  white-space: nowrap; z-index: 20;
}
.tooltip .t-waarde { font-weight: 600; }
.tooltip .t-datum { color: var(--inkt-3); font-size: 12px; }

/* ------------------------------------------------------------- formulier -- */

.veld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.veld label { font-size: 13px; color: var(--inkt-2); font-weight: 550; }
.veld .hint { font-size: 12px; color: var(--inkt-3); }
input, select, textarea {
  font: inherit; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--rand); background: var(--vlak); color: var(--inkt);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--reeks-1); outline-offset: -1px; }
.veldrij { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Het "ik heb dit al"-blok bij een nieuw bezit */
.beginstand {
  border-top: 1px solid var(--raster);
  margin: 18px 0 16px;
  padding-top: 16px;
}
.beginstand .aanzetter {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 14px; margin-bottom: 4px;
}
.beginstand .aanzetter input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.beginstand .aanzetter strong { display: block; }
.beginstand .aanzetter .hint { display: block; margin-top: 2px; }
.beginstand #start_velden { margin-top: 16px; }

dialog {
  border: 1px solid var(--rand); border-radius: 14px; padding: 0;
  background: var(--kaart); color: var(--inkt); max-width: 560px; width: 92vw;
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog .kop { padding: 18px 22px 0; }
dialog .kop h2 { margin: 0 0 3px; font-size: 17px; }
dialog form { padding: 14px 22px 20px; }
dialog .voet { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* --------------------------------------------------------------- meldingen -- */

.melding {
  padding: 11px 14px; border-radius: 9px; font-size: 14px; margin-bottom: 16px;
  border: 1px solid var(--rand); background: var(--kaart);
  display: flex; gap: 9px; align-items: flex-start;
}
.melding.fout { border-color: color-mix(in srgb, var(--af) 45%, var(--rand)); }
.melding.goed { border-color: color-mix(in srgb, var(--goed) 45%, var(--rand)); }
.melding .ic { flex: 0 0 auto; }

.leeg { text-align: center; color: var(--inkt-3); padding: 42px 20px; }
.leeg p { margin: 6px 0 16px; }

/* ------------------------------------------------------ overzicht inlezen -- */

/* De controletabel na het uitlezen. Elke regel is te bewerken vóór je hem
   goedkeurt, dus de velden staan in de tabel zelf -- geen apart bewerkscherm
   voor iets wat je in één blik wilt nalopen. */
.importkop { display: flex; justify-content: space-between; align-items: baseline;
             margin: 18px 0 6px; font-size: 14px; }
.importtabel td { padding: 7px 6px; vertical-align: top; }
.importtabel th { padding: 7px 6px; }
.importtabel input, .importtabel select { padding: 5px 7px; font-size: 13px; }
.importtabel .vinkje { width: auto; margin: 6px 0 0; }
.importtabel tr.afgewezen { opacity: .42; }
.importtabel tr.afgewezen input, .importtabel tr.afgewezen select { text-decoration: line-through; }
.importtabel .reden { font-size: 12px; color: var(--inkt-3); margin-top: 3px; }
.importtabel .merk {           /* 'bestaat al', 'nieuwe broker', ticker-uitslag */
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 20px;
  border: 1px solid var(--rand); color: var(--inkt-2); margin-top: 4px;
}
.importtabel .merk.goed { border-color: color-mix(in srgb, var(--goed) 45%, var(--rand));
                          color: var(--goed); }
.importtabel .merk.let  { border-color: color-mix(in srgb, var(--af) 45%, var(--rand));
                          color: var(--af); }
.importtabel .knoppen { display: flex; gap: 4px; }

/* Een blok met `hidden` moet weg blijven, ook als het een klasse heeft die zelf
   `display` zet. Zonder deze regel wint `.melding { display: flex }` van de
   standaardregel van de browser, en stond er een leeg gekleurd kadertje op het
   scherm bij elke verborgen melding. */
[hidden] { display: none !important; }

/* De uitkomst van het tickerzoeken: smal, want het gaat om herkennen en kiezen,
   niet om lezen. */
.zoektabel { margin-top: 14px; font-size: 13px; }
.zoektabel td { padding: 6px 8px; }
.zoektabel code { font-size: 12px; }

/* Een rij keuzerondjes met uitleg eronder, zoals bij het bijwerken van een
   saldo: wat je kiest bepaalt of je inleg meebeweegt, dus dat moet erbij staan. */
.keuze { display: flex; gap: 9px; align-items: flex-start; margin: 7px 0;
         font-size: 14px; cursor: pointer; }
.keuze input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.keuze .hint { display: block; margin-top: 1px; }

/* De plekken waar een bezit ligt, ingesprongen onder de regel zelf. */
.knop.uitklap { padding: 1px 6px; margin-right: 6px; font-size: 11px;
                line-height: 1.4; color: var(--inkt-3); }
tr.plek td { background: color-mix(in srgb, var(--inkt) 2%, transparent);
             font-size: 13px; }

/* Een totaalregel onder een tabel: dezelfde regels, maar met een streep erboven
   zodat je ziet dat het een optelsom is en geen zoveelste rij. */
tfoot td { border-top: 1px solid var(--basislijn); border-bottom: none;
           padding-top: 10px; }
tfoot tr:hover { background: none; }

/* Het tekentje achter een bezit met een notitie: aanwezig, maar niet luid. */
.notitieteken { color: var(--inkt-3); font-size: 12px; margin-left: 5px; cursor: help; }

/* Legenda boven een grafiek met meer dan één lijn. Kleur alleen is nooit genoeg
   om te weten welke lijn je ziet -- vandaar het woord ernaast. */
.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px;
           margin: 0 0 10px 2px; color: var(--inkt-2); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
             margin-right: 6px; vertical-align: baseline; }
.grafiek .bijlijn { fill: none; }

/* De signalenkaart: één stip per regel, kleur zegt hoe erg -- maar de tekst
   zegt het ook, want kleur alleen is nooit genoeg. */
.signalen ul { list-style: none; margin: 10px 0 0; padding: 0; }
.signalen li { display: flex; gap: 10px; align-items: flex-start;
               padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--raster); }
.signalen li:last-child { border-bottom: none; }
.signalen .stip { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
                  margin-top: 6px; background: var(--inkt-3); }
.signalen li.fout .stip { background: var(--af); }
.signalen li.let  .stip { background: var(--reeks-4); }
.signalen li.info .stip { background: var(--reeks-1); }

/* ==========================================================================
   MOBIEL

   Alles hieronder staat in één blok en geldt alleen onder 760px. Een browser op
   een breed scherm leest deze regels niet eens: aan de pc-versie verandert dus
   niets, en dat is precies de bedoeling. Geen enkele regel hierboven is
   herschreven -- er komt alleen iets bij.

   De tabbalk staat in elk sjabloon, maar is standaard weg. Zo is er één versie
   van elke pagina in plaats van twee die na een maand uit elkaar gegroeid zijn.
   ========================================================================== */

.tabbalk { display: none; }

@media (max-width: 760px) {

  /* --- indeling: zijbalk eruit, tabbalk erin ---------------------------- */

  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .omhulsel { display: block; min-height: 0; }
  .menu { display: none; }
  .inhoud { padding: 0 14px 24px; }

  /* De kopbalk blijft staan bij het scrollen: op een lange tabel wil je weten
     waar je bent, en de verversknop niet kwijtraken. */
  .balk {
    position: sticky; top: 0; z-index: 4;
    margin: 0 -14px 14px; padding: 12px 14px;
    background: var(--vlak); border-bottom: 1px solid var(--rand);
    gap: 10px;
  }
  .balk h1 { font-size: 18px; }
  .balk .sub { font-size: 12px; }
  /* Toevoegen zit onderin, in de tabbalk, waar je duim al is. */
  .balk .rechts .knop.primair { display: none; }

  .tabbalk {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    background: var(--kaart); border-top: 1px solid var(--rand);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbalk a, .tabbalk button {
    flex: 1; min-height: 44px; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 2px; font: inherit; font-size: 10px;
    color: var(--inkt-3); text-decoration: none;
  }
  .tabbalk .ic { font-size: 17px; line-height: 1; }
  .tabbalk a.actief { color: var(--reeks-1); font-weight: 600; }
  .tabbalk .bijboeken {
    flex: 0 0 54px; font-size: 26px; line-height: 1; color: #fff;
    background: var(--reeks-1); border-radius: 12px; margin: 5px 6px;
    min-height: 40px; padding: 0;
  }

  /* --- het "Meer"-vel --------------------------------------------------- */

  .vel .vellijst { display: flex; flex-direction: column; padding: 6px 0 0; }
  .vel .vellijst a {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 10px 22px; font-size: 16px;
    color: var(--inkt); text-decoration: none;
  }
  .vel .vellijst a.actief { color: var(--reeks-1); font-weight: 600; }
  .vel .vellijst form { padding: 12px 22px 4px; border-top: 1px solid var(--raster); margin-top: 6px; }
  .vel .vellijst form .knop { width: 100%; justify-content: center; }

  /* --- vensters worden vellen ------------------------------------------ */

  /* Een venster van 92vw loopt bij een lang formulier van het scherm af. Een vel
     dat van onderen opkomt hoort bij de duim en kan schuiven. */
  /* Let op de [open]: een dialog zonder dat attribuut hoort onzichtbaar te
     zijn, en dat regelt de browser met display:none. Zet je hier display:flex
     op álle dialogs, dan staan ze alle zeven open onder aan elke pagina. */
  dialog[open] {
    position: fixed; width: 100%; max-width: none; margin: 0; top: auto; bottom: 0;
    border-radius: 16px 16px 0 0; max-height: 88vh;
    display: flex; flex-direction: column;
  }
  dialog form { overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  dialog .voet { position: sticky; bottom: 0; background: var(--kaart);
                 padding: 10px 0 calc(4px + env(safe-area-inset-bottom)); margin-top: 12px; }
  dialog .voet .knop { flex: 1; justify-content: center; min-height: 44px; }

  /* --- aanraken ---------------------------------------------------------- */

  /* Onder de 16px zoomt Safari in zodra een veld focus krijgt, en dan staat je
     hele formulier scheef. */
  input, select, textarea { font-size: 16px; padding: 10px 12px; }
  .knop { min-height: 44px; padding: 10px 14px; }
  .knop.klein { min-height: 40px; }
  .knop.toevoegen, .knop.weghalen { width: 40px; min-height: 40px; font-size: 18px; }
  .knop.uitklap { min-height: 32px; padding: 2px 9px; }

  /* --- tabellen worden kaartjes ----------------------------------------- */

  /* De kolomnaam komt uit de <thead> en wordt door mobiel.js op elke cel gezet.
     Niet met de hand in veertien sjablonen: dan is er één plek om te
     onderhouden, en doet een tabel die er later bijkomt vanzelf mee. */
  table.kaarten thead { display: none; }
  table.kaarten, table.kaarten tbody, table.kaarten tfoot { display: block; }
  table.kaarten tr {
    display: block; padding: 12px 0; border-bottom: 1px solid var(--raster);
  }
  table.kaarten tr:hover { background: none; }
  table.kaarten td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 3px 0; border: 0; text-align: right;
  }
  table.kaarten td::before {
    content: attr(data-kolom); flex: 0 0 auto; text-align: left;
    font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--inkt-3); font-weight: 600;
  }
  /* De eerste cel is de naam: die krijgt geen etiket maar de hoofdrol. */
  table.kaarten td:first-child { display: block; text-align: left; font-size: 16px;
                                 font-weight: 600; margin-bottom: 4px; }
  table.kaarten td:first-child::before { content: none; }
  table.kaarten td:empty { display: none; }
  /* Een lege kolomkop betekent: hier staan knoppen. Geen etiket, en de knoppen
     mogen de volle breedte hebben. */
  table.kaarten td[data-kolom=""] { justify-content: flex-end; padding-top: 8px; }
  table.kaarten td[data-kolom=""]::before { content: none; }
  table.kaarten tfoot td { border-top: 1px solid var(--basislijn); }
  /* De ingesprongen regels per plek horen bij de kaart erboven. */
  table.kaarten tr.plek { background: color-mix(in srgb, var(--inkt) 3%, transparent);
                          border-radius: 10px; padding: 10px 12px; margin-bottom: 4px; }

  /* Wat een invulraster is blijft een invulraster; kaartjes maken daar een
     onnavolgbaar geheel van. Die schuift opzij. */
  .tabelrol { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabelrol table { min-width: 620px; }

  /* --- de rest ----------------------------------------------------------- */

  .hoofdgetal { font-size: 40px; }
  .kaart { padding: 14px; }
  .rooster { gap: 12px; }
  /* De grote tegel heeft `grid-column: span 2` in het sjabloon staan. Met één
     kolom maakt dat er stiekem twee, en dan staan de tegels eronder naast
     elkaar te verkruimelen. */
  .rooster > * { grid-column: auto !important; }
  .veldrij { grid-template-columns: 1fr; }
  .grafiek { height: auto !important; }
}

/* ==========================================================================
   HET INLOGSCHERM

   Stil en zakelijk: merkteken, naam, één knop. Wat er niet staat is even
   bewust als wat er wel staat -- geen kader, geen uitleg, geen tweede kop.
   Wie hier komt wil naar binnen.
   ========================================================================== */

.poortpagina {
  display: flex; align-items: center; justify-content: center;
  min-height: 100svh; padding: 24px;
  /* Een spoor van kleur onder het merkteken, verder niets. Genoeg om het geen
     leeg vel te laten lijken, te weinig om op te vallen. */
  background:
    radial-gradient(60% 40% at 50% 22%,
                    color-mix(in srgb, var(--reeks-1) 7%, transparent), transparent 70%),
    var(--vlak);
}

.poort { width: 100%; max-width: 320px; text-align: center; }

.poort .merkteken {
  width: 56px; height: 56px; border-radius: 14px; display: block; margin: 0 auto 18px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .10);
}

.poort h1 {
  font-size: 26px; font-weight: 600; letter-spacing: -.02em;
  margin: 0 0 28px; color: var(--inkt);
}

.poort .knop.primair { width: 100%; justify-content: center; min-height: 46px; font-size: 15px; }

/* Het wachtwoordveld: één label, één veld, één knop. Het label staat er voor wie
   met een schermlezer werkt en voor wie z'n wachtwoordkluis niet automatisch
   invult; verder valt er niets uit te leggen. */
.poort .poortform { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.poort .poortform label {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--inkt-3); font-weight: 600;
}
.poort .poortform input { width: 100%; min-height: 46px; font-size: 16px; }
.poort .poortform .knop { margin-top: 4px; }

.poort .poortlink { margin: 14px 0 0; }
.poort .poortlink a { color: var(--inkt-3); font-size: 13px; text-decoration: none; }
.poort .poortlink a:hover { color: var(--inkt-2); text-decoration: underline; }

/* Twee dingen die wél moeten spreken: een fout wachtwoord, en een dichte deur. */
.poort .poortmelding {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 9px; font-size: 14px;
  background: color-mix(in srgb, var(--af) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--af) 35%, transparent);
  color: var(--inkt);
}
.poort .poortslot { color: var(--inkt-2); font-size: 15px; margin: 0; }

/* Een rijtje feiten met een vetgedrukt kopje per regel: gebruikt bij "Wie kan
   hierbij" in de instellingen. Geen tabel, want er valt niets te vergelijken. */
.rijtje { list-style: none; margin: 0; padding: 0; }
.rijtje li { padding: 9px 0; border-bottom: 1px solid var(--raster); font-size: 14px; }
.rijtje li:last-child { border-bottom: none; }
.rijtje strong { display: block; margin-bottom: 2px; }
.rijtje .dun { color: var(--inkt-3); }