:root {
  /* Secretaris — palet C (navy · sand · teal), strak en professioneel */
  --inkt: #1b1e33;          /* navy-inkt tekst */
  --dempt: #5c6480;         /* navy-grijs gedempt */
  --vlak: #f4f6fa;          /* koel bijna-wit oppervlak */
  --rand: #dbe0ea;          /* koele rand */
  --accent: #170c79;        /* navy — primair */
  --accent-2: #2d8a97;      /* verdiept teal — secundair accent */
  --waarschuwing: #b3542e;  /* semantische waarschuwing (los van merk-accent) */
  --accent-tint: #e9e8f7;   /* lichte navy-tint */
  --waarschuwing-tint: #f6e8e1;
  --sand: #efe3ca;          /* warm accentvlak */
  --radius: 8px;
  --ruimte: 1rem;
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}

/* merk-wordmark (quill + Secretaris) */
.merk { font-family: var(--serif); font-weight: 600; font-size: 1.18rem;
  letter-spacing: .01em; color: var(--accent); display: inline-flex;
  align-items: center; gap: .5rem; text-decoration: none; }
.merk svg { width: 1.35rem; height: 1.35rem; flex: none; }
.login h1 { font-family: var(--serif); color: var(--accent); font-weight: 600; }
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--inkt); background: var(--vlak);
  font: 16px/1.55 -apple-system, "Segoe UI", sans-serif;
}
.fout { color: var(--waarschuwing); }
.login { max-width: 22rem; margin: 15vh auto; }
.login label { display: block; margin-bottom: var(--ruimte); }
.login input { width: 100%; padding: .5rem; border: 1px solid var(--rand); border-radius: var(--radius); }
button {
  background: var(--accent); color: #fff; border: 0; padding: .6rem 1.2rem;
  border-radius: var(--radius); font-size: 1rem; cursor: pointer;
}
nav {
  display: flex; gap: var(--ruimte); align-items: center;
  background: #fff; border-bottom: 1px solid var(--rand); padding: .6rem var(--ruimte);
}
nav a { color: var(--inkt); text-decoration: none; }
.uitlijn-rechts { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.pagina { max-width: 52rem; margin: var(--ruimte) auto; padding: 0 var(--ruimte); }
.kaart {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: var(--ruimte); margin-bottom: var(--ruimte);
}
.rij { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.rij input, .rij select { padding: .5rem; border: 1px solid var(--rand); border-radius: var(--radius); }
.checkbox { display: flex; gap: .4rem; align-items: center; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--rand); }
.badge { padding: .15rem .55rem; border-radius: 999px; font-size: .82rem; background: var(--vlak); }
.badge-opgenomen { background: var(--accent-tint); color: var(--accent); }
.badge-afgebroken { background: var(--waarschuwing-tint); color: var(--waarschuwing); }
.badge-opname { background: var(--waarschuwing-tint); color: var(--waarschuwing); }
.badge-bezig { background: var(--vlak); color: var(--dempt); }
.badge-fout { background: var(--waarschuwing-tint); color: var(--waarschuwing); }
.badge-getranscribeerd { background: var(--accent-tint); color: var(--accent); }
.badge-concept_klaar { background: var(--accent-tint); color: var(--accent); }
.badge-geaccordeerd { background: var(--accent); color: #fff; }
.badge-bewerkt { background: var(--accent-tint); color: var(--accent); margin-left: .35rem; }
.inline { display: inline; }
.klein { padding: .3rem .7rem; font-size: .85rem; }
.secundair { background: var(--dempt); }
.stop { background: var(--waarschuwing); font-size: 1.1rem; }
.opname-actief { border-color: var(--waarschuwing); }
.patient-banner { font-size: 1.2rem; font-weight: 600; }
.timer { font-size: 2.4rem; font-variant-numeric: tabular-nums; margin: .2rem 0; }
.puls { animation: puls 1.2s infinite; color: var(--waarschuwing); }
@keyframes puls { 50% { opacity: .35; } }
.vu { height: 8px; background: var(--vlak); border-radius: 4px; overflow: hidden; margin-bottom: var(--ruimte); }
.vu-balk { height: 100%; width: 0; background: var(--accent-2); transition: width .2s; }
.dempt { color: var(--dempt); }
.transcript { list-style: none; padding: 0; }
.transcript li { display: flex; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--rand); align-items: baseline; }
.transcript .tijd { color: var(--dempt); font-variant-numeric: tabular-nums; min-width: 3rem; }
.transcript .spreker { font-weight: 600; min-width: 6rem; }
.zinnr { color: var(--dempt); font-variant-numeric: tabular-nums; min-width: 2.6rem; }
.speel { background: none; border: 1px solid var(--rand); color: var(--accent-2); border-radius: 50%; width: 1.7rem; height: 1.7rem; cursor: pointer; }
.transcript li:target { background: var(--accent-tint); }
.verslag dt { font-weight: 600; margin-top: .6rem; }
.verslag dd { margin: 0; }
.bron { margin-left: .25rem; font-size: .82rem; color: var(--accent); text-decoration: none; }
.accordeer { background: var(--accent); font-size: 1.05rem; width: 100%; }

[contenteditable] { display: inline-block; min-width: 2rem; }
[contenteditable]:hover { background: var(--vlak); cursor: text; }
[contenteditable]:focus { outline: 2px solid var(--accent); border-radius: 3px; }
.opslaan-knop { margin-left: .5rem; }
.toggle-knop { margin-left: .5rem; }
.fout-banner {
  display: block; margin-top: .3rem; padding: .35rem .6rem;
  background: var(--waarschuwing-tint); color: var(--waarschuwing);
  border-radius: var(--radius); font-size: .85rem;
}
/* Demo-preview: subtiele bandeau in de sand-tint, bovenaan elke pagina. */
.demo-banner {
  background: var(--sand); color: var(--inkt);
  text-align: center; padding: .4rem var(--ruimte);
  font-size: .85rem; letter-spacing: .01em;
  border-bottom: 1px solid var(--rand);
}
.veld-blok { flex-direction: column; align-items: flex-start; }
.veld-blok label { font-weight: 600; font-size: .85rem; }
.rij input[name="bronnen"], .rij input[name="nieuw"] { min-width: 16rem; font-size: 1rem; padding: .55rem; }
input[name="bronnen"] { font-variant-numeric: tabular-nums; }
.export { margin-top: 1rem; }
.export-preview { white-space: pre-wrap; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: .6rem; font-family: inherit; }
.kopieer-status { margin-left: .5rem; color: var(--accent); }