:root{
  --ink:#211E17;
  --paper:#F1E9D2;
  --paper-dark:#E7DCBB;
  --forest:#1E3324;
  --moss:#4C6B4F;
  --ochre:#BD8B2E;
  --rust:#9B4B32;
  --teal:#4C7B7A;
  --line: rgba(33,30,23,0.16);
  --spine-w: 52px;
  --paper-rgb: 241,233,210;
  --ink-rgb: 33,30,23;
  --cream:#F1E9D2;
  --fixed-dark:#211E17;
  --fixed-moss:#4C6B4F;
  --violet:#7A6A9E;
}
:root[data-theme="dark"]{
  --ink:#EDE6D3;
  --paper:#1B1912;
  --paper-dark:#272319;
  --moss:#7BAA80;
  --ochre:#E0AC52;
  --rust:#D07A57;
  --teal:#7EB6B3;
  --line: rgba(237,230,211,0.14);
  --paper-rgb: 27,25,18;
  --ink-rgb: 237,230,211;
  --violet:#A594D1;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  background-image:
    radial-gradient(circle at 15% 25%, rgba(var(--ink-rgb),0.035) 0, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(var(--ink-rgb),0.03) 0, transparent 45%),
    repeating-linear-gradient(0deg, rgba(var(--ink-rgb),0.015) 0 1px, transparent 1px 3px);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  padding-left:var(--spine-w);
  transition:background-color .2s, color .2s;
}
h1,h2,h3,.display{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
em{color:var(--rust);font-style:italic;}
button{font-family:'Inter',sans-serif;cursor:pointer;border:none;background:none;}

/* ---- Stitched spine (signature element, shared across pages) ---- */
.spine{
  position:fixed;left:0;top:0;bottom:0;width:var(--spine-w);
  background:linear-gradient(180deg,var(--forest),#16261B);
  z-index:80;display:flex;flex-direction:column;align-items:center;padding:1.4rem 0;
}
.spine::after{content:"";position:absolute;top:0;bottom:0;left:14px;width:0;border-left:2px dashed rgba(241,233,210,0.25);}
.spine .ticks{flex:1;width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:2rem 0;}
.spine .tick{width:9px;height:1px;background:rgba(241,233,210,0.3);margin-left:5px;}
.spine .rotated{writing-mode:vertical-rl;text-orientation:mixed;color:var(--cream);font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.18em;opacity:0.55;}
.spine .stamp{width:26px;height:26px;border:1.4px solid var(--ochre);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ochre);font-size:0.85rem;margin-bottom:1.2rem;}

/* ---- Header ---- */
header{
  display:flex;justify-content:space-between;align-items:center;padding:1.4rem 3rem;
  border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(var(--paper-rgb),0.9);backdrop-filter:blur(6px);z-index:1100;
}
.logo{font-family:'Fraunces',serif;font-weight:700;font-size:1.3rem;display:flex;align-items:center;gap:0.55rem;}
.logo-bird{flex-shrink:0;color:var(--ochre);}
.logo-text{display:flex;flex-direction:column;line-height:1.15;}
.logo .sub{display:block;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--moss);margin-top:0.15rem;}
nav{display:flex;gap:2.2rem;row-gap:0.7rem;flex-wrap:wrap;justify-content:flex-end;font-size:0.92rem;font-weight:500;align-items:center;}
nav a{opacity:0.75;transition:opacity .2s;border-bottom:1px solid transparent;padding-bottom:2px;}
nav a:hover{opacity:1;border-color:var(--ochre);}
nav a.active{opacity:1;border-color:var(--ochre);}
nav a.cta{opacity:1;background:var(--forest);color:var(--cream);padding:0.55rem 1rem;border-radius:2px;}
nav a.cta:hover{background:var(--moss);border-color:transparent;}
.header-controls{display:flex;align-items:center;gap:0.5rem;margin-left:0.4rem;}
.icon-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:rgba(var(--ink-rgb),0.04);color:var(--ink);display:flex;
  align-items:center;justify-content:center;font-size:1rem;cursor:pointer;
  transition:background .2s, transform .2s;
}
.icon-btn:hover{background:rgba(var(--ink-rgb),0.09);}
.lang-btn{
  width:auto;padding:0 0.7rem;border-radius:20px;font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;font-weight:600;letter-spacing:0.04em;
}

/* ---- Hero (used on homepage) ---- */
.hero{display:grid;grid-template-columns:1fr 1.15fr;min-height:74vh;border-bottom:1px solid var(--line);}
.hero-plate{
  background:linear-gradient(165deg, rgba(30,51,36,0.94), rgba(22,38,27,0.97)),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 10px);
  position:relative;display:flex;align-items:center;justify-content:center;padding:3rem;
  overflow:hidden;
}

/* ---- Vondstenbord: de twee foto-plates in de hero ---- */
.field-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.flight-path{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.plate-board{position:relative;z-index:2;width:100%;max-width:320px;}
.plate{
  position:relative;background:var(--paper);border-radius:4px;overflow:visible;
  box-shadow:0 18px 40px rgba(0,0,0,0.4);
}
.plate-recent{transform:rotate(-2.2deg);width:78%;}
.plate-rare{transform:rotate(2deg);width:78%;margin:-1.4rem 0 0 auto;}
.plate-photo{
  width:100%;height:150px;background-size:cover;background-position:center;
  border-radius:4px 4px 0 0;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.plate-photo .plate-icon{font-size:2.4rem;color:var(--cream);}
.plate-number{
  position:absolute;top:0.55rem;right:0.55rem;background:rgba(20,26,20,0.55);color:var(--cream);
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.04em;
  padding:0.2rem 0.5rem;border-radius:20px;
}
.plate-label{padding:0.9rem 1.05rem 1rem;}
.plate-tag{
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--moss);display:flex;align-items:center;gap:0.4rem;margin-bottom:0.4rem;
}
.plate-tag .dot{
  width:7px;height:7px;border-radius:50%;background:#5FAE72;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(95,174,114,0.55);animation:pulseDot 2.2s infinite;
}
.plate-rare .plate-tag{color:var(--rust);}
.plate h3{font-size:1.25rem;line-height:1.15;}
.plate .plate-latin{font-style:italic;color:var(--moss);font-size:0.82rem;margin-top:0.05rem;}
.plate .plate-meta{
  margin-top:0.6rem;font-size:0.7rem;color:var(--ink);opacity:0.62;
  padding-top:0.5rem;border-top:1px dashed var(--line);
}
.plate .plate-count{font-size:0.7rem;color:var(--rust);margin-top:0.3rem;font-weight:600;}
.plate-seal{
  position:absolute;top:-16px;right:-14px;width:66px;height:66px;border-radius:50%;
  background:var(--rust);color:var(--cream);display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:0.6rem;font-weight:700;
  line-height:1.15;letter-spacing:0.02em;text-transform:uppercase;transform:rotate(11deg);
  box-shadow:0 8px 18px rgba(0,0,0,0.4);border:2px dashed rgba(241,233,210,0.55);z-index:3;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(95,174,114,0.55);}
  70%{box-shadow:0 0 0 6px rgba(95,174,114,0);}
  100%{box-shadow:0 0 0 0 rgba(95,174,114,0);}
}
@media (prefers-reduced-motion: reduce){
  .plate-tag .dot{animation:none;}
}

.hero-copy{padding:4rem 4rem;display:flex;flex-direction:column;justify-content:center;}
.hero-copy .eyebrow{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;font-weight:600;}
.hero-copy h1{font-size:3.1rem;line-height:1.04;margin-bottom:1.3rem;}
.hero-copy p{max-width:480px;color:rgba(var(--ink-rgb),0.72);font-size:1.06rem;margin-bottom:1.9rem;}

/* ---- Simple page header (used on the add-sighting page) ---- */
.page-head{max-width:1200px;margin:0 auto;padding:3.5rem 3rem 2.5rem;}
.page-head .eyebrow{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-bottom:0.8rem;font-weight:600;display:block;}
.page-head h1{font-size:2.4rem;margin-bottom:0.6rem;}
.page-head p{max-width:560px;color:rgba(var(--ink-rgb),0.7);}

.btn{
  display:inline-flex;align-items:center;gap:0.5rem;background:var(--forest);color:var(--cream);
  padding:0.8rem 1.4rem;border-radius:2px;font-weight:500;font-size:0.92rem;width:fit-content;
  transition:background .2s, transform .2s;
}
.btn:hover{background:var(--moss);transform:translateX(2px);}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn.ghost:hover{background:rgba(var(--ink-rgb),0.05);transform:none;}
.btn.small{padding:0.5rem 0.9rem;font-size:0.8rem;}

section{padding:4.5rem 3rem;}
.section-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:0.4rem 1rem;margin-bottom:1.8rem;max-width:1200px;margin-inline:auto;}
.section-head .eyebrow{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ochre);display:block;margin-bottom:0.3rem;}
.section-head h2{font-size:1.95rem;}
.section-head .count{font-family:'JetBrains Mono',monospace;font-size:0.85rem;color:var(--moss);}

.map-wrap{
  position:relative;
  max-width:1200px;margin:0 auto;
  border-radius:3px;border:1px solid var(--line);box-shadow:0 6px 26px rgba(0,0,0,0.08);
}
.map-canvas{position:relative;border-radius:3px 3px 0 0;overflow:hidden;}
#map{height:520px;display:block;}
.map-fullscreen-btn{
  position:absolute;top:0.8rem;right:0.8rem;z-index:450;width:34px;height:34px;
  background:rgba(var(--paper-rgb),0.92);border:1px solid var(--line);border-radius:4px;
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}
.map-fullscreen-btn svg{width:18px;height:18px;}
.map-fullscreen-btn:hover{border-color:var(--ochre);}

/* Volledig scherm: kaart + hele bedieningsbalk (filters, tijdlijn) samen
   vullen dan het scherm, in plaats van de vaste hoogte van 520px. */
.map-wrap:fullscreen{display:flex;flex-direction:column;background:var(--paper);}
.map-wrap:fullscreen .map-canvas{flex:1;border-radius:0;min-height:0;}
.map-wrap:fullscreen #map{height:100%;}
.map-wrap:fullscreen .map-controls{border-radius:0;}

/* iPhone-variant: Safari kent daar geen Fullscreen-API voor gewone
   elementen, dus daar legt deze klasse de kaart schermvullend over de
   pagina heen — boven de tabbalk (1200-1300), onder de lichtbak (2000),
   zodat een foto openen vanaf de kaart gewoon blijft werken. */
