/* Tolinzicht — huisstijl in de lijn van ok.nl.
 *
 * Lichte, witte opzet: witte zijbalk met een rode pil op het actieve item,
 * rode sectiekoppen, kaarten met een haarlijn in plaats van een schaduw, en
 * ruime witruimte. Geen merktekens: dit is een onafhankelijk hulpmiddel en het
 * mag er niet uitzien als een officiële omgeving van iemand anders.
 *
 * De accentkleur is #c8102e, het rood van het OK-woordmerk en op ok.nl zelf de
 * kleur van de bovenbalk, de koppen en de knoppen; de rest van die site is wit
 * met neutraal grijze tekst. Dat sluit aan op de opzet die er al stond — er is
 * alleen van hue gewisseld, groen eruit, rood erin.
 *
 * Eén ding wringt bij die wissel: rood was de kleur van slecht nieuws. De
 * merkkleur gaat voor, dus de signalen zijn opgeschoven. Slecht nieuws is nu
 * een dieper rood dat niet voor een knop kan doorgaan (--crit), en "boven het
 * gemiddelde" is amber (--warn) in plaats van rood — het staat naast de rode
 * staven in dezelfde tabel en moet daar in één oogopslag van te scheiden zijn.
 *
 * De kleuren zitten in variabelen met een neutrale naam (--brand). Ze heetten
 * --brand en dat is precies de fout die je één keer maakt: de naam van een
 * partner in een variabele zetten en er daarna rood in moeten stoppen.
 *
 * Met de hand geschreven CSS in plaats van Tailwind, anders dan Els in the
 * City. Reden: de opmaak van het prototype bestond al en werkt, en zonder
 * Tailwind heeft het image geen node-stap nodig — dat scheelt de helft van de
 * bouwtijd.
 *
 * Eén thema, altijd licht. Geen donkere variant en geen omschakelaar: dit is
 * een scherm om aan een klant te laten zien, en dan is één voorspelbaar beeld
 * meer waard dan een keuze. Het scherm volgt dus ook prefers-color-scheme niet.
 *
 * De datakleuren zijn nagerekend tegen de witte ondergrond (lichtheidsband,
 * chroma, contrast >= 3:1). Verander ze niet op het oog.
 */

:root {
  /* De neutralen zijn écht neutraal (R=G=B), geen rood erin. Dat is het
     verschil tussen "een wit portaal met een rood accent" en "een rode tool":
     de kleur van de negentig procent van het scherm die géén accent is bepaalt
     hoe het geheel leest. Waarden van ok.nl overgenomen (#212121, #464646,
     #6d6e71, #f4f4f4): ook die site is een wit vlak met neutraal grijze tekst,
     waarin het rood alleen de bovenbalk, de koppen en de knoppen doet. */
  --page:        #f4f4f4;
  --surface:     #ffffff;
  --surface-2:   #f7f7f7;
  --surface-3:   #ebebeb;

  --text:        #212121;
  --text-2:      #464646;
  --muted:       #6d6e71;

  /* Rood is een accent en geen ondergrond: de actieve pil, de primaire knop,
     de sectiekoppen. Verder niets. Bij rood is dat strenger te nemen dan bij
     groen — dezelfde hoeveelheid schreeuwt harder. */
  --brand:       #c8102e;
  --brand-700:   #aa0c27;
  --brand-800:   #8c0a20;
  --brand-900:   #6e0819;
  --link:        #1a6dd8;
  --on-brand:    #ffffff;
  /* Alleen nog de focusring. Geen merkteken: een gele rand op een rode knop is
     te zien, een rode rand niet. */
  --focus:       #ffc72c;

  /* Datamarkeringen. Nagerekend: contrast >= 3:1 op de ondergrond. */
  --mark:        #c8102e;
  --mark-soft:   #fbeaed;

  --grid:        #ececec;
  --axis:        #c7c7c7;
  --line:        #e8e8e8;

  --good:        #0a7a2f;
  --warn:        #a06a00;
  /* Dieper dan --brand, en dat is de bedoeling: een foutmelding mag niet voor
     een merkelement of een knop-in-hover doorgaan. 8,7:1 op wit. */
  --crit:        #96121f;

  /* De lichte tint bij --warn, opgezet zoals --mark-soft bij --brand: een wash
     van dezelfde kleur waar de volle kleur de rand en de kop draagt. Dit is de
     aandachtskleur van het scherm - rood is de kleur van een handeling, amber
     van iets dat opgemerkt wil worden. Ze zitten daarom nooit in de weg: een
     rode knop in een amber vlak blijft de knop. */
  --warn-soft:   #fdf3e3;

  --radius:      8px;
  --shadow:      none;  /* haarlijnen in plaats van schaduw */
  --sidebar-w:   246px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  color: var(--text);
  padding: 22px 16px;
  display: flex; flex-direction: column; gap: 28px;
  border-right: 1px solid var(--line);
}
/* De merknaam is een link. Geen onderstreping en geen linkkleur: hij hoort er
   hetzelfde uit te zien als voorheen, hij doet er alleen iets bij. */
