/* De opmaak van de tool. Alle waarden komen uit spoor-tokens.css.
   Staat hier een losse waarde, dan ontbreekt er een token en is dat gemeld. */
@import url("spoor-tokens.css");

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--papier-2);
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: var(--tekst-m-size);
  font-weight: var(--tekst-m-weight);
  line-height: var(--tekst-m-line);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
h1, h2, h3 { margin: 0; font-family: var(--font-kop); font-weight: var(--kop-5-weight); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ink); }

.cijfers { font-family: var(--font-cijfer); font-variant-numeric: var(--cijfer-variant); }
.label {
  font-family: var(--font-cijfer); font-size: var(--label-size); line-height: var(--label-line);
  font-weight: var(--label-weight); letter-spacing: var(--label-spacing); text-transform: var(--label-transform);
  color: var(--ink-3);
}

/* ---------- Raamwerk ---------- */
.app { display: flex; flex-direction: column; min-height: 100dvh; }

.kop {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: max(env(safe-area-inset-top), var(--ruimte-2)) var(--rand-scherm-mobiel) var(--ruimte-2);
  background: var(--papier-2);
  border-bottom: 1px solid var(--lijn);
}
.kop h1 {
  flex: 1; min-width: 0;
  font-size: var(--kop-5-size); line-height: var(--kop-5-line); letter-spacing: var(--kop-5-spacing);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kop .sub { font-size: var(--tekst-xs-size); color: var(--ink-3); }

.inhoud {
  flex: 1;
  padding: var(--ruimte-4) var(--rand-scherm-mobiel) calc(var(--ruimte-12) + env(safe-area-inset-bottom));
}

.navigatie {
  position: sticky; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  min-height: var(--tab-balk-hoogte);
  background: var(--papier-2); border-top: 1px solid var(--lijn);
  padding-bottom: env(safe-area-inset-bottom);
}
.navigatie a {
  min-height: var(--knop-hoogte-ruim);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--ink-3);
  font-size: var(--tekst-mini-size); line-height: var(--tekst-mini-line);
  padding: var(--ruimte-2) var(--ruimte-1);
}
.navigatie a[aria-current="page"] { color: var(--ink); font-weight: var(--tekst-m-nadruk-weight); }
.navigatie a[aria-current="page"] .teken { border-bottom: var(--tijdbalk-vandaag-lijn) solid var(--ink); }
.navigatie .teken { font-size: var(--tekst-l-size); line-height: 1.1; padding-bottom: 2px; }

/* ---------- Knoppen ---------- */
.knop {
  min-height: var(--knop-hoogte); min-width: var(--raakvlak-min);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ruimte-2);
  padding: 0 var(--knop-padding-x);
  background: var(--knop-secundair-vlak); color: var(--knop-secundair-ink);
  border: var(--knop-rand) solid var(--knop-secundair-rand);
  border-radius: var(--knop-radius); box-shadow: var(--schaduw);
  cursor: pointer; font-size: var(--knop-size); font-weight: var(--knop-weight);
  font-family: var(--font-tekst); text-decoration: none;
}
.knop:hover { background: var(--knop-secundair-vlak-hover); }
.knop.hoofd {
  background: var(--knop-primair-vlak); border-color: var(--knop-primair-vlak); color: var(--knop-primair-ink);
}
.knop.hoofd:hover { background: var(--knop-primair-vlak-hover); border-color: var(--knop-primair-vlak-hover); }
.knop.stil { background: transparent; border-color: transparent; color: var(--knop-tekst-ink); }
.knop.stil:hover { color: var(--knop-tekst-ink-hover); background: transparent; }
.knop.gevaar { color: var(--knop-gevaar-ink); border-color: var(--knop-gevaar-rand); background: transparent; }
.knop.gevaar:hover { background: var(--knop-gevaar-vlak-hover); }
.knop:disabled { background: var(--knop-uit-vlak); color: var(--knop-uit-ink); border-color: transparent; cursor: not-allowed; }
.knop.klein {
  min-height: var(--chip-hoogte); min-width: 0;
  padding: 0 var(--chip-padding-x); font-size: var(--chip-size);
}