.map-wrap.pseudo-fullscreen{
  position:fixed;inset:0;z-index:1500;margin:0;
  display:flex;flex-direction:column;background:var(--paper);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.map-wrap.pseudo-fullscreen .map-canvas{flex:1;border-radius:0;min-height:0;}
.map-wrap.pseudo-fullscreen #map{height:100%;}
.map-wrap.pseudo-fullscreen .map-controls{border-radius:0;}
html.map-fs-lock, html.map-fs-lock body{overflow:hidden;}
.legend{
  position:absolute;bottom:1rem;right:1rem;background:rgba(var(--paper-rgb),0.95);
  border:1px solid var(--line);border-radius:3px;padding:0.7rem 0.9rem;font-size:0.76rem;
  z-index:400;max-width:180px;max-height:460px;display:flex;flex-direction:column;
}
.legend #legend-items{overflow-y:auto;flex:1;min-height:0;}
.legend .lg-title{font-family:'JetBrains Mono',monospace;font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--moss);margin-bottom:0.4rem;}
.legend .lg-item{display:flex;align-items:center;gap:0.45rem;margin-bottom:0.25rem;}
.legend .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

.leaflet-popup-content-wrapper{border-radius:3px;font-family:'Inter',sans-serif;}

.leaflet-control-zoom{border:1px solid var(--line);box-shadow:0 3px 10px rgba(0,0,0,0.15);}
.leaflet-control-zoom a{
  background:rgba(var(--paper-rgb),0.92);color:var(--ink);
  border-color:var(--line) !important;
}
.leaflet-control-zoom a:hover{background:var(--paper-dark);}
.popup-card{width:190px;color:var(--fixed-dark);}
.popup-wiki{display:inline-block;margin-top:0.4rem;font-size:0.76rem;color:var(--fixed-moss);text-decoration:underline;}

/* ---- Pop-up bij klikken op de heatmap ---- */
.heatmap-popup-count{color:var(--fixed-dark);font-family:'Fraunces',serif;font-weight:600;font-size:1rem;}
.popup-card .thumb{width:100%;height:110px;border-radius:2px;margin-bottom:0.5rem;display:flex;align-items:center;justify-content:center;color:var(--cream);font-size:1.8rem;}
.popup-card h4{font-family:'Fraunces',serif;font-size:1rem;margin-bottom:0.1rem;}
.popup-card .latin{font-style:italic;font-size:0.78rem;color:var(--fixed-moss);}
.popup-card .meta{font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:#555;margin-top:0.4rem;}

.log{background:var(--forest);color:var(--cream);}
.log .section-head .count{color:var(--ochre);}
.log .section-head .eyebrow{color:var(--ochre);}
.list-controls{
  display:flex;gap:0.7rem;flex-wrap:wrap;max-width:1200px;margin:0 auto 1.4rem;
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem;max-width:1200px;margin:0 auto;}
.card{background:rgba(241,233,210,0.05);border:1px solid rgba(241,233,210,0.14);border-radius:2px;overflow:hidden;transition:transform .2s, border-color .2s;position:relative;}
.card:hover{transform:translateY(-3px);border-color:var(--ochre);}
.card .thumb{height:150px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;overflow:hidden;}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .body{padding:1rem 1.1rem 1.2rem;cursor:pointer;}
.card .eyebrow{font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ochre);margin-bottom:0.3rem;}
.card h4{font-family:'Fraunces',serif;font-size:1.15rem;}
.card .latin{font-style:italic;font-size:0.82rem;opacity:0.6;margin-bottom:0.6rem;}
.card .coords{font-family:'JetBrains Mono',monospace;font-size:0.72rem;opacity:0.5;border-top:1px dashed rgba(241,233,210,0.2);padding-top:0.5rem;}
.card-wiki{display:inline-block;margin-top:0.5rem;font-size:0.74rem;color:var(--ochre);text-decoration:underline;}
.card-name-row{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;}
.card-like-btn{
  display:flex;align-items:center;gap:0.3rem;flex-shrink:0;background:none;border:1px solid rgba(241,233,210,0.2);
  border-radius:20px;padding:0.25rem 0.65rem;color:var(--cream);cursor:pointer;font-family:'Inter',sans-serif;
  font-size:0.74rem;transition:background .2s, border-color .2s;
}
.card-like-btn svg{width:13px;height:13px;flex-shrink:0;}
.card-like-btn:hover{border-color:var(--rust);}
.card-like-btn.liked{background:var(--rust);border-color:var(--rust);color:var(--cream);}
.card-like-btn.liked svg{fill:currentColor;}
.card-name-btns{display:flex;align-items:center;gap:0.35rem;flex-shrink:0;}
.card-share-btn{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none;
  border:1px solid rgba(241,233,210,0.2);border-radius:20px;padding:0.25rem 0.5rem;
  color:var(--cream);cursor:pointer;transition:border-color .2s;
}
.card-share-btn svg{width:13px;height:13px;flex-shrink:0;}
.card-share-btn:hover{border-color:var(--ochre);}

/* ---- Inklapbare reacties op de logboekkaart, zelfde principe als in de lightbox ---- */
.card-comments-toggle{
  display:flex;align-items:center;gap:0.35rem;margin-top:0.6rem;background:none;border:none;padding:0;
  color:var(--moss);cursor:pointer;font-family:'Inter',sans-serif;font-size:0.72rem;font-weight:600;
}
.card-comments-chevron{width:12px;height:12px;transition:transform .2s;}
.card-comments-toggle.open .card-comments-chevron{transform:rotate(180deg);}
.card-comments{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.card-comments.open{max-height:260px;overflow-y:auto;}
.card-comments-list{margin:0.6rem 0;}
.card-comment{padding:0.4rem 0;border-bottom:1px solid rgba(241,233,210,0.14);font-size:0.78rem;}
.card-comment:last-child{border-bottom:none;}
.card-comment-name{font-weight:600;font-size:0.72rem;color:var(--ochre);}
.card-comment-pending-tag{font-weight:400;opacity:0.6;font-style:italic;}
.card-comment.pending{opacity:0.7;}
.card-comment-empty{font-size:0.76rem;opacity:0.6;padding:0.3rem 0;}
.card-comment-form{display:flex;flex-direction:column;gap:0.4rem;padding-bottom:0.3rem;}
.card-comment-form input, .card-comment-form textarea{
  border:1px solid rgba(241,233,210,0.2);background:rgba(241,233,210,0.05);color:var(--ink);border-radius:2px;
  padding:0.4rem 0.6rem;font-family:'Inter',sans-serif;font-size:0.78rem;resize:vertical;min-height:50px;
}
.card-comment-form input{min-height:0;}
.log .card-comment-form input, .log .card-comment-form textarea{color:var(--cream);}
.log .card-comment-form input::placeholder, .log .card-comment-form textarea::placeholder{color:rgba(241,233,210,0.4);}

/* ---- Zeldzaamheidsbadge ---- */
.rarity-badge{
  display:inline-flex;align-items:center;gap:0.35rem;font-size:0.68rem;font-weight:600;
  padding:0.2rem 0.5rem;border-radius:20px;letter-spacing:0.02em;white-space:nowrap;
}
.rarity-badge .rd{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.card .rarity-badge{position:absolute;top:0.5rem;left:0.5rem;z-index:2;background:rgba(33,30,23,0.75);color:var(--cream);}
.popup-card .rarity-badge{background:var(--paper-dark);color:var(--ink);margin-top:0.3rem;}

/* ---- Filterbalk boven het logboek ---- */
.map-controls{
  background:var(--paper-dark);border-top:1px solid var(--line);
  border-radius:0 0 3px 3px;
  padding:1rem 1.2rem;
}
.map-control-row{display:flex;gap:0.7rem;align-items:center;flex-wrap:wrap;}
.map-control-row + .map-control-row{margin-top:0.8rem;}


/* Zeldzaamheid, Trip en Heatmap zijn alle drie dezelfde "pil" — zelfde
   hoogte, ronding en randstijl, zodat ze duidelijk bij elkaar horen. */
.map-control{
  display:flex;align-items:center;gap:0.5rem;height:38px;padding:0 0.9rem;
  border-radius:20px;background:var(--paper);border:1px solid var(--line);
  font-family:'Inter',sans-serif;font-size:0.85rem;color:var(--ink);
  cursor:pointer;transition:background .2s, border-color .2s;
}
.map-control:hover{border-color:var(--ochre);}
.map-control-icon{width:16px;height:16px;flex-shrink:0;color:var(--moss);}
.map-control-dot{
  width:10px;height:10px;border-radius:50%;background:var(--moss);
  box-shadow:0 0 0 3px rgba(var(--ink-rgb),0.06);
}
.map-search-control{cursor:text;}
.map-search-input{
  border:none;background:none;color:var(--ink);font-family:inherit;font-size:inherit;
  padding:0;width:8.5em;min-width:0;-webkit-appearance:none;appearance:none;border-radius:0;
}
.map-search-input::placeholder{color:rgba(var(--ink-rgb),0.45);}
.map-search-input:focus{outline:none;}
.map-search-menu{width:260px;}
.map-search-menu .map-dropdown-item{flex-direction:column;align-items:flex-start;gap:0.05rem;}
.map-search-menu .map-dropdown-item .s-name{font-size:0.85rem;}
.map-search-menu .map-dropdown-item .s-latin{font-style:italic;font-size:0.76rem;color:var(--moss);}
.map-search-menu .map-dropdown-empty{padding:0.6rem 0.7rem;font-size:0.82rem;opacity:0.6;}
.map-control select{
  border:none;background:none;color:var(--ink);font-family:inherit;font-size:inherit;
  padding:0;cursor:pointer;-webkit-appearance:menulist-button;
}
.map-control select:focus{outline:none;}
#heatmapToggle{font-weight:500;}
#heatmapToggle.active{background:var(--forest);color:var(--cream);border-color:transparent;}
#heatmapToggle.active .map-control-icon{color:var(--cream);}

.timeline-row{gap:0.7rem;}
.timeline-play-btn{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper-dark);color:var(--ink);cursor:pointer;font-size:0.7rem;
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1;
  transition:border-color .15s, background .15s;
}
.timeline-play-btn:hover:not(:disabled){border-color:var(--ochre);}
.timeline-play-btn:disabled{opacity:0.4;cursor:default;}
.timeline-row input[type="range"]{flex:1;accent-color:var(--ochre);width:100%;display:block;}
.timeline-edge{font-size:0.72rem;opacity:0.65;white-space:nowrap;min-width:3.6em;}

/* ---- Zelfgebouwde dropdown-menu's — "verbonden" met hun knop: als het
   menu open is, wordt de onderkant van de pil recht en sluit het menu
   er direct op aan, zonder tussenruimte of eigen los kadertje. ---- */
.map-dropdown-control{position:relative;cursor:pointer;}
.map-dropdown-control.open{border-radius:20px 20px 0 0;border-color:var(--ochre);}
.map-dropdown-trigger{
  border:none;background:none;color:var(--ink);font-family:inherit;font-size:inherit;
  padding:0;cursor:pointer;display:flex;align-items:center;gap:0.4rem;
}
.map-dropdown-trigger::after{
  content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:0.45;flex-shrink:0;
}
.map-dropdown-menu{
  display:none;position:absolute;top:100%;left:-1px;margin-top:-1px;
  min-width:calc(100% + 2px);background:var(--paper);border:1px solid var(--ochre);border-top:1px solid var(--line);
  border-radius:0 14px 14px 14px;box-shadow:0 14px 28px rgba(0,0,0,0.14);
  z-index:500;padding:0.3rem;max-height:260px;overflow-y:auto;
}
.map-dropdown-menu.open{display:block;}
.map-dropdown-item{
  display:flex;align-items:center;gap:0.55rem;padding:0.5rem 0.7rem;border-radius:10px;
  font-size:0.85rem;cursor:pointer;white-space:nowrap;color:var(--ink);
}
.map-dropdown-item:hover, .map-dropdown-item.highlighted{background:rgba(var(--ink-rgb),0.07);}
.map-dropdown-item.selected{background:var(--paper-dark);font-weight:600;}
.map-dropdown-item .map-dropdown-item-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ---- Zwevend datumlabel dat met de schuifknop meebeweegt ---- */
.timeline-track-wrap{position:relative;flex:1;min-width:0;}
.timeline-tooltip{
  position:absolute;bottom:100%;left:0;transform:translateX(-50%);margin-bottom:0.6rem;
  background:var(--forest);color:var(--cream);font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;padding:0.25rem 0.55rem;border-radius:4px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.timeline-tooltip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--forest);
}
.timeline-tooltip.visible{opacity:1;}