.sidebar .brand { padding: 0 8px; display: block; text-decoration: none; color: inherit; }
.sidebar .brand:hover .name { color: var(--brand-700); }
.sidebar .brand .name {
  display: block; font-size: 1.24rem; font-weight: 750; letter-spacing: -.025em;
  color: var(--brand);
}
.sidebar .brand .tag {
  display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-top: 2px;
}
.sidebar nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar nav a {
  display: block; padding: 9px 13px; border-radius: 6px;
  color: var(--text-2); text-decoration: none;
  font-size: .93rem; font-weight: 600;
}
.sidebar nav a:hover { background: var(--surface-2); color: var(--text); }
/* Het actieve item is een volle rode pil. Geen
   randje of vette letter: die zijn op een witte zijbalk nauwelijks te zien. */
.sidebar nav a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.sidebar .foot {
  margin-top: auto; padding: 12px 8px 0;
  border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--muted); line-height: 1.45;
}

.content { display: flex; flex-direction: column; min-width: 0; }

/* ---------- appbar + filters ---------- */
.appbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 12px 22px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.appbar .heading h1 {
  margin: 0; font-size: 1.12rem; font-weight: 720; letter-spacing: -.015em;
  color: var(--brand);
}
.appbar .heading p { margin: 0; font-size: .82rem; color: var(--muted); }
/* Op de kop en niet op de filters, zodat alles erna rechts landt ook wanneer de
   filterbalk er niet is - de uploadpagina toont geen cijfers en dus geen
   periodekeuze, en de uitlogknop hoort daar even goed rechtsboven te staan. */
.appbar .heading { margin-right: auto; }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* De uitklapmenu's zijn <details>: geen JavaScript nodig, en ze werken met
   het toetsenbord zonder dat daar iets voor geregeld hoeft te worden. */
details.pop { position: relative; }
details.pop > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-2); font-size: .87rem; font-weight: 600;
  white-space: nowrap;
}
details.pop > summary::-webkit-details-marker { display: none; }
details.pop > summary::after { content: "▾"; color: var(--muted); font-size: .8rem; }
details.pop > summary:hover { border-color: var(--axis); }
details.pop[open] > summary { border-color: var(--brand); }
details.pop .menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.10);
  min-width: 232px; padding: 5px;
  /* Ruim genoeg voor het datumformulier eronder; bij een lang wagenpark mag
     de lijst schuiven, maar de knop "Toepassen" mag nooit buiten beeld vallen. */
  max-height: min(74vh, 560px); overflow-y: auto;
}
details.pop .menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 7px;
  color: var(--text); text-decoration: none; font-size: .88rem;
}
details.pop .menu a:hover { background: var(--surface-2); }
details.pop .menu a[aria-current="true"] { font-weight: 700; }
details.pop .menu a .check { width: 14px; color: var(--brand); flex: 0 0 auto; }
details.pop .menu hr { border: none; border-top: 1px solid var(--line); margin: 5px 0; }

.btn {
  display: inline-block; white-space: nowrap;
  background: var(--brand); color: var(--on-brand); text-decoration: none;
  padding: 8px 15px; border-radius: 6px; font-weight: 650; font-size: .87rem;
  border: 1px solid transparent;
}
.btn:hover { background: var(--brand-700); }
.btn.ghost {
  background: var(--surface-2); color: var(--text); border-color: var(--line);
}
.btn.ghost:hover { background: var(--surface-3); }

main { padding: 22px; min-width: 0; }

/* ---------- demo notice ---------- */
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: 13px 17px; margin-bottom: 18px;
}
.notice p { margin: 0; font-size: .9rem; color: var(--text-2); }
.notice strong { color: var(--text); }
.notice form { margin-left: auto; flex: 0 0 auto; }
.notice .btn { padding: 6px 13px; font-size: .82rem; }

/* ---------- hero + tiles ---------- */
/* Wit met een haarlijn, net als de rest. Het bedrag draagt het scherm door
   zijn formaat; een rood vlak eromheen zou het rustige witte beeld breken. */
.hero {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 14px;
}
.hero .label {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0;
}
/* Proportionele cijfers: tabular-nums maakt een groot getal juist los. */
.hero .value {
  font-size: 2.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  margin: 5px 0 0; color: var(--text);
}
.hero .foot { font-size: .86rem; color: var(--text-2); margin: 6px 0 0; }

.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 13px; margin-bottom: 18px;
}
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow);
}
.tile .label {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0;
}
.tile .value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 0; line-height: 1.15; }
.tile .foot { font-size: .79rem; color: var(--text-2); margin: 3px 0 0; }

/* ---------- cards ---------- */
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 15px; margin-bottom: 15px; }
@media (max-width: 1080px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 17px 19px; box-shadow: var(--shadow);
  min-width: 0;
}
.card-head { margin-bottom: 13px; }
.card-head h2 { font-size: 1rem; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--text); }
.card-head p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.empty { color: var(--muted); font-size: .9rem; margin: 0; padding: 22px 0; text-align: center; }