/* ---------- Invoervelden ---------- */
.veld { display: block; margin-bottom: var(--ruimte-4); }
.veld > span {
  display: block; font-size: var(--veld-label-size); color: var(--veld-label-ink);
  margin-bottom: var(--ruimte-1);
}
.veld input, .veld select, .veld textarea, .invoer {
  width: 100%; min-height: var(--veld-hoogte);
  padding: var(--veld-padding-y) var(--veld-padding-x);
  font-size: var(--veld-size); font-family: var(--font-tekst);
  background: var(--veld-vlak); color: var(--veld-ink);
  border: 1px solid var(--veld-rand); border-radius: var(--veld-radius);
  outline: none;
}
.veld textarea { min-height: var(--ruimte-18); resize: vertical; line-height: var(--tekst-m-line); }
.veld input::placeholder, .veld textarea::placeholder, .invoer::placeholder { color: var(--veld-plaatshouder-ink); }
.veld input:focus, .veld select:focus, .veld textarea:focus, .invoer:focus {
  border-color: var(--veld-rand-focus); box-shadow: var(--veld-ring-focus);
}
.veld.fout input, .veld.fout select { border-color: var(--veld-fout-rand); background: var(--veld-fout-vlak); }
.veld .uitleg { font-size: var(--tekst-mini-size); color: var(--ink-4); margin-top: var(--ruimte-1); }
.veld.fout .uitleg { color: var(--veld-fout-ink); }
.rij { display: flex; gap: var(--ruimte-3); }
.rij > * { flex: 1; min-width: 0; }

.aanvinken { display: flex; align-items: center; gap: var(--ruimte-3); min-height: var(--raakvlak-min); cursor: pointer; }
.aanvinken input { width: var(--ruimte-6); height: var(--ruimte-6); flex: none; accent-color: var(--ink); }

/* ---------- Spoorkleuren ----------
   Elk element met een spoor krijgt data-spoor="1" tot en met "11".
   De kleur komt dan uit de reeks in spoor-tokens.css. */
[data-spoor] { --spoor-kleur: var(--spoor-11-kleur); --spoor-tint: var(--spoor-11-tint); }
[data-spoor="1"]  { --spoor-kleur: var(--spoor-1-kleur);  --spoor-tint: var(--spoor-1-tint); }
[data-spoor="2"]  { --spoor-kleur: var(--spoor-2-kleur);  --spoor-tint: var(--spoor-2-tint); }
[data-spoor="3"]  { --spoor-kleur: var(--spoor-3-kleur);  --spoor-tint: var(--spoor-3-tint); }
[data-spoor="4"]  { --spoor-kleur: var(--spoor-4-kleur);  --spoor-tint: var(--spoor-4-tint); }
[data-spoor="5"]  { --spoor-kleur: var(--spoor-5-kleur);  --spoor-tint: var(--spoor-5-tint); }
[data-spoor="6"]  { --spoor-kleur: var(--spoor-6-kleur);  --spoor-tint: var(--spoor-6-tint); }
[data-spoor="7"]  { --spoor-kleur: var(--spoor-7-kleur);  --spoor-tint: var(--spoor-7-tint); }
[data-spoor="8"]  { --spoor-kleur: var(--spoor-8-kleur);  --spoor-tint: var(--spoor-8-tint); }
[data-spoor="9"]  { --spoor-kleur: var(--spoor-9-kleur);  --spoor-tint: var(--spoor-9-tint); }
[data-spoor="10"] { --spoor-kleur: var(--spoor-10-kleur); --spoor-tint: var(--spoor-10-tint); }
[data-spoor="11"] { --spoor-kleur: var(--spoor-11-kleur); --spoor-tint: var(--spoor-11-tint); }