/* ---- Trips overzicht ---- */
.trips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;max-width:1200px;margin:0 auto;overflow:hidden;transition:max-height .3s ease;}
.trips-expand-btn{
  background:none;border:1px solid var(--line);color:var(--moss);padding:0.5rem 1rem;
  border-radius:20px;font-size:0.8rem;cursor:pointer;font-family:'Inter',sans-serif;margin-left:auto;
}
.trips-expand-btn:hover{border-color:var(--ochre);}

/* ---- "Op deze dag"-strook onder de hero ---- */
.on-this-day{background:var(--paper-dark);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.2rem 1.4rem;}
.on-this-day-label{
  max-width:1200px;margin:0 auto 0.7rem;font-family:'JetBrains Mono',monospace;font-size:0.72rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--moss);
}
.on-this-day-content{max-width:1200px;margin:0 auto;display:flex;gap:1rem;flex-wrap:wrap;}
.on-this-day-item{
  display:flex;gap:0.7rem;align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;padding:0.5rem 0.9rem 0.5rem 0.5rem;cursor:pointer;flex:1;min-width:240px;max-width:340px;
  transition:border-color .2s;
}
.on-this-day-item:hover{border-color:var(--ochre);}
.on-this-day-item img, .on-this-day-item .thumb{
  width:52px;height:52px;object-fit:cover;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.on-this-day-info h4{font-family:'Fraunces',serif;font-size:1rem;margin:0.1rem 0;}
.on-this-day-years{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--rust);text-transform:uppercase;letter-spacing:0.04em;}
.on-this-day-info .coords{font-size:0.72rem;opacity:0.6;}

/* ---- Statistieken-sectie: voortgang + jaaroverzicht ---- */
.stats-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(340px,2fr);gap:1.4rem;max-width:1200px;margin:0 auto;}
@media (max-width:760px){
  .stats-grid{grid-template-columns:1fr;}
}
.stats-panel{text-align:center;}
.progress-circle-wrap{margin:0.8rem 0 0.3rem;}
.progress-percent{font-family:'Fraunces',serif;font-size:3rem;font-weight:600;color:var(--forest);line-height:1;}
.progress-detail{font-size:0.85rem;opacity:0.7;margin-bottom:1rem;}
.progress-toggle{
  background:none;border:1px solid var(--line);color:var(--moss);padding:0.5rem 1rem;
  border-radius:20px;font-size:0.8rem;cursor:pointer;font-family:'Inter',sans-serif;
}
.progress-toggle:hover{border-color:var(--ochre);}
.progress-missing-list{
  max-height:0;overflow:hidden;transition:max-height .25s ease;text-align:left;margin-top:0.8rem;
}
.progress-missing-list.open{max-height:220px;overflow-y:auto;}
.missing-species{
  display:inline-block;font-size:0.78rem;background:rgba(33,30,23,0.05);border-radius:12px;
  padding:0.2rem 0.6rem;margin:0.2rem;
}
.year-stats-grid{display:grid;grid-template-columns:0.7fr 0.9fr 1.15fr 1.15fr 1.15fr;gap:1rem;margin-top:0.8rem;width:100%;}
@media (max-width:640px){
  .year-stats-grid{grid-template-columns:repeat(2,1fr);}
  .year-stat .lbl{font-size:0.58rem;letter-spacing:0.02em;}
}
.year-stat .num{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;line-height:1.15;}
.year-stat .num.text{
  font-family:'Inter',sans-serif;font-size:0.8rem;font-weight:500;line-height:1.35;font-style:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.year-stat .lbl{font-size:0.64rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--moss);margin-top:0.2rem;white-space:nowrap;}
.year-pdf-btn{
  display:flex;align-items:center;gap:0.5rem;margin:1.4rem auto 0;background:none;border:1px solid var(--line);
  color:var(--moss);padding:0.6rem 1.1rem;border-radius:20px;font-size:0.85rem;cursor:pointer;font-family:'Inter',sans-serif;
  transition:border-color .2s, background .2s;
}
.year-pdf-btn svg{width:16px;height:16px;flex-shrink:0;}
.year-pdf-btn:hover{border-color:var(--ochre);}
.year-pdf-btn:disabled{opacity:0.6;cursor:default;}

/* ---- Maandkoppen die vanzelf tussen de logboek-kaartjes verschijnen ---- */
.log-month-header{
  grid-column:1/-1;font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--moss);padding-top:0.6rem;border-top:1px dashed var(--line);
}
.log-month-header:first-child{border-top:none;padding-top:0;}

/* ---- "Toon meer"-knop onder het logboek ---- */
.load-more-wrap{display:flex;justify-content:center;max-width:1200px;margin:2rem auto 0;}
/* Het logboek heeft in BEIDE thema's een donkergroene achtergrond, maar de
   ghost-knop kleurt met het thema mee — in licht thema werd dat donker-op-
   donker en was "Toon meer" onleesbaar. Vaste crème-kleuren dus. */
.log .btn.ghost{color:var(--cream);border-color:rgba(241,233,210,0.35);}
.log .btn.ghost:hover{background:rgba(241,233,210,0.08);}

/* ---- Badge voor de beste/grootste trip ---- */
.trip-badges-slot{min-height:1.5rem;margin:-1rem 0 0.5rem;display:flex;gap:0.4rem;flex-wrap:wrap;}
.trip-badge{
  display:inline-flex;align-items:center;gap:0.3rem;font-size:0.68rem;font-weight:600;
  letter-spacing:0.03em;text-transform:uppercase;padding:0.2rem 0.55rem;border-radius:20px;
  background:var(--rust);color:var(--cream);
}