/* ---------- charts ---------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis-line { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick-text, .chart .cat-text {
  fill: var(--muted); font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-family: system-ui, sans-serif;
}
.chart .bar { fill: var(--mark); }
.chart .bar-muted { fill: var(--axis); }
.chart .value-text { fill: var(--text-2); font-size: 11.5px; font-weight: 600; font-family: system-ui, sans-serif; }
.chart .emphasis-text { fill: var(--text); font-size: 11.5px; font-weight: 700; font-family: system-ui, sans-serif; }

/* Het trefvlak loopt over de volle hoogte: een staaf van twee pixels is
   anders niet aan te wijzen. */
.chart .hit { fill: transparent; }
.chart .col:hover .hit, .chart .col:focus-visible .hit { fill: var(--mark-soft); }
.chart .col:focus-visible { outline: none; }
.chart .col:focus-visible .tip, .chart .col:hover .tip { opacity: 1; }
.chart .tip { opacity: 0; transition: opacity .12s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .chart .tip { transition: none; } }
.chart .tip rect { fill: var(--text); }
.chart .tip text { fill: var(--surface); font-size: 11.5px; font-weight: 600; font-family: system-ui, sans-serif; }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .89rem; }
th {
  text-align: left; font-size: .71rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 9px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plate {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: ui-monospace, Consolas, monospace; font-weight: 600; font-size: .85rem;
}

details.day { border-bottom: 1px solid var(--line); }
details.day:last-child { border-bottom: none; }
details.day > summary {
  cursor: pointer; padding: 11px 12px; display: flex; gap: 14px;
  align-items: baseline; list-style: none;
}
details.day > summary::-webkit-details-marker { display: none; }
details.day > summary:hover { background: var(--surface-2); }
details.day > summary .d-date { font-weight: 650; }
details.day > summary .d-meta { color: var(--muted); font-size: .83rem; }
details.day > summary .d-amount {
  margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums;
}
details.day .day-body { padding: 0 12px 14px; }

/* ---------- cta ---------- */
.cta {
  margin-top: 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow);
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.cta h2 { margin: 0 0 4px; font-size: 1.06rem; letter-spacing: -.01em; }
.cta p { margin: 0; color: var(--text-2); font-size: .91rem; max-width: 62ch; }
.cta .btn { margin-left: auto; padding: 11px 20px; font-size: .92rem; }

footer.site {
  padding: 4px 22px 30px;
  color: var(--muted); font-size: .8rem;
}

/* ---------- kaart ---------- */
.kaart-card { padding-bottom: 14px; }
.kaart-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.kaart-head > div:first-child { min-width: 0; flex: 1 1 260px; }

.segmented {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: 9px; overflow: hidden; flex: 0 0 auto;
}
.segmented a {
  padding: 7px 15px; font-size: .86rem; font-weight: 600;
  color: var(--text-2); text-decoration: none; background: var(--surface-2);
  white-space: nowrap;
}
.segmented a + a { border-left: 1px solid var(--line); }
.segmented a:hover { background: var(--surface-3); color: var(--text); }
.segmented a[aria-current="true"] { background: var(--brand); color: var(--on-brand); }

/* isolation: de kaart bouwt zijn eigen stapelcontext op, anders vallen de
   filtermenu's in de balk erboven erachter. Dat was in het prototype al een
   bug; hem hier meenemen scheelt hem opnieuw ontdekken. */
.kaart {
  height: 560px; border-radius: 10px; overflow: hidden;
  isolation: isolate; position: relative; z-index: 0;
  background: var(--surface-3);
}
@media (max-width: 860px) { .kaart { height: 400px; } }

.kaart-status {
  margin: 0 0 10px; padding: 9px 13px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .86rem; color: var(--text-2);
}
.kaart-legenda {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; flex-wrap: wrap;
}
.kaart-legenda .lg-label { font-size: .76rem; color: var(--muted); }
.kaart-legenda .lg-swatch {
  width: 30px; height: 10px; border-radius: 2px; display: inline-block;
}
.kaart-bron { margin: 12px 0 0; font-size: .78rem; color: var(--muted); }

/* ---------- landingspagina ---------- */
body.lp { background: var(--page); }

/* Flex, want er staat rechts iets naast de merknaam. Zonder display:flex deed
   het justify-content verderop niets en viel de inlogknop onder de merknaam
   aan de linkerkant - zichtbaar op inloggen, registreren en de uitleg. */
.lp-top {
  background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--line);
  padding: 16px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
/* De merknaam is hier een link naar de voordeur, net als in de zijbalk, en
   heeft dus dezelfde behandeling nodig: geen linkkleur en geen streep eronder.
   Zonder deze regel staat het merk op /inloggen en /registreren als een blauw
   onderstreepte link op het scherm, waar het op de voordeur een <div> is en
   dus vanzelf goed. */
.lp-top .brand { text-decoration: none; color: inherit; }
.lp-top .brand:hover .name { color: var(--brand-700); }
.lp-top .brand .name {
  font-size: 1.24rem; font-weight: 750; letter-spacing: -.025em; color: var(--brand);
}
.lp-top .brand .tag {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-left: 10px;
}

.lp-main { max-width: 1020px; margin: 0 auto; padding: 56px 24px 24px; }

.lp-hero { text-align: center; margin-bottom: 40px; }
.lp-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 5.2vw, 3.1rem);
  line-height: 1.06; letter-spacing: -.035em; font-weight: 800;
  text-wrap: balance;
}
.lp-hero p {
  margin: 0 auto; max-width: 56ch;
  font-size: 1.09rem; color: var(--text-2); text-wrap: pretty;
}

