/* 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; }
.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; }
.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); }

.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); }

.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;
}

.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 {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 5px; background: var(--grond);
}
.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; }

/* ------------------------------------------------- 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; }

.kiezer { display: flex; gap: 8px; align-items: center; }
.kiezer input { margin: 0; }
.kiezer select { width: auto; margin: 0; flex: 0 0 auto; }

.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; }

/* ------------------------------------------------------------- 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);
}

.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; }

/* ------------------------------------------------------- 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(62vh, 640px); 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; }
.rijen .rij select { width: auto; min-width: 22em; margin: 0; }

/* 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;
  }
  .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 { width: 48px; height: 48px; }
  .kolommen { gap: 12px; }
}

/* ---------------------------------------------------------- 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; }