/* Adventurely — het reisplan op een groot scherm.
   LET OP: /stijl.css bezet al .groot, .raster, .cijfer(s), .kop, .knop,
   .held, .bord, .melding, .laden, .voet en .leeg. Namen hier dus eigen,
   behalve waar we die stijl juist willen. */

main { max-width: 1240px; }

.bijzin { color: var(--inkt-zacht); margin: 4px 0 0; }
#kopnav { align-items: center; }
.wie { color: var(--inkt-zacht); font-size: 13px; }
/* Op een telefoon past "ingelogd als …" niet naast het logo, en juist
   dáár wil je het kunnen lezen — dus eronder in plaats van weg. */
@media (max-width: 560px) {
  .kop { flex-wrap: wrap; }
  .kop #kopnav { width: 100%; justify-content: space-between; }
}
.fout { color: #C4553D; }
.knop.klein { padding: 8px 14px; border-radius: 12px; font-size: 14px; }

/* ── Inloggen ─────────────────────────────────────────────── */
.inlog { background: var(--wit); border-radius: 24px; padding: clamp(22px, 5vw, 40px);
         max-width: 440px; margin: 48px auto; }
.inlog h2 { margin-bottom: 4px; }
.inlog label { display: block; font-size: 14px; color: var(--inkt-zacht); margin: 16px 0 4px; }
.inlog input { width: 100%; padding: 12px 14px; border-radius: 14px;
               border: 1.5px solid var(--steen); font: inherit; background: var(--zand); }
.inlog .knop { width: 100%; margin-top: 20px; }

/* ── Welke reis ───────────────────────────────────────────── */
.reizen { display: grid; gap: 12px; margin-top: 18px;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.reiskaart { text-align: left; background: var(--wit); border: 1.5px solid transparent;
             border-radius: 20px; padding: 20px; cursor: pointer;
             transition: border-color .16s ease, transform .16s ease; }
.reiskaart:hover { border-color: var(--terracotta); }
.reiskaart:active { transform: scale(.99); }
.reiskaart b { display: block; font: 700 18px var(--kop); }
.reiskaart span { display: block; color: var(--inkt-zacht); font-size: 14px; margin-top: 4px; }
.merkje.pro { display: inline-block; margin-top: 10px; font-style: normal;
              background: #FDF6E4; color: #8A6B15; border-radius: 999px;
              padding: 3px 10px; font-size: 12px; font-weight: 700; }
.kaart.leeg { background: var(--wit); border-radius: 24px; padding: 32px; max-width: 560px; }

/* ── De kaart ─────────────────────────────────────────────── */
/* Eigen namen, want /stijl.css bezet .kaart al. */
.plankaart { background: var(--wit); border-radius: 24px;
             padding: 18px 18px 8px; margin-bottom: 20px; }
.plankaartkop { display: flex; align-items: baseline; gap: 10px;
                flex-wrap: wrap; margin-bottom: 4px; }
.plankaartkop b { font: 700 17px var(--kop); }
.plankaartkop span { color: var(--inkt-zacht); font-size: 14px; }
/* Het kaartvlak zelf. Een vaste hoogte, want MapLibre heeft een maat
   nodig om zich in te tekenen en een kaart die met zijn inhoud meegroeit
   bestaat niet. */
.plankaartvlak { height: clamp(320px, 52vh, 520px); border-radius: 18px;
                 overflow: hidden; background: var(--zand); }
.plankaartvlak.mislukt { display: none; }

/* De genummerde speld, dezelfde als in de app. */
.plankaartstip {
  min-width: 30px; height: 30px; padding: 0 7px; border-radius: 15px;
  background: var(--terracotta); border: 2px solid var(--wit); color: var(--wit);
  display: flex; align-items: center; justify-content: center;
  font: 600 14px var(--tekst); box-shadow: 0 2px 6px rgba(46,42,38,.3);
  transition: transform .16s cubic-bezier(.23,1,.32,1);
}
/* Boven de vervoerschijfjes. Liggen twee stops dicht bij elkaar, dan
   valt het schijfje van hun etappe precies op de spelden — en dan wil je
   de spelden zien en kunnen aanwijzen, niet het schijfje. */
.plankaartstip { z-index: 2; }
.plankaartstip.pakbaar { cursor: pointer; }
.plankaartstip.pakbaar:hover { transform: scale(1.15); }
.plankaartstip:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; }

/* Het vervoer op een etappe: een wit schijfje met het teken erin,
   meegedraaid met de richting van de reis. */
.plankaartrit { width: 34px; height: 34px; border-radius: 17px;
                background: rgba(255,255,255,.95); border: 1.5px solid var(--steen);
                display: flex; align-items: center; justify-content: center;
                box-shadow: 0 2px 6px rgba(46,42,38,.22); }
.plankaartrit.verstopt { display: none; }
.plankaartrit.pakbaar { cursor: pointer; border-color: var(--terracotta); border-width: 2px; }
.plankaartrit.pakbaar:hover { background: #FBEDE7; }
.plankaartrit:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; }
.plankaartritteken { font-size: 18px; line-height: 1; display: block; }

/* De strook kaartjes onder de kaart, net als in de app. Hier staat de
   naam en de periode, en niet bij de speld: een bordje onder elke speld
   maakt de kaart vol, en twee stops dicht bij elkaar lopen door elkaar
   heen. */
.plankaartstrook { display: flex; align-items: center; gap: 8px; overflow-x: auto;
                   padding: 12px 2px 4px; scroll-snap-type: x proximity; }

/* Het schakeltje tussen twee kaartjes: een streepje met het
   reissymbool erin, zodat je ziet hóé je van de ene plek naar de
   andere komt zonder de kaart af te hoeven speuren. */
.plankaartschakel { flex: none; display: flex; align-items: center; gap: 4px;
                    color: var(--steen); }
.plankaartschakel::before, .plankaartschakel::after {
  content: ''; width: 9px; height: 2px; border-radius: 1px; background: var(--steen);
}
.plankaartschakelteken { font-size: 15px; line-height: 1; }

/* Een plaats die nog niet op de kaart staat: wel te lezen, niet te
   kiezen, want er valt niets om heen te vliegen. */
.plankaartje.nietgeplaatst { cursor: default; opacity: .72; border-style: dashed;
                             border-color: var(--steen); }
.plankaartje.nietgeplaatst:hover { border-color: var(--steen); }
.plankaartje.nietgeplaatst .plankaartjedatum { font-style: italic; }
.plankaartje { flex: none; scroll-snap-align: start; cursor: pointer;
               background: var(--zand); border: 1.5px solid transparent;
               border-radius: 16px; padding: 10px 14px; text-align: left;
               display: grid; gap: 1px; min-width: 132px;
               transition: border-color .16s ease, transform .16s ease; }
.plankaartje:hover { border-color: var(--terracotta); }
.plankaartje:active { transform: scale(.98); }
.plankaartje.aan { background: var(--terracotta); }
.plankaartje.aan .plankaartjenaam { color: var(--wit); }
.plankaartje.aan .plankaartjedatum, .plankaartje.aan .plankaartjenr { color: #F6DCD1; }
.plankaartjenr { font: 600 11px var(--tekst); color: var(--terracotta); }
.plankaartjeteken { font-size: 15px; line-height: 1; }
.plankaartjenaam { font: 600 15px var(--kop); color: var(--inkt); }
.plankaartjedatum { font: 12px var(--tekst); color: var(--inkt-zacht); }

@media (prefers-reduced-motion: reduce) {
  .plankaartstip, .plankaartje { transition: none; }
}

/* Het venster dat opengaat als je iets aanklikt. Onder de kaart en niet
   eroverheen: zo blijft zichtbaar wát je hebt aangeklikt. */
.plankaartvenster { margin-top: 14px; padding-top: 14px;
                    border-top: 1px solid var(--zand); }
.plankaartvenster[hidden] { display: none; }
.plankaartvensterkop { display: flex; align-items: center; gap: 10px; }
.plankaartvensterkop b { font: 700 16px var(--kop); flex: 1; }
.plankaartdicht { background: none; border: 0; cursor: pointer; font-size: 18px;
                  color: var(--inkt-zacht); padding: 4px 8px; border-radius: 8px; }
.plankaartdicht:hover { background: var(--zand); color: var(--inkt); }
.plankaartklein { color: var(--inkt-zacht); font-size: 13px; margin: 6px 0 0;
                  max-width: 62ch; }
.plankaartknoppen { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

.plankaartkeuzes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.plankaartkeuze { background: var(--zand); border: 1.5px solid transparent;
                  border-radius: 999px; padding: 7px 14px; cursor: pointer;
                  font: 15px var(--tekst); color: var(--inkt); }
.plankaartkeuze:hover { border-color: var(--terracotta); }
.plankaartkeuze.aan { background: var(--terracotta); color: var(--wit); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .plankaartstip { transition: none; }
}

/* ── Een boeking inlezen ──────────────────────────────────── */
.boeking { background: var(--wit); border-radius: 24px; margin-bottom: 20px; }

/* Dichtgeklapt is dit één regel met een icoontje. Het driehoekje van de
   browser halen we weg: we zetten er zelf een neer die meedraait, want
   de ingebouwde ziet er op elk systeem anders uit. */
.boekingopener { display: flex; align-items: center; gap: 10px; cursor: pointer;
                 padding: 16px 18px; list-style: none; border-radius: 24px;
                 font: 600 16px var(--kop); color: var(--inkt); }
.boekingopener::-webkit-details-marker { display: none; }
.boekingopener:hover { background: var(--zand); }
.boekingopener::after { content: '›'; margin-left: auto; color: var(--inkt-zacht);
                        font-size: 20px; transition: transform .16s cubic-bezier(.23,1,.32,1); }
.boeking[open] .boekingopener::after { transform: rotate(90deg); }
.boeking[open] .boekingopener { border-radius: 24px 24px 0 0; }
.boekingteken { font-size: 20px; line-height: 1; }
.boekingopener:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -2px; }

.boekinginhoud { padding: 0 18px 18px; }
.boekinginleiding { margin: 0 0 4px; color: var(--inkt-zacht); font-size: 14px;
                    max-width: 62ch; }
.boekingstappen { margin: 10px 0 14px; padding-left: 20px; max-width: 62ch;
                  color: var(--inkt); font-size: 14px; line-height: 1.7; }
.boekingstappen li::marker { color: var(--terracotta); font-weight: 700; }
.boekingstappen b { font-weight: 600; }

/* Het sleepvak. Gestippeld omdat het een plek is om iets neer te
   leggen, niet iets om op te drukken — dat verschil moet je zien
   voordat je het leest. */
.boekingvak { border: 2px dashed var(--steen); border-radius: 18px;
              padding: 22px 18px; text-align: center; background: var(--zand);
              transition: border-color .16s cubic-bezier(.23,1,.32,1),
                          background-color .16s cubic-bezier(.23,1,.32,1); }
.boekingvak.mikt { border-color: var(--terracotta); background: #FBEDE7; }
.boekingvaktekst { margin: 0 0 10px; font: 600 16px var(--kop); color: var(--inkt); }
.boekingvak .knop { pointer-events: auto; }
/* Wat je sleept mag de tekst eronder niet opvangen: dan telt dragleave
   verkeerd en knippert de rand. */
.boekingvak.mikt * { pointer-events: none; }

.boekinguitleg { color: var(--inkt-zacht); font-size: 13px; margin: 12px 0 0;
                 max-width: 62ch; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .boekingvak { transition: none; } }
/* Het echte bestandsveld is niet te stijlen; de knop ernaast wel. Niet
   display:none — dan is het veld voor een schermlezer ook weg. */
.boekingkiezer { position: absolute; width: 1px; height: 1px;
                 overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.boekingpaneel { margin-top: 16px; padding-top: 14px;
                 border-top: 1px solid var(--zand); display: grid; gap: 8px; }
.boekingpaneel[hidden] { display: none; }
.boekinggevonden { font: 600 11px var(--tekst); color: var(--inkt-zacht);
                   text-transform: uppercase; letter-spacing: .08em; }
.boekingrij { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.boekinglabel { flex: none; min-width: 108px; color: var(--inkt-zacht); font-size: 14px; }
.boekingraakt { font-weight: 600; margin-top: 4px; }
.boekingletop { color: #8A6B15; background: #FDF6E4; border-radius: 12px;
                padding: 8px 12px; font-size: 14px; margin: 0; }
.boekingknoppen { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ── Het plan ─────────────────────────────────────────────── */
.plankop { display: flex; align-items: flex-end; justify-content: space-between;
           gap: 16px; flex-wrap: wrap; margin: 8px 0 20px; }
.plankop h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; }

.melding { background: #FDF6E4; border: 1px solid var(--goud); border-radius: 16px;
           padding: 14px 18px; margin-bottom: 20px; display: grid; gap: 2px; }
.melding b { font-family: var(--kop); }
.melding span { color: var(--inkt-zacht); font-size: 14px; }

/* Een kolom per dag, zoveel als er passen. Dát is het hele punt van een
   groot scherm: de hele reis in één oogopslag. */
.dagen { display: grid; gap: 12px;
         grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.dag { background: var(--wit); border: 1px solid rgba(46,42,38,.09); border-radius: 18px;
       padding: 14px 16px 16px; }
.dag.nietingevuld { background: rgba(255,255,255,.55); border-style: dashed; }
.dag header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dagnr { font: 700 17px var(--kop); color: var(--terracotta); }
.weekdag { color: var(--inkt-zacht); font-size: 13px; flex: 1; }
.dagteken { font-size: 17px; }

/* Dezelfde regel als in de app: "🚗  Rijden · Auto · Lucca". Zonder
   deze titel is een lijst met datums niet terug te vinden. */
/* Een dag erbij of eraf. Klein en rustig: je gebruikt ze zelden, maar
   als je ze zoekt wil je ze bij de dag zien staan en niet onderaan. */
.schuifrij { display: inline-flex; gap: 4px; margin-left: 6px; }
.schuif { width: 24px; height: 24px; padding: 0; border-radius: 8px; cursor: pointer;
          border: 1.5px solid var(--steen); background: var(--wit);
          color: var(--inkt-zacht); font: 600 15px/1 var(--tekst); }
.schuif:hover { border-color: var(--terracotta); color: var(--terracotta); }
.schuif[disabled] { opacity: .5; cursor: default; }

.dagtitel { margin: 0 0 2px; font: 600 14px var(--tekst); color: var(--inkt);
            line-height: 1.35; }
.dag.nietingevuld .dagtitel { color: var(--inkt-zacht); font-weight: 400; }

.dag label { display: block; font: 600 11px var(--tekst); color: var(--inkt-zacht);
             text-transform: uppercase; letter-spacing: .08em; margin-top: 10px; }
/* `display: block` hierboven wint het van het ingebouwde [hidden], en dan
   blijft "Waar" staan bij een rijdag — met een veld dat nergens heen gaat. */
.dag [hidden] { display: none; }
.veld { width: 100%; margin-top: 4px; padding: 9px 11px; border-radius: 12px;
        border: 1.5px solid var(--steen); background: var(--zand);
        font: 15px var(--tekst); color: var(--inkt); }
.veld:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: transparent; }
.veld:disabled { opacity: .6; cursor: not-allowed; }
.notitie { resize: vertical; min-height: 64px; line-height: 1.45; }

/* ── Een plaats zoeken terwijl je typt ────────────────────── */
/* De lijst hangt óver wat eronder staat en duwt het niet weg: anders
   springt de hele dagkaart op en neer bij elke toetsaanslag. */
.zoekveld { position: relative; }
.zoeklijst { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
             background: var(--wit); border: 1.5px solid var(--steen);
             border-radius: 14px; overflow: hidden;
             box-shadow: 0 12px 28px -12px rgba(46,42,38,.45); }
.zoeklijst[hidden] { display: none; }
.zoekkeuze { display: block; width: 100%; text-align: left; cursor: pointer;
             background: none; border: 0; padding: 9px 12px; font: inherit; }
.zoekkeuze + .zoekkeuze { border-top: 1px solid var(--zand); }
.zoekkeuze:hover, .zoekkeuze:focus-visible { background: #FBEDE7; outline: none; }
.zoekkeuze b { display: block; font: 600 15px var(--tekst); color: var(--inkt); }
.zoekkeuze i { display: block; font-style: normal; font-size: 12px;
               color: var(--inkt-zacht); margin-top: 1px; }

/* Woordje terug bij het bewaren: kort zichtbaar, en rood als het misging. */
.stand { font-size: 11px; font-weight: 600; }
.stand.bezig { color: var(--inkt-zacht); }
.stand.goed { color: var(--olijf); }
.stand.open { color: var(--terracotta); }
.stand.mis { color: #C4553D; font-weight: 400; }

/* Een dag die nog niet weg is, moet je kunnen aanwijzen zonder te
   zoeken: een streep in de kleur van de knop die hem wegschrijft. */
.dag.ongebewaard { border-color: var(--terracotta); box-shadow: inset 3px 0 0 var(--terracotta); }

/* ── De bewaarbalk ────────────────────────────────────────── */
.bewaarbalk { position: sticky; bottom: 16px; z-index: 5; margin-top: 20px;
              display: flex; align-items: center; justify-content: space-between;
              gap: 16px; flex-wrap: wrap;
              background: var(--wit); border: 1.5px solid var(--terracotta);
              border-radius: 18px; padding: 12px 14px 12px 20px;
              box-shadow: 0 10px 30px -14px rgba(46,42,38,.45); }
.bewaarbalk[hidden] { display: none; }
.balktekst { font-weight: 600; }

/* ── De planassistent ─────────────────────────────────────── */
.assistent { display: flex; align-items: center; gap: 14px;
             flex-wrap: wrap; margin-bottom: 20px; }
.over { color: var(--inkt-zacht); font-size: 14px; }
.over.mis { color: #C4553D; }

.dagknop { margin-top: 14px; width: 100%; }
/* Staan er al ideeën, dan is "zet op tijdlijn" de hoofdhandeling en
   zakt "nog meer ideeën" naar een bescheiden regel eronder. */
.dagknop.meerideeen { margin-top: 8px; border: 0; background: none;
                      color: var(--inkt-zacht); font-size: 13px;
                      text-decoration: underline; padding: 4px; }

.ideeen { margin-top: 14px; border-top: 1px solid var(--zand); padding-top: 10px; }
.ideeenbalk { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ideeenkop { font: 600 11px var(--tekst); color: var(--inkt-zacht);
             text-transform: uppercase; letter-spacing: .08em; }
.ideeenbalk .knop { padding: 4px 10px; border-radius: 10px; font-size: 12px; }

.dag label.idee { display: flex; align-items: flex-start; gap: 9px;
        margin-top: 10px; text-transform: none; letter-spacing: 0;
        font: 14px var(--tekst); color: var(--inkt); cursor: pointer; }
.idee input { margin-top: 3px; accent-color: var(--terracotta); width: 17px; height: 17px; flex: none; }
.idee b { font-weight: 600; }

/* Het programma van een dag: eigen kader in de kleur van de app, zodat
   je ziet dat dit iets anders is dan de voorstellen erboven. */
.ideeenvoet { display: flex; align-items: center; gap: 10px;
              flex-wrap: wrap; margin-top: 10px; }
.programma { margin-top: 12px; border: 1.5px solid var(--terracotta);
             border-radius: 14px; padding: 10px 12px; background: var(--wit); }
.actrij { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; }
.actteken { color: var(--terracotta); font-weight: 700; line-height: 1.5; }
.actwat { flex: 1; font: 14px var(--tekst); color: var(--inkt); }
.actwat b { font-weight: 600; display: block; }
.actwat i { display: block; color: var(--inkt-zacht); font-size: 13px;
            font-style: normal; margin-top: 1px; }
.actweg { flex: none; background: none; border: 0; cursor: pointer;
          color: var(--inkt-zacht); font: 12px var(--tekst); padding: 2px 4px; }
.actweg:hover { color: #C4553D; text-decoration: underline; }
.actnotitie { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--zand);
              font: 14px var(--tekst); color: var(--inkt); }
.actzelf { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--zand); }
.actzelfrij { display: flex; gap: 8px; margin-top: 4px; }
.actzelfrij .veld { flex: 1; margin-top: 0; }
.actzelfrij .knop { flex: none; }

/* Het schakeltje in de strook is nu een knop als je het vervoer mag
   wijzigen. Ligt een etappe tussen twee stops die dicht bij elkaar
   liggen, dan staat het schijfje niet op de kaart — en dan is dit de
   enige plek waar je erbij kunt. */
.plankaartschakel.pakbaar { background: none; border: 0; cursor: pointer;
                            padding: 4px 2px; border-radius: 10px; }
.plankaartschakel.pakbaar:hover { background: #FBEDE7; }
.plankaartschakel.pakbaar:hover::before,
.plankaartschakel.pakbaar:hover::after { background: var(--terracotta); }
.plankaartschakel.pakbaar:focus-visible { outline: 2px solid var(--terracotta);
                                          outline-offset: 1px; }

/* Wat er in het venster van een aangeklikte stop staat. */
.plankaartheen { margin: 8px 0 0; font: 14px var(--tekst); color: var(--inkt); }
.plankaartprogramma { margin-top: 10px; }
.plankaartact { margin: 3px 0 0; font: 14px var(--tekst); color: var(--inkt); }
.idee i { display: block; color: var(--inkt-zacht); font-size: 13px;
          font-style: normal; margin-top: 1px; }

/* Indrukken moet voelbaar zijn: /stijl.css doet daar niets aan, en een
   knop die niet reageert laat je twee keer klikken. */
.knop:not([disabled]) { cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1); }
.knop:not([disabled]):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .knop, .reiskaart { transition: none; }
  .knop:not([disabled]):active, .reiskaart:active { transform: none; }
}