/* Rommelmarkt Finder - one stylesheet, mobile first, light + dark. */
/* Vormgeving in de geest van Ganddee: warme canvas in plaats van grijs, witte
   kaartjes met veel lucht, grote radii, pilvormige knoppen, en koppen in
   kapitalen met negatieve letterspatiëring. Hun blauw en lime zijn hun
   huisstijl; wij houden groen, want dat past bij tweedehands.

   Geen webfonts: die zouden een externe aanvraag toevoegen aan een app die het
   offline moet doen. De koppenbehandeling doet het werk, niet het font. */
:root {
  color-scheme: light dark;
  --bg: #f4f0e7;
  --surface: #ffffff;
  --surface-2: #efeadf;
  --border: #e5dfd2;
  --text: #17191a;
  --muted: #6a6f68;
  --brand: #1f9d55;
  --brand-ink: #ffffff;
  --brand-soft: #d9f2e3;
  --good: #1f9d55;
  --warn: #b06a08;
  --bad: #b3312b;
  /* Gekleurde banden scheiden de groepen, in plaats van alleen een kop. */
  --band-good: #d8f0e0;
  --band-maybe: #f8eec4;
  --band-bad: #ebe4da;
  --shadow: 0 2px 4px rgba(30, 25, 15, .04), 0 14px 32px -20px rgba(30, 25, 15, .28);
  --radius: 20px;
  --radius-sm: 14px;
  --tap: 46px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --surface: #202226;
    --surface-2: #2a2d31;
    --border: #34383d;
    --text: #ecebe6;
    --muted: #a5a8a2;
    --brand: #4ade80;
    --brand-ink: #0b1a0f;
    --brand-soft: #1d3325;
    --good: #4ade80;
    --warn: #fbbf24;
    --bad: #f87171;
    --band-good: #1d3325;
    --band-maybe: #35301c;
    --band-bad: #2c2a27;
    --shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px -20px rgba(0, 0, 0, .85);
  }
}

* { box-sizing: border-box; }
/* `hidden` moet ook winnen van een klasse die display zet. Zonder dit bleef
   #custom-dates (class="row", display:flex) in statische modus zichtbaar,
   terwijl de datumkeuze daar uit chips bestaat. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-text-size-adjust: 100%;
}
h1, h2, .group-title h2 {
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-weight: 800;
}
h1 { font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.logo { width: 1.7em; height: 1.7em; flex: 0 0 auto; color: var(--brand); }
h2 { font-size: 1rem; margin: 0 0 .4rem; }
h3 { font-size: 1rem; margin: 0; letter-spacing: -.01em; line-height: 1.25; }
p { margin: .4rem 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---------- chrome ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 0; box-shadow: var(--shadow);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .7rem 1rem .5rem; max-width: 900px; margin: 0 auto;
  flex-wrap: wrap;
}
/* Een gewone knop, maar smal genoeg voor de kop. */
.primary.compact { width: auto; min-height: 38px; padding: 0 1.1rem; font-size: .9rem; }
.big-summary { font-size: 1rem !important; color: var(--text) !important;
               font-weight: 700 !important; }
.tabs { display: flex; gap: .25rem; padding: 0 .75rem; max-width: 900px; margin: 0 auto; }
.tab {
  flex: 1; min-height: var(--tap); border: 0; background: none; color: var(--muted);
  font: inherit; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent;
}
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }
main { max-width: 900px; margin: 0 auto; padding: 1rem .75rem 2rem; }
.view { display: none; }
.view.active { display: block; }
.footer { max-width: 900px; margin: 0 auto; padding: 0 1rem 2rem; }
.footer-row { display: flex; align-items: center; justify-content: space-between;
              gap: .75rem; flex-wrap: wrap; }