.lp-error {
  max-width: 760px; margin: 0 auto 26px;
  background: var(--surface); border: 1px solid var(--crit);
  border-left: 4px solid var(--crit);
  border-radius: 10px; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.lp-error strong { color: var(--crit); }
.lp-error span { color: var(--text-2); font-size: .92rem; }

/* Twee gelijkwaardige wegen naar binnen, allebei groot genoeg om zonder
   nadenken aan te klikken. */
.lp-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 22px;
}
@media (max-width: 800px) { .lp-actions { grid-template-columns: 1fr; } }

.lp-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px 30px 26px;
  box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
@media (prefers-reduced-motion: reduce) { .lp-card { transition: none; } }
.lp-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(74,4,17,.10);
}
.lp-card h2 { margin: 0; font-size: 1.42rem; letter-spacing: -.02em; font-weight: 750; }
.lp-card p { margin: 0; color: var(--text-2); font-size: .96rem; }
.lp-eyebrow {
  font-size: .71rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--brand);
}

/* De knop is groot en zit onderaan, zodat beide kaarten op dezelfde hoogte
   eindigen ook al is de ene tekst langer.

   Over de volle breedte, in béíde kaarten. Eerst stond "Demo openen" links
   uitgelijnd en "Analyseer bestand" over de volle breedte; naast elkaar las
   dat als twee verschillende soorten knop in plaats van als twee gelijkwaardige
   wegen naar binnen, en op een telefoon - waar ze onder elkaar komen te staan -
   liep de ene rand niet met de andere mee. */
.lp-btn {
  margin-top: auto; align-self: stretch; width: 100%;
  display: block; text-align: center;
  background: var(--brand); color: var(--on-brand);
  padding: 14px 28px; border-radius: 11px;
  font-size: 1rem; font-weight: 700; text-decoration: none;
  border: none; cursor: pointer; font-family: inherit;
}
.lp-card:hover .lp-btn, .lp-btn:hover { background: var(--brand-700); }

/* Het invoerveld ligt onzichtbaar over het hele vlak. Daarmee werkt slepen én
   klikken zonder een regel JavaScript. */
.lp-drop {
  position: relative;
  border: 2px dashed var(--axis); border-radius: 12px;
  background: var(--surface-2);
  padding: 26px 18px; margin: 4px 0 6px;
  text-align: center;
  transition: border-color .14s ease, background .14s ease;
}
@media (prefers-reduced-motion: reduce) { .lp-drop { transition: none; } }
.lp-drop:hover, .lp-drop:focus-within { border-color: var(--brand); background: var(--mark-soft); }
.lp-drop.has-file { border-style: solid; border-color: var(--brand); background: var(--mark-soft); }
.lp-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.lp-drop-text { display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.lp-drop-text strong { font-size: 1rem; }
.lp-drop-text span { font-size: .87rem; color: var(--muted); }

.lp-points {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px; padding-top: 30px; border-top: 1px solid var(--line);
}
.lp-points h3 { margin: 0 0 5px; font-size: 1rem; font-weight: 700; }
.lp-points p { margin: 0; font-size: .91rem; color: var(--text-2); }

/* Veelgestelde vragen op de voordeur. Twee kolommen op een breed scherm, want
   zes vragen op één kolom duwt de voet van de pagina buiten beeld en dan lijkt
   het een lap tekst in plaats van een lijstje.

   Een <dl> en geen kopjes met alinea's: het is letterlijk een term met een
   omschrijving, en dat is wat een voorlezer en een zoekmachine er ook van
   maken. */
.lp-faq {
  padding-top: 30px; margin-top: 34px; border-top: 1px solid var(--line);
}
.lp-faq h2 {
  margin: 0 0 18px; font-size: 1.18rem; font-weight: 750; letter-spacing: -.015em;
}
.lp-faq dl {
  margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px 34px;
}
.lp-faq dt {
  font-weight: 700; font-size: .95rem;
}
.lp-faq dd {
  margin: 4px 0 0; font-size: .91rem; color: var(--text-2);
}

.lp-foot {
  max-width: 1020px; margin: 0 auto; padding: 34px 24px 44px;
  color: var(--muted); font-size: .82rem;
}
.lp-foot p { margin: 0; }

/* ---------- open-en-dichtklappen ---------- */
/* Een chevron die meedraait. Getekend met randen in plaats van een teken uit
   een lettertype: dan staat hij overal even scherp en op dezelfde plek. */
details.day > summary::before,
details.veh > summary::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-right: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s ease;
}
details.day[open] > summary::before,
details.veh[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  details.day > summary::before, details.veh > summary::before { transition: none; }
}
details.day > summary:hover::before,
details.veh > summary:hover::before { border-color: var(--brand); }