/* De tweeletterkode, overal waar de naam niet past */
.kode {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-cijfer); font-size: var(--kode-size); font-weight: var(--kode-weight);
  padding: var(--kode-padding); letter-spacing: 0.04em;
  background: var(--spoor-kleur); color: var(--ink-op-donker-vlak);
  flex: none;
}
.kode.los { width: var(--kode-vierkant); height: var(--kode-vierkant); padding: 0; }
.kode.omlijnd { background: transparent; color: var(--spoor-kleur); border: 1px solid var(--spoor-kleur); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--ruimte-1);
  min-height: var(--chip-hoogte); padding: 0 var(--chip-padding-x);
  font-size: var(--chip-size); font-weight: var(--tekst-m-nadruk-weight);
  border: 1px solid var(--chip-rand); background: var(--chip-vlak); color: var(--ink-2);
  border-radius: var(--radius); cursor: pointer; white-space: nowrap;
}
.chip .stip { width: var(--chip-stip); height: var(--chip-stip); flex: none; background: var(--spoor-kleur); }
.chip[aria-pressed="true"] { background: var(--chip-aan-vlak); color: var(--chip-aan-ink); border-color: var(--chip-aan-vlak); }
.chiprij { display: flex; gap: var(--ruimte-2); overflow-x: auto; padding-bottom: var(--ruimte-2); -webkit-overflow-scrolling: touch; }
.chiprij::-webkit-scrollbar { height: 0; }

/* ---------- Itemblokjes ---------- */
.item {
  display: flex; align-items: flex-start; gap: var(--ruimte-3);
  width: 100%; text-align: left;
  min-height: var(--item-hoogte); padding: var(--item-padding);
  background: var(--item-vlak); border: 1px solid var(--item-rand);
  border-left: var(--item-spoorbalk) solid var(--spoor-kleur);
  border-radius: var(--radius); cursor: pointer;
}
.item + .item { margin-top: var(--ruimte-2); }
.item .tijd {
  font-family: var(--font-cijfer); font-size: var(--cijfer-s-size); font-weight: var(--cijfer-s-weight);
  line-height: var(--cijfer-s-line); font-variant-numeric: var(--cijfer-variant);
  color: var(--ink-3); flex: none; width: var(--item-tijd-breed);
}
.item .kern { flex: 1; min-width: 0; }
.item .titel { font-weight: var(--tekst-m-nadruk-weight); overflow-wrap: anywhere; }
.item .spoor { font-size: var(--tekst-mini-size); color: var(--ink-3); }
.item.gedaan { background: var(--item-gedaan-vlak); }
.item.gedaan .titel { text-decoration: line-through; color: var(--item-gedaan-ink); }
.item.anker { border: 1px solid var(--item-anker-rand); border-left: var(--item-spoorbalk) solid var(--spoor-kleur); }
.item .merk { font-size: var(--tekst-mini-size); color: var(--ink-4); flex: none; }

/* ---------- Lege en foutstaten ---------- */
.leeg { text-align: center; padding: var(--ruimte-12) var(--ruimte-4); color: var(--ink-3); }
.leeg .groot { font-size: var(--kop-3-size); font-family: var(--font-kop); margin-bottom: var(--ruimte-3); color: var(--ink-4); }
.leeg h3 { font-size: var(--kop-5-size); line-height: var(--kop-5-line); margin-bottom: var(--ruimte-2); color: var(--ink); }
.leeg p { margin: 0 auto var(--ruimte-4); max-width: 34ch; font-size: var(--tekst-s-size); line-height: var(--tekst-s-line); }

.melding {
  display: flex; gap: var(--ruimte-3); align-items: flex-start;
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--let-op-vlak); border: 1px solid var(--let-op-lijn);
  border-radius: var(--radius); box-shadow: var(--schaduw);
  color: var(--ink); font-size: var(--tekst-s-size); line-height: var(--tekst-s-line);
  margin-bottom: var(--ruimte-4);
}
.melding .knop { margin-left: auto; }

.balk-offline {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--let-op); color: var(--ink-op-donker-vlak); text-align: center;
  padding: var(--ruimte-2) var(--ruimte-4) calc(var(--ruimte-2) + env(safe-area-inset-bottom));
  font-size: var(--tekst-s-size);
}