/* ---------- panels & forms ---------- */
.panel {
  background: var(--surface); border: 0; border-radius: var(--radius);
  padding: 1.15rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.field { display: block; margin-bottom: .6rem; }
.field > span, legend, summary {
  display: block; font-weight: 600; font-size: .8rem; margin-bottom: .25rem;
  color: var(--muted); letter-spacing: .01em;
}
fieldset { border: 0; padding: 0; margin: 0 0 .6rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row > input[type="text"] { flex: 1 1 12rem; }
/* Velden in een rij moeten kunnen krimpen. Zonder dit staan drie velden van
   100% naast elkaar en loopt de hele pagina buiten het scherm - inclusief de
   tabbalk, want één te breed element rekt het document op. */
.row > .field { flex: 1 1 7rem; min-width: 0; margin-bottom: 0; }
.row > .field input, .row > .field select { min-width: 0; }
input[type="text"], input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-height: 42px; padding: .5rem .75rem; font: inherit;
  color: var(--text); background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
textarea { padding: .6rem .8rem; }
input[type="range"] { width: 100%; accent-color: var(--brand); min-height: 32px; }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }
.check { display: flex; gap: .55rem; align-items: center; font-size: .95rem; padding: .35rem 0; }
.filter-grid { display: grid; gap: .15rem; margin-bottom: .5rem; }
details > summary { cursor: pointer; }
details[open] > summary { margin-bottom: .5rem; }

button { font: inherit; cursor: pointer; }
.primary {
  width: 100%; min-height: 44px; border: 0; border-radius: 999px;
  background: var(--brand); color: var(--brand-ink); font-weight: 700;
  letter-spacing: .01em;
}
.primary:disabled { opacity: .55; cursor: progress; }
.ghost {
  min-height: 34px; padding: .3rem .85rem; border: 0;
  background: var(--surface-2); color: var(--text); border-radius: 999px;
}
.ghost.icon { min-width: var(--tap); min-height: var(--tap); font-size: 1.1rem; border-radius: 50%; }
.seg { display: flex; gap: .3rem; background: var(--surface-2); padding: .25rem;
       border-radius: 999px; margin-bottom: 1rem; }
.seg-btn { flex: 1; min-height: 38px; border: 0; background: none; color: var(--muted);
           font-weight: 600; border-radius: 999px; }
.seg-btn.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  min-height: 32px; padding: .25rem .8rem; border: 0;
  border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .9rem;
}
.chip.active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.chip-muted { color: var(--muted); font-size: .8rem; }
.chip-count { cursor: pointer; }

/* ---------- progress ---------- */
.progress .bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--brand); transition: width .3s ease; }
#log-list { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .85rem; color: var(--muted); }
.notice { border-left: 4px solid var(--warn); }
.notice.error { border-left-color: var(--bad); }

/* ---------- results ---------- */
.results-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                margin-bottom: .75rem; }
/* Kaarten naast elkaar zodra er ruimte is. De kaartjes komen in
   #result-groups, samen met de groepskoppen - die gaan over de volle breedte,
   anders staan ze als smalle kolom tussen de kaartjes. */
#result-groups {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  /* stretch, niet start: kaartjes naast elkaar horen even hoog te zijn. De
     knoppen hangen onderaan, dus de extra ruimte valt niet op. */
  align-items: stretch;
}
#result-groups > .group-title, #result-groups > .empty { grid-column: 1 / -1; }

.group-title {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 1.6rem 0 .8rem; padding: .75rem 1.1rem;
  border-radius: var(--radius); background: var(--surface-2);
}
.group-title h2 { margin: 0; }
.group-title.recommended { background: var(--band-good); }
.group-title.maybe { background: var(--band-maybe); }
.group-title.excluded { background: var(--band-bad); }
.card {
  background: var(--surface); border: 0; border-radius: var(--radius);
  padding: 1rem 1.05rem; margin: 0; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .45rem;
}
.card > * { margin: 0; }
/* Het hele kaartje opent de details. */
.card.clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.card.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(30, 25, 15, .06),
                        0 18px 40px -22px rgba(30, 25, 15, .35); }
.card.clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chev { display: block; font-size: .72rem; color: var(--muted); }
/* De feiten waar je op scant, elk op een eigen regel zodat elk kaartje er
   hetzelfde uitziet. */
.facts { font-size: .92rem; line-height: 1.4; }
.facts p { margin: 0; }
.facts-date { font-weight: 700; }
.facts-where { color: var(--text); }
.facts-rest { color: var(--muted); font-size: .88rem; }
/* Een lange naam mag een kaartje niet twee regels hoger maken dan zijn buur. */
.card h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.more > summary { color: var(--muted); }
.more > *:not(summary) { margin-top: .5rem; }
/* De groepsband zegt al in welke categorie je kijkt; op het kaartje volstaat
   een subtiel verschil. */
