/*
  De opmaak van beide schermen onder Apps: Voorraad (index.html) en Content
  (content.html). Tot 21 oktober 2026 stond dit inline in index.html; het staat
  apart sinds er een tweede pagina is, zodat die twee niet uit elkaar lopen.
*/

/*
  Op 20 oktober 2026 opnieuw opgezet, nadat Bram zei dat hij er niets van snapte
  en dat het er niet uitzag. Wat er stond: vijf tabbladen, vijfentwintig
  dichtgeklapte grijze kaarten met een conclusiezin in de taal van de rekenkern,
  en omdat er nog niets verkocht is zei bijna alles "Onvoldoende data". Nergens
  was te zien wat er wél is: de kast.

  Nu staat de kast voorop, als de echte charmfoto's per thema met het aantal
  eronder. Daaronder de vragen die je aan dit scherm stelt, in gewone woorden,
  met de oude blokken eronder als uitklapregels. De tabbladen zijn weg; de
  analyse rekent pas als je hem openklapt.

  Kleuren uit theme/assets/il-tokens.css, als rollen. Er is bewust geen donkere
  variant: deze pagina hangt in een iframe in de lichte Shopify-admin. De drie
  statuskleuren zijn semantisch en geen accent; naast elke kleur staat het woord,
  want de kleur draagt de betekenis nooit alleen.
*/
:root {
  color-scheme: light;
  --grond: #ffffff;
  --papier: #f7f5f2;
  --papier-2: #f4f2ee;
  --rand: #efece6;
  --inkt: #1a1a1a;
  --inkt-2: #4b4d52;
  --inkt-3: #6e6e69;
  --lijn: rgba(0, 0, 0, 0.12);
  --lijn-zacht: rgba(0, 0, 0, 0.08);
  --goed: #1a7f4b;
  --goed-zacht: rgba(26, 127, 75, 0.12);
  --krap: #b8741a;
  --krap-zacht: rgba(184, 116, 26, 0.12);
  --laag-1: #1a1a1a;
  --laag-2: #6e6e69;
  --laag-3: #a8a8a3;
  --laag-4: #d5d4cf;
  --op: #b42318;
  --op-zacht: rgba(180, 35, 24, 0.1);
  --neutraal: #c9c8c3;
  --accent: #a9503f;
  --accent-zacht: #ffd9d2;
  /* Het logoroze (il-tokens.css, route A van 21 oktober 2026), voor het
     contentscherm. --roze haalt op wit 3,1:1 en is dus nooit kleine tekst;
     daarvoor is --roze-inkt. */
  --roze: #ff48b0;
  --roze-inkt: #c2187a;
  --roze-zacht: #ffe3f2;
  --schaduw: 0 10px 28px rgba(26, 26, 26, 0.07), 0 1px 2px rgba(26, 26, 26, 0.05);
  --kopletter: "Lora", Georgia, "Times New Roman", serif;
  --letter: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Oude rollen die app.js nog zet of leest. */
  --surface: var(--grond);
  --surface-2: var(--papier);
  --ink: var(--inkt);
  --ink-2: var(--inkt-2);
  --ink-3: var(--inkt-3);

  /*
    De maten van een balkenrij. Ze staan hier en niet in de regels zelf, want de
    drempellijn moet precies boven de spoorkolom uitkomen en rekent hiermee.
  */
  --naamkolom: 150px;
  --waardekolom: 68px;
  --gat: 10px;
  --rijpad: 6px;
}

@media (max-width: 560px) {
  :root {
    --naamkolom: 92px;
    --waardekolom: 54px;
    --gat: 6px;
  }
}

* { box-sizing: border-box; min-width: 0; }