/* ---------- Overzicht: tijdbalk ---------- */
.tijdbalk { border: 1px solid var(--lijn-sterk); background: var(--papier-1); overflow: hidden; }
.tijdbalk .schuif { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tijdbalk-raster { position: relative; min-width: 100%; }
.tb-kop { display: flex; border-bottom: 1px solid var(--lijn-sterk); background: var(--papier-3); }
.tb-maand {
  flex: none; padding: var(--ruimte-2);
  font-family: var(--font-cijfer); font-size: var(--label-size); line-height: var(--label-line);
  letter-spacing: var(--label-spacing); text-transform: var(--label-transform);
  color: var(--ink-3); border: 0; border-left: 1px solid var(--lijn); cursor: pointer;
  text-align: left; background: none; white-space: nowrap; overflow: hidden; min-height: var(--ruimte-8);
}
.tb-maand:first-child { border-left: 0; }
.tb-maand[aria-expanded="true"] { background: var(--papier-1); color: var(--ink); }
.tb-rij { display: flex; align-items: stretch; border-top: 1px solid var(--lijn); min-height: var(--tijdbalk-rij-hoogte); }
.tb-naam {
  flex: none; padding: var(--ruimte-2);
  font-size: var(--tekst-xs-size); line-height: var(--tekst-xs-line);
  display: flex; align-items: center; gap: var(--ruimte-2);
  border-right: 1px solid var(--lijn-sterk); background: var(--papier-1);
  position: sticky; left: 0; z-index: 2;
}
.tb-naam .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-spoor { position: relative; flex: 1; }
.tb-stip {
  position: absolute; top: 50%;
  width: var(--tijdbalk-stip); height: var(--tijdbalk-stip);
  margin: calc(var(--tijdbalk-stip) / -2) 0 0 calc(var(--tijdbalk-stip) / -2);
  border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--spoor-kleur);
}
.tb-stip.gedaan {                       /* afgerond: open stip met gekleurde rand */
  background: var(--papier-1);
  border: var(--tijdbalk-stip-rand) solid var(--spoor-kleur);
}
.tb-stip.anker {                        /* mijlpaal: ruit, groter */
  width: var(--tijdbalk-stip-groot); height: var(--tijdbalk-stip-groot);
  margin: calc(var(--tijdbalk-stip-groot) / -2) 0 0 calc(var(--tijdbalk-stip-groot) / -2);
  border-radius: 0; transform: rotate(45deg);
}
.tb-stip::after { content: ""; position: absolute; inset: calc(var(--raakvlak-min) / -2); }
.tb-lijn { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--lijn-zwak); pointer-events: none; }
.tb-anker {
  position: absolute; top: 0; bottom: 0; width: var(--tijdbalk-anker-lijn);
  background: var(--ink); pointer-events: none;
}
.tb-vandaag {
  position: absolute; top: 0; bottom: 0; width: var(--tijdbalk-vandaag-lijn);
  background: var(--let-op); pointer-events: none;
}
.tb-legenda {
  display: flex; gap: var(--ruimte-4); flex-wrap: wrap;
  font-size: var(--tekst-mini-size); color: var(--ink-3);
  padding: var(--ruimte-2) var(--ruimte-3); border-top: 1px solid var(--lijn);
}

