/* ---------------------------------------------------------- basis + thema */
:root {
  --papier:      #fbf7f1;
  --kaart:       #ffffff;
  --kaart2:      #f4eee4;
  --inkt:        #241d18;
  --inkt-zacht:  #6b5f54;
  --lijn:        #e2d8c9;
  --accent:      #8c3b23;
  --accent-zacht:#f6e7e1;
  --tip:         #1d6a4f;
  --tip-vlak:    #e4f2ea;
  --waarschuw:   #a6301f;
  --waarschuw-vlak:#fbe6e2;
  --letop:       #8a5a10;
  --letop-vlak:  #fbf0dc;
  --info:        #2b5d94;
  --info-vlak:   #e5eef8;
  --schaduw:     0 1px 2px rgba(40,28,18,.07), 0 6px 18px rgba(40,28,18,.06);
  --radius:      14px;
  --kophoogte:   106px;
}
:root[data-thema="donker"] {
  --papier:      #16130f;
  --kaart:       #221d18;
  --kaart2:      #2b241d;
  --inkt:        #f2ebe1;
  --inkt-zacht:  #a99c8d;
  --lijn:        #3a3129;
  --accent:      #e08a68;
  --accent-zacht:#3a251d;
  --tip:         #7fd0ac;
  --tip-vlak:    #1d3229;
  --waarschuw:   #f4907e;
  --waarschuw-vlak:#3a221e;
  --letop:       #e5b662;
  --letop-vlak:  #352a17;
  --info:        #8fbdec;
  --info-vlak:   #1e2c3b;
  --schaduw:     0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --papier:#16130f; --kaart:#221d18; --kaart2:#2b241d; --inkt:#f2ebe1;
    --inkt-zacht:#a99c8d; --lijn:#3a3129; --accent:#e08a68; --accent-zacht:#3a251d;
    --tip:#7fd0ac; --tip-vlak:#1d3229; --waarschuw:#f4907e; --waarschuw-vlak:#3a221e;
    --letop:#e5b662; --letop-vlak:#352a17; --info:#8fbdec; --info-vlak:#1e2c3b;
    --schaduw:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }
/* Een eigen display-regel wint anders van het hidden-kenmerk, waardoor iets
   wat verborgen hoort te zijn gewoon zichtbaar blijft. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--papier);
  color: var(--inkt);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
a { color: var(--accent); }
button { font: inherit; color: inherit; }

/* --------------------------------------------------------------- laadscherm */
.laadscherm {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--papier);
}
.laadinhoud { text-align: center; color: var(--inkt-zacht); }
.laadlogo {
  width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 22px;
  background: linear-gradient(150deg, #b4553a, #8c3b23);
  color: #fff; font-weight: 800; font-size: 27px; letter-spacing: 1px;
  display: grid; place-items: center;
}
.laadscherm.weg { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* --------------------------------------------------------------------- kop */
.kop {
  position: sticky; top: 0; z-index: 20;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
  padding-top: env(safe-area-inset-top);
}
.kopbalk {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 6px;
}
.koptitel {
  flex: 1; text-align: center; font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kopknop {
  border: 1px solid var(--lijn); background: var(--kaart);
  border-radius: 999px; padding: 6px 12px; font-size: 13px;
  cursor: pointer; min-height: 34px; white-space: nowrap;
}
.kopknop:active { background: var(--kaart2); }

.dagstrip {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 10px 10px; scroll-behavior: smooth;
}
.dagstrip::-webkit-scrollbar { display: none; }
.dagknop {
  flex: 0 0 auto; width: 50px; padding: 6px 0 7px;
  border: 1px solid var(--lijn); border-radius: 12px; background: var(--kaart);
  text-align: center; cursor: pointer; line-height: 1.15;
  border-top: 3px solid var(--fase, var(--lijn));
}
.dagknop b { display: block; font-size: 17px; }
.dagknop span { display: block; font-size: 10px; color: var(--inkt-zacht); text-transform: lowercase; }
.dagknop.actief { background: var(--fase, var(--accent)); border-color: var(--fase, var(--accent)); }
.dagknop.actief b, .dagknop.actief span { color: #fff; }
.dagknop.vandaag:not(.actief) { box-shadow: inset 0 0 0 2px var(--fase, var(--accent)); }

/* ------------------------------------------------------------------- scherm */
main {
  max-width: 760px; margin: 0 auto;
  padding: 14px 12px calc(88px + env(safe-area-inset-bottom));
  outline: none;
}

.daghoofd { margin: 2px 0 14px; }
.faselabel {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #fff; background: var(--fase, var(--accent));
  border-radius: 999px; padding: 3px 10px;
}
.dagdatum { color: var(--inkt-zacht); font-size: 14px; margin: 9px 0 2px; }
h1 { font-size: 25px; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 .pijl { color: var(--inkt-zacht); font-weight: 400; }

.blad {
  background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: var(--radius); box-shadow: var(--schaduw);
  margin: 0 0 12px; overflow: hidden;
}
.bladkop {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 13px 14px; background: none; border: 0; cursor: pointer;
  text-align: left; font-weight: 700; font-size: 15px;
}
.bladkop .telling { color: var(--inkt-zacht); font-weight: 500; font-size: 13px; }
.bladkop .chevron { margin-left: auto; color: var(--inkt-zacht); transition: transform .18s; }
.blad.dicht .chevron { transform: rotate(-90deg); }
.blad.dicht .bladbody { display: none; }
.bladbody { padding: 0 14px 14px; }
.bladkop + .bladbody { border-top: 1px solid var(--lijn); padding-top: 12px; }

/* -------------------------------------------------------------------- route */
.route { border-color: var(--accent); }
.routecijfers {
  display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px;
}
.cijfer {
  background: var(--kaart2); border-radius: 9px; padding: 6px 10px;
  font-size: 13px; font-weight: 600;
}
.cijfer small { display: block; font-weight: 500; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-zacht); }
.punten { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  font-size: 14px; margin: 0 0 12px; }
.punt { background: var(--accent-zacht); color: var(--accent); border-radius: 7px;
  padding: 2px 8px; font-weight: 600; }
.punten .pijl { color: var(--inkt-zacht); }
.mapsknop {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px; border-radius: 12px; border: 0;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer;
}
.mapsknop:active { filter: brightness(.92); }

/* -------------------------------------------------------------- tekstblokken */
.bladbody p { margin: 0 0 11px; }
.bladbody p:last-child { margin-bottom: 0; }
.merk {
  border-left: 3px solid var(--kleur); background: var(--vlak);
  border-radius: 0 9px 9px 0; padding: 9px 12px; margin: 0 0 11px;
}
.merk b { color: var(--kleur); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; display: block; margin-bottom: 2px; }
.merk.tip        { --kleur: var(--tip);       --vlak: var(--tip-vlak); }
.merk.letop      { --kleur: var(--letop);     --vlak: var(--letop-vlak); }
.merk.waarschuwing{--kleur: var(--waarschuw); --vlak: var(--waarschuw-vlak); }
.merk.info, .merk.wijziging, .merk.opgelost, .merk.geboekt {
  --kleur: var(--info); --vlak: var(--info-vlak); }

/* -------------------------------------------------------------- restaurants */
.kaartje { padding: 12px 0; border-top: 1px solid var(--lijn); }
.kaartje:first-child { border-top: 0; padding-top: 2px; }
.kaartnaam { font-weight: 700; font-size: 16px; margin: 0 0 5px; }
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 7px; }
.badge {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 7px;
  background: var(--kaart2); color: var(--inkt-zacht);
}
.badge.ster { background: var(--letop-vlak); color: var(--letop); }
.badge.euro { background: var(--tip-vlak);   color: var(--tip); }
.kaarttekst { font-size: 14.5px; color: var(--inkt-zacht); margin: 0 0 9px; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.miniknop {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--lijn); border-radius: 9px; padding: 7px 12px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--inkt); background: var(--kaart);
}
.miniknop:active { background: var(--kaart2); }

/* ------------------------------------------------------------------ zoeken */
.zoekbalk {
  display: flex; gap: 8px; margin: 0 0 14px;
}
.zoekbalk input {
  flex: 1; padding: 13px 15px; font-size: 16px;
  border: 1px solid var(--lijn); border-radius: 12px;
  background: var(--kaart); color: var(--inkt);
}
.zoekbalk input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.treffer {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 12px;
  padding: 11px 13px; margin: 0 0 8px;
}
.treffer .waar { font-size: 12px; color: var(--inkt-zacht); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; }
.treffer .wat  { font-weight: 700; margin: 2px 0 1px; }
.treffer .stuk { font-size: 14px; color: var(--inkt-zacht); }
mark { background: var(--letop-vlak); color: var(--letop); border-radius: 3px; padding: 0 2px; }

/* ------------------------------------------------------------------ boeken */
.voortgang {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 14px; color: var(--inkt-zacht);
}
.balk { flex: 1; height: 8px; background: var(--kaart2); border-radius: 99px; overflow: hidden; }
.balk i { display: block; height: 100%; background: var(--tip); border-radius: 99px;
  transition: width .3s; }
.vink {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 11px 0; border-top: 1px solid var(--lijn);
}
.vink:first-child { border-top: 0; }
.vink input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--tip); }
.vink .tekst b { display: block; }
.vink .tekst span { font-size: 14px; color: var(--inkt-zacht); }
.vink.af .tekst { opacity: .5; }
.vink.af .tekst b { text-decoration: line-through; }
/* Knopje achter de titel van een checklistpunt. Loopt mee in de regel, dus
   het schuift netjes mee als de titel over twee regels breekt. */
