:root {
  --papier: #F6F8F3;
  --vlak: #FFFFFF;
  --inkt: #16241D;
  --zacht: #5B6B62;
  --blad: #2E6A4E;
  --blad-zacht: #E2EDE5;
  --citroen: #F1C232;
  --lijn: #D3DDD5;
  --gevaar: #B23B2A;
  --nav: 3.75rem;
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #101814;
    --vlak: #17221C;
    --inkt: #E6EEE8;
    --zacht: #9AAAA1;
    --blad: #7DC29E;
    --blad-zacht: #1D2E25;
    --citroen: #E6BB3A;
    --lijn: #2B3B33;
    --gevaar: #E57D6C;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  max-width: 42rem;
  min-height: 100dvh;
  padding: env(safe-area-inset-top, 0px) 1rem calc(var(--nav) + env(safe-area-inset-bottom, 0px) + 6rem);
  background: var(--papier);
  color: var(--inkt);
  font: 400 1.0625rem/1.5 var(--font);
}

button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--citroen); outline-offset: 2px; }

/* Kop */
.kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0 1.25rem;
}
.kop h1 {
  margin: 0;
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 96;
}

h2 { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

/* Knoppen */
.knop {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--lijn);
  border-radius: 0.6rem;
  background: var(--vlak);
  font-weight: 600;
  cursor: pointer;
}
.knop:hover:not(:disabled) { border-color: var(--blad); }
.knop:disabled { opacity: 0.45; cursor: default; }
.knop.primair { background: var(--blad); border-color: var(--blad); color: var(--papier); }
.knop.gevaar { color: var(--gevaar); }
.knop.klein { min-height: 2.25rem; padding: 0.25rem 0.75rem; font-size: 0.9375rem; }

.wis {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--zacht);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.wis:hover { background: var(--blad-zacht); color: var(--gevaar); }

input[type=checkbox] { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--blad); flex: none; }

input:not([type=checkbox]), textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--lijn);
  border-radius: 0.6rem;
  background: var(--vlak);
}
input:focus, textarea:focus { border-color: var(--blad); outline: none; }

/* Recepten */
.zoek { margin-bottom: 1rem; }

.recepten, .lijst, .ingredienten { list-style: none; margin: 0; padding: 0; }

.recept {
  border-top: 1.5px solid var(--lijn);
  padding: 0.85rem 0 0.5rem;
}
.recept:last-child { border-bottom: 1.5px solid var(--lijn); }
.recept.gekozen { background: linear-gradient(90deg, var(--blad-zacht), transparent 85%); }