/* ---------- Maand ---------- */
.weekblok { border: 1px solid var(--lijn); background: var(--papier-1); margin-bottom: var(--ruimte-4); }
.weekblok > header {
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-3); background: var(--papier-3); border-bottom: 1px solid var(--lijn);
}
.weekblok .wknr {
  font-family: var(--font-cijfer); font-size: var(--cijfer-s-size); font-weight: var(--cijfer-s-weight);
  font-variant-numeric: var(--cijfer-variant);
}
.weekblok .wkdatums { font-size: var(--tekst-mini-size); color: var(--ink-3); }
.weekblok .naar-week { margin-left: auto; }
.weekblok.nu { border-color: var(--let-op); }
.dagregel { display: flex; gap: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3); border-top: 1px solid var(--lijn-zwak); }
.dagregel:first-of-type { border-top: 0; }
.dagregel.vandaag { background: var(--vandaag-vlak); }
.dagregel .dag {
  flex: none; width: var(--uur-gutter-mobiel);
  font-family: var(--font-cijfer); font-size: var(--cijfer-xs-size); line-height: var(--cijfer-xs-line);
  font-variant-numeric: var(--cijfer-variant); color: var(--ink-3); padding-top: var(--ruimte-1);
}
.dagregel .dag b { display: block; font-size: var(--cijfer-s-size); font-weight: var(--cijfer-s-weight); color: var(--ink); }
.dagregel .lijst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ruimte-1); }
.werkblok {
  display: flex; align-items: center; gap: var(--ruimte-2);
  font-size: var(--tekst-mini-size); color: var(--ink-3);
  background-image: var(--item-vast-vulling); border: var(--item-vast-rand);
  padding: var(--ruimte-1) var(--ruimte-2);
}
.mini {
  display: flex; align-items: center; gap: var(--ruimte-2); width: 100%; text-align: left;
  background: none; border: 0; border-left: var(--item-spoorbalk) solid var(--spoor-kleur);
  padding: var(--ruimte-1) var(--ruimte-2); cursor: pointer; min-height: var(--chip-hoogte); border-radius: var(--radius);
}
.mini:hover { background: var(--papier-3); }
.mini .tijd {
  font-family: var(--font-cijfer); font-size: var(--cijfer-xs-size); font-weight: var(--cijfer-xs-weight);
  font-variant-numeric: var(--cijfer-variant); color: var(--ink-3); flex: none;
}
.mini .titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tekst-s-size); }
.mini.gedaan .titel { text-decoration: line-through; color: var(--item-gedaan-ink); }