/* ---- Mini-kaartje bij het klikken op een trip ---- */
.trip-card{background:var(--paper-dark);border:1px solid var(--line);border-radius:3px;padding:1.4rem 1.5rem;cursor:pointer;transition:border-color .2s, transform .2s;position:relative;}
.trip-card:hover{border-color:var(--ochre);transform:translateY(-2px);}
.trip-card .trip-name{font-family:'Fraunces',serif;font-size:1.2rem;margin-bottom:0.15rem;}
.trip-card .trip-dates{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--moss);margin-bottom:0.9rem;}
.trip-card .trip-stats{display:flex;gap:1.4rem;margin-bottom:1rem;}
.trip-stat{}
.trip-stat .num{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;line-height:1;}
.trip-stat .lbl{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--moss);margin-top:0.2rem;}
.trip-stat.score .num{color:var(--rust);}
.trip-species-toggle{
  display:inline-flex;align-items:center;gap:0.4rem;background:none;border:1px solid var(--line);
  color:var(--moss);padding:0.4rem 0.9rem;border-radius:20px;font-size:0.8rem;cursor:pointer;
  font-family:'Inter',sans-serif;margin-top:0.3rem;
}
.trip-species-toggle:hover{border-color:var(--ochre);}
.trip-species-chevron{width:14px;height:14px;transition:transform .2s;}
.trip-species-toggle.open .trip-species-chevron{transform:rotate(180deg);}
.trip-species-list{
  max-height:0;overflow:hidden;transition:max-height .25s ease;
  display:flex;flex-wrap:wrap;gap:0.5rem 1.1rem;
}
.trip-species-list.open{max-height:300px;overflow-y:auto;margin-top:0.7rem;}
.trip-species-item{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.85rem;color:var(--ink);opacity:0.82;}
.trip-species-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* ---- Toevoegen (add sighting) page ---- */
#toevoegen-main{max-width:1200px;margin:0 auto;padding:0 3rem 5rem;}
.active-trip-banner{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--forest);color:var(--cream);border-radius:3px;
  padding:1rem 1.4rem;margin-bottom:1.8rem;
}
.active-trip-banner .trip-name-banner{font-family:'Fraunces',serif;font-size:1.2rem;margin-top:0.15rem;}
.add-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;}
.panel{background:var(--paper-dark);border:1px solid var(--line);border-radius:3px;padding:1.8rem;}
.field{margin-bottom:1.1rem;}
.field label, .field .field-label{display:block;font-size:0.78rem;font-weight:600;margin-bottom:0.35rem;color:var(--moss);}
.field input, .field select{
  width:100%;padding:0.6rem 0.7rem;border:1px solid var(--line);border-radius:2px;
  background:var(--paper);font-family:'Inter',sans-serif;font-size:0.92rem;color:var(--ink);
}
.field input:focus, .field select:focus{outline:2px solid var(--ochre);outline-offset:1px;}
.field.autocomplete{position:relative;}
.suggestions{
  position:absolute;left:0;right:0;top:calc(100% + 4px);
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  box-shadow:0 10px 26px rgba(0,0,0,0.14);max-height:260px;overflow-y:auto;
  z-index:600;display:none;
}
.suggestions.open{display:block;}
/* Onvoldoende ruimte onder het veld (onderaan de pagina): lijst klapt omhoog. */
.suggestions.up{top:auto;bottom:calc(100% + 4px);box-shadow:0 -10px 26px rgba(0,0,0,0.14);}
.suggestion-item{padding:0.55rem 0.8rem;cursor:pointer;border-bottom:1px solid var(--line);}
.suggestion-item:last-child{border-bottom:none;}
.suggestion-item .s-name{font-size:0.88rem;font-weight:500;}
.suggestion-item .s-latin{font-style:italic;font-size:0.78rem;color:var(--moss);}
.suggestion-item:hover, .suggestion-item.active{background:var(--paper-dark);}
.suggestions .s-empty{padding:0.6rem 0.8rem;font-size:0.82rem;color:rgba(var(--ink-rgb),0.55);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.dropzone{
  border:2px dashed var(--line);border-radius:3px;padding:1.8rem;text-align:center;
  background:var(--paper);margin-bottom:1.1rem;transition:border-color .2s;
}
.dropzone.drag{border-color:var(--ochre);}
.dropzone p{font-size:0.86rem;color:rgba(var(--ink-rgb),0.6);margin-top:0.5rem;}
.dropzone .file-btn{
  display:inline-block;background:var(--forest);color:var(--cream);padding:0.55rem 1.1rem;
  border-radius:2px;font-size:0.85rem;font-weight:500;
}
.exif-status{
  margin:0.9rem 0;font-size:0.78rem;font-family:'JetBrains Mono',monospace;
  padding:0.6rem 0.8rem;border-radius:2px;display:none;
}
.exif-status.found{display:block;background:rgba(76,107,79,0.15);color:var(--moss);}
.exif-status.missing{display:block;background:rgba(155,75,50,0.12);color:var(--rust);}
#miniMap{height:220px;border-radius:2px;border:1px solid var(--line);margin-top:0.4rem;}
.icon-picker{display:flex;gap:0.5rem;margin-top:0.3rem;}
.icon-picker button{
  /* flex-shrink:0 — zonder dat werden de vijf knopjes in een smalle kolom
     platgedrukt tot streepjes waarop het vogeltje niet meer te zien was. */
  width:38px;height:38px;flex-shrink:0;border-radius:2px;border:1px solid var(--line);background:var(--paper);
  font-size:1.1rem;display:flex;align-items:center;justify-content:center;
}
.icon-picker button.active{border-color:var(--ochre);background:rgba(189,139,46,0.15);}
.preview-label{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--moss);margin-bottom:0.8rem;}
.form-actions{display:flex;gap:0.8rem;margin-top:1.4rem;align-items:center;}
.form-msg{font-size:0.85rem;color:var(--moss);}
.utility-row{display:flex;gap:0.7rem;margin-top:1.2rem;flex-wrap:wrap;}
.field-hint{font-size:0.74rem;color:rgba(var(--ink-rgb),0.55);margin-top:0.3rem;}
.checkbox-field label{display:flex;align-items:flex-start;gap:0.6rem;font-size:0.85rem;font-weight:400;cursor:pointer;}
.checkbox-field input[type="checkbox"]{margin-top:0.2rem;width:16px;height:16px;accent-color:var(--forest);flex-shrink:0;}

/* ---- Schakelaar tussen 'Eén waarneming' en 'Bulk foto's' ---- */
.mode-toggle{
  display:flex;gap:0.5rem;max-width:700px;margin:0 auto 1.6rem;
  background:var(--paper-dark);border-radius:3px;padding:0.3rem;
}
.mode-toggle-btn{
  flex:1;background:none;border:none;padding:0.6rem 1rem;border-radius:2px;
  font-family:inherit;font-size:0.85rem;font-weight:500;cursor:pointer;color:var(--ink);opacity:0.6;
}
.mode-toggle-btn.active{background:var(--paper);opacity:1;box-shadow:0 1px 3px rgba(0,0,0,0.08);}

/* ---- Beoordelingskaartjes bij bulk-import ---- */
.bulk-review-card{
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:1rem 1.2rem;margin-bottom:0.9rem;
}
.bulk-photo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;
  margin:0.8rem 0;max-height:520px;overflow-y:auto;padding:0.2rem;
}
.bulk-photo-item{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:0.4rem;}
.bulk-photo-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:block;}
.bulk-photo-item.discarded{opacity:0.4;}
.bulk-photo-item.discarded img{filter:grayscale(1);}
.bulk-photo-actions{display:flex;gap:0.4rem;margin-top:0.5rem;}
.photo-action-btn{
  flex:1;border:1px solid var(--line);background:var(--paper-dark);color:var(--ink);border-radius:4px;
  padding:0.4rem 0;font-size:0.9rem;cursor:pointer;line-height:1;transition:background .15s, border-color .15s;
}
.photo-action-btn:hover{border-color:var(--ochre);}
.photo-action-btn.action-good.active{background:var(--moss);color:var(--cream);border-color:var(--moss);}
.photo-action-btn.action-other.active{background:var(--ochre);color:var(--cream);border-color:var(--ochre);}
.photo-action-btn.action-unknown.active{background:var(--violet);color:var(--cream);border-color:var(--violet);}
.photo-action-btn.action-discard.active{background:var(--rust);color:var(--cream);border-color:var(--rust);}
.bulk-photo-reassign-input{
  width:100%;margin-top:0.5rem;border:1px solid var(--ochre);background:var(--paper);color:var(--ink);
  border-radius:2px;padding:0.4rem 0.5rem;font-size:0.82rem;font-family:'Inter',sans-serif;
}
.bulk-review-row{display:flex;gap:0.8rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:0.7rem;}
.bulk-location-picker{margin-top:0.8rem;}
.bulk-location-map{height:200px;border-radius:3px;border:1px solid var(--ochre);}

/* ---- Foto's groot, één voor één beoordelen ("Tinder-stijl") ---- */
.bulk-photo-item img{cursor:zoom-in;}
.bulk-photo-review-overlay{
  display:none;position:fixed;inset:0;z-index:3500;background:rgba(18,22,17,0.95);
  flex-direction:column;align-items:center;padding:1.4rem;
  /* Foto (52vh) + werkbalk + hint + de vier grote knoppen passen op een korte
     telefoon niet samen op het scherm. Zonder scrollbalk vielen 'Goed' en
     'Onbekend' dan buiten beeld en waren ze niet meer aan te tikken.
     'safe center' houdt alles gecentreerd zolang het past, en schuift naar
     boven zodra het niet past — zonder dat de bovenkant wegvalt, wat bij een
     gewone 'center' met overflow wél gebeurt. Browsers die 'safe' niet kennen
     negeren die regel en houden de gewone centrering. */
  justify-content:center;
  justify-content:safe center;
  overflow-y:auto;
}
.bulk-photo-review-overlay.open{display:flex;}
.bulk-review-progress{
  color:var(--cream);font-family:'JetBrains Mono',monospace;font-size:0.8rem;opacity:0.75;margin-bottom:0.8rem;
}
.bulk-review-photo-wrap{
  max-width:min(90vw,640px);max-height:52vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:4px;
  /* Voor het zoomen/schuiven/uitsnijden: het kader is het ankerpunt van het
     uitsnij-rechthoekje, en touch-action:none voorkomt dat de pagina
     meescrolt terwijl je de foto versleept of knijpt. */
  position:relative;touch-action:none;cursor:zoom-in;
}
.bulk-review-photo{
  max-width:100%;max-height:52vh;object-fit:contain;border-radius:4px;
  /* Zoom/verschuiving komt uit JavaScript (translate+scale); linksboven als
     draaipunt houdt die berekening eenvoudig. Geen transition: die zou bij
     het slepen merkbaar achter je muis aan hobbelen. */
  transform-origin:0 0;user-select:none;-webkit-user-drag:none;
}
.bulk-review-toolbar{
  display:flex;align-items:center;justify-content:center;gap:0.6rem;flex-wrap:wrap;margin-top:0.8rem;
}
.bulk-review-hint{color:var(--cream);opacity:0.65;font-size:0.75rem;max-width:360px;text-align:center;}
/* De gewone ghost-knop heeft donkere tekst — onzichtbaar op deze donkere
   overlay, dus hier een lichte variant (zelfde patroon als .log .btn.ghost). */
.bulk-photo-review-overlay .btn.ghost{color:var(--cream);border-color:rgba(241,233,210,0.35);}
.bulk-photo-review-overlay .btn.ghost:hover{background:rgba(241,233,210,0.08);}
.bulk-photo-review-overlay .btn.ghost.active{background:rgba(241,233,210,0.16);border-color:var(--cream);}
.bulk-crop-rect{
  display:none;position:absolute;z-index:2;pointer-events:none;
  border:2px dashed var(--cream);background:rgba(241,233,210,0.12);
  /* Enorme schaduw eromheen dimt alles buiten het kader; het kader van de
     wrap (overflow:hidden) snijdt hem netjes af. */
  box-shadow:0 0 0 9999px rgba(18,22,17,0.35);
}
.bulk-crop-confirm-row{display:none;gap:0.6rem;margin-top:0.7rem;flex-wrap:wrap;justify-content:center;}
.bulk-crop-confirm-row.open{display:flex;}
.bulk-review-crop-msg{margin-top:0.5rem;font-size:0.8rem;min-height:1.1em;color:var(--cream);text-align:center;}
.bulk-review-reassign-row{
  display:none;gap:0.6rem;margin-top:1rem;width:100%;max-width:420px;
}
.bulk-review-reassign-row.open{display:flex;}
.bulk-review-reassign-field{position:relative;flex:1;}
.bulk-review-reassign-row input{
  width:100%;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px;
  padding:0.6rem 0.8rem;font-family:'Inter',sans-serif;font-size:0.9rem;
}
.bulk-review-big-actions{display:flex;gap:0.8rem;margin-top:1.4rem;flex-wrap:wrap;justify-content:center;}
.bulk-review-action-btn{
  border:none;border-radius:30px;padding:0.8rem 1.4rem;font-size:0.95rem;font-weight:600;
  cursor:pointer;font-family:'Inter',sans-serif;color:var(--cream);transition:transform .15s;
}
.bulk-review-action-btn:hover{transform:translateY(-2px);}
.bulk-review-action-btn.good{background:var(--moss);}
.bulk-review-action-btn.other{background:var(--ochre);}
.bulk-review-action-btn.unknown{background:var(--violet);}
.bulk-review-action-btn.discard{background:var(--rust);}
@media (max-width:600px){
  .bulk-review-action-btn{padding:0.7rem 1rem;font-size:0.85rem;}
}
.bulk-review-row .field{flex:1;min-width:150px;margin-bottom:0;}
.bulk-confidence-badge{
  font-size:0.72rem;padding:0.2rem 0.55rem;border-radius:10px;background:var(--ochre);color:#fff;
  white-space:nowrap;font-weight:600;
}
.bulk-wiki-link{display:inline-block;font-size:0.78rem;color:var(--ochre);text-decoration:underline;}