body {
  margin: 0;
  padding: 28px 24px 64px;
  background: var(--grond);
  color: var(--inkt);
  font: 14px/1.5 var(--letter);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (max-width: 560px) {
  body { padding: 20px 16px 48px; }
}

main, section, header { min-width: 0; }

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
.stil { color: var(--inkt-2); }
.fijn { color: var(--inkt-3); font-size: 12px; }
.lopend { max-width: 70ch; }

:is(a, button, input, select, summary, [tabindex]):focus-visible,
.euro:focus-within {
  outline: 2px solid var(--inkt);
  outline-offset: 2px;
}

/* ---- De kop ---- */

.kop { margin-bottom: 28px; }
.kopregel-boven { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.kop h1 {
  font: 600 36px/1.08 var(--kopletter);
  letter-spacing: -0.02em;
}
.kop .onder {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--inkt-3);
  font-size: 12px;
}
.standtegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.standtegel { background: var(--papier); border-radius: 14px; padding: 14px 16px; }
.standtegel .getal {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.standtegel .bij { color: var(--inkt-2); font-size: 12px; margin-top: 4px; }
.standtegel.goed .getal { color: var(--goed); }
.standtegel.krap .getal { color: var(--krap); }
.standtegel.op .getal { color: var(--op); }
@media (max-width: 560px) {
  .kop h1 { font-size: 30px; }
  .standtegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .standtegel .getal { font-size: 28px; }
}

/* Een knop die leest als een tekstlink met een pijl. */
.tekstknop {
  font: inherit;
  color: var(--inkt);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--lijn);
}
.tekstknop:hover { text-decoration-color: var(--inkt); }
.tekstknop::after { content: " →"; }
.tekstknop:disabled { color: var(--inkt-3); cursor: default; }

/* ---- Meldingen ---- */

.melding {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: -16px 0 28px;
  max-width: 80ch;
  font-size: 12px;
  color: var(--inkt-3);
}
.melding.stuk, .melding.let-op {
  font-size: 14px;
  color: var(--inkt);
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--papier);
  margin: 0 0 24px;
}
.melding::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--neutraal);
}
.melding.rustig::before { background: var(--goed); }
.melding.let-op::before { background: var(--krap); }
.melding.stuk { background: var(--op-zacht); }
.melding.stuk::before { background: var(--op); }
.melding strong { display: block; margin-bottom: 2px; }
.melding pre {
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  color: var(--inkt-2);
  max-height: 180px;
  overflow: auto;
}

/* ---- Dit vraagt aandacht ---- */

#nutelt { margin-bottom: 36px; }
#nutelt.rustig { display: none; }
.inzichten li { grid-template-columns: 12px minmax(0, 1fr) auto; }
#nutelt h2 { font: 600 22px/1.2 var(--kopletter); letter-spacing: -0.01em; margin-bottom: 6px; }
.inzichten { list-style: none; margin: 0; padding: 0; }
.inzichten li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--lijn-zacht);
}
.inzichten li:first-child { border-top: 0; }
.inzichten li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neutraal);
  position: relative;
  top: 1px;
}
.inzichten li.stuk::before { background: var(--op); }
.inzichten li.let-op::before { background: var(--krap); }
.inzichten li.rustig::before { background: var(--goed); }
.inzichten .wat { min-width: 0; overflow-wrap: anywhere; }
.inzichten .wat strong { display: block; font-weight: 600; }
.inzichten .wat span { color: var(--inkt-2); display: block; }
.inzichten button { white-space: nowrap; }
#nuteltMeer { margin-top: 8px; }
#nuteltLeeg { color: var(--inkt-2); }

/* ---- De kast ---- */

#kast { margin-bottom: 32px; }
#kast > h2 { font: 600 22px/1.2 var(--kopletter); letter-spacing: -0.01em; }
.themas { display: grid; gap: 22px; margin-top: 14px; }
.thema .themakop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  margin-bottom: 8px;
}
.thema h3 {
  font: 600 18px/1.25 var(--kopletter);
  letter-spacing: -0.01em;
}
/* De maatbalkjes naast de themanaam, als drie korte sporen op één regel. */
.thema .maten { display: flex; gap: 14px; flex-wrap: wrap; }
.thema .maten .rij {
  display: grid;
  grid-template-columns: 56px 64px 24px;
  gap: 6px;
  padding: 0;
  align-items: center;
}
.thema .maten .rij:hover { background: transparent; }
.thema .maten .rij .naam { font-size: 11px; color: var(--inkt-3); white-space: nowrap; }
.thema .maten .rij .spoor { height: 10px; }
.thema .maten .rij .staaf { height: 6px; }
.thema .maten .rij .waarde { font-size: 12px; color: var(--inkt); font-weight: 600; }
/* De lagen van een thema stromen achter elkaar; elke laag is één groep met een
   klein woord erboven, en de groepen lopen over naar de volgende regel. */