/* Het voertuigniveau: een dag geeft eerst zijn voertuigen met hun totaal, en
   pas na een tweede klik de passages. Anders levert één dag met acht
   vrachtwagens acht tabellen tegelijk op. */
details.veh { border-top: 1px solid var(--line); }
details.veh:first-child { border-top: none; }
details.veh > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 12px 9px 22px; font-size: .89rem;
}
details.veh > summary::-webkit-details-marker { display: none; }
details.veh > summary:hover { background: var(--surface-2); }
details.veh .v-meta { color: var(--muted); font-size: .82rem; }
details.veh .v-amount { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
details.veh .scroll { padding: 0 12px 12px 22px; }

/* ---------- verandering ten opzichte van de vorige periode ---------- */
/* Teken én pijl, nooit kleur alleen: "+12%" is ook zonder kleur te lezen. */
.delta {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin: 5px 0 0; font-size: .82rem; font-weight: 650;
}
.delta .arrow { font-size: .68rem; }
.delta .vs { color: var(--muted); font-weight: 500; }
.delta.up { color: var(--crit); }     /* duurder is slecht nieuws bij tolkosten - en --crit is
                                       daarvoor donkerder dan de merkkleur, anders
                                       leest het als een accent in plaats van als
                                       een uitkomst */
.delta.down { color: var(--good); }
.delta.flat { color: var(--muted); }
.hero .delta { font-size: .9rem; }

/* ---------- prijs per kilometer ---------- */
.bar-col { width: 34%; min-width: 120px; }
.minibar {
  display: block; height: 8px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;
}
.minibar .fill { display: block; height: 100%; border-radius: 999px; background: var(--mark); }
/* Amber en niet rood: de gewone vulling is de merkkleur en twee roden naast
   elkaar in dezelfde kolom zijn 8 pixels hoog niet te scheiden. Amber past hier
   ook beter - boven het wagenparkgemiddelde rijden is niet fout, het is iets om
   op te merken, en dat staat er in de kaartkop ook zo. */
.minibar .fill.above { background: var(--warn); }

/* ---------- eigen periode ---------- */
.range { padding: 6px 11px 9px; display: grid; gap: 7px; }
.range .range-head {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 2px; font-size: .88rem; font-weight: 700;
}
.range .range-head .check { width: 14px; color: var(--brand); flex: 0 0 auto; }
.range label { display: grid; gap: 3px; font-size: .78rem; color: var(--muted); }
.range input[type="date"] {
  font: inherit; font-size: .86rem; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.range .btn { justify-self: start; margin-top: 3px; }

/* ---------- inloggen en aanlevering ----------
   Beide pagina's staan op de landingsopmaak (body.lp) en niet in de zijbalk:
   het zijn schermen waar je iets doet en weer weggaat, niet iets waar je in
   rondkijkt. */
.auth {
  max-width: 420px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 28px;
  display: grid; gap: 16px;
}
.auth.wide { max-width: 720px; }
.auth h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; font-weight: 750; }
.auth h2 {
  margin: 10px 0 0; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.auth > p { margin: 0; font-size: .93rem; color: var(--text-2); }
.auth-lead { margin: 0; color: var(--text-2); font-size: .93rem; }
.auth-form { display: grid; gap: 13px; }
.auth-form label { display: grid; gap: 4px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.auth-form input {
  font: inherit; font-size: .95rem; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--text);
}
.auth-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Hetzelfde jasje als de invoervelden erboven, anders leest het tekstvak van het
   contactformulier als iets dat er per ongeluk bij staat. Alleen rechtop te
   slepen: in de breedte zou het buiten de kaart uitsteken. */
.auth-form textarea {
  font: inherit; font-size: .95rem; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--text);
  resize: vertical; min-height: 132px;
}
.auth-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.auth-form .btn { margin-top: 3px; }

/* De regel onder een formulier: "wachtwoord vergeten?", "terug naar inloggen".
   Klein en grijs - het is de weg voor wie hier niet hoort te zijn, niet de weg
   vooruit voor wie dat wel is. */
.auth-voet { margin: 4px 0 0; font-size: .88rem; color: var(--muted); }

/* Het lokaas in het contactformulier.
   Bewust geen display:none en geen visibility:hidden: een deel van de robots
   slaat juist de velden over die zó verstopt zijn, en dan vangt het niets. Uit
   beeld schuiven laat het voor een robot een gewoon veld lijken, terwijl
   aria-hidden en tabindex=-1 het weghouden bij wie het scherm niet ziet. */
.honing {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.lp-nav { display: flex; align-items: center; gap: 16px; }
.lp-nav a { color: var(--text-2); font-size: .9rem; font-weight: 600; }

/* Het importadres is het enige op deze pagina dat overgetypt wordt, dus het
   krijgt de ruimte en een eigen ondergrond. Monospace omdat een reeks
   willekeurige tekens anders niet te controleren is. */
.adres {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px; border-radius: 10px;
  background: var(--mark-soft); border: 1px solid var(--brand);
}
.adres-label {
  flex-basis: 100%; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--brand-900);
}
.adres code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.02rem; font-weight: 600; color: var(--text);
  word-break: break-all; flex: 1 1 auto;
}
.adres .btn { flex: 0 0 auto; }
.adres-let-op { margin: 0; font-size: .84rem; color: var(--muted); }