/* ---------- Week ---------- */
.weekbalk { display: flex; align-items: center; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); }
.weekbalk .midden { flex: 1; text-align: center; font-size: var(--tekst-s-size); font-weight: var(--tekst-m-nadruk-weight); }
.weekraster { border: 1px solid var(--lijn-sterk); background: var(--papier-1); overflow: hidden; }
.wr-schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.wr-binnen { display: grid; grid-template-columns: var(--uur-gutter-mobiel) repeat(7, minmax(116px, 1fr)); min-width: 100%; }
.wr-kop {
  position: sticky; top: 0; z-index: 5; background: var(--papier-3);
  border-bottom: 1px solid var(--lijn-sterk); border-left: 1px solid var(--lijn);
  text-align: center; padding: var(--ruimte-2) var(--ruimte-1);
  font-size: var(--tekst-mini-size); scroll-snap-align: start;
}
.wr-kop b {
  display: block; font-family: var(--font-cijfer);
  font-size: var(--cijfer-s-size); font-weight: var(--cijfer-s-weight); font-variant-numeric: var(--cijfer-variant);
}
.wr-kop.vandaag, .wr-kop.vandaag b { color: var(--let-op); }
.wr-hoek { position: sticky; left: 0; top: 0; z-index: 7; background: var(--papier-3); border-left: 0; }
.wr-uren { position: sticky; left: 0; z-index: 4; background: var(--papier-1); border-right: 1px solid var(--lijn-sterk); }
.wr-uur {
  font-family: var(--font-cijfer); font-size: var(--cijfer-mini-size); font-weight: var(--cijfer-mini-weight);
  line-height: var(--cijfer-mini-line); font-variant-numeric: var(--cijfer-variant);
  color: var(--ink-4); text-align: right; padding-right: var(--ruimte-1);
}
.wr-dag { position: relative; border-left: 1px solid var(--lijn); scroll-snap-align: start; }
.wr-dag.weekend { background: var(--papier-2); }
.wr-dag.vandaag { background: var(--vandaag-vlak); }
.wr-lijn { position: absolute; left: 0; right: 0; border-top: 1px solid var(--lijn-zwak); pointer-events: none; }
.wr-lijn.half { border-top-style: dotted; }
.wr-nu { position: absolute; left: 0; right: 0; height: var(--tijdbalk-vandaag-lijn); background: var(--let-op); z-index: 6; pointer-events: none; }
.wr-nu::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: var(--ruimte-2); height: var(--ruimte-2); background: var(--let-op);
}
.wr-hele-dag { border-bottom: 1px solid var(--lijn-sterk); padding: var(--ruimte-1); min-height: var(--chip-hoogte); }
.wr-blok {
  position: absolute; left: 1px; right: 1px; z-index: 3;
  background: var(--spoor-tint);
  border: 1px solid var(--item-rand); border-left: var(--item-spoorbalk) solid var(--spoor-kleur);
  border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: var(--ruimte-1); overflow: hidden; cursor: grab;
  color: var(--ink); touch-action: none; user-select: none;
}
.wr-blok .t {
  display: block; font-size: var(--tekst-mini-size); font-weight: var(--tekst-m-nadruk-weight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-blok .u {
  font-family: var(--font-cijfer); font-size: var(--cijfer-mini-size); font-weight: var(--cijfer-mini-weight);
  font-variant-numeric: var(--cijfer-variant); color: var(--ink-3);
}
.wr-blok.gedaan { background: var(--item-gedaan-vlak); color: var(--item-gedaan-ink); }
.wr-blok.gedaan .t { text-decoration: line-through; }
.wr-blok.anker { border: 1px solid var(--item-anker-rand); border-left: var(--item-spoorbalk) solid var(--spoor-kleur); }
.wr-blok.sleept {
  z-index: 20; cursor: grabbing; border-color: var(--ink);
  transition: none;
}
.wr-greep { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ruimte-3); cursor: ns-resize; }
.wr-greep::after {
  content: ""; position: absolute; left: 50%; bottom: 2px;
  width: var(--ruimte-6); height: 2px; margin-left: calc(var(--ruimte-6) / -2);
  background: var(--spoor-kleur);
}

/* ---------- Werkmomenten in de week ---------- */
.wr-moment {
  position: absolute; left: 1px; right: 1px; z-index: 1;
  border: var(--item-vast-rand); background-image: var(--item-vast-vulling);
  overflow: hidden; pointer-events: none;
}
.wr-moment.vol { border: 1px solid var(--let-op); }
.wr-moment.vervallen { opacity: 0.7; }
.wr-moment .wm-vrij {
  position: absolute; left: 0; right: 0;
  border: 0; background: none; cursor: pointer; pointer-events: auto;
  font-size: var(--cijfer-mini-size); font-family: var(--font-cijfer); color: var(--ink-4);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.wr-moment .wm-vrij:hover { background: var(--knop-secundair-vlak-hover); }
.wr-moment .wm-vervallen-tekst {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  font-size: var(--tekst-mini-size); color: var(--ink-4); text-align: center; padding: var(--ruimte-2);
}
.wm-kop {
  position: absolute; left: 1px; right: 1px; z-index: 4;
  min-height: var(--ruimte-6); padding: 0 var(--ruimte-1);
  display: flex; align-items: center; gap: var(--ruimte-1);
  border: 1px solid var(--lijn-sterk); border-bottom: 0;
  background: var(--papier-3); color: var(--ink-3);
  font-size: var(--tekst-mini-size); font-weight: var(--tekst-m-nadruk-weight); line-height: var(--tekst-mini-line);
  cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap;
}
.wm-kop::after { content: ""; position: absolute; inset: calc(var(--ruimte-2) * -1) 0; }
.wm-kop .naam { overflow: hidden; text-overflow: ellipsis; }
.wm-kop.vol { border-color: var(--let-op); color: var(--let-op); background: var(--let-op-vlak); }
.wm-kop .merk {
  margin-left: auto; flex: none; font-weight: var(--tekst-m-weight);
  font-family: var(--font-cijfer); font-size: var(--cijfer-mini-size); font-variant-numeric: var(--cijfer-variant);
}

/* ---------- Verzamelbak ---------- */
.snel { display: flex; gap: var(--ruimte-2); margin-bottom: var(--ruimte-4); }
.snel .invoer { flex: 1; }
.zoekrij { display: flex; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); }

/* ---------- Itemvenster ---------- */
.venster { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
/* Voor het waas achter een venster staat geen token in spoor-tokens.css.
   Hier staat daarom de inktkleur op 45 procent. Dit is gemeld en wacht op een waarde. */
.venster .waas { position: absolute; inset: 0; background: rgba(33, 29, 24, 0.45); }
.venster .paneel {
  position: relative; width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto;
  background: var(--papier-2); border-radius: var(--radius);
  border-top: var(--tijdbalk-anker-lijn) solid var(--ink);
  padding: var(--ruimte-4) var(--rand-scherm-mobiel) calc(var(--ruimte-6) + env(safe-area-inset-bottom));
  animation: omhoog var(--duur-sleep) var(--verloop);
}
@keyframes omhoog { from { transform: translateY(var(--ruimte-3)); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .venster .paneel { animation: none; } }
.venster header { display: flex; align-items: center; gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); }
.venster header h2 { flex: 1; font-size: var(--kop-5-size); line-height: var(--kop-5-line); }
.venster footer { display: flex; gap: var(--ruimte-2); margin-top: var(--ruimte-6); flex-wrap: wrap; }
.venster footer .rechts { margin-left: auto; }

/* ---------- Instellingen ---------- */
.kaart { background: var(--papier-1); border: 1px solid var(--lijn); margin-bottom: var(--ruimte-6); }
.kaart > header { padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--lijn); }
.kaart > header h2 { font-size: var(--kop-5-size); line-height: var(--kop-5-line); }
.kaart > header p { margin: var(--ruimte-1) 0 0; font-size: var(--tekst-xs-size); color: var(--ink-3); }
.kaart .body { padding: var(--ruimte-4); }
.regel { display: flex; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-4); border-top: 1px solid var(--lijn-zwak); }
.regel:first-child { border-top: 0; }
.regel .naam { flex: 1; min-width: 0; }
.regel.gearchiveerd .naam { color: var(--ink-4); }
.kleurkiezer { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ruimte-2); }
.kleurkiezer button {
  min-height: var(--knop-hoogte); display: flex; align-items: center; gap: var(--ruimte-2);
  padding: 0 var(--ruimte-2); cursor: pointer;
  background: var(--papier-1); border: 1px solid var(--lijn); border-radius: var(--radius);
}
.kleurkiezer button[aria-pressed="true"] { border-color: var(--ink); background: var(--papier-3); }
.kleurkiezer .vlak { width: var(--ruimte-6); height: var(--ruimte-6); background: var(--spoor-kleur); flex: none; }
.kleurkiezer button:disabled { opacity: 0.45; cursor: not-allowed; }

