/* Loci — redactie. Sober met opzet: dit is gereedschap, geen etalage.
   De kleuren komen uit de app zelf, zodat het één geheel blijft. */

:root {
  --accent: #e2001a;
  --inkt: #1a1a1a;
  --grijs: #6b6b6b;
  --lijn: #e0ddd8;
  --vlak: #ffffff;
  --grond: #f6f4f1;
  --goed: #1a7f37;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Het attribuut 'hidden' verbergt via display:none, maar élke eigen
   display-regel overstemt dat stilletjes. Zo stonden de tabbladen zichtbaar
   terwijl de code ze verborgen had. Eén regel voorkomt die hele soort fout. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--inkt);
  background: var(--grond);
}

/* ------------------------------------------------------------- kopbalk */

.balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 20px;
  background: var(--vlak); border-bottom: 1px solid var(--lijn);
  position: sticky; top: 0; z-index: 500;
}
.merk { font-weight: 700; letter-spacing: -.01em; }
.merk-zwak { color: var(--accent); font-weight: 600; }
.zoek-terug { flex: 0 0 auto; font-weight: 600; }
.balk-rechts { display: flex; align-items: center; gap: 12px; }
.wie { color: var(--grijs); font-size: 13px; }

/* ------------------------------------------------------------ bouwstenen */

.midden { display: grid; place-items: center; min-height: 70vh; padding: 24px; }

.kaart {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 10px; padding: 18px; margin: 0 0 16px;
}
.smal { width: min(380px, 100%); }
.kaart h1 { margin: 0 0 4px; font-size: 20px; }
.kaart h2 { margin: 0 0 4px; font-size: 15px; }