.btn.gekopieerd { background: var(--brand-900); }

/* Het sleepvlak van de voordeur, hier ook. De knop eronder en links uitgelijnd,
   want hij hoort bij het vlak erboven en niet ernaast. */
.account-upload { display: grid; gap: 10px; }
.account-upload .lp-drop { margin: 0; }
.account-upload .btn { justify-self: start; }

.sidebar .foot a { color: var(--text-2); font-weight: 600; }

/* ---------- uploadpagina ----------
   Twee wegen waarlangs cijfers binnenkomen, en ze zijn niet gelijkwaardig:
   automatisch is wat we willen, handmatig is het handwerk ernaast. Dat verschil
   zit in de volgorde en in het merkje, niet in de opmaak van de kaart zelf -
   twee verschillend uitziende blokken zouden lezen als twee soorten dingen. */
.keuze {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 15px;
  display: grid; gap: 14px;
}
.keuze.aanbevolen { border-color: var(--brand); }
.keuze-kop > div { display: grid; gap: 4px; }
.keuze-kop h2 { margin: 0; font-size: 1.14rem; font-weight: 750; letter-spacing: -.015em; }
.keuze-kop p { margin: 0; font-size: .92rem; color: var(--text-2); max-width: 72ch; }
.keuze-merk {
  justify-self: start;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--brand-900); background: var(--mark-soft);
  border-radius: 999px; padding: 3px 10px;
}
.keuze-merk.grijs { color: var(--muted); background: var(--surface-3); }

/* De tabel met wat er binnenkwam. Één regel per aanlevering; de kolommen met
   getallen rechts uitgelijnd zodat de reeks van boven naar beneden te lezen is. */
td.nowrap, th.nowrap { white-space: nowrap; }
td.bestand {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; word-break: break-all;
}
/* Nul nieuw is het normale geval bij een dagelijkse export - de provider stuurt
   elke dag dezelfde periode opnieuw - dus het hoort niet als storing te lezen. */
td.zacht { color: var(--muted); }
.afzender { display: block; font-size: .78rem; color: var(--muted); word-break: break-all; }
.tabel-voet { margin: 12px 0 0; font-size: .8rem; color: var(--muted); }
.ingelogd-als { margin: 4px 0 0; font-size: .82rem; color: var(--muted); }

.lp-error ul { margin: 4px 0 0; padding-left: 20px; }
.lp-error li { color: var(--text-2); font-size: .92rem; }
.lp-error a { color: var(--link); }

/* ---------- onboarding ----------
   De weg van bezoeker naar klant: inlogknop, de handleiding, en de uitnodiging
   die verschijnt zodra iemand zijn eigen cijfers ziet. */

/* Rechtsboven en rood: dit is de enige knop op de voordeur die niet over
   uploaden gaat, en wie al klant is zoekt hem daar.
 *
 * `a.lp-login` en niet `.lp-login`: de regel `.lp-nav a` hierboven is even
 * specifiek als een losse klasse en zou de kleur winnen, waardoor de letters
 * grijs op rood stonden in plaats van wit. Het element erbij tilt hem er net
 * overheen. */
a.lp-login {
  display: inline-block; padding: 8px 16px; border-radius: 7px;
  background: var(--brand); color: var(--on-brand);
  font-size: .88rem; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none;
}
a.lp-login:hover { background: var(--brand-700); color: var(--on-brand); }

/* Onder de uploadknop, waar iemand hem zoekt op het moment dat hij zich
   afvraagt wélk bestand dan. */
.lp-help {
  align-self: center; margin-top: -4px;
  font-size: .84rem; color: var(--text-2); text-decoration: underline;
}
.lp-help:hover { color: var(--brand-800); }

.uitleg h2 {
  margin: 20px 0 -4px; font-size: 1rem; font-weight: 750;
  text-transform: none; letter-spacing: -.01em; color: var(--text);
}
.uitleg h2:first-of-type { margin-top: 8px; }
.uitleg .kolommen {
  margin: 0; padding: 14px 16px 14px 32px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; gap: 5px; font-size: .9rem; color: var(--text-2);
}
.uitleg .kolommen code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .87rem; color: var(--text);
}
/* Uitsneden van het echte portaal. De markering zit in de afbeelding zelf en is
   roze: het portaal is overal groen, dus een groen kader zou erin wegvallen.
   Vaste width/height in de img zodat de pagina niet verspringt terwijl hij
   laadt - de afdrukken staan midden in een lange lap tekst. */
.uitleg .schermafdruk { margin: 12px 0 0; }
.uitleg .schermafdruk img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2);
}
.uitleg .schermafdruk figcaption {
  margin-top: 7px; font-size: .82rem; color: var(--muted);
}

