/* 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. */
.lp-btn {
  margin-top: auto; align-self: flex-start;
  display: inline-block;
  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); }
.lp-upload .lp-btn { width: 100%; text-align: center; align-self: stretch; }

/* 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; }

/* ---------- klein scherm ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    border-right: none; border-bottom: 1px solid var(--line);
    flex-direction: row; align-items: center; gap: 14px;
    padding: 12px 16px; flex-wrap: wrap;
  }
  .sidebar nav { flex-direction: row; margin-left: auto; flex-wrap: wrap; }
  .sidebar .foot { display: none; }
  .appbar { padding: 11px 16px; }
  .filters { margin-left: 0; width: 100%; }
  main { padding: 16px; }
  .hero .value { font-size: 2.3rem; }
}

/* ---------- 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; }
.auth-form .btn { margin-top: 3px; }

.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; }