.lagen { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-start; }
.laag { min-width: 0; }
.laag .laagnaam { font-size: 11px; color: var(--inkt-3); margin-bottom: 4px; }
.charms { display: flex; flex-wrap: wrap; gap: 8px; }
.charm {
  width: 84px;
  background: var(--grond);
  border-radius: 12px;
  box-shadow: var(--schaduw);
  padding: 5px 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 560px) {
  .charm { width: calc((100% - 24px) / 4); }
  .lagen { gap: 10px 14px; }
}
.charm .foto {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--papier);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}
.charm .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.charm .foto .letter { font: 600 22px/1 var(--kopletter); color: var(--inkt-3); }
.charm .foto .aantal {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--grond);
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.18);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.charm.op .foto { box-shadow: inset 0 0 0 2px var(--op); }
.charm.op .foto img { opacity: 0.45; }
.charm.krap .foto { box-shadow: inset 0 0 0 2px var(--krap); }
.charm.op .foto .aantal { color: var(--op); }
.charm.krap .foto .aantal { color: var(--krap); }
.charm .naam {
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--inkt-2);
  overflow-wrap: anywhere;
  text-align: center;
}
.charm .woord { font-size: 10px; color: var(--inkt-3); text-align: center; }
.charm.op .woord { color: var(--op); }
.charm.krap .woord { color: var(--krap); }

/* ---- De vragen ---- */

