/* ---------------------------------------------------------------
   public/stijl.css — de vormgeving van de studio

   Dezelfde kleuren en letters als de app, zodat het één familie is.
   Wit, één groen accent, verder zwart en grijs.
   --------------------------------------------------------------- */

:root{
  --vel:#FFFFFF;
  --kaart:#F2F2F0;
  --inkt:#0F0F0E;
  --grijs:#56564F;
  --flauw:#9A9A93;
  --lijn:#E7E7E2;
  --accent:#0F6B4F;
  --accent-zacht:#E6F0EB;
  --rood:#A4332A;
  --knop:#1A1A18;
  --knoptekst:#FFFFFF;
  --radius:14px;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--vel);
  color:var(--inkt);
  font-family:"Instrument Sans",-apple-system,system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}

/* ---------- knoppen ---------- */
.knop{
  background:none;
  border:1.5px solid var(--lijn);
  border-radius:999px;
  color:var(--inkt);
  font-family:inherit;
  font-size:.92rem;
  font-weight:600;
  padding:0 1.1rem;
  min-height:44px;
  cursor:pointer;
}
.knop:hover{border-color:var(--grijs)}
.knop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.knop.vol{background:var(--knop);border-color:var(--knop);color:var(--knoptekst)}
.knop.vol:hover{opacity:.88}
.knop.plat{border-color:transparent;color:var(--grijs);padding:0 .7rem}
.knop.plat:hover{color:var(--inkt);border-color:var(--lijn)}
.knop.gevaar{border-color:transparent;color:var(--rood);padding:0 .7rem}
.knop.gevaar:hover{border-color:var(--rood)}
.knop.breed{width:100%;margin-top:1rem}
.knop[disabled]{opacity:.45;cursor:default}
.knoppenrij{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---------- inloggen ---------- */
.inlog{
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;
  background:var(--kaart);
}
.inlogkaart{
  background:var(--vel);
  border-radius:22px;
  padding:34px 30px;
  width:100%;max-width:380px;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.4);
}
.inlogkaart h1{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:2rem;letter-spacing:-.01em;
  margin:.7rem 0 .2rem;
}
.inlogkaart .sub{color:var(--grijs);font-size:.92rem;margin:0 0 1.6rem}