.uitleg-let-op { font-size: .87rem; color: var(--muted); }
.uitleg-acties {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line);
}
.uitleg-acties .btn { text-decoration: none; }

/* De opvallende melding boven een scherm: de uitnodiging bij eigen cijfers, de
   demo, en het bericht dat er niets binnenkomt. Alle drie amber, want alle drie
   vragen ze hetzelfde - kijk hier even naar. Rood is in dit scherm de kleur
   van een handeling en zit dus in de knop, niet in het vlak eromheen; zou het
   vlak ook rood zijn, dan viel de knop erin weg.

   Eén stijl voor de drie, met de volle kleur op de rand en de kop en de wash
   eromheen. Dezelfde lichte aanzet als het rood, zodat het geen waarschuwing
   wordt maar een accent. */
.notice.werven,
.notice.let-op {
  border-color: var(--warn);
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.notice.werven strong,
.notice.let-op strong { color: var(--warn); }
.notice.werven .btn,
.notice.let-op .btn { margin-left: auto; flex: 0 0 auto; text-decoration: none; }
.werven-voet {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin: -8px 0 18px; font-size: .8rem; color: var(--muted);
}
.werven-voet form { display: inline; margin: 0; }
/* Wissen is een POST en dus een knop, maar het hoort te lezen als een link:
   het is een geruststelling onderaan, geen actie die om aandacht vraagt. */
.linkje {
  font: inherit; color: var(--muted); background: none; border: none;
  padding: 0; cursor: pointer; text-decoration: underline;
}
.linkje:hover { color: var(--text-2); }

/* De account-knop rechtsboven op de schermen met cijfers. Na .filters, dat al
   margin-left:auto heeft, dus hij landt vanzelf helemaal rechts. */
.appbar-account { flex: 0 0 auto; text-decoration: none; }
.appbar-account.btn { padding: 7px 15px; font-size: .87rem; }
form.appbar-account { margin: 0; }

/* De derde weg op de voordeur, onder de twee kaarten. Rustiger dan die kaarten:
   dit is wat je wilt nadat je hebt gezien dat het werkt, niet ervoor. */
.lp-sync {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-top: 18px; padding: 22px 24px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
}
.lp-sync > div:first-child { flex: 1 1 320px; display: grid; gap: 4px; }
.lp-sync h2 { margin: 0; font-size: 1.14rem; font-weight: 750; letter-spacing: -.015em; }
.lp-sync p { margin: 2px 0 0; font-size: .92rem; color: var(--text-2); }
.lp-sync-acties {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: stretch; gap: 8px;
}
.lp-sync-acties .btn { text-align: center; text-decoration: none; white-space: nowrap; }

/* ---------- praatknop ---------- */
/* Rechtsonder op elk scherm behalve het contactformulier zelf.
 *
 * Hij ziet eruit als een chatknop omdat dat de vorm is die iedereen herkent als
 * "hier kun je iets vragen", maar hij is precies wat hij lijkt: een link naar
 * een pagina. Geen widget, geen script van een derde, geen koekje - dit scherm
 * werkt zonder JavaScript en dat hoort geen uitzondering te krijgen voor een
 * praatknop. Dat scheelt ook de cookiebanner die zo'n widget meebrengt, en op
 * de voordeur kost een banner meer bezoekers dan hij oplevert.
 *
 * z-index boven de meelopende balken (30 en 40) uit, want hij hoort altijd
 * bereikbaar te zijn. Onder een uitklapmenu blijft hij niet hangen: die staan
 * op 40 maar binnen de balk, niet over de hele pagina. */
.praatknop {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 6px 20px rgba(74, 4, 17, .28);
  text-decoration: none;
  transition: transform .14s ease, background .14s ease;
}
.praatknop:hover { background: var(--brand-700); transform: translateY(-2px); }
.praatknop svg { width: 27px; height: 27px; display: block; }
@media (prefers-reduced-motion: reduce) { .praatknop { transition: none; } }

/* Ruimte onder de laatste regel, zodat de knop de voet niet afdekt. */
.lp-foot { padding-bottom: 84px; }
footer.site { padding-bottom: 76px; }

/* ---------- responsief, helemaal onderaan ----------
   Deze twee blokken staan met opzet als laatste in het bestand. Een
   @media-regel telt niet zwaarder dan een gewone regel: bij gelijke
   specificiteit wint wie het laatst staat. Stonden ze halverwege, dan
   overschreef .lp-sync{align-items:center} verderop stilletjes de
   telefoonvariant - precies wat hier eerder gebeurde. Nieuwe
   schermregels horen hier dus onder, niet bij het onderdeel zelf. */
/* ---------- klein scherm ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  /* De navigatie blijft staan, de filters schuiven weg.
   *
   * Andersom was het, en dat is de verkeerde kant op: op een breed scherm staat
   * de zijbalk altijd in beeld omdat hij een kolom is, dus daar plakt alleen de
   * filterbalk en klopt het. Klapt die kolom op een telefoon boven de inhoud,
   * dan scrolt juist de navigatie weg en bleef de periodekeuze hangen - terwijl
   * wie op een telefoon door een lange lijst ritten scrolt naar Kaart of
   * Dashboard wil, en niet halverwege van periode wisselt. De filters staan nog
   * één veeg omhoog. */
  .sidebar {
    position: sticky; top: 0; z-index: 40;
    border-right: none; border-bottom: 1px solid var(--line);
    flex-direction: row; align-items: center; gap: 12px;
    padding: 9px 14px; flex-wrap: wrap;
  }
  /* Compact genoeg om te mogen blijven staan. Een balk die plakt betaalt zijn
     hoogte in inhoud die je niet ziet, dus de ondertitel gaat eruit en de
     pillen worden krapper - zo passen merk en navigatie op één regel tot
     ongeveer 380px, en anders op twee regels van samen nog geen 90px. */
  .sidebar .brand .tag { display: none; }
  .sidebar .brand .name { font-size: 1.06rem; }
  .sidebar nav { flex-direction: row; margin-left: auto; flex-wrap: wrap; gap: 4px; }
  .sidebar nav a { padding: 7px 11px; font-size: .88rem; }
  .sidebar .foot { display: none; }

  .appbar { position: static; padding: 10px 16px; gap: 10px; }
  .appbar .heading h1 { font-size: 1.02rem; }
  /* De filters achteraan zetten haalt de in-/uitlogknop naar de eerste regel,
     naast de kop - waar hij rechts landt door de auto-marge op .heading. Zonder
     deze volgorde duwt de filterbalk (volle breedte) hem naar een derde regel,
     waar hij links onder de filters stond alsof hij erbij hoorde. */
  .filters { order: 3; margin-left: 0; width: 100%; }

  main { padding: 16px; }
  .hero .value { font-size: 2.3rem; }
}