label { display: block; margin: 0 0 12px; font-size: 13px; color: var(--grijs); }
input, textarea, select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  font: inherit; color: var(--inkt);
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 6px;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
textarea { resize: vertical; line-height: 1.55; }
.tekstopmaak {
  display: flex; gap: 6px; margin: 4px 0 0; padding: 6px;
  background: var(--grond); border: 1px solid var(--lijn); border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.tekstopmaak .knop-vlak { padding: 5px 10px; background: var(--vlak); }
.rijke-tekst {
  width: 100%; min-height: 330px; padding: 10px; margin: 0 0 6px;
  line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 0 0 6px 6px;
}
.rijke-tekst:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
.rijke-tekst:empty::before { content: attr(data-placeholder); color: #999; pointer-events: none; }
.rij { display: flex; gap: 12px; align-items: flex-end; }
.rij > label { flex: 1; }

.knop {
  padding: 9px 16px; font: inherit; font-weight: 600; color: #fff;
  background: var(--accent); border: 0; border-radius: 6px; cursor: pointer;
}
.knop:hover { filter: brightness(.92); }
.knop:disabled { opacity: .5; cursor: default; filter: none; }
.knop-vlak {
  padding: 8px 12px; font: inherit; color: var(--inkt);
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 6px; cursor: pointer;
}
.knop-vlak:hover { border-color: var(--grijs); }
.knop-gevaar {
  padding: 8px 12px; font: inherit; color: #8c1226; background: #fff;
  border: 1px solid #d9a9b1; border-radius: 6px; cursor: pointer;
}
.knop-gevaar:hover { background: #fdeaec; border-color: #8c1226; }
.knop-gevaar:disabled { opacity: .5; cursor: default; }

.uitleg { margin: 0 0 12px; font-size: 13px; color: var(--grijs); }
.fout { margin: 10px 0 0; padding: 8px 10px; font-size: 13px;
        color: #7a1020; background: #fdeaec; border-radius: 6px; }

/* --------------------------------------------------------------- lijst */

.werkbalk {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 14px 20px; background: var(--vlak); border-bottom: 1px solid var(--lijn);
  position: sticky; top: 45px; z-index: 400;
}
.werkbalk input[type="search"] { width: min(320px, 50vw); margin: 0; }
.werkbalk select { width: auto; margin: 0; }
.werkbalk-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.telling { margin-left: auto; color: var(--grijs); font-size: 13px; }
.bewerktitel { font-weight: 600; }
.bewaarstand { font-size: 13px; color: var(--goed); }

/* De enige actie die je tijdens een lang verhaal altijd nodig hebt blijft in
   bereik, ook op een iPhone met toetsenbord en veilige onderrand. */
.vaste-acties {
  position: fixed; right: 20px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 850;
  display: flex; align-items: center; gap: 10px; padding: 8px;
  background: rgba(255,255,255,.96); border: 1px solid var(--lijn); border-radius: 9px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); backdrop-filter: blur(8px);
}
#bewerkscherm { padding-bottom: 76px; }

.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid var(--lijn);
  background: var(--vlak); cursor: pointer;
}
.lijst li:hover { background: #faf8f6; }
.lijst .naam { font-weight: 600; }
.lijst .adres { color: var(--grijs); font-size: 13px; }
.lijst .stand {
  margin-left: auto; font-size: 12px; color: var(--grijs);
  border: 1px solid var(--lijn); border-radius: 999px; padding: 2px 9px;
}
.lijst .stand[data-status="gepubliceerd"] { color: var(--goed); border-color: #bfe3c8; }
.lijst .stand[data-status="concept"] { color: #8a6d1f; border-color: #ecdcae; }
.meer { padding: 16px 20px; }

/* -------------------------------------------------------------- bewerk */

.kolommen {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px; padding: 16px 20px;
}
@media (max-width: 860px) { .kolommen { grid-template-columns: 1fr; } }
.kolom { min-width: 0; }

#kaartje {
  height: 260px; margin: 0 0 12px;
  border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden;
}
.adresstand { min-height: 18px; margin: -4px 0 8px; }

.leaflet-container { background: #eeeae4; }
.leaflet-tile-pane { opacity: 1; }

.beelden { list-style: none; margin: 0 0 12px; padding: 0; }
.beelden li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--lijn);
}
.beelden li:first-child { border-top: 0; }
.beelden img, .beelden video {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 5px; background: var(--grond);
}
.revisierij { align-items: end; }
.revisierij label { min-width: min(100%, 320px); }
.revisierij button { margin-bottom: 10px; }
.beelden .velden label { margin-bottom: 6px; }
.beelden .knoppen { display: flex; flex-direction: column; gap: 4px; }
.beelden .knoppen button {
  width: 30px; height: 26px; font: inherit; line-height: 1;
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 5px; cursor: pointer;
}

.voetnoot { margin: 0; padding: 0 20px 28px; color: var(--grijs); font-size: 13px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ------------------------------------------------------------- melding */

.melding {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 8px; font-size: 14px;
  color: #fff; background: var(--inkt); box-shadow: 0 6px 20px rgba(0,0,0,.18);
  z-index: 900;
}
.melding[data-soort="fout"] { background: #8c1226; }

/* Wat je ziet hangt af van wie je bent. Dat hoort zichtbaar te zijn: een
   concept dat ontbreekt omdat je niet bent aangemeld is anders niet van een
   storing te onderscheiden. */
.zichtmelding {
  margin: 0; padding: 9px 20px; font-size: 13px;
  color: #7a5b12; background: #fdf5e0; border-bottom: 1px solid #f0e4c4;
}
.zichtmelding[data-goed="ja"] { color: var(--grijs); background: var(--vlak); border-bottom-color: var(--lijn); }

.hint { display: block; margin-top: 4px; font-size: 12px; color: #8a6d1f; }
.beeldmaat { display: block; margin-top: 3px; font-size: 12px; color: var(--grijs); }

/* ------------------------------------------------- kiezers en etiketten */

.chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.chips li {
  display: inline-flex; align-items: center; gap: 6px;
  /* Niet meekrimpen met de rij: een etiket hoort zijn eigen naam te tonen en
     anders af te breken met een beletselteken, niet samengeperst te worden
     tot een streepje van achttien pixels. */
  flex: 0 0 auto;
  max-width: 100%; padding: 3px 6px 3px 10px; font-size: 13px;
  background: var(--grond); border: 1px solid var(--lijn); border-radius: 999px;
}

/* De naam van een gerelateerd verhaal is een knop: één tik en je staat erin.
   Hij mag nooit afbreken — een naam als 'Aan de Dam' viel dan over drie regels
   uiteen en liep buiten het etiket, met de sluitknop ertussen. */
.chips .naar {
  /* De regel hieronder voor het kruisje zet elke knop in een etiket op
     achttien pixels breed. Dat gold ook voor de naam, die daardoor tot een
     streepje werd samengeperst terwijl de tekst er wel in zat. */
  width: auto;
  max-width: 26em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0; font: inherit; color: var(--inkt); text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--lijn); cursor: pointer;
}
.chips .naar:hover { color: var(--accent); border-bottom-color: var(--accent); }
.chips .groep { color: var(--grijs); font-size: 11px; text-transform: lowercase; }
.chips button {
  width: 18px; height: 18px; padding: 0; line-height: 1;
  color: var(--grijs); background: transparent; border: 0;
  border-radius: 50%; cursor: pointer; font-size: 15px;
}
.chips button:hover { color: var(--accent); background: #fff; }
.tussenkop { margin-top: 18px !important; }
.landen-chips {
  min-height: 42px; padding: 7px; background: var(--grond);
  border: 1px solid var(--lijn); border-radius: 7px;
}
.landen-chips:empty { display: flex; }
.landen-chips:empty::before { content: "nog geen land gekozen"; color: var(--grijs); font-size: 13px; }
.landen-chips li { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }

.kiezer { display: flex; gap: 8px; align-items: center; }
.kiezer input { margin: 0; }
.kiezer select { width: auto; margin: 0; flex: 0 1 auto; min-width: 0; }
/* Alleen voor schermlezers: het label van de groepskeuze (R11). */
.visueel-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.suggesties {
  list-style: none; margin: 4px 0 0; padding: 4px; max-height: 210px; overflow-y: auto;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 6px;
}
.suggesties li { padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.suggesties li:hover, .suggesties li[aria-selected="true"] { background: var(--grond); }
.suggesties .groep { color: var(--grijs); font-size: 12px; }
.suggesties .nieuw { color: var(--accent); font-weight: 600; }
.verwant-kiezer input { min-width: 0; }
.verwant-kiezer button { white-space: nowrap; }
.verwant-suggesties li { padding: 0; cursor: default; }
.verwant-suggesties li:hover { background: transparent; }
.verwant-suggesties label {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px;
  border-radius: 4px; cursor: pointer;
}
.verwant-suggesties label:hover { background: var(--grond); }
.verwant-suggesties input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }
.verwanten-chips { display: grid; grid-template-columns: minmax(0, 1fr); }
.verwanten-chips li { max-width: 100%; }
.verwanten-chips .naar { flex: 1 1 auto; min-width: 0; }
.chips button.verwant-volgorde { width: 24px; height: 24px; font-weight: 700; }
.chips button.verwant-volgorde:disabled { opacity: .25; cursor: default; background: transparent; }

@media (max-width: 560px) {
  .verwant-kiezer { align-items: stretch; flex-direction: column; }
  .verwant-kiezer button { width: 100%; }
}

/* ---------------------------------------------------- zoeken en trefwoorden */

#zoekkaart {
  height: min(70vh, 720px); min-height: 420px;
  border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden;
}
.zoekresultaten li { display: block; }
.zoekresultaten .zoekregel-kop {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px;
}
.zoekresultaten .zoekfragment {
  display: block; color: var(--grijs); font-size: 13px; line-height: 1.4;
}
.zoekresultaten .gevonden-in {
  margin-left: auto; color: var(--grijs); font-size: 11px; white-space: nowrap;
}
mark.zoekmarkering {
  color: var(--accent); background: #fff0f2; font-weight: 700;
  border-radius: 2px; padding: 0 .04em;
}
.zoek-hit-context {
  max-width: min(46vw, 620px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--grijs); font-size: 13px;
}
.zoek-hit-context mark { color: var(--accent); background: transparent; font-weight: 700; }

.beheer-trefwoord-nieuw { margin-bottom: 10px; }
.beheer-trefwoord-nieuw input { min-width: 0; }
#beheer-trefwoord-zoek { margin-bottom: 8px; }
.trefwoordbeheer { max-height: 520px; overflow-y: auto; }
.trefwoordbeheer .rij { align-items: center; }
.trefwoordbeheer input { margin: 0; min-width: 0; }
.trefwoordbeheer .trefwoordnaam { flex: 1.3; }
.trefwoordbeheer .trefwoordgroep { flex: .8; }
.trefwoordbeheer .gebruik { min-width: 82px; color: var(--grijs); font-size: 12px; }
.trefwoordbeheer button { flex: 0 0 auto; }

/* Waar staat dit trefwoord? Kaart boven, lijst eronder — dezelfde volgorde als
   het paneel in de app, zodat wie beide gebruikt niet hoeft om te denken. */
.trefwoordkaart { height: 260px; margin-bottom: 14px; border: 1px solid var(--lijn); border-radius: 10px; }
.trefwoordverhalen { max-height: 340px; overflow-y: auto; }
.trefwoordverhalen .rij { align-items: baseline; gap: 10px; }
.trefwoordverhalen .trefwoordverhaal { flex: 1; text-align: left; }
.trefwoordverhalen .uitleg { flex: 0 0 auto; margin: 0; }
.snapshot-stand { margin-top: 10px; }

/* ----------------------------------------------------------- AI-hertaaltool */

.hertaalkaart { margin: 18px 20px; }
.hertaal-kop, .hertaal-acties, .hertaal-voortgang,
.hertaal-paginering, .hertaal-profielrij {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hertaal-kop { align-items: flex-start; justify-content: space-between; }
.hertaal-kop > div { max-width: 850px; }
.hertaal-veilig {
  padding: 5px 9px; color: var(--goed); background: #eff9f1;
  border: 1px solid #cce6d2; border-radius: 999px; font-size: 12px;
}
.hertaal-profielblok, .hertaal-wezenblok {
  margin: 14px 0; padding: 12px; border: 1px solid var(--lijn); border-radius: 8px;
}
.hertaal-profielblok > summary, .hertaal-wezenblok > summary {
  cursor: pointer; font-weight: 700;
}
.hertaal-profielblok[open] > summary, .hertaal-wezenblok[open] > summary { margin-bottom: 12px; }
.hertaal-profielrij label { flex: 1; margin: 0; }
.hertaal-profielacties { justify-content: flex-end; }
.hertaal-profielacties .bewaarstand { margin-right: auto; }
.hertaal-filter {
  display: grid; grid-template-columns: minmax(210px, .8fr) minmax(250px, 1.5fr) auto auto;
  align-items: end; gap: 10px; margin: 16px 0 10px;
}
.hertaal-filter label { margin: 0; }
.vinkregel {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  color: var(--inkt); font-size: 13px;
}
.vinkregel input { width: auto; margin: 0; }
.hertaal-open { min-height: 39px; }
.hertaal-acties { padding: 10px 0; border-top: 1px solid var(--lijn); }
.hertaal-voortgang { min-height: 28px; justify-content: space-between; }
.hertaal-voortgang .uitleg { margin: 0; }
.hertaal-voortgang progress { flex: 1; min-width: 160px; accent-color: var(--accent); }
.hertaal-bronnen { list-style: none; margin: 8px 0; padding: 0; }
.hertaal-bron {
  margin: 0 0 12px; padding: 12px; border: 1px solid var(--lijn);
  border-radius: 8px; background: #fff;
}
.hertaal-bronkop { display: flex; align-items: center; gap: 10px; }
.hertaal-bronkop input[type="checkbox"] { width: auto; margin: 0; }
.hertaal-brontitel { flex: 1; min-width: 0; }
.hertaal-brontitel strong, .hertaal-brontitel span { display: block; }
.hertaal-brontitel span { color: var(--grijs); font-size: 12px; }
.hertaal-klaar { color: var(--goed); font-size: 12px; white-space: nowrap; }
.hertaal-tekstkolommen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 12px;
}
.hertaal-tekstvak {
  min-width: 0; padding: 10px; background: var(--grond);
  border-radius: 7px;
}
.hertaal-tekstvak h3 { margin: 0 0 6px; font-size: 13px; }
.hertaal-tekstvak textarea { min-height: 210px; background: #fff; }
.hertaal-versies { margin-top: 10px; }
.hertaal-versies > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.hertaal-versielijst { list-style: none; padding: 0; margin: 8px 0 0; }
.hertaal-versie {
  margin: 8px 0 0; padding: 10px; border-left: 3px solid var(--lijn); background: #faf9f7;
}
.hertaal-versie[data-oorsprong="spreadsheet_hertaald"] { border-left-color: #7b4ab5; }
.hertaal-versie[data-oorsprong="ai"] { border-left-color: var(--accent); }
.hertaal-versiekop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hertaal-versiekop input { flex: 1; min-width: 210px; margin: 0; font-weight: 600; }
.hertaal-meta { color: var(--grijs); font-size: 11px; }
.hertaal-versie textarea { min-height: 170px; }
.hertaal-versieacties { display: flex; justify-content: flex-end; gap: 8px; }
.hertaal-paginering { justify-content: center; }
.hertaal-paginering .uitleg { margin: 0; min-width: 150px; text-align: center; }
.hertaal-wezenblok { margin-top: 18px; }
.hertaal-wezenblok .kiezer { margin-bottom: 10px; }
.hertaal-wezen .hertaal-tekstkolommen { margin-top: 8px; }

@media (max-width: 850px) {
  .hertaalkaart { margin: 14px; }
  .hertaal-filter { grid-template-columns: 1fr 1fr; }
  .hertaal-tekstkolommen { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hertaal-filter { grid-template-columns: 1fr; }
  .hertaal-filter .knop-vlak { width: 100%; }
  .hertaal-acties > button { width: 100%; }
  .hertaal-bronkop { align-items: flex-start; flex-wrap: wrap; }
  .hertaal-klaar { width: 100%; padding-left: 27px; }
  .hertaal-versieacties { flex-direction: column; }
  .hertaal-versieacties button { width: 100%; }
}

/* ------------------------------------------------------------- uploaden */

.neerzetvlak {
  margin: 0 0 10px; padding: 18px 14px; text-align: center;
  border: 1px dashed var(--lijn); border-radius: 8px; background: var(--grond);
}
.neerzetvlak p { margin: 0; font-size: 14px; }
.neerzetvlak .uitleg { margin-top: 4px; }
.neerzetvlak[data-erboven="ja"] { border-color: var(--accent); background: #fdf0f1; }
.neerzetvlak[data-bezig="ja"] { opacity: .6; }
.alslink { display: inline; margin: 0; color: var(--accent); font-size: inherit;
           text-decoration: underline; cursor: pointer; }

/* ------------------------------------------------------ tabs en haltes */

.tabs { display: flex; gap: 4px; margin-left: 8px; }
.tab {
  padding: 5px 12px; font: inherit; font-size: 14px; color: var(--grijs);
  background: transparent; border: 1px solid transparent;
  border-radius: 999px; cursor: pointer;
}
.tab:hover { color: var(--inkt); }
.tab[aria-current="true"] {
  color: var(--inkt); font-weight: 600;
  background: var(--grond); border-color: var(--lijn);
}
.beheer-tabs { flex: 1; min-width: 0; }
.beheer-terug { margin-left: auto; color: var(--accent); white-space: nowrap; }
#beheerscherm[data-beheer-onderdeel="trefwoorden"] .kolommen { display: block; }
#beheerscherm[data-beheer-onderdeel="trefwoorden"] .kolom { display: contents; }
.beheer-trefwoordkaart {
  width: min(1040px, calc(100% - 40px));
  margin: 18px auto;
}
.uitgave-snapshotkaart { margin: 0 20px 20px; }
#lijst[aria-busy="true"] { cursor: progress; }

.halte-toevoegen-openen { margin: 8px 0 14px; }
.haltes { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: halte; }
.haltes li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px; align-items: start;
  padding: 9px 0; border-top: 1px solid var(--lijn);
}
.haltes li:first-child { border-top: 0; }
.haltes .nummer { color: var(--grijs); font-size: 13px; padding-top: 3px; }
.haltes .verhaalnaam { font-size: 14px; }
.haltes .eigentitel { margin-top: 4px; }
.haltes .eigentitel input { font-size: 13px; padding: 5px 8px; }
.haltes .knoppen { display: flex; flex-direction: column; gap: 4px; }
.haltes .knoppen button {
  width: 30px; height: 26px; font: inherit; line-height: 1;
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 5px; cursor: pointer;
}
.haltes .verborgen { color: var(--grijs); font-size: 12px; }

/* Eén rustig bewerkvenster voor het kiezen én het wandelingseigen maken van
   een halte. Het venster blijft op kleine schermen binnen de veilige hoogte;
   alleen de inhoud scrolt, niet de pagina erachter. */
.halte-dialoog {
  width: min(680px, calc(100vw - 28px)); max-height: min(860px, calc(100vh - 28px));
  padding: 0; color: var(--inkt); background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 12px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .24);
}
.halte-dialoog::backdrop { background: rgba(20, 20, 20, .46); }
.halte-dialoog-inhoud { padding: 20px; overflow-y: auto; max-height: inherit; }
.halte-dialoog-kop,
.halte-popup-beeldkop,
.halte-dialoog-acties {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.halte-dialoog-kop h2 { margin: 0 0 3px; font-size: 18px; }
.halte-dialoog-kop .uitleg { margin-bottom: 16px; }
.halte-dialoog-sluiten {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
  font-size: 22px; line-height: 1;
}
.halte-popup-keuze {
  margin: 10px 0 16px; padding: 9px 11px; font-size: 13px;
  color: var(--grijs); background: var(--grond); border-radius: 6px;
}
.halte-popup-keuze[data-gekozen="ja"] { color: var(--inkt); font-weight: 600; }
.halte-popup-beeldkop { margin-top: 16px; }
.halte-popup-beeldkop strong { font-size: 13px; }
.halte-popup-beeldkop .uitleg { margin: 2px 0 8px; }
.halte-popup-beeldkop .alslink { flex: 0 0 auto; margin: 0; color: var(--inkt); }
.halte-popup-ophalen { align-items: center; margin-bottom: 10px; }
.halte-popup-ophalen input { flex: 1; margin: 0; }
.halte-popup-ophalen button { flex: 0 0 auto; }
.halte-popup-afbeeldingen { display: grid; gap: 8px; }
.halte-popup-afbeelding {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 9px; align-items: center; padding: 8px;
  background: var(--grond); border-radius: 7px;
}
.halte-popup-afbeelding img {
  width: 58px; height: 58px; object-fit: cover; background: var(--lijn); border-radius: 5px;
}
.halte-popup-afbeelding-velden { display: grid; gap: 5px; }
.halte-popup-afbeelding input { margin: 0; font-size: 13px; }
.halte-popup-afbeelding .knop-vlak { padding: 6px 9px; }
.halte-popup-stand { min-height: 20px; margin: 10px 0 0; }
.halte-popup-stand[data-soort="fout"] { color: #7a1020; }
.halte-dialoog-acties { justify-content: flex-end; margin-top: 8px; }

/* ------------------------------------------------------- lijst met kaart */

.lijst-en-kaart {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
  align-items: start;
}
@media (max-width: 900px) {
  .lijst-en-kaart { grid-template-columns: 1fr; }
  .kaartkant { order: -1; }
}
.lijstkant { min-width: 0; }
.kaartkant {
  position: sticky; top: 108px; padding: 14px 20px;
  border-left: 1px solid var(--lijn);
}
#lijstkaart {
  height: min(70vh, 720px); border: 1px solid var(--lijn);
  border-radius: 8px; overflow: hidden; background: var(--vlak);
}
.volgen {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px; font-size: 13px; color: var(--inkt);
}
.volgen input { width: auto; margin: 0; }
.kaartkant .uitleg { margin: 10px 0 0; }

/* De speld van het verhaal waar de muis overheen gaat in de lijst. */
.lijst li[data-aan="ja"] { background: #fdf0f1; }

/* --------------------------------------------- thema's, scores, beheer */

.vlakuitleg { padding: 12px 20px 0; max-width: 70ch; }

.rijen { list-style: none; margin: 0; padding: 0 20px 24px; }
.rijen > li { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.rijen > li:last-child { border-bottom: 0; }
.rij-blok label { margin-bottom: 0; }
.rijen .breed { flex: 2; }
.rijen .smal { flex: 0 0 90px; }
.rijen .vinkje {
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding-bottom: 8px; font-size: 13px; white-space: nowrap;
}
.rijen .vinkje input { width: auto; margin: 0; }
.rijen .waarschuwing {
  padding: 9px 11px; font-size: 13px;
  color: #7a5b12; background: #fdf5e0; border-radius: 6px; border-bottom: 0;
}
.gebruikersnaam { flex: 1; font-weight: 600; }
/* R11: niet breder dan de rij, zodat een telefoon niet horizontaal schuift. */
.rijen .rij select { width: auto; min-width: min(22em, 100%); max-width: 100%; margin: 0; }
/* R10: de stand van één rij in beheer; «niet bewaard» valt op, «bewaard» niet. */
.rijstand { min-width: 6.5em; text-align: right; color: var(--grijs); white-space: nowrap; }
.rij[data-onbewaard="ja"] .rijstand { color: var(--accent); font-weight: 600; }
/* R9: weggegooid. */
/* Redactie 58: op een telefoon brak «anywhere» namen midden in een woord. Nu
   schuiven datum en knop naar een volgende regel, en breekt een woord alleen
   als het op zichzelf niet past. */
#verwijderlijst .rij { align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
#verwijderlijst .soort { min-width: 6.5em; color: var(--grijs); }
#verwijderlijst .naam { flex: 1 1 12em; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
#verwijderlijst time { font-size: 13px; color: var(--grijs); white-space: nowrap; }

/* De hiërarchie: welke hoofdvoorkeur, met welk gewicht. Stond onderin het
   tabblad voorkeuren_subvoorkeuren als raster. */
.hierarchie {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--lijn);
}
.hierarchie-kop { font-size: 12px; color: var(--grijs); padding-bottom: 8px; }
.gewicht { margin: 0; font-size: 12px; }
.gewicht input { width: 62px; }

.groepkop {
  padding: 14px 0 6px; font-size: 12px; font-weight: 600;
  color: var(--grijs); text-transform: lowercase; border-bottom: 0;
}
.scorerij { display: flex; align-items: center; gap: 12px; }
.scorerij span { flex: 1; }
.scorerij input { width: 84px; margin: 0; }

.keuzelijst { max-height: 340px; overflow-y: auto; padding: 0; }
.keuzelijst > li { padding: 4px 0; border-bottom: 0; }
.keuzelijst .vinkje { padding-bottom: 0; white-space: normal; }

/* ------------------------------------------------------------- het raster
 *
 * Zoals de matrix in het spreadsheet: thema's als rijen, wandelingen als
 * kolommen. De namen van de wandelingen staan rechtop, want anders is een
 * kolom van vier tekens breed of van dertig — en dan past er niets meer.
 * De eerste kolom en de kop blijven staan bij het scrollen; zonder dat weet
 * je na drie kolommen niet meer waar je bent.
 */

.rasterhouder { overflow: auto; max-height: calc(100vh - 210px); padding: 0 0 24px 0; }
.raster { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.raster th, .raster td { border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }

.raster thead th {
  position: sticky; top: 0; z-index: 3;
  height: 168px; padding: 6px 0; vertical-align: bottom;
  background: var(--vlak); font-weight: 500;
}
.raster thead th span {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  max-height: 156px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; margin: 0 auto; color: var(--inkt);
}
.raster thead th.hoek {
  left: 0; z-index: 5; min-width: 210px; max-width: 210px;
  border-right: 2px solid var(--lijn);
}

.raster tbody th {
  position: sticky; left: 0; z-index: 2;
  min-width: 210px; max-width: 210px; padding: 4px 10px 4px 20px;
  text-align: left; font-weight: 400; background: var(--vlak);
  border-right: 2px solid var(--lijn);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.raster tbody tr:hover th, .raster tbody tr:hover td { background: #fbf9f7; }
.raster tr.soortkop th {
  z-index: 4; font-size: 11px; text-transform: lowercase;
  color: var(--grijs); background: var(--grond); padding-top: 9px;
}
.raster tr.soortkop td { background: var(--grond); }

.raster td { padding: 0; text-align: center; background: var(--vlak); }
.raster input {
  width: 46px; margin: 0; padding: 4px 2px; text-align: center;
  font: inherit; background: transparent; border: 0; border-radius: 0;
}
.raster input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.raster input[data-gevuld="ja"] { background: #fdeef0; font-weight: 600; }
.raster input::-webkit-outer-spin-button,
.raster input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* ============================================================== telefoon
 *
 * Vier dingen die op een klein scherm echt in de weg zitten:
 *
 * 1. iOS zoomt in zodra je in een invoerveld tikt dat kleiner is dan 16 px.
 *    Daarna staat de pagina scheef en moet je terugknijpen. Eén regel lost
 *    dat op, en op een telefoon is 16 px toch prettiger lezen.
 * 2. Vastgeplakte werkbalken kosten op een telefoon de helft van het scherm.
 *    Daar laten we ze meescrollen.
 * 3. De kaart naast de lijst is 500 px hoog; dat is een heel telefoonscherm.
 * 4. In het scorerraster nam de kolom met thema-namen meer dan de helft van
 *    de breedte in beslag.
 */

@media (max-width: 700px) {
  input, textarea, select { font-size: 16px; }

  .balk { flex-wrap: wrap; row-gap: 8px; padding: 8px 14px; }
  .tabs {
    order: 3; width: 100%; margin-left: 0;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  .beheer-terug { margin-left: 0; }
  .beheer-trefwoordkaart { width: auto; margin: 14px; }
  .uitgave-snapshotkaart { margin: 0 14px 18px; }
  .halte-dialoog {
    width: calc(100vw - 16px); max-height: calc(100vh - 16px);
  }
  .halte-dialoog-inhoud { padding: 16px; }
  .halte-popup-ophalen { align-items: stretch; }
  .halte-popup-ophalen input { flex-basis: 100%; }
  .halte-popup-afbeelding { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .halte-popup-afbeelding img { width: 46px; height: 46px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }

  .werkbalk { position: static; padding: 12px 14px; }
  .werkbalk input[type="search"] { width: 100%; }
  .werkbalk-rechts { width: 100%; justify-content: flex-end; }
  .telling { width: 100%; margin-left: 0; }

  .kaartkant { position: static; padding: 12px 14px; border-left: 0; border-top: 1px solid var(--lijn); }
  #lijstkaart { height: 46vh; }
  #kaartje { height: 220px; }

  .kolommen, .vlakuitleg, .rijen { padding-left: 14px; padding-right: 14px; }
  .lijst li { padding-left: 14px; padding-right: 14px; }
  .rij { flex-wrap: wrap; }
  .rij > label { flex: 1 1 46%; }

  /* Het raster blijft een raster: schuiven hoort erbij. Maar de eerste kolom
     mag niet het halve scherm opeten. */
  .rasterhouder { max-height: 66vh; }
  .raster thead th.hoek,
  .raster tbody th { min-width: 128px; max-width: 128px; }
  .raster thead th { height: 132px; }
  .raster thead th span { max-height: 120px; }
  .raster input { width: 40px; font-size: 15px; }

  .beelden li { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .beelden img, .beelden video { width: 48px; height: 48px; }
  .kolommen { gap: 12px; }
  .rijke-tekst { min-height: 280px; font-size: 16px; }
  .vaste-acties {
    left: 10px; right: 10px; bottom: max(8px, env(safe-area-inset-bottom));
    justify-content: flex-end; flex-wrap: wrap;
  }
  .vaste-acties .bewaarstand { margin-right: auto; }
}

@media (max-width: 700px) {
  .balk { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .zoek-terug { order: -1; }
  .zoekwerkbalk input[type="search"] { width: 100%; }
  #zoekkaart { height: 44vh; min-height: 300px; }
  .zoek-hit-context {
    order: 4; width: 100%; max-width: none; white-space: normal;
  }
  .beheer-trefwoord-nieuw { align-items: stretch; flex-direction: column; }
  .trefwoordbeheer .rij { flex-wrap: wrap; }
  .trefwoordbeheer .trefwoordnaam { flex: 1 1 58%; }
  .trefwoordbeheer .trefwoordgroep { flex: 1 1 34%; }
}

/* ---------------------------------------------------------- routetekenaar */

.routekaart { margin: 0 20px 24px; }
#routekaart {
  height: min(56vh, 560px); margin-top: 12px;
  border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden;
}
.routeknoppen { align-items: center; flex-wrap: wrap; gap: 8px; }
.routelengte { font-size: 13px; color: var(--grijs); }
@media (max-width: 700px) {
  .routekaart { margin: 0 14px 20px; }
  #routekaart { height: 48vh; }
}

/* --------------------------------------------- routevoorbeeld en haltenamen */

#routevoorbeeld {
  height: 260px; margin-top: 10px;
  border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden;
}
#routevoorbeeld-blok { margin-top: 18px; }
#routevoorbeeld-blok h2 { margin-bottom: 2px; }

/* De naam van een halte staat vast op de kaart, niet pas bij aanwijzen: je
   moet in één oogopslag zien waar de route langs hoort te komen. */
.leaflet-tooltip.haltenaam {
  padding: 1px 6px; font-size: 11px; font-weight: 600;
  color: var(--inkt); background: rgba(255, 255, 255, .88);
  border: 0; border-radius: 4px; box-shadow: none;
  white-space: nowrap;
}
.leaflet-tooltip.haltenaam::before { display: none; }
.leaflet-tooltip.haltenaam.klein { font-size: 10px; font-weight: 500; opacity: .85; }

.groepskop {
  margin: 20px 0 4px; padding-top: 14px; font-size: 13px; font-weight: 600;
  color: var(--grijs); text-transform: lowercase; border-top: 1px solid var(--lijn);
}
.groepskop:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.rijen .plek { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.rijen .plek label { flex: 1 1 120px; margin-bottom: 0; }

/* Het gegevensrapport: een getal, wat het is, en waarom het uitmaakt. */
.controlerij { display: flex; gap: 12px; align-items: baseline; }
.controlerij .aantal {
  flex: 0 0 3.4em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums;
}
.controlerij[data-goed="ja"] .aantal { color: var(--goed); font-weight: 400; }
.controlerij[data-goed="nee"] .aantal { color: var(--accent); }
.controlerij .waarom { display: block; font-size: 12px; color: var(--grijs); }

/* Een vinkje in een veldenrij mag niet meerekken zoals de tekstvelden ernaast;
   .vinkje was tot nu toe alleen bedoeld voor de rijenlijsten. */
.rij > label.vinkje-in-rij {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 9px;
  white-space: nowrap;
}
.rij > label.vinkje-in-rij input { width: auto; margin: 0; }

/* Eigen beelden bij een halte: compact, want ze staan onder elke halte in een
   lijst die al lang is. Leeg is de normale toestand. */
.haltebeelden { margin-top: 8px; }
.haltebeelden-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--grijs);
  margin-bottom: 4px;
}
.rij.haltebeeld { gap: 8px; margin-bottom: 5px; align-items: center; }
.rij.haltebeeld input { flex: 1; margin: 0; }

/* De foto van een wandeling: bestand kiezen of een adres plakken, allebei via
   de uploader. Het adresveld erboven toont alleen het resultaat. */
.rij.herorij { gap: 8px; align-items: center; }
.rij.herorij > input { flex: 1; margin: 0; }
.rij.herorij > button { flex: 0 0 auto; }
.herovoorbeeld {
  display: block;
  max-width: 240px;
  max-height: 150px;
  border-radius: 4px;
  border: 1px solid var(--lijn, #ddd);
  margin-bottom: 12px;
}
input[readonly] { background: var(--verdiept, #f2f2f2); color: var(--grijs, #666); }

/* De popup waarmee je een verhaal als halte toevoegt. Klein en rustig: hij komt
   over de kaart heen en mag niets verbergen wat je nodig hebt. */
.verhaalpopup { min-width: 190px; }
.verhaalpopup strong { display: block; margin-bottom: 2px; }
.verhaalpopup .adres { display: block; font-size: 12px; color: var(--grijs, #666); margin-bottom: 8px; }
.verhaalpopup button { width: 100%; }

/* De tekenstand is een aparte modus; dat hoort zichtbaar te zijn, anders klik je
   erin rond zonder te weten waarom de kaart anders reageert. */
#route-tekenen[data-bezig="ja"] {
  background: var(--accent, #e2001a);
  color: #fff;
  border-color: var(--accent, #e2001a);
}
.routekaart[data-tekenen="ja"] .leaflet-container { cursor: crosshair; }

/* Filter alleen afbeeldingen: een gefilterd kaartpaneel kan in Safari tegels afsnijden. */
.kaart-osm .leaflet-tile { filter: saturate(.62) brightness(1.08) contrast(.88); }

/* Tijdens sessieherstel en aanmelden blijft één stabiel Loci-scherm staan. */
#opstartscherm { position: fixed; inset: 0; z-index: 3000; display: grid;
  place-content: center; justify-items: center; gap: 16px; background: #eee9df url('opstartkaart.png') center / cover; }
#opstartscherm p { padding: 12px 20px; background: rgba(255,255,255,.94); border-radius: 12px; color: var(--accent); }
.opstart-logo { width: min(38vw, 190px); height: auto; }
#wandelingscherm { padding-bottom: 96px; }
@media (max-width: 700px) {
  .balk { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; }
  .balk .merk { font-size: 15px; }
  .balk-rechts { justify-content: flex-end; gap: 5px; min-width: 0; }
  .wie { font-size: 10px; max-width: 100px; overflow-wrap: anywhere; }
  .balk-rechts button { font-size: 11px; padding: 7px 5px; }
  .tabs { grid-column: 1 / -1; width: 100%; flex-wrap: nowrap; }
  .beheer-tabs { gap: 0; }
  .beheer-tabs .tab { font-size: 12px; padding: 8px 7px; }
  .beheer-terug { white-space: normal; max-width: 84px; }
}

/* Bewaaracties staan buiten de sticky kopregel en boven kaart/knoppen. */
#wandelingscherm > .vaste-acties { z-index: 2000; }
#opstartscherm { z-index: 4000; display: block; background: #807966 url('opstart-achtergrond.jpg') center / cover; }
#opstartscherm::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.opstart-logovak { position: absolute; top: calc(env(safe-area-inset-top) + 68px); left: 50%; transform: translateX(-50%); width: min(84vw,360px); aspect-ratio: 1; display: grid; place-items: center; }
.opstart-logovak::before { content: ""; position: absolute; inset: 2%; border: 1px solid rgba(255,255,255,.42); border-radius: min(14.28vw,61px); background: rgba(255,255,255,.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 26px rgba(0,0,0,.18); }
.opstart-logo { position: relative; width: 84%; height: 84%; object-fit: contain; }
#opstartscherm p { position: absolute; bottom: max(32px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: 85vw; text-align: center; }
#beeldrapport-lijst li { padding: 16px 0; border-bottom: 1px solid var(--lijn); overflow-wrap: anywhere; }
#beeldrapport-lijst .beeldrapport-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#beeldrapport-terug { margin: 12px 20px; }
#wandelingscherm:not([hidden]) ~ .melding {
  bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 2100;
  width: max-content; max-width: calc(100vw - 32px);
}


/* V24: ruimte volgt echte balkhoogte, grote tekst en schermtoetsenbord. */
#bewerkscherm, #wandelingscherm { padding-bottom: calc(var(--bewaarhoogte,96px) + var(--toetsenbord,0px) + 32px); }
.vaste-acties { bottom: calc(var(--toetsenbord,0px) + max(8px, env(safe-area-inset-bottom))); max-width: calc(100vw - 20px); flex-wrap: wrap; z-index:2000; }
#wandelingscherm:not([hidden]) ~ .melding { bottom: calc(var(--bewaarhoogte,96px) + var(--toetsenbord,0px) + 24px); }
:focus-visible { outline:3px solid #005a9c; outline-offset:3px; }
input,select,textarea,[contenteditable=true] { scroll-margin-block: 120px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }

/* Column en OTD staan in de tekstkolom, naast de afbeeldingen. */
.otd-regel { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; border-top:1px solid #ddd; padding:16px 0; }
.otd-regel input { min-width:0; width:100%; }
.otd-titel,.otd-bevestiging,.otd-bron { grid-column:1 / -1; }
.otd-regel .otd-bevestiging { display:flex; align-items:center; gap:8px; }
.otd-regel input[type=checkbox] { width:auto; }
.otd-regel button { grid-column:1 / -1; justify-self:start; }
.otd-voorstellen { padding-left:20px; overflow-wrap:anywhere; }
.otd-voorstellen li { padding-bottom:16px; }
#verhaal-extra summary { cursor:pointer; padding:12px 0; }

/* Landnamen en de matrixkeuze passen ook op een smalle telefoon. */
#matrixscherm .werkbalk select { max-width: 100%; min-width: 0; }
#matrixscherm .scorerij span { min-width: 0; overflow-wrap: anywhere; }
#matrixscherm .scorerij input { flex: 0 0 84px; }

/* Systeemaudit R13: clusters op de lijstkaart. */
.kaartcluster {
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(226, 0, 26, .9); color: #fff; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  font: 700 12px/1 system-ui, -apple-system, sans-serif;
}
.kaartcluster-gemengd { background: rgba(138, 109, 31, .92); }
.kaartcluster:focus-visible { outline: 3px solid #005a9c; outline-offset: 2px; }

/* Systeemaudit R4: het concept na een bewaarconflict. */
.conflict-concept {
  margin: 0 0 14px; padding: 12px 14px; background: #fdf5e0;
  border: 1px solid #e6cf8f; border-radius: 8px;
}
.conflict-concept h2 { margin: 0 0 4px; font-size: 15px; }
.concept-velden { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.concept-velden li { display: grid; gap: 4px; padding: 8px; background: #fff; border-radius: 6px; }
.concept-waarde { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12em; overflow: auto; font-size: 13px; }
.concept-knoppen, .concept-acties { display: flex; flex-wrap: wrap; gap: 8px; }