.blokken {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
@media (max-width: 560px) {
  .blokken { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
section.blok {
  background: var(--grond);
  border-radius: 14px;
  box-shadow: var(--schaduw);
  padding: 14px 16px;
  min-width: 0;
}
section.blok:has(details[open]) { grid-column: 1 / -1; }
section.aangewezen { box-shadow: var(--schaduw), 0 0 0 2px var(--inkt); }

details.vouw > summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
details.vouw > summary::-webkit-details-marker { display: none; }
.kopregel { min-width: 0; display: contents; }
.kopregel h2 { font-size: 12px; font-weight: 500; color: var(--inkt-2); line-height: 1.3; order: 1; }
.kengetal {
  order: 2;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kengetal small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--inkt-3);
  letter-spacing: 0;
  margin-top: 2px;
}
.kengetal.goed { color: var(--goed); }
.kengetal.krap { color: var(--krap); }
.kengetal.op { color: var(--op); }
.vouwknop { display: none; }
details.vouw > summary::after {
  content: "↓";
  order: 3;
  color: var(--inkt-3);
  font-size: 12px;
}
details.vouw[open] > summary::after { content: "↑"; }
.lijf { padding: 16px 0 6px; }
.lijf > p.fijn, .lijf > p.stil, .lijf > .uitleg { display: none; }
.lijf > #bestelMelding { display: block; }

/* ---- Bouwstenen die app.js tekent ---- */

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.tegel { background: var(--papier); border-radius: 12px; padding: 12px 14px; }
.tegel .getal {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tegel .bij { color: var(--inkt-2); font-size: 12px; margin-top: 2px; }

.balken { display: flex; flex-direction: column; gap: 6px; }
.balken.breed { --naamkolom: 210px; --waardekolom: 84px; }
@media (max-width: 560px) {
  .balken.breed { --naamkolom: 110px; --waardekolom: 70px; }
}
.rij {
  display: grid;
  grid-template-columns: var(--naamkolom) minmax(0, 1fr) var(--waardekolom);
  align-items: center;
  gap: var(--gat);
  padding: 3px var(--rijpad);
  border-radius: 8px;
}
.rij:hover { background: var(--papier); }
.rij .spoor { position: relative; height: 22px; display: flex; align-items: center; }
.rij .staaf { height: 10px; border-radius: 0 4px 4px 0; min-width: 2px; background: var(--neutraal); }
.rij .staaf.goed { background: var(--goed); }
.rij .staaf.krap { background: var(--krap); }
.rij .staaf.op { background: var(--op); }
.rij .staaf.accent { background: var(--inkt-2); }
.rij .staaf.laag-1 { background: var(--laag-1); }
.rij .staaf.laag-2 { background: var(--laag-2); }
.rij .staaf.laag-3 { background: var(--laag-3); }
.rij .staaf.laag-4 { background: var(--laag-4); }
.stip.laag-1 { background: var(--laag-1); }
.stip.laag-2 { background: var(--laag-2); }
.stip.laag-3 { background: var(--laag-3); }
.stip.laag-4 { background: var(--laag-4); }
/* Een smalle balkenrij, voor drie maten onder een thema. */
.balken.smal { --naamkolom: 64px; --waardekolom: 36px; gap: 3px; margin-top: 8px; max-width: 420px; }
.balken.smal .rij { padding: 1px 0; }
.balken.smal .rij .spoor { height: 16px; }
.balken.smal .rij .staaf { height: 8px; }
.balken.smal .rij .naam { font-size: 12px; color: var(--inkt-3); }
.balken.smal .rij .waarde { font-size: 13px; color: var(--inkt); }
.balken.smal .rij:hover { background: transparent; }

/* De kalenderstrip van de kerstbestelling: één lijn, vier punten. */
.strip { position: relative; height: 92px; margin: 6px 6px 14px; }
.strip .as { position: absolute; left: 0; right: 0; top: 45px; height: 2px; background: var(--lijn); }
.strip .gedaan { position: absolute; top: 45px; height: 2px; background: var(--inkt); }
.strip .dagen {
  position: absolute; top: 20px; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.strip .punt {
  position: absolute; top: 46px; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--inkt); box-shadow: 0 0 0 2px var(--grond);
}
.strip .punt.krap { background: var(--krap); }
.strip .punt.neutraal { background: var(--neutraal); }
.strip .label {
  position: absolute; transform: translateX(-50%); text-align: center;
  font-size: 11px; color: var(--inkt-3); white-space: nowrap; line-height: 1.25;
}
.strip .label.boven { top: 0; }
.strip .label.onder { top: 58px; }
.strip .label.vet span { color: var(--inkt); font-weight: 600; }
.strip .label small { display: block; font-size: 11px; }
.strip .label.links { transform: none; text-align: left; }
.strip .label.rechts { transform: translateX(-100%); text-align: right; }
.rij .naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.rij .waarde { text-align: right; font-variant-numeric: tabular-nums; color: var(--inkt-2); font-size: 12px; line-height: 1.25; }
.rij .waarde .woord { color: var(--inkt-3); font-size: 11px; white-space: nowrap; }
.rij .waarde .woord.kanaal { white-space: normal; }

.metLijn { position: relative; padding-bottom: 20px; }
.drempel {
  position: absolute;
  top: 0;
  bottom: 20px;
  width: 2px;
  background: var(--inkt-3);
  opacity: 0.5;
  left: calc(
    var(--rijpad) + var(--naamkolom) + var(--gat)
    + (100% - 2 * var(--rijpad) - var(--naamkolom) - var(--waardekolom) - 2 * var(--gat)) * var(--f, 0)
  );
}
.drempel span { position: absolute; bottom: -19px; left: -4px; font-size: 11px; color: var(--inkt-3); white-space: nowrap; }

.staat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--inkt-2); }
.stip { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stip.goed { background: var(--goed); }
.stip.krap { background: var(--krap); }
.stip.op { background: var(--op); }
.stip.neutraal { background: var(--neutraal); }
.stip.accentstip { background: var(--inkt-2); }
.stip.lijn { width: 14px; height: 3px; border-radius: 2px; background: var(--inkt-2); }

.grafiek { width: 100%; height: 150px; display: block; overflow: visible; }
@media (max-width: 560px) { .grafiek { height: 120px; } }
.grafiek .staafje { fill: var(--inkt-2); }
.grafiek .voorraadlijn { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafiek .as { stroke: var(--lijn); stroke-width: 1; }
.grafiek .gatvlak { fill: var(--papier); }
.asrand { display: flex; justify-content: space-between; font-size: 11px; color: var(--inkt-3); margin-top: 2px; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }

/*
  Het contentscherm als profiel, sinds 21 oktober 2026 (huisstijl/contentdashboard-
  keuzes.js, Bram koos "het profiel"): elke post als cover van 9:16 zoals op
  TikTok, met de views erop. Op een telefoon drie naast elkaar, zoals in de app;
  breder zoveel als er passen, maar nooit kleiner dan 104 pixels, want dan is
  een slide niet meer te lezen.
*/
.content-main { max-width: 1100px; display: flex; flex-direction: column; gap: 32px; }
.deelkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.deelkop h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--inkt-3); }
.deelkop .aantal { font-size: 12px; font-weight: 700; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.profiel { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 3px; }
.cover {
  position: relative; display: block; aspect-ratio: 9 / 16; max-width: 100%;
  background: var(--papier-2); border-radius: 4px; overflow: hidden; color: inherit; text-decoration: none;
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .zonder {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 8px; font-size: 11px; line-height: 1.25; color: var(--inkt-2); text-align: center;
}
.cover .zonder small { font-size: 10px; color: var(--inkt-3); }
.cover .views {
  position: absolute; left: 6px; bottom: 5px; color: #fff; font-weight: 700; font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums;
}
.cover .views::before { content: "▷ "; font-size: 9px; }
.cover .zonder ~ .views { color: var(--inkt); text-shadow: none; }
.cover .nr {
  position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--roze); color: #fff; font-weight: 700; font-size: 12px; line-height: 24px; text-align: center;
}
.cover .chip {
  position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff;
}
.cover .chip.roze { background: var(--roze-inkt); }
.cover .band {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 11px; font-weight: 700;
  background: var(--roze-zacht); color: var(--roze-inkt);
}
a.cover:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.meer {
  aspect-ratio: 9 / 16; border: 0; border-radius: 4px; background: var(--papier); cursor: pointer;
  font: 600 20px var(--letter); color: var(--inkt-2); font-variant-numeric: tabular-nums;
}
.meer:hover { background: var(--papier-2); }
.leegvak { color: var(--inkt-3); font-size: 13px; padding: 14px; background: var(--papier); border-radius: 10px; }

/* De drie kleine blokken: op een telefoon onder elkaar, breder naast elkaar. */
.drietal { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 28px; }
.groot { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.groot small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--inkt-2); }
.groot.roze { color: var(--roze-inkt); }

.bord { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.soort { display: flex; flex-direction: column; gap: 5px; }
.soort .naam { font-size: 12px; font-weight: 600; color: var(--inkt-2); line-height: 1.2; }
.soort .per { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.soort.wint .per { color: var(--roze-inkt); }
.soort .spoor-k { height: 6px; border-radius: 3px; background: var(--papier); overflow: hidden; }
.soort .spoor-k i { display: block; height: 100%; background: var(--inkt-2); border-radius: 3px; }
.soort.wint .spoor-k i { background: var(--roze); }
.soort .woord { font-size: 11px; color: var(--inkt-3); }
.pillen { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pil { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--papier); color: var(--inkt-2); }
.pil.roze { background: var(--roze-zacht); color: var(--roze-inkt); }

.weken { display: flex; gap: 6px; align-items: flex-end; margin-top: 12px; }
.week { flex: 1; display: flex; flex-direction: column-reverse; gap: 3px; }
.week i { height: 10px; border-radius: 3px; background: var(--inkt-2); }
.week i.open { background: none; border: 1px dashed var(--laag-3); }
.week.nu i:not(.open) { background: var(--roze); }

.grafiek .staafje.postdag { fill: var(--roze); }
.grafiek .bestelpunt { fill: var(--goed); }
.stip.postdagstip { background: var(--roze); }

.spoor.midden { display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; }
.spoor.midden::before { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--lijn); }
.spoor.midden .staaf { border-radius: 4px; }
.spoor.midden .links, .spoor.midden .rechts { width: 100%; display: flex; }
.spoor.midden .links { justify-content: flex-end; }
.spoor.midden .rechts { justify-content: flex-start; }

.invoer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.euro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--grond);
}
.euro input { border: 0; background: transparent; color: var(--inkt); font: inherit; font-variant-numeric: tabular-nums; width: 90px; }
.euro input:focus { outline: none; }