/* ---------- telefoon ---------- */
/* Onder deze breedte is de ruimte op: hier gaat alles wat naast elkaar stond
   onder elkaar, en verdwijnt de toelichting die de knop ernaast al geeft. */
@media (max-width: 620px) {
  /* De kop van de publieke pagina's: merk links, knop rechts, en niet meer
     afbreken. Met flex-wrap viel de knop onder de merknaam aan de linkerkant -
     op de voordeur "Inloggen", op /inloggen "Account aanmaken" - en werd de
     balk 118px hoog voor twee dingen die samen op één regel passen zodra de
     ondertitel eruit is. */
  .lp-top { flex-wrap: nowrap; padding: 12px 16px; gap: 12px; }
  .lp-top .brand { min-width: 0; }
  .lp-top .brand .name { font-size: 1.1rem; }
  .lp-top .brand .tag { display: none; }
  .lp-nav { flex: 0 0 auto; }

  .lp-main { padding: 30px 16px 20px; }
  .lp-hero { margin-bottom: 26px; }
  .lp-card { padding: 22px 20px 20px; border-radius: 14px; }
  .lp-foot { padding: 26px 16px 34px; }

  /* De derde weg eindigt met dezelfde volle-breedte knop als de twee kaarten
     erboven; naast de tekst geperst werd "Account aanmaken" een knop van een
     andere maat dan de twee waar hij op moet lijken. */
  /* Dezelfde horizontale padding als .lp-card hierboven, zodat de drie knoppen
     op de voordeur op één lijn beginnen en eindigen. */
  .lp-sync { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; }
  /* De flex-basis van 320px gaat over de hoofdas, en die staat hier rechtop:
     zonder deze regel is het tekstblok 320px hóóg in plaats van 320px breed en
     staat er een gat van een kwart scherm tussen de tekst en de knop. */
  .lp-sync > div:first-child { flex: 0 0 auto; }
  .lp-sync-acties .btn { width: 100%; padding: 13px 15px; font-size: .95rem; }

  /* Een melding is een regel tekst met een knop, niet twee kolommen. Naast
     elkaar hield de knop zijn volle breedte (flex: 0 0 auto, nowrap) en kneep
     de tekst tot een kolom van een woord breed: de demomelding werd zo 274px
     hoog voor drie regels tekst. */
  .notice { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  /* .notice.werven en .notice.let-op zetten allebei margin-left:auto op hun
     knop en wegen zwaarder dan een enkele .notice .btn - vandaar dat ze hier
     alle drie genoemd staan in plaats van één keer. */
  .notice .btn,
  .notice.werven .btn,
  .notice.let-op .btn,
  .notice form { margin-left: 0; align-self: flex-start; }

  /* Wat de knop eronder al zegt, hoeft er niet ook nog in woorden bij. Op een
     breed scherm kost die zin niets; op een telefoon is het het verschil
     tussen een melding van drie regels en een half scherm. */
  .notice .detail { display: none; }

  /* Iets kleiner en dichter op de hoek: op een telefoon dekt hij anders een
     deel van de inhoud af waar je nog langs moet scrollen. Niet kleiner dan
     dit - 48px is ongeveer de ondergrens voor een duim. */
  .praatknop { right: 12px; bottom: 12px; width: 50px; height: 50px; }
  .praatknop svg { width: 25px; height: 25px; }
}