/* ---------- formulier ---------- */
label{
  display:block;
  font-size:.82rem;font-weight:600;
  color:var(--grijs);
  margin:1.2rem 0 .35rem;
}
input[type=text],input[type=email],input[type=password],
input[type=url],input[type=date],input[type=number],textarea,select{
  width:100%;
  background:var(--vel);
  border:1.5px solid var(--lijn);
  border-radius:var(--radius);
  color:var(--inkt);
  font-family:inherit;font-size:1rem;
  padding:.7rem .9rem;
  min-height:46px;
}
textarea{line-height:1.7;resize:vertical}
select{appearance:none;cursor:pointer}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
fieldset{
  border:1.5px solid var(--lijn);
  border-radius:var(--radius);
  padding:0 1.1rem 1.2rem;
  margin:1.8rem 0 0;
}
legend{font-size:.82rem;font-weight:600;color:var(--grijs);padding:0 .4rem}
.tweekolom{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hulp{color:var(--flauw);font-size:.82rem;margin:.45rem 0 0}
.hulp code{background:var(--kaart);border-radius:5px;padding:.1rem .3rem;font-size:.9em}
.fout{color:var(--rood);font-size:.88rem;margin:1rem 0 0}
.melding{
  background:var(--accent-zacht);color:var(--accent);
  border-radius:var(--radius);padding:.8rem 1rem;
  font-size:.88rem;font-weight:500;margin:0 0 1.2rem;
}
.uitleg{color:var(--grijs);font-size:.9rem;margin:0 0 1.4rem}

/* ---------- balk en tabs ---------- */
.balk{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem max(20px, env(safe-area-inset-left)) .7rem 20px;
  background:var(--vel);
  border-bottom:1px solid var(--lijn);
}
.balk strong{font-size:.98rem}
.rek{flex:1}
.flauw{color:var(--flauw);font-size:.82rem}

.tabs{
  display:flex;gap:.3rem;
  padding:.7rem 20px 0;
  border-bottom:1px solid var(--lijn);
  overflow-x:auto;
}
.tab{
  background:none;border:none;
  border-bottom:2px solid transparent;
  color:var(--grijs);
  font-family:inherit;font-size:.95rem;font-weight:600;
  padding:.5rem .8rem .7rem;
  cursor:pointer;white-space:nowrap;
}
.tab[aria-current="page"]{color:var(--inkt);border-bottom-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- panelen ---------- */
.blad{max-width:760px;margin:0 auto;padding:1.8rem 20px 4rem}
.paneel{display:none}
.paneel.aan{display:block}
.paneelkop{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem;
}
.paneelkop h2{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:1.7rem;letter-spacing:-.01em;margin:0;
}

/* ---------- lijsten ---------- */
.lijst{border-top:1px solid var(--lijn)}
.regel{
  display:flex;align-items:center;gap:1rem;width:100%;
  background:none;border:none;border-bottom:1px solid var(--lijn);
  padding:1rem .2rem;text-align:left;cursor:pointer;
  font-family:inherit;color:var(--inkt);
}
.regel:hover{background:var(--kaart)}
.regel:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.regel .nr{
  color:var(--accent);font-weight:600;font-size:.82rem;
  width:4.6rem;flex:none;
}
.regel .mid{flex:1;min-width:0}
.regel .mid b{display:block;font-weight:500;font-size:1rem}
.regel .mid span{
  display:block;color:var(--grijs);font-size:.85rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vlag{
  flex:none;font-size:.72rem;font-weight:600;
  border-radius:999px;padding:.18rem .6rem;
  background:var(--kaart);color:var(--grijs);
}
.vlag.concept{background:#FBF3E2;color:#8A6412}
.vlag.audio{background:var(--accent-zacht);color:var(--accent)}
.leeg{color:var(--flauw);padding:2.4rem 0;text-align:center}

/* ---------- agenda ---------- */
.weekdagen,.rooster{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
}
.weekdagen{
  color:var(--flauw);font-size:.74rem;font-weight:600;
  text-align:center;margin-bottom:6px;
}
.dag{
  aspect-ratio:1;
  background:var(--kaart);border:none;border-radius:10px;
  font-family:inherit;font-size:.9rem;color:var(--grijs);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:pointer;padding:2px;
}
.dag:hover{outline:1.5px solid var(--grijs)}
.dag:focus-visible{outline:2px solid var(--accent)}
.dag.buiten{background:none;color:var(--lijn);cursor:default}
.dag.buiten:hover{outline:none}
.dag.gevuld{background:var(--accent);color:#fff;font-weight:600}
.dag.conceptdag{background:#FBF3E2;color:#8A6412;font-weight:600}
.dag.vandaag{outline:2px solid var(--inkt)}
.dag small{font-size:.6rem;opacity:.85;line-height:1}

/* ---------- bewerkscherm ---------- */
.bewerk{
  position:fixed;inset:0;z-index:40;
  background:var(--vel);
  overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom);
}
.bewerkbinnen{max-width:720px;margin:0 auto;padding:1rem 20px 4rem}
.bewerkkop{
  display:flex;align-items:center;gap:.5rem;
  padding:.3rem 0 1rem;
  position:sticky;top:0;background:var(--vel);z-index:2;
}
.opslaanrij{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--lijn);
}
.schakel{
  display:flex;align-items:center;gap:.6rem;
  margin:0;font-size:.92rem;font-weight:500;color:var(--inkt);
  cursor:pointer;
}
.schakel input{width:20px;height:20px;accent-color:var(--accent);min-height:0}
.schakel small{display:block;color:var(--flauw);font-weight:400;font-size:.78rem}

/* ---------- voorbeeld ---------- */
.voorbeeld{
  background:var(--kaart);border-radius:18px;
  padding:1.2rem 1.3rem;margin-top:1.6rem;
}
.voorbeeldlabel{
  font-size:.74rem;font-weight:600;color:var(--flauw);
  margin:0 0 .6rem;
}
.voorbeeldtekst{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:1.7rem;line-height:1.16;
  letter-spacing:-.01em;margin:0;min-height:1.2em;
}
.voorbeeldtekst em{font-style:italic;color:var(--accent)}

/* het hoofdstukvoorbeeld: leestekst, niet de grote gedachteletter */
.voorbeeldtitel{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:1.6rem;letter-spacing:-.01em;
  margin:0 0 .8rem;
}
.voorbeeldtitel:empty{display:none}
.voorbeeldbody p{
  font-family:"Instrument Serif",Georgia,serif;
  font-size:1.12rem;line-height:1.62;
  margin:0 0 1rem;
}
.voorbeeldbody p:last-child{margin-bottom:0}
.voorbeeldbody em{font-style:italic;color:var(--accent)}
.voorbeeldbody .flauw{font-family:inherit;font-size:.9rem}

/* ---------- schrijfhulp ---------- */
.schrijfhulp{border-style:dashed}
.voorstel{
  background:var(--kaart);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  margin-top:1rem;
}
.voorstel p{
  font-family:"Instrument Serif",Georgia,serif;
  font-size:1.08rem;line-height:1.55;
  margin:0 0 .9rem;white-space:pre-wrap;
}
.voorstel em{font-style:italic;color:var(--accent)}

/* ---------- audio ---------- */
.audionu{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin:1rem 0;
}
.audionu audio{max-width:100%}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:60;
  background:var(--knop);color:var(--knoptekst);
  border-radius:999px;padding:.7rem 1.3rem;
  font-size:.9rem;font-weight:500;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
}

@media (max-width:520px){
  .tweekolom{grid-template-columns:1fr}
  .paneelkop h2{font-size:1.45rem}
  .regel .nr{width:3.4rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}