/* ---- Beheeroverzicht (eigen tab) ---- */
.manage-grid{display:flex;flex-direction:column;gap:0.9rem;}
.manage-card{background:var(--paper-dark);border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.manage-card-main{display:flex;gap:1rem;padding:1rem 1.1rem;align-items:flex-start;}
.manage-card-thumb{
  width:76px;height:76px;object-fit:cover;border-radius:2px;flex-shrink:0;cursor:pointer;background:var(--paper);
}
.manage-card-thumb-empty{cursor:default;}
.manage-card-body{flex:1;min-width:0;}
.manage-card-head{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;}
.manage-card-head h4{margin:0;font-family:'Fraunces',serif;font-size:1.05rem;}
.manage-card-body .latin{font-style:italic;font-size:0.8rem;opacity:0.6;}
.manage-card-body .meta{font-family:'JetBrains Mono',monospace;font-size:0.74rem;opacity:0.6;margin-top:0.3rem;}
.manage-card-body .camera-line{font-size:0.72rem;opacity:0.5;margin-top:0.2rem;}
.manage-card-footer{display:flex;gap:0.8rem;align-items:center;margin-top:0.4rem;}
.manage-photo-count{font-size:0.72rem;opacity:0.55;}
.manage-wiki-link{font-size:0.74rem;color:var(--ochre);text-decoration:underline;}
.manage-card-actions{display:flex;gap:0.4rem;flex-shrink:0;}
.manage-edit-btn{
  width:30px;height:30px;border-radius:50%;background:none;border:1px solid var(--line);
  color:var(--moss);cursor:pointer;font-size:0.85rem;
}
.manage-edit-btn:hover{background:rgba(var(--ink-rgb),0.06);}
.manage-edit-form{background:var(--paper);border-top:1px solid var(--line);padding:1rem 1.1rem;}
.manage-edit-row{display:flex;gap:0.8rem;flex-wrap:wrap;margin-bottom:0.9rem;}
.edit-photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:0.6rem;margin-top:0.4rem;}

.helpmee-photo-viewer{display:flex;align-items:center;gap:0.6rem;}
.helpmee-photo-main{flex:1;aspect-ratio:4/3;border-radius:3px;overflow:hidden;cursor:pointer;background:var(--paper);}
.helpmee-photo-main img{width:100%;height:100%;object-fit:cover;display:block;}
.helpmee-photo-nav{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;
}
.helpmee-photo-nav:hover:not(:disabled){border-color:var(--ochre);}
.helpmee-photo-nav:disabled{opacity:0.3;cursor:default;}
.helpmee-photo-count{text-align:center;font-size:0.75rem;color:var(--moss);margin-top:0.5rem;}
.edit-photo-item{position:relative;aspect-ratio:1;}
.edit-photo-item img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block;}
.edit-photo-remove{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  background:var(--rust);color:var(--cream);border:2px solid var(--paper);font-size:0.7rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;padding:0;
}
.manage-edit-row .field{flex:1;min-width:150px;margin-bottom:0;}
.manage-edit-actions{display:flex;gap:0.6rem;margin-top:0.2rem;}
.manage-edit-actions .btn{padding:0.5rem 1.1rem;font-size:0.82rem;}
.manage-cancel-btn{
  background:none;border:1px solid var(--line);color:rgba(var(--ink-rgb),0.65);
  padding:0.5rem 1.1rem;border-radius:2px;font-size:0.82rem;cursor:pointer;font-family:inherit;
}
.manage-cancel-btn:hover{background:rgba(var(--ink-rgb),0.06);}
@media (max-width:600px){
  .manage-card-main{flex-wrap:wrap;}
  .manage-card-actions{width:100%;justify-content:flex-end;}
}
.bulk-review-actions{display:flex;gap:0.6rem;}
.bulk-review-actions .btn{padding:0.5rem 1rem;font-size:0.82rem;}
.bulk-unknown-btn{
  background:none;border:1px solid var(--line);color:rgba(var(--ink-rgb),0.65);
  padding:0.5rem 1rem;border-radius:2px;font-size:0.82rem;cursor:pointer;font-family:inherit;
}
.bulk-unknown-btn:hover{background:rgba(var(--ink-rgb),0.06);}

.merge-preview-item{
  padding:0.6rem 0.8rem;background:var(--paper-dark);border:1px solid var(--line);border-radius:3px;
  margin-bottom:0.5rem;font-size:0.88rem;
}
.merge-location-warning{
  margin-top:0.4rem;font-size:0.8rem;color:var(--rust);
}

.manage-item{
  display:flex;align-items:center;gap:0.9rem;padding:0.8rem 1rem;
  background:var(--paper-dark);border:1px solid var(--line);border-radius:3px;margin-bottom:0.6rem;
}
.manage-item .thumb{
  width:44px;height:44px;border-radius:2px;object-fit:cover;flex:0 0 auto;background:var(--paper);
}
.manage-item .info{flex:1;min-width:0;}
.manage-item .info .name{font-weight:600;}
.manage-item .info .meta{font-size:0.78rem;opacity:0.65;}

/* ---- Moderatie-rijen (reacties/suggesties goedkeuren) ---- */
.mod-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:0.8rem 1rem;background:var(--paper-dark);border:1px solid var(--line);border-radius:3px;margin-bottom:0.6rem;
}
.mod-item-thumb{width:64px;height:64px;object-fit:cover;border-radius:3px;flex-shrink:0;}
.mod-item-body{flex:1;min-width:0;}
.mod-item-name{font-weight:600;font-size:0.85rem;}
.mod-item-ref{font-weight:400;opacity:0.55;font-family:'JetBrains Mono',monospace;font-size:0.72rem;}
.mod-item-text{margin-top:0.2rem;font-size:0.88rem;}
.mod-item-actions{display:flex;gap:0.5rem;flex-shrink:0;}
.mod-item-actions .btn.small{padding:0.4rem 0.8rem;}
.mod-reject-btn{
  background:none;border:1px solid var(--line);color:var(--rust);
  padding:0.4rem 0.8rem;border-radius:2px;font-size:0.8rem;cursor:pointer;font-family:inherit;
}
.mod-reject-btn:hover{background:rgba(155,75,50,0.08);}

/* ---- "Help mee determineren"-pagina ---- */
.helpmee-suggestions{margin:0.8rem 0;padding-top:0.8rem;border-top:1px dashed var(--line);}
.helpmee-suggestion{padding:0.3rem 0;font-size:0.9rem;}
.helpmee-suggestion-by{opacity:0.6;font-size:0.82rem;}
.helpmee-form{display:flex;flex-wrap:wrap;gap:0.7rem;align-items:flex-end;padding-top:0.6rem;border-top:1px dashed var(--line);}
.helpmee-form .field{flex:1;min-width:160px;margin-bottom:0;}
.helpmee-form .field input, .helpmee-form .helpmee-name-input{background:var(--paper-dark);}
.helpmee-name-input{
  flex:1;min-width:140px;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:2px;padding:0.55rem 0.7rem;font-family:'Inter',sans-serif;font-size:0.85rem;
  height:fit-content;align-self:flex-end;margin-bottom:0.05rem;
}
.resolved-mysteries-grid{display:flex;gap:0.9rem;flex-wrap:wrap;}

/* ---- Levenslijst ---- */
.lifelist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.4rem;}
.lifelist-card{
  position:relative;background:var(--paper-dark);border:1px solid var(--line);border-radius:3px;
  padding:1.1rem;transition:transform .2s, border-color .2s;
}
.lifelist-card:hover{transform:translateY(-2px);}
.lifelist-pos{
  position:absolute;top:0.8rem;right:0.9rem;font-family:'JetBrains Mono',monospace;font-size:0.78rem;
  font-weight:600;color:var(--cream);background:var(--forest);padding:0.2rem 0.55rem;border-radius:20px;
  z-index:1;
}
.lifelist-thumb{width:100%;aspect-ratio:4/3;border-radius:2px;overflow:hidden;margin-bottom:0.8rem;background:var(--paper);}
.lifelist-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.lifelist-info h4{font-family:'Fraunces',serif;font-size:1.1rem;margin:0.3rem 0 0.1rem;}
.lifelist-info .latin{font-style:italic;font-size:0.8rem;opacity:0.6;}
.lifelist-date{font-size:0.7rem;opacity:0.6;margin-top:0.4rem;}

/* Kleine mijlpaal (elk 10e): een bescheiden stipje bovenaan het kaartje */
.lifelist-card.minor-milestone{border-color:var(--ochre);}
.milestone-dot{
  position:absolute;top:0.8rem;left:0.9rem;width:8px;height:8px;border-radius:50%;background:var(--ochre);
}

/* Grote mijlpaal (elk 25e/50e/100e): een lintje + gouden rand, springt echt op tussen de rest */
.lifelist-card.major-milestone{border-color:var(--ochre);border-width:2px;box-shadow:0 4px 16px rgba(189,139,46,0.2);}
.milestone-ribbon{
  position:absolute;top:-0.6rem;left:0.9rem;background:var(--ochre);color:var(--cream);
  font-family:'JetBrains Mono',monospace;font-size:0.68rem;font-weight:600;letter-spacing:0.03em;
  padding:0.25rem 0.7rem;border-radius:20px;box-shadow:0 3px 8px rgba(0,0,0,0.15);
}

/* De allereerste soort ooit — een eigen, unieke stijl, nog net iets
   bijzonderder dan de gewone mijlpalen. */