.recept-kop { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-left: 0.25rem; }
.kies { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; min-width: 0; }
.recept-naam { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.personen { color: var(--zacht); font-size: 0.9375rem; white-space: nowrap; }

.stepper { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; font-size: 0.9375rem; font-weight: 600; }
.stepper button {
  width: 2.25rem; height: 2.25rem;
  border: 1.5px solid var(--blad); border-radius: 50%;
  background: var(--vlak); color: var(--blad);
  font-size: 1.125rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.stepper button:disabled { opacity: 0.35; cursor: default; }

details { padding-left: 2.4rem; }
summary { color: var(--zacht); font-size: 0.9375rem; cursor: pointer; padding: 0.25rem 0; width: fit-content; }
.ingredienten { margin: 0.25rem 0 0.5rem; }
.ingredienten li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; padding: 0.15rem 0; }
.hoeveelheid { color: var(--zacht); font-variant-numeric: tabular-nums; }
.bereiding { white-space: pre-line; max-width: 65ch; margin: 0.5rem 0; }
.recept-acties { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.25rem; }

.leeg, .melding { color: var(--zacht); padding: 1.5rem 0; }
.melding { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

/* Selectiebalk */
.selectiebalk {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav) + env(safe-area-inset-bottom, 0px) + 0.75rem);
  transform: translateX(-50%);
  width: min(40rem, calc(100% - 2rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1.1rem;
  border-radius: 0.9rem;
  background: var(--inkt);
  color: var(--papier);
  font-weight: 600;
  z-index: 5;
}
.selectiebalk .knop.primair { background: var(--citroen); border-color: var(--citroen); color: #16241D; }

/* Lijst */
.item-form { display: grid; grid-template-columns: 1fr 5rem 5.5rem; gap: 0.5rem; margin-bottom: 1.25rem; }
.item-form .knop { grid-column: 1 / -1; }
@media (min-width: 34rem) {
  .item-form { grid-template-columns: 1fr 5rem 5.5rem auto; }
  .item-form .knop { grid-column: auto; }
}

.item { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1.5px solid var(--lijn); }
.item label { flex: 1; display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 0.25rem; cursor: pointer; min-width: 0; }
.item-naam { font-size: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.item-hoeveelheid { margin-left: auto; color: var(--zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item.af .item-naam {
  color: var(--zacht);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: var(--citroen);
  text-decoration-thickness: 0.28em;
  text-decoration-skip-ink: none;
}
.item.af .item-hoeveelheid { opacity: 0.6; }

.lijst-acties { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

/* Formulieren */
.formulier { display: flex; flex-direction: column; gap: 1rem; }
.formulier label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; }
.optioneel, .uitleg { color: var(--zacht); font-weight: 400; }
.uitleg { margin: -0.5rem 0 0; }
.fout { color: var(--gevaar); margin: 0; min-height: 1.5em; }

fieldset { border: 1.5px solid var(--lijn); border-radius: 0.75rem; padding: 0.75rem; margin: 0; }
legend { font-weight: 600; padding: 0 0.35rem; }
.ingredient-kop, .ingredient-rij { display: grid; grid-template-columns: 4.5rem 4.5rem 1fr 2.5rem 2.5rem; gap: 0.4rem; }
.ingredient-kop span:nth-child(4) { text-align: center; }
.formulier .basis-vink { display: flex; align-items: center; justify-content: center; height: 2.5rem; cursor: pointer; }
.ingredient-kop { color: var(--zacht); font-size: 0.8125rem; padding: 0 0.25rem 0.25rem; }
.ingredient-rij { margin-bottom: 0.4rem; align-items: center; }
.ingredient-rij input { padding: 0.5rem; }
#rij-toevoegen { margin-top: 0.25rem; }
.form-acties { display: flex; gap: 0.5rem; }

/* Importeren */
.import {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem;
  border-radius: 0.75rem;
  background: var(--blad-zacht);
}
.import > label { font-weight: 600; }
.import-rij { display: flex; gap: 0.5rem; }
.import-rij input { flex: 1; min-width: 0; }
.import .uitleg { margin: 0; font-size: 0.9375rem; }

.plak { padding: 0; margin-top: 0.75rem; }
.plak summary { color: var(--blad); font-weight: 600; }
.plak textarea { margin: 0.5rem 0; }
textarea[name=bereiding] { resize: vertical; overflow: hidden; max-height: none; }

.bron { margin: 0.25rem 0; color: var(--zacht); font-size: 0.9375rem; }
.bron a { color: var(--blad); }

/* Navigatie */
.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  height: calc(var(--nav) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--vlak);
  border-top: 1.5px solid var(--lijn);
  z-index: 10;
}
.tabs button {
  flex: 1;
  max-width: 11rem;
  border: 0;
  background: none;
  color: var(--zacht);
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.tabs button[aria-current="page"] { color: var(--inkt); box-shadow: inset 0 3px 0 var(--blad); }
.teller:not(:empty) {
  min-width: 1.4rem; padding: 0 0.35rem;
  border-radius: 1rem;
  background: var(--citroen); color: #16241D;
  font-size: 0.8125rem; line-height: 1.4rem; text-align: center;
}

/* Melding */
.toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  transform: translate(-50%, -150%);
  max-width: calc(100% - 2rem);
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  background: var(--inkt);
  color: var(--papier);
  font-weight: 600;
  transition: transform 0.25s ease;
  z-index: 20;
}
.toast.zichtbaar { transform: translate(-50%, 0); }

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

.versie { color: var(--zacht); font-size: 0.75rem; text-align: center; margin: 2rem 0 0; }

/* Foto's */
.verborgen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.foto-veld { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.veld-titel { font-weight: 600; }
.foto-voorbeeld { width: 100%; max-width: 24rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.75rem; background: var(--blad-zacht); }
.foto-acties { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.formulier .foto-acties label.knop { display: inline-flex; flex-direction: row; align-items: center; cursor: pointer; }
.foto-acties label.knop:has(+ input:focus-visible) { outline: 3px solid var(--citroen); outline-offset: 2px; }
.recept-duim { width: 2.75rem; height: 2.75rem; flex: none; object-fit: cover; border-radius: 0.5rem; background: var(--blad-zacht); }
.recept-foto { display: block; width: 100%; max-width: 32rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.75rem; margin: 0.5rem 0; background: var(--blad-zacht); }

/* Basisingrediënten (meestal in huis) */
.basis { margin: 0.25rem 0 0.5rem; }
.basis-titel { margin: 0.5rem 0 0.15rem; color: var(--zacht); font-size: 0.875rem; font-weight: 600; }
.basis .ingredienten { margin: 0; color: var(--zacht); }
.basis .ingredienten.kiesbaar li { grid-template-columns: 1.4rem 6.5rem 1fr; align-items: center; }
@media (max-width: 30rem) {
  .ingredient-kop, .ingredient-rij { grid-template-columns: 3.5rem 3.75rem 1fr 2rem 2rem; gap: 0.3rem; }
}

.import .vertaal-vink { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; font-size: 0.9375rem; cursor: pointer; }