.card.maybe { background: color-mix(in oklab, var(--surface) 94%, var(--band-maybe)); }
.card.excluded { background: var(--surface-2); box-shadow: none; opacity: .9; }
.card-head { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.card h3 { font-size: 1.02rem; line-height: 1.3; }
.meta { font-size: .9rem; color: var(--muted); margin: .35rem 0; }
.meta strong { color: var(--text); }
.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.badge { font-size: .78rem; padding: .2rem .6rem; border-radius: 999px;
         background: var(--surface-2); border: 0; color: var(--muted); }
.badge.type { background: var(--brand-soft); border-color: transparent; color: var(--brand); font-weight: 600; }
.badge.warn { color: var(--warn); }
.badge.bad { color: var(--bad); }
.score { text-align: right; flex: 0 0 auto; }
.score b { display: block; font-size: 1.1rem; color: var(--brand); }
.score { text-align: right; }
.score span { font-size: .72rem; color: var(--muted); }
.reasons { list-style: none; padding: 0; margin: .4rem 0; font-size: .88rem; }
.reasons li { display: flex; gap: .4rem; }
.reasons .ok::before { content: "✓"; color: var(--good); }
.reasons .no::before { content: "✕"; color: var(--bad); }
.reasons em { color: var(--muted); font-style: normal; }
/* Acties per kaartje: lichter dan de zoekknop, en onderling even breed. Ze
   waren eerst zo breed als hun tekst, en met een sterretje en een verbodsbord
   erin gaf dat drie verschillende maten naast elkaar. */
.card-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.card > .card-actions {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  /* Gelijk, maar niet uitgerekt: op een breed scherm hoeft één knop geen
     derde van het kaartje te zijn. */
  max-width: 30rem;
}
.card-actions .ghost {
  min-height: 34px; padding: .2rem .7rem; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 380px) {
  /* Op een smal toestel liever twee regels dan onleesbaar smalle knoppen. */
  .card > .card-actions { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}
.card-actions a, .card-actions button { text-decoration: none; }
/* Bewijs en terugkoppeling zijn bijzaak op het kaartje: klein en rustig. */
.evidence { margin-top: .5rem; font-size: .85rem; }
.card details { display: inline-block; margin-right: 1rem; }
/* Bijwerk op één regel: terugkoppeling, bewijs, bron. */
.source-link { font-size: .82rem; color: var(--muted); text-decoration: none;
               border-bottom: 1px dotted var(--border); }
.source-link:hover { color: var(--brand); }
.card details[open] { display: block; margin-right: 0; }
.card details > summary { font-weight: 500; font-size: .82rem; margin-bottom: 0; }
.card details[open] > summary { margin-bottom: .35rem; }
.evidence ul { margin: .3rem 0; padding-left: 1.1rem; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }

#map { height: 320px; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem;
       border: 0; box-shadow: var(--shadow); }
.leaflet-container { font: inherit; }

@media (min-width: 560px) {
  /* Startlocatie en straal horen bij elkaar; naast elkaar scheelt een halve
     schermhoogte voordat je bij de resultaten bent. */
  #mode-radius { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 1rem; }
}
@media (min-width: 720px) {
  .filter-grid { grid-template-columns: 1fr 1fr; gap: .2rem 1.5rem; }
  .primary { width: auto; padding: 0 2.5rem; }
}

/* ---------- overlay met de details ---------- */
.sheet {
  border: 0; border-radius: var(--radius); padding: 1.25rem;
  width: min(34rem, calc(100% - 2rem)); max-height: 85vh; overflow: auto;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.sheet::backdrop { background: rgba(20, 18, 12, .45); }
.sheet .primary { margin-top: 1rem; }
.detail h3 { margin-bottom: .35rem; }
.detail .badges { margin: .6rem 0; }
.detail .reasons { margin: .6rem 0; }
.detail .card-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 0; }
.detail .source-link { display: inline-block; margin-top: .5rem; }
@media (max-width: 560px) {
  /* Op een telefoon als blad vanaf de onderkant: daar reikt je duim. */
  .sheet {
    width: 100%; max-width: none; margin: auto auto 0;
    border-radius: var(--radius) var(--radius) 0 0; max-height: 80vh;
  }
}

/* ---------- settings ---------- */
.type-rules { display: grid; gap: .4rem; }
.type-rule { display: flex; align-items: center; gap: .5rem; justify-content: space-between;
             padding: .35rem 0; border-bottom: 1px solid var(--border); }
.type-rule:last-child { border-bottom: 0; }
.type-rule span { font-size: .95rem; }
.type-rule select { width: auto; min-width: 12rem; min-height: 38px; }
.type-rule.exclude span { color: var(--bad); }
.type-rule.demote span { color: var(--warn); }
.block-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.block-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                 padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.block-list li:last-child { border-bottom: 0; }
.block-list .what { display: flex; flex-direction: column; }
.block-list .what small { color: var(--muted); }
@media (min-width: 720px) {
  .type-rules { grid-template-columns: 1fr 1fr; gap: .2rem 1.5rem; }
}

/* ---------- static build (scheduled scan, no server) ---------- */
.static-mode #filters { margin-bottom: 1rem; }
.static-mode #search-form .seg,
.static-mode #progress { display: none; }
.static-mode #notice { border-left-color: var(--brand); }