button {
  font: inherit;
  color: var(--inkt);
  background: var(--grond);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover { background: var(--papier); }
button.primair { background: var(--inkt); color: var(--grond); border-color: var(--inkt); }
button.primair:hover { background: #333; }
button[aria-pressed="true"] { background: var(--papier); border-color: var(--inkt-3); }

.inzichten button, #nuteltMeer {
  border: 0;
  background: none;
  padding: 0;
  color: var(--inkt);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--lijn);
}
.inzichten button:hover, #nuteltMeer:hover { background: none; text-decoration-color: var(--inkt); }
.inzichten button::after, #nuteltMeer::after { content: " →"; }

.uitkomst {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: baseline;
  padding: 14px 16px;
  background: var(--papier);
  border-radius: 12px;
  margin-bottom: 14px;
}
.held { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--lijn-zacht); }
th:first-child, td:first-child { text-align: left; }
th { font-weight: 500; color: var(--inkt-2); font-size: 12px; }
tbody tr:hover { background: var(--papier); }
caption.leeg { caption-side: top; text-align: left; color: var(--inkt-2); padding: 8px 0; }

.leeg { color: var(--inkt-2); padding: 8px 0; }
.schuif { overflow-x: auto; }
[hidden] { display: none !important; }

.voet {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lijn-zacht);
}
.voet .knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.voet .bedrag { font-weight: 600; font-variant-numeric: tabular-nums; }