.naardag {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  padding: 1px 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--lijn); border-radius: 7px;
  background: var(--kaart2); color: var(--accent); cursor: pointer;
}
.naardag:active { background: var(--accent-zacht); }

.vink.geboekt { cursor: default; }
.vink.geboekt .vinkje {
  width: 22px; flex: 0 0 auto; text-align: center;
  color: var(--tip); font-weight: 700; font-size: 17px; line-height: 1.3;
}
.tag.klaar { background: var(--tip-vlak); color: var(--tip); }


/* -------------------------------------------------------------------- reis */
.rij { padding: 11px 0; border-top: 1px solid var(--lijn); font-size: 14.5px; }
.rij:first-child { border-top: 0; }
.rij b { display: block; }
.rij .grijs { color: var(--inkt-zacht); }
.rij.vervallen { opacity: .45; }
.rij.vervallen b { text-decoration: line-through; }
.tag { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; border-radius: 6px; padding: 1px 6px; }
.tag.actie { background: var(--waarschuw-vlak); color: var(--waarschuw); }

/* ----------------------------------------------------------------- tabbalk */
.tabbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--kaart); border-top: 1px solid var(--lijn);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  border: 0; background: none; cursor: pointer; padding: 9px 0 8px;
  font-size: 11px; font-weight: 600; color: var(--inkt-zacht);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tab .tabicoon { font-size: 19px; line-height: 1; }
.tab.actief { color: var(--accent); }

.voet { text-align: center; color: var(--inkt-zacht); font-size: 12px;
  margin: 22px 0 0; line-height: 1.7; }
.leeg { text-align: center; color: var(--inkt-zacht); padding: 40px 20px; }

@media (min-width: 620px) {
  h1 { font-size: 29px; }
  .dagknop { width: 56px; }
}

/* ------------------------------------------------------- installuitnodiging */
/* Android laat de app zelf vragen of hij op het startscherm mag. Dat scheelt
   drie mensen een uitleg over een menu dat ze nooit gebruiken. */
.installbalk {
  display: flex; align-items: center; gap: 10px;
  max-width: 760px; margin: 8px auto 0; padding: 7px 8px 7px 12px;
  background: var(--accent-zacht); border: 1px solid var(--accent);
  border-radius: 10px; color: var(--inkt);
}
.installtekst { flex: 1; font-size: 13px; line-height: 1.3; }
.installknop {
  border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
  white-space: nowrap;
}
.installweg {
  border: 0; background: none; cursor: pointer; font-size: 20px;
  line-height: 1; color: var(--inkt-zacht); padding: 4px 6px;
}