.hulp { font-size: var(--tekst-xs-size); line-height: var(--tekst-xs-line); color: var(--ink-3); }
.stil-tekst { color: var(--ink-3); font-size: var(--tekst-xs-size); }

/* ---------- Breed scherm ----------
   Het breekpunt staat als --breekpunt-breed in de tokens. Een media query kan
   geen token lezen, dus die waarde staat hier één keer letterlijk. */
@media (min-width: 900px) {
  .app { flex-direction: row; }
  .navigatie {
    order: -1; position: sticky; top: 0; height: 100dvh;
    display: flex; flex-direction: column; justify-content: flex-start;
    width: 190px; flex: none; border-top: 0; border-right: 1px solid var(--lijn);
    padding: var(--ruimte-6) var(--ruimte-2);
  }
  .navigatie a {
    flex-direction: row; justify-content: flex-start; gap: var(--ruimte-3);
    font-size: var(--tekst-m-size); padding: var(--ruimte-2) var(--ruimte-3);
  }
  .navigatie a[aria-current="page"] { background: var(--papier-3); }
  .navigatie a[aria-current="page"] .teken { border: 0; }
  .romp { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .inhoud { padding: var(--rand-scherm-breed); max-width: var(--breed-max); width: 100%; }
  .kop { padding: var(--ruimte-4) var(--rand-scherm-breed) var(--ruimte-3); }
  .kop h1 { font-size: var(--kop-4-size); line-height: var(--kop-4-line); }
  .tb-naam { font-size: var(--tekst-s-size); }
  .wr-binnen { grid-template-columns: var(--uur-gutter-breed) repeat(7, minmax(116px, 1fr)); }
  .venster { align-items: center; }
  .venster .paneel { padding: var(--ruimte-6); }
  .kleurkiezer { grid-template-columns: repeat(6, 1fr); }
}