.terugval { display: block; margin-top: 10px; }
.terugval textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--inkt);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 8px;
  resize: vertical;
}

.verdeling { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--papier); margin: 14px 0 10px; }
.verdeling span { display: block; height: 100%; }
.verdeling span:nth-child(1) { background: var(--inkt); }
.verdeling span:nth-child(2) { background: var(--inkt-2); }
.verdeling span:nth-child(3) { background: #9a9a95; }
.verdeling span:nth-child(4) { background: var(--neutraal); }

.meter { display: block; height: 6px; border-radius: 3px; background: var(--inkt-2); min-width: 2px; margin-top: 3px; }
td.metmeter { min-width: 96px; }

.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--lijn);
  margin-left: 4px;
  position: relative;
}
.tijdlijn li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutraal);
  border: 2px solid var(--grond);
}
.tijdlijn li.zwaar::before { background: var(--op); }
.tijdlijn li .wanneer { font-variant-numeric: tabular-nums; color: var(--inkt-2); font-size: 12px; }
.tijdlijn li .wat { font-size: 13px; }
/* Geen uitlegzin onder een gebeurtenis: de regel zelf is het nieuws. */
.tijdlijn li .wat .fijn { display: none; }

.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

select {
  font: inherit;
  color: var(--inkt);
  background: var(--grond);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 6px 10px;
  max-width: 100%;
}

.skelet { display: flex; flex-direction: column; gap: 10px; }
.skelet div { height: 14px; border-radius: 7px; background: var(--papier); animation: adem 1.4s ease-in-out infinite; }
.skelet div:nth-child(2) { width: 80%; animation-delay: 0.15s; }
.skelet div:nth-child(3) { width: 55%; animation-delay: 0.3s; }
@keyframes adem { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .skelet div { animation: none; } }

/* Het submenu in de linkerbalk. App Bridge leest dit element en tekent het in de
   admin; buiten de admin (de proef, of de pagina los geopend) hoort het niet als
   twee kale links bovenaan te staan. */
ui-nav-menu { display: none; }


/* Het contentscherm heeft drie tegels: op een telefoon naast elkaar, anders staat
   de derde alleen op een rij. */
.standtegels.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .standtegels.drie .getal { font-size: 24px; }
}
.standtegels.drie { max-width: 1100px; }