.lifelist-card.first-species{
  border-color:var(--rust);border-width:2px;box-shadow:0 6px 20px rgba(155,75,50,0.25);
}
.lifelist-card.first-species .lifelist-pos{background:var(--rust);}
.first-species-ribbon{
  position:absolute;top:-0.6rem;left:0.9rem;background:var(--rust);color:var(--cream);
  font-family:'JetBrains Mono',monospace;font-size:0.68rem;font-weight:600;letter-spacing:0.03em;
  padding:0.25rem 0.7rem;border-radius:20px;box-shadow:0 3px 8px rgba(0,0,0,0.15);
}

/* ---- Mini-viering bij het toevoegen van een nieuwe mijlpaal-soort ---- */
.milestone-toast{
  display:flex;align-items:center;gap:0.9rem;position:fixed;bottom:1.4rem;left:50%;
  transform:translateX(-50%) translateY(200%);max-width:min(90vw,420px);
  background:var(--paper);border:2px solid var(--ochre);border-radius:8px;
  padding:1rem 1.2rem;box-shadow:0 16px 40px rgba(0,0,0,0.25);z-index:3000;
  transition:transform .35s ease;
}
.milestone-toast.open{transform:translateX(-50%) translateY(0);}
.milestone-toast.first-milestone{border-color:var(--rust);}
.milestone-toast-icon{font-size:1.8rem;flex-shrink:0;}
.milestone-toast-title{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;color:var(--ink);}
.milestone-toast-sub{font-size:0.82rem;opacity:0.7;margin-top:0.1rem;}
.milestone-toast-close{
  background:none;border:none;cursor:pointer;color:var(--moss);opacity:0.6;font-size:0.9rem;
  padding:0.3rem;margin-left:auto;flex-shrink:0;
}
.milestone-toast-close:hover{opacity:1;}
.resolved-mystery-item{width:88px;text-align:center;}
.resolved-mystery-item img, .resolved-mystery-item .thumb{
  width:88px;height:88px;object-fit:cover;border-radius:3px;background:var(--paper-dark);display:block;
}
.resolved-mystery-name{font-size:0.72rem;margin-top:0.4rem;opacity:0.8;}
.manage-item .del-btn{
  flex:0 0 auto;background:transparent;border:1px solid var(--line);color:var(--rust);
  border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:0.9rem;
}
.manage-item .del-btn:hover{background:rgba(var(--ink-rgb),0.06);}
.manage-empty{opacity:0.6;font-size:0.9rem;}
.revoke-btn{
  background:none;border:none;padding:0;color:var(--rust);text-decoration:underline;
  font-size:inherit;font-family:inherit;cursor:pointer;
}
.revoke-btn:hover{opacity:0.75;}
.manage-item.clickable{cursor:pointer;}
.manage-item.clickable:hover{border-color:var(--moss);}

/* ---- Rasteroverzicht van alle foto's van één soort (trainingsdata) ---- */
.training-grid-overlay{
  display:none;position:fixed;inset:0;z-index:2000;background:rgba(10,10,8,0.6);
  align-items:center;justify-content:center;padding:2rem;
}
.training-grid-overlay.open{display:flex;}
.training-grid-panel{
  background:var(--paper);border-radius:4px;max-width:920px;width:100%;max-height:85vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.training-grid-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);flex-shrink:0;
}
.training-grid-header h3{margin:0;font-family:'Fraunces',serif;}
.training-grid-close{
  width:32px;height:32px;border-radius:50%;background:rgba(var(--ink-rgb),0.06);
  border:none;color:var(--ink);font-size:0.9rem;cursor:pointer;flex-shrink:0;
}
.training-grid-close:hover{background:rgba(var(--ink-rgb),0.12);}
.training-grid-hint{padding:0.7rem 1.4rem 0;font-size:0.78rem;opacity:0.6;flex-shrink:0;}
.training-grid-body{
  overflow-y:auto;padding:1.2rem 1.4rem 1.6rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:0.6rem;
}
.training-grid-item{position:relative;aspect-ratio:1;}
.training-grid-item img{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block;}
.training-grid-item .del-photo-btn{
  position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  background:rgba(20,20,16,0.65);color:#F1E9D2;border:none;font-size:0.7rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.training-grid-item .del-photo-btn:hover{background:var(--rust);}
.training-grid-item.journal-sourced .journal-badge{
  position:absolute;bottom:3px;left:3px;background:rgba(20,20,16,0.65);color:#F1E9D2;
  font-size:0.65rem;border-radius:2px;padding:0.1rem 0.3rem;
}

/* ---- Voortgangslogboek bij het trainen van het model ---- */
.train-log{
  max-height:280px;overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:0.76rem;
  background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:0.8rem 1rem;
  color:rgba(var(--ink-rgb),0.75);
}
.train-log div{padding:0.15rem 0;border-bottom:1px dashed rgba(var(--ink-rgb),0.08);}
.train-log div:last-child{border-bottom:none;}

/* ---- Resultaattabel per soort, na het trainen ---- */
.eval-grid{display:grid;grid-template-columns:1.3fr 0.7fr 0.7fr 1fr 1.3fr;width:100%;column-gap:0.5rem;}
.eval-row{display:contents;}
.eval-row > div{padding:0.5rem 0;border-bottom:1px solid var(--line);font-size:0.84rem;}
.eval-header > div{
  font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--moss);font-weight:600;
}
@media (max-width:600px){
  .eval-grid{grid-template-columns:1fr;row-gap:0;}
  .eval-header{display:none;}
  .eval-row{display:block;border-bottom:2px solid var(--line);padding:0.6rem 0;}
  .eval-row > div{
    display:flex;justify-content:space-between;gap:0.6rem;padding:0.15rem 0;border-bottom:none;
  }
  .eval-row > div::before{content:attr(data-label);font-weight:600;color:var(--moss);flex-shrink:0;}
}

/* ---- AI-suggestie bij het toevoegen van een waarneming ---- */
.ai-suggestion{
  display:flex;align-items:center;justify-content:space-between;gap:0.8rem;flex-wrap:wrap;
  background:var(--paper-dark);border:1px solid var(--ochre);border-radius:2px;
  padding:0.6rem 0.9rem;margin-bottom:1.1rem;font-size:0.85rem;
}
.ai-suggestion .ai-actions{display:flex;gap:0.6rem;flex-shrink:0;}
.ai-suggestion button{
  background:none;border:none;padding:0;font-size:0.8rem;cursor:pointer;font-family:inherit;
}
.ai-suggestion .ai-accept{color:var(--moss);font-weight:600;text-decoration:underline;}
.ai-suggestion .ai-dismiss{color:rgba(var(--ink-rgb),0.5);text-decoration:underline;}

/* ---- Lightbox: een uitvergroot specimen-kaartje, zoals de plates in de
   hero — zo hoort hij bij de rest van het journaal in plaats van een
   losse, generieke donkere modal te zijn. De achtergrond blijft altijd
   donker (onafhankelijk van het thema), het kaartje zelf is wel
   thema-gevoelig, net als een echte plate. ---- */
.lightbox-overlay{
  display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(18,22,17,0.92);
  flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  padding:2rem 1.4rem;
}
.lightbox-overlay.open{display:flex;}

.lightbox-close{
  position:absolute;top:1.2rem;right:1.4rem;width:38px;height:38px;border-radius:50%;
  background:rgba(241,233,210,0.12);color:var(--cream);border:1px solid rgba(241,233,210,0.3);
  font-size:1rem;cursor:pointer;z-index:2;
}
.lightbox-close:hover{background:rgba(241,233,210,0.22);}

.lightbox-nav-wrap{
  display:flex;align-items:center;gap:1rem;max-width:100%;flex:1;min-height:0;justify-content:center;
}
.lightbox-nav{
  width:44px;height:44px;border-radius:50%;background:rgba(241,233,210,0.1);
  border:1px solid rgba(241,233,210,0.3);color:var(--cream);font-size:1.5rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.lightbox-nav:hover{background:rgba(241,233,210,0.22);}

.lightbox-plate{
  background:var(--paper);border-radius:6px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
  max-width:min(88vw,560px);width:100%;max-height:calc(100vh - 8rem);
  display:flex;flex-direction:column;
}
.lightbox-photo-frame{
  position:relative;background:var(--forest);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.lightbox-img{width:100%;max-height:min(40vh,380px);object-fit:contain;display:block;}
.lightbox-platenum{
  position:absolute;bottom:0.6rem;right:0.6rem;background:rgba(20,26,20,0.6);color:var(--cream);
  font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.04em;
  padding:0.2rem 0.55rem;border-radius:20px;
}
.lightbox-seal{
  position:absolute;top:-14px;right:16px;width:60px;height:60px;border-radius:50%;
  color:var(--cream);display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:0.56rem;font-weight:700;
  line-height:1.15;letter-spacing:0.02em;text-transform:uppercase;transform:rotate(9deg);
  box-shadow:0 8px 18px rgba(0,0,0,0.4);border:2px dashed rgba(241,233,210,0.55);z-index:2;
}
.lightbox-label{padding:1.2rem 1.4rem 1.4rem;overflow-y:auto;}
.lightbox-name-row{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;}
.lightbox-name{font-family:'Fraunces',serif;font-weight:600;font-size:1.4rem;margin:0;color:var(--ink);}
.lightbox-latin{font-style:italic;opacity:0.65;font-size:0.9rem;margin-top:0.1rem;color:var(--moss);}
.lightbox-meta{
  font-size:0.78rem;opacity:0.62;margin-top:0.7rem;padding-top:0.6rem;
  border-top:1px dashed var(--line);color:var(--ink);
}
.lightbox-camera{font-size:0.72rem;opacity:0.55;margin-top:0.3rem;font-family:'JetBrains Mono',monospace;color:var(--ink);}
.lightbox-wiki{display:inline-block;margin-top:0.6rem;font-size:0.78rem;color:var(--ochre);text-decoration:underline;}

/* ---- Like-knop naast de naam ---- */
.lightbox-like-btn{
  display:flex;align-items:center;gap:0.35rem;flex-shrink:0;background:none;border:1px solid var(--line);
  border-radius:20px;padding:0.3rem 0.75rem;color:var(--ink);cursor:pointer;font-family:'Inter',sans-serif;
  font-size:0.8rem;transition:background .2s, border-color .2s;
}
.lightbox-like-btn svg{width:15px;height:15px;flex-shrink:0;}
.lightbox-like-btn:hover{border-color:var(--rust);}
.lightbox-like-btn.liked{background:var(--rust);border-color:var(--rust);color:var(--cream);}
.lightbox-like-btn.liked svg{fill:currentColor;}
.lightbox-name-btns{display:flex;align-items:center;gap:0.4rem;flex-shrink:0;}
.lightbox-share-btn{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:1px solid var(--line);
  border-radius:20px;padding:0.3rem 0.6rem;color:var(--ink);cursor:pointer;transition:border-color .2s;
}
.lightbox-share-btn svg{width:15px;height:15px;flex-shrink:0;}
.lightbox-share-btn:hover{border-color:var(--ochre);}

/* ---- Toast: korte bevestiging onderaan het scherm ("Link gekopieerd!").
   Boven de lightbox én de mobiele tabbalk, vandaar de hoge z-index. ---- */
.bts-toast{
  position:fixed;left:50%;bottom:4.5rem;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--paper);font-family:'Inter',sans-serif;font-size:0.8rem;
  padding:0.5rem 1rem;border-radius:20px;box-shadow:0 4px 14px rgba(0,0,0,0.25);
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:4000;
}
.bts-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---- Storingspaneel en storingsbalk ----
   De toast hierboven verdwijnt na 2,6 seconden. Dat is genoeg voor "gekopieerd",
   maar te kort voor een storing die het hele scherm bepaalt: een leeg
   beheeroverzicht, of voorbeelddata in plaats van je waarnemingen. Die twee
   blijven daarom staan tot de gebruiker het opnieuw probeert. ---- */
.laad-storing{
  display:flex;flex-direction:column;align-items:flex-start;gap:0.7rem;
  padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:10px;
  background:rgba(var(--paper-rgb),0.6);
}
.laad-storing-tekst{
  margin:0;font-size:0.86rem;line-height:1.5;color:var(--ink);opacity:0.85;
}
.laad-storing-knop{align-self:flex-start;}

.bts-balk{
  display:none;align-items:center;justify-content:center;gap:0.9rem;flex-wrap:wrap;
  padding:0.6rem 1rem;background:var(--ink);color:var(--paper);
  font-family:'Inter',sans-serif;font-size:0.82rem;line-height:1.45;text-align:center;
  position:relative;z-index:3900;
}
.bts-balk.show{display:flex;}
.bts-balk-knop{
  background:var(--paper);color:var(--ink);border:none;border-radius:14px;
  padding:0.3rem 0.85rem;font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:600;
  cursor:pointer;
}
.bts-balk-knop:disabled{opacity:0.6;cursor:default;}

/* ---- Notitieveld bij een waarneming (alleen voor de beheerder) ---- */
.notes-input{
  width:100%;box-sizing:border-box;resize:vertical;min-height:4.5rem;
  font-family:'Inter',sans-serif;font-size:0.92rem;line-height:1.5;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:0.55rem 0.7rem;
}
.notes-input:focus{outline:none;border-color:var(--moss);}
.notes-marker{cursor:help;}

/* ---- Jaaroverzicht: titel links, jaarkiezer rechts ---- */
.year-overview-head{
  display:flex;align-items:center;justify-content:space-between;gap:0.8rem;flex-wrap:wrap;
}
.year-overview-head .preview-label{margin-bottom:0;}
.year-select{
  font-family:'Inter',sans-serif;font-size:0.82rem;font-weight:600;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:8px;
  padding:0.25rem 0.5rem;cursor:pointer;
}

/* ---- Reacties: dichtgeklapt tot je er zelf op klikt, zodat het rustig
   blijft — de meeste bezoekers hoeven dit niet standaard open te zien. ---- */
.lightbox-comments-toggle{
  display:flex;align-items:center;gap:0.4rem;margin-top:0.9rem;background:none;border:none;padding:0;
  color:var(--moss);cursor:pointer;font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:600;
}
.lightbox-comments-chevron{width:14px;height:14px;transition:transform .2s;}
.lightbox-comments-toggle.open .lightbox-comments-chevron{transform:rotate(180deg);}
.lightbox-comments{
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.lightbox-comments.open{max-height:420px;overflow-y:auto;}
.lightbox-comments-list{margin:0.8rem 0;}
.lightbox-comment{padding:0.5rem 0;border-bottom:1px solid var(--line);font-size:0.84rem;}
.lightbox-comment:last-child{border-bottom:none;}
.lightbox-comment-name{font-weight:600;font-size:0.78rem;color:var(--moss);}
.lightbox-comment-pending-tag{font-weight:400;opacity:0.6;text-transform:none;letter-spacing:0;font-style:italic;}
.lightbox-comment-text{margin-top:0.1rem;}
.lightbox-comment.pending{opacity:0.7;}
.lightbox-comment-empty{font-size:0.82rem;opacity:0.6;padding:0.4rem 0;}
.lightbox-comment-form{display:flex;flex-direction:column;gap:0.5rem;padding-bottom:0.4rem;}
.lightbox-comment-form input, .lightbox-comment-form textarea{
  border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:2px;
  padding:0.5rem 0.7rem;font-family:'Inter',sans-serif;font-size:0.85rem;resize:vertical;min-height:60px;
}
.lightbox-comment-form input{min-height:0;}
.lightbox-comment-form .btn.small{padding:0.5rem 1rem;font-size:0.82rem;align-self:flex-start;}
/* Onzichtbaar spam-veldje: buiten beeld geschoven, niet display:none (dat
   herkennen sommige bots juist als "negeer dit veld niet"). ---- */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.pending-resolve-item{
  background:var(--paper-dark);border:1px solid var(--line);border-radius:3px;padding:0.8rem 1rem;margin-bottom:0.6rem;
}
.pending-resolve-item .manage-item{background:none;border:none;padding:0;}
.pending-suggestions{font-size:0.8rem;color:var(--moss);margin-top:0.6rem;padding-top:0.6rem;border-top:1px dashed var(--line);}
.pending-resolve-row{display:flex;gap:0.6rem;align-items:center;margin-top:0.7rem;flex-wrap:wrap;}
.pending-species-input{
  flex:1;min-width:160px;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:2px;padding:0.5rem 0.7rem;font-family:'Inter',sans-serif;font-size:0.85rem;
}

/* Oplossen per foto: elke foto zijn eigen rij met miniatuur, eventuele
   bezoekerssuggesties (klikbaar) en een eigen soortveld. */
.pending-photo-rows{margin-top:0.7rem;display:flex;flex-direction:column;gap:0.55rem;}
.pending-photo-row{
  display:flex;gap:0.7rem;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:0.55rem;
}
.pending-photo-thumb{
  width:84px;height:84px;object-fit:cover;border-radius:3px;flex-shrink:0;
}
.pending-photo-fields{flex:1;min-width:0;}
.pending-photo-fields .pending-species-input{width:100%;}
.pending-photo-fields .pending-suggestions{margin-top:0;padding-top:0;border-top:none;margin-bottom:0.4rem;}
.pending-suggestion-chip{
  display:inline-block;border:1px solid var(--moss);background:none;color:var(--moss);
  border-radius:999px;padding:0.15rem 0.6rem;font-size:0.78rem;cursor:pointer;
  font-family:'Inter',sans-serif;margin:0 0.2rem 0.2rem 0;
}
.pending-suggestion-chip:hover{background:var(--moss);color:var(--cream);}

.lightbox-thumbs{
  display:flex;gap:0.5rem;overflow-x:auto;max-width:min(88vw,560px);padding:0.3rem;flex-shrink:0;
}
.lightbox-thumb{
  width:52px;height:52px;object-fit:cover;border-radius:3px;cursor:pointer;flex-shrink:0;
  opacity:0.5;transition:opacity .15s, transform .15s;box-shadow:0 3px 8px rgba(0,0,0,0.25);
}
.lightbox-thumb:hover{opacity:0.8;}
.lightbox-thumb.active{opacity:1;transform:translateY(-3px);}

@media (max-width:600px){
  .lightbox-nav{width:36px;height:36px;font-size:1.25rem;}
  .lightbox-nav-wrap{gap:0.4rem;}
  .lightbox-img{max-height:42vh;}
  .lightbox-label{padding:1rem 1.1rem 1.2rem;}
  .lightbox-thumb{width:42px;height:42px;}
}

/* ---- Foto-galerij bij het toevoegen van een waarneming ---- */
.photo-gallery{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:0.6rem;}
.photo-gallery .thumb-item{position:relative;width:88px;height:88px;}
.photo-gallery .thumb-item img{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block;}
.photo-gallery .thumb-item .remove-btn{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  background:var(--rust);color:#F1E9D2;border:2px solid var(--paper);font-size:0.7rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;
}
.log .card .thumb-wrap{cursor:pointer;}
.camera-line{
  font-size:0.7rem;color:var(--moss);margin-top:0.4rem;letter-spacing:0.01em;
  opacity:0.85;white-space:normal;
}
.log .card .camera-line{color:var(--ochre);opacity:0.8;}

#over{max-width:700px;margin:0 auto;text-align:center;}
#over p{color:rgba(var(--ink-rgb),0.72);margin-top:0.8rem;}
#over code{background:var(--paper-dark);padding:0.15rem 0.4rem;border-radius:2px;font-family:'JetBrains Mono',monospace;font-size:0.85rem;}

footer{padding:2.2rem 3rem;text-align:center;font-size:0.82rem;color:rgba(var(--ink-rgb),0.5);border-top:1px solid var(--line);}

/* ---- Basisbescherming tegen overnemen van foto's ----
   Ontmoedigt rechtsklikken-om-op-te-slaan en slepen. Geen enkele
   client-side maatregel kan een schermafbeelding voorkomen. */
.thumb img, .popup-card img, .plate-photo img, #pv-thumb-wrap img{
  pointer-events:none;
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-user-select:none;
  user-select:none;
}

@media (max-width:900px){
  .add-grid{grid-template-columns:1fr;}
}
@media (max-width:860px){
  :root{--spine-w:0px;}
  .spine{display:none;}
  body{padding-left:0;padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  header{padding:1.1rem 1.4rem;}
  header nav a{display:none;}
  header{flex-wrap:wrap;row-gap:0.7rem;}
  header nav.admin-nav a{display:inline-block;}
  header nav.admin-nav{gap:0.9rem;row-gap:0.6rem;width:100%;justify-content:flex-start;}
  nav{gap:1rem;font-size:0.85rem;}
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-copy{padding:2.4rem 1.6rem;}
  .hero-copy h1{font-size:2.1rem;}
  .hero-plate{min-height:300px;padding:1.6rem;}
  section{padding:3rem 1.4rem;}
  .page-head{padding:2.4rem 1.4rem 0;}
  #toevoegen-main{padding:0 1.4rem 3rem;}
  .legend{max-width:140px;font-size:0.7rem;max-height:320px;}
  #map{height:380px;}
}

/* ---- Tactiele druk-feedback (app-gevoel) ---- */
.btn:active{transform:scale(0.97);}
.card:active{transform:scale(0.98);}
@media (hover:none){
  .card:hover{transform:none;}
}

/* ---- Onderste tabbalk: app-gevoel op mobiel ----
   Standaard zichtbaar; op brede schermen verborgen via het
   min-width:861px-blok verderop (daar zit de !important). ---- */
.mobile-tabbar{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1200;
  background:rgba(var(--paper-rgb),0.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:0.4rem 0.6rem calc(0.4rem + env(safe-area-inset-bottom));
  align-items:center;justify-content:space-between;
}
.tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:0.2rem;
  color:var(--ink);opacity:0.55;font-size:0.66rem;font-weight:500;
  padding:0.35rem 0.2rem;transition:opacity .2s, transform .15s;
}
.tab-item svg{width:22px;height:22px;}
.tab-item:active{transform:scale(0.9);}
.tab-item.active{opacity:1;color:var(--rust);}
.tab-fab{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:var(--forest);color:var(--cream);opacity:1;
  margin-top:-22px;box-shadow:0 6px 16px rgba(0,0,0,0.35);
  border:3px solid rgba(var(--paper-rgb),0.96);
}
.tab-fab svg{width:24px;height:24px;}
.tab-fab.active{background:var(--rust);}
.tab-fab:active{transform:scale(0.92);}

/* ---- "Meer"-paneel: schuift omhoog vanaf de onderste tabbalk ---- */
.more-sheet-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1250;
}
.more-sheet-backdrop.open{display:block;}
.more-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:1300;
  background:var(--paper);border-radius:14px 14px 0 0;
  padding:0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .25s ease;
  max-height:75vh;overflow-y:auto;
}
.more-sheet.open{transform:translateY(0);}
.more-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 0.6rem;}
.more-sheet-item{
  display:flex;align-items:center;gap:0.7rem;padding:0.85rem 1.4rem;font-size:0.95rem;color:var(--ink);
  background:none;border:none;width:100%;text-align:left;font-family:'Inter',sans-serif;cursor:pointer;
}
.more-sheet-item:active{background:var(--paper-dark);}
.more-sheet-divider{height:1px;background:var(--line);margin:0.4rem 1.4rem;}

@media (min-width:861px){
  .more-sheet-backdrop, .more-sheet{display:none !important;}
}

@media (min-width:861px){
  .mobile-tabbar{display:none !important;}
}
@media (prefers-reduced-motion: reduce){
  .card, .btn, nav a{transition:none;}
  html{scroll-behavior:auto;}
}

/* ---- Schuifbalken in huisstijl: smal en mosgroen op een onzichtbare baan,
   in plaats van de witte systeembalk. Geldt overal (legenda op de kaart,
   reactielijsten, dropdowns, lichtbak, ...) en beweegt mee met het thema. ---- */
*{
  scrollbar-width: thin;                 /* Firefox + moderne Chromium */
  scrollbar-color: var(--moss) transparent;
}
*::-webkit-scrollbar{ width:8px; height:8px; }   /* oudere WebKit-browsers */
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background-color:var(--moss);
  border-radius:4px;
  border:2px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background-color:var(--ochre); }

/* ---- Bulk-wizard: één soortgroep tegelijk beoordelen ---- */
.bulk-wizard-bar{display:flex;align-items:center;gap:0.8rem;margin-bottom:1rem;}
/* "Gewapende" opslaan-knop: eerste klik toont wat er gaat gebeuren (oker),
   pas de tweede klik slaat echt op. */
.bulk-save-btn.confirm-armed{background:var(--ochre);}

/* ---- Kaartenshop (kaartenshop.html): openbare etalage ---- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem;}
.shop-card{
  background:var(--paper-dark);border:1px solid var(--line);border-radius:3px;
  padding:1.1rem;display:flex;flex-direction:column;transition:transform .2s;
}
.shop-card:hover{transform:translateY(-2px);}
.shop-thumb{width:100%;aspect-ratio:4/3;border-radius:2px;overflow:hidden;background:var(--paper);margin-bottom:0.8rem;}
.shop-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.shop-card h4{font-family:'Fraunces',serif;font-size:1.1rem;margin:0 0 0.1rem;}
.shop-card .latin{font-style:italic;font-size:0.8rem;opacity:0.6;margin-bottom:0.7rem;}
.shop-card .field{margin-bottom:0.7rem;}
.shop-card .btn{width:100%;}
.shop-note{font-size:0.76rem;opacity:0.65;margin-top:0.6rem;}

/* ---- Kaartenshop-beheer (kaartenbeheer.html): foto's kiezen ---- */
.cards-admin-bar{display:flex;flex-wrap:wrap;gap:0.7rem;align-items:center;justify-content:center;margin-bottom:0.6rem;}
.cards-admin-bar .field{margin-bottom:0;}
.cards-admin-status{font-size:0.85rem;opacity:0.8;text-align:center;min-height:1.3em;margin-bottom:1rem;}
.cards-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0.9rem;}
.cards-admin-item{
  position:relative;border:2px solid var(--line);border-radius:3px;overflow:hidden;
  background:var(--paper-dark);color:var(--ink);cursor:pointer;padding:0;text-align:left;
  font-family:inherit;display:block;width:100%;
}
.cards-admin-item.selected{border-color:var(--ochre);box-shadow:0 4px 14px rgba(189,139,46,0.25);}
.cards-admin-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.cards-admin-info{padding:0.5rem 0.6rem;font-size:0.75rem;}
.cards-admin-info strong{display:block;font-family:'Fraunces',serif;font-size:0.9rem;font-weight:600;}
.cards-score{
  position:absolute;top:0.5rem;right:0.5rem;background:var(--forest);color:var(--cream);
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;padding:0.15rem 0.5rem;border-radius:20px;
}
.cards-pick{display:inline-block;margin-top:0.25rem;font-size:0.72rem;font-weight:600;opacity:0.7;}
.cards-admin-item.selected .cards-pick{color:var(--ochre);opacity:1;}

/* ==========================================================================
   Telefoon-correcties — bewust onderaan het bestand

   Deze regels overschrijven eerdere regels met dezelfde zwaarte, en dat werkt
   alleen als ze er in het bestand ná staan. Zet er dus niets ónder wat weer
   over dezelfde elementen gaat.
   ========================================================================== */

/* ---- Anker-sprongen: kop niet meer half achter de balk ----
   De koptekst blijft bovenaan plakken (position:sticky). Een sprong naar
   #kaart, #trips of #logboek — vanuit de tabbalk onderin of vanuit
   scrollIntoView() — zette de sectie precies tegen de bovenkant van het
   scherm, dus half onder die balk. Hier houden we de hoogte van die balk
   vrij: ongeveer 88px op een telefoon en op een breed scherm. ---- */
section[id]{scroll-margin-top:5.5rem;}
/* Tussen 861px en ruwweg 1100px zijn de zes navigatielinks weer zichtbaar
   (die worden pas onder 861px verborgen) maar passen ze niet op één regel.
   De balk valt dan over twee regels en wordt zo'n 132px hoog, en met 88px
   marge bleef de eerste regel van de sectie er alsnog achter steken. */
@media (min-width:861px) and (max-width:1100px){
  section[id]{scroll-margin-top:8.5rem;}
}

/* ---- Geen automatische inzoom meer bij het aantikken van een veld ----
   Safari op de iPhone zoomt in zodra je een veld aantikt waarvan de tekst
   kleiner is dan 16px, en zoomt daarna niet vanzelf terug. Bij een formulier
   met tien velden gebeurt dat tien keer.

   Dit hangt bewust NIET aan een schermbreedte maar aan het soort scherm.
   Een iPhone is liggend 844 tot 932px breed en een tablet nog breder; met een
   breedtegrens van 600px zoomde precies díé stand alsnog in. Muis-schermen
   doen niet aan die inzoom en houden hun kleinere, rustiger maten.

   Bouw je een nieuw veld met een eigen klasse en een eigen font-size, zet
   die klasse er dan hier bij — anders zoomt dat ene veld weer in. ---- */
@media (hover:none), (pointer:coarse){
  .field input, .field select,
  .card-comment-form input, .card-comment-form textarea,
  .lightbox-comment-form input, .lightbox-comment-form textarea,
  .bulk-review-reassign-row input,
  .bulk-photo-reassign-input,
  .helpmee-name-input,
  .pending-species-input,
  .notes-input,
  .map-search-input,
  .map-control select{
    font-size:16px;
  }
  /* Vangnet voor velden zonder eigen klasse. Schuifjes, vinkjes en
     bestandskiezers hebben geen tekst en hoeven niets. */
  input:not([type="range"]):not([type="checkbox"]):not([type="file"]),
  select,
  textarea{
    font-size:16px;
  }
}

@media (max-width:600px){

  /* ---- Toevoegformulier: twee kolommen worden er één ----
     In een halve kolom paste de rij met de vijf vogelicoontjes niet (die
     vraagt ruim 220px) en werd het datumveld afgeknepen. ---- */
  .row2{grid-template-columns:1fr;}

  /* ---- Help mee: de foto de volle breedte geven ----
     De twee bladerknoppen naast de foto kostten samen bijna een derde van de
     breedte, terwijl je juist op díé foto een vogel moet herkennen. Op een
     telefoon liggen ze daarom óver de foto heen. ---- */
  .helpmee-photo-viewer{position:relative;}
  .helpmee-photo-nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    background:rgba(var(--paper-rgb),0.85);backdrop-filter:blur(4px);
  }
  .helpmee-photo-nav.prev{left:0.5rem;}
  .helpmee-photo-nav.next{right:0.5rem;}
  /* Bij de eerste foto is 'vorige' uitgeschakeld (bij de laatste 'volgende').
     Naast de foto mocht zo'n knop blijven staan, maar óver de foto dekt hij
     een stuk vogel af én slikt hij de tik: een uitgeschakelde knop geeft een
     klik niet door aan wat eronder ligt, dus daar zou de lichtbak niet meer
     opengaan. Op een telefoon halen we hem daarom helemaal weg; de teller
     "Foto 1 van 21" eronder vertelt al waar je bent. */
  .helpmee-photo-nav:disabled{display:none;}

  /* ---- Beoordeelscherm van de bulk-import ----
     Iets minder rand, zodat de vier grote knoppen vaker meteen in beeld
     staan en er niet gescrold hoeft te worden. ---- */
  .bulk-photo-review-overlay{padding:1rem 0.8rem;}
}