/* ═══════════════════════════════════════════════════════════════════════
   ELK ePI — beheerconsole
   Uitvoering van het tokencontract in docs/ONTWERP.md (klasse: gereedschap).
   Na dit blok staat er geen letterlijke kleur- of maatwaarde meer in een
   component. Wijkt iets af, dan is dat een nieuw token met een reden.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* kleur — elke waarde betekent precies één ding */
  --vel: #fbfaf8;          /* het documentvel: hier staat de tekst zelf */
  --bank: #efedea;         /* de werkbank waar het vel op ligt */
  --bank-diep: #e4e1dc;    /* actief/ingedrukt */
  --inkt: #1a1d21;         /* werktekst */
  --potlood: #4a545f;      /* chrome: labels, nummers, hints, tellingen */
  --lijn: #dcd9d4;         /* scheiding waar ruimte tekortschiet */
  --revisie: #ff681d;      /* hier veranderde iets — alleen streep of markering */
  --revisie-inkt: #8a3b0c; /* dezelfde betekenis, waar het tekst moet zijn */
  --revisie-vlak: #fdeee6; /* dezelfde betekenis, als achtergrond */
  --ernst: #9a2c2c;        /* validatiefout — uitsluitend */
  --ernst-vlak: #fbeeee;
  --let-op: #7d5200;       /* validatiewaarschuwing — uitsluitend */
  --let-op-vlak: #fdf4e3;

  /* ruimte — 4px-raster, alles is een veelvoud */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px;

  /* type — ratio x1.2 */
  --t-chrome: 12px;
  --t-tekst: 14px;
  --t-kop: 17px;
  --t-cijfer: 21px;

  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --straal: 4px;
  --duur: 120ms;
  --mast: 44px;
  --voet: 52px;

  color-scheme: light;
  font-family: var(--sans);
  color: var(--inkt);
  background: var(--bank);
}

/* Beweging legt uit waar iets vandaan kwam, of hij is er niet. */
@media (prefers-reduced-motion: reduce) {
  :root { --duur: 0ms; }
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  font-size: var(--t-tekst);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; color: var(--potlood); }

code, .mono { font-family: var(--mono); }

/* Focus was er in de vorige versie helemaal niet. Nu overal, en nooit weg.
   Bewust in --inkt en niet in het merkoranje: oranje betekent "hier veranderde
   iets", en focus betekent "hier ben je nu". Dat zijn twee dingen. De offset
   zet de ring buiten het element, zodat hij ook op de donkere primaire knop
   zichtbaar blijft. */
:where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 2px;
  border-radius: 2px;
}

.label {
  font-size: var(--t-chrome);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--potlood);
}

.mono-nr { font-family: var(--mono); font-size: var(--t-chrome); color: var(--potlood); }

kbd {
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid var(--lijn);
  border-radius: 2px;
  padding: 0 var(--s1);
  color: var(--potlood);
}

/* ── mast ──────────────────────────────────────────────────────────── */

.topbar {
  height: var(--mast);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s4);
  background: var(--vel);
  border-bottom: 1px solid var(--lijn);
}

.brand {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

/* Het ELK-beeldmerk. Samen met de revisiestreep de enige plek met oranje. */
.brand-mark { display: block; height: 18px; width: auto; flex: none; }
.brand strong { font-weight: 600; font-size: var(--t-tekst); letter-spacing: -0.01em; }
.brand small { color: var(--potlood); font-size: var(--t-chrome); }

.topnav { display: flex; gap: var(--s1); }

.topnav a {
  color: var(--potlood);
  text-decoration: none;
  font-size: var(--t-chrome);
  font-weight: 600;
  padding: var(--s1) var(--s2);
  border-radius: var(--straal);
  transition: background var(--duur), color var(--duur);
}

.topnav a:hover { background: var(--bank); }
.topnav a.current { background: var(--inkt); color: var(--vel); }

.doc-identiteit {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-size: var(--t-chrome);
  color: var(--potlood);
  min-width: 0;
}

.doc-identiteit code { color: var(--inkt); }
.doc-identiteit .knip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Interfacetaal. Bewust compact en naast de servicestatus, niet naast de
   documenttaal in de mast: die twee moeten niet als één ding lezen. */
.taalkeuze {
  flex: none;
  max-width: 72px;
  font-variant-numeric: tabular-nums;
}

.service-state {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--potlood);
  font-size: var(--t-chrome);
  flex: none;
}

.state-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--potlood);
}

/* Verbonden is de rusttoestand en krijgt daarom geen kleur — alleen het
   uitvallen is een gebeurtenis. Eerder stond hier het merkoranje, waarmee
   oranje behalve "gewijzigd" ook "verbonden" ging betekenen. */
.service-state.online .state-dot { background: var(--potlood); }
.service-state.offline .state-dot { background: var(--ernst); }

/* ── werkvlak: rubriekenband naast het vel ─────────────────────────── */

.werkvlak {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - var(--mast) - var(--voet) - var(--melding, 0px));
}

.band {
  border-right: 1px solid var(--lijn);
  background: var(--vel);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.band-kop {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--vel);
  padding: var(--s3) var(--s4) var(--s2);
  border-bottom: 1px solid var(--lijn);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

.band-kop .hint { font-size: var(--t-chrome); color: var(--potlood); }

.band-lijst { list-style: none; margin: 0; padding: 0; }

/* Eén rij per QRD-rubriek. De marge links draagt de revisiestreep. */
.rubriek {
  display: grid;
  grid-template-columns: 3px 58px 1fr;
  gap: var(--s2);
  align-items: baseline;
  width: 100%;
  padding: var(--s2) var(--s4) var(--s2) 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background var(--duur);
}

.rubriek:hover { background: var(--bank); }
.rubriek:active { background: var(--bank-diep); }
.rubriek[aria-current] { background: var(--bank); }
.rubriek[aria-current] .rubriek-titel { font-weight: 500; }

.rubriek .streep { align-self: stretch; background: transparent; }
.rubriek[data-gewijzigd] .streep { background: var(--revisie); }

.rubriek-nr { font-family: var(--mono); font-size: var(--t-chrome); color: var(--potlood); }
.rubriek-titel { font-size: var(--t-tekst); }

.band-leeg { padding: var(--s4); color: var(--potlood); font-size: var(--t-tekst); }

/* ── het vel ───────────────────────────────────────────────────────── */

.vel { overflow-y: auto; padding: var(--s8) var(--s12); }
.vel-binnen { max-width: 76ch; margin: 0 auto; }

/*
 * Bewerken: één schuifgebied in plaats van twee.
 *
 * Normaal schuift het vel en heeft de ingebedde editor daarbinnen zijn eigen
 * schuifbalk — twee balken naast elkaar, en je weet nooit welke de jouwe is.
 * Zodra de editor open is stopt het vel met schuiven en krijgt het paneel de
 * hoogte die er is; wat er dan nog schuift is het document zelf, en dat is er
 * precies één.
 */
/*
 * Bewerken is krap op een laptopscherm, en elke regel chrome gaat van de editor
 * af. Gemeten op een venster van 662 px hoog: de editor hield 234 px over, en
 * dan past de correctiemarge van nodekind er niet meer in. Vandaar dat het vel
 * zijn eigen marges opgeeft zodra er bewerkt wordt — lezen mag ruimte kosten,
 * bewerken niet.
 */
.vel.bewerkt {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.vel.bewerkt .editorpaneel { border-radius: 0; border-left: 0; border-right: 0; }
.vel.bewerkt .vel-binnen { display: none; }
.vel.bewerkt.uitgeklapt { overflow-y: auto; }
.vel.bewerkt.uitgeklapt .vel-binnen { display: block; }

.vel-inklap {
  align-self: stretch;
  padding: var(--s1) var(--s3);
  border: 0;
  border-bottom: 1px solid var(--lijn);
  background: none;
  color: var(--potlood);
  font: inherit;
  font-size: var(--t-chrome);
  text-align: left;
  cursor: pointer;
}
.vel-inklap:hover { color: var(--inkt); }
.vel-inklap[hidden] { display: none; }

/* Alleen ingeklapt vult het paneel de hoogte; uitgeklapt hoort het gewoon
   onder de vergelijking te staan, want dan is lezen de bedoeling. */
.vel.bewerkt:not(.uitgeklapt) .editorpaneel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.vel.bewerkt:not(.uitgeklapt) .editor-frame { flex: 1; height: auto; min-height: 0; }

.rubriek-kop { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s1); }
.rubriek-kop h1 { font-size: var(--t-kop); font-weight: 500; margin: 0; }
.rubriek-kop .mono-nr { flex: none; }

.rubriek-meta { margin: 0 0 var(--s6); font-size: var(--t-chrome); color: var(--potlood); }

.vergelijking { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.vergelijking .zijde { min-width: 0; }
.vergelijking h2 { margin: 0 0 var(--s2); }
.vergelijking p { margin: 0; overflow-wrap: break-word; }

/* Doorhaling en onderstreping dragen de betekenis, niet kleur.
   Zo blijft rood vrij voor een echte validatiefout. */
.was {
  color: var(--revisie-inkt);
  background: var(--revisie-vlak);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  padding: 0 2px;
}

.werd {
  color: var(--revisie-inkt);
  background: var(--revisie-vlak);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  padding: 0 2px;
}

.stil { color: var(--potlood); }

/* ── de ingebedde editor ───────────────────────────────────────────── */

.editorpaneel {
  margin-top: var(--s8);
  border: 1px solid var(--lijn);
  border-radius: var(--straal);
  background: var(--vel);
  overflow: hidden;
}

.editor-kop {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--lijn);
}

.editor-kop .button { margin-left: auto; }
.editor-stand { font-size: var(--t-chrome); color: var(--potlood); }

/*
 * Het FHIR-pad boven de editor.
 *
 * Eén regel, monospace, en hij mag horizontaal schuiven in plaats van af te
 * breken: een pad dat over twee regels valt leest niet meer als één pad. Wat er
 * niet in past haal je met de muis binnen; de staart — `text/div` — is het stuk
 * dat er altijd bij hoort en staat daarom rechts.
 */
.editor-context {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--lijn);
}
.editor-pad {
  margin: 0;
  /* Het pad krijgt voorrang op de zin ernaast: een half pad is geen pad, en
     wat er niet in past haal je met de muis binnen. */
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--t-chrome);
  color: var(--potlood);
  white-space: nowrap;
  overflow-x: auto;
}
.editor-pad[hidden] { display: none; }
/* De rubriek waar je in staat draagt de nadruk; de weg ernaartoe is context. */
.editor-pad .hier { color: var(--inkt); font-weight: 600; }
.editor-pad .scheiding { color: var(--lijn); padding: 0 .35em; }

/* ── de XML op verzoek ─────────────────────────────────────────────────── */

.xmlvenster {
  width: min(96vw, 100ch);
  max-height: 86vh;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: var(--straal);
  background: var(--vel);
  color: var(--inkt);
  overflow: hidden;
}
.xmlvenster::backdrop { background: rgba(26, 28, 30, .38); }
.xmlvenster[open] { display: flex; flex-direction: column; }

.xml-kop {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  border-bottom: 1px solid var(--lijn);
}
.xml-kop h2 { margin: 0; }
.xml-kop .text-button:first-of-type { margin-left: auto; }
.xml-onder { margin: var(--s1) 0 0; font-size: var(--t-chrome); color: var(--potlood); }

.xml-inhoud {
  margin: 0;
  padding: var(--s3);
  overflow: auto;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--t-chrome);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

/* Eén regel grondslag: waarop je bewerkt. Zacht, want het is een voetnoot bij
   de handeling en niet de handeling zelf — maar hij moet er staan. */
.editor-grond {
  margin: 0 0 0 auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 38ch;
  font-size: var(--t-chrome);
  color: var(--potlood);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-frame {
  display: block;
  width: 100%;
  height: 60vh;
  min-height: 380px;
  border: 0;
  background: var(--vel);
}

.rubriek-kop .text-button { margin-left: auto; flex: none; }

/* ── bewijsregel onder de vergelijking ─────────────────────────────── */

.bewijs { margin-top: var(--s12); border-top: 1px solid var(--lijn); padding-top: var(--s6); }
.bewijs h2 { margin: 0 0 var(--s4); }

.bewijs-rij {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s6);
}

@media (max-width: 700px) {
  .bewijs-rij { grid-template-columns: repeat(2, 1fr); }
}

.metric { display: flex; flex-direction: column; gap: 2px; }
.metric span { font-size: var(--t-chrome); color: var(--potlood); }
.metric strong { font-size: var(--t-cijfer); font-weight: 500; letter-spacing: -0.02em; }
.metric strong.ernst { color: var(--ernst); }

.spoor { margin: 0; display: grid; gap: var(--s2); font-size: var(--t-chrome); }
.spoor div { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: var(--s3); }
.spoor dt { color: var(--potlood); }
.spoor dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }

.uitslag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--t-chrome);
  padding: var(--s1) var(--s2);
  border-radius: var(--straal);
}

.uitslag.schoon { color: var(--potlood); }
.uitslag.fout { color: var(--ernst); background: var(--ernst-vlak); }
.uitslag.waarschuwing { color: var(--let-op); background: var(--let-op-vlak); }

/* ── voetbalk: de aanloop, niet het hoofdbeeld ─────────────────────── */

/* Waarschuwing bij uploads op de publieke demo. Bewust geen ernst-kleur: dit
   is een gebruiksvoorwaarde, geen fout. Hij staat boven de voetbalk zodat hij
   in het oog valt vóór de uploadknop, niet erna. */
.bewaarmelding {
  margin: 0;
  padding: var(--s2) var(--s4);
  background: var(--revisie-vlak);
  border-top: 1px solid var(--lijn);
  color: var(--revisie-inkt);
  font-size: var(--t-chrome);
}

.voet {
  height: var(--voet);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s4);
  background: var(--vel);
  border-top: 1px solid var(--lijn);
  overflow-x: auto;
}

.voet-groep { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.voet-scheiding { width: 1px; align-self: stretch; background: var(--lijn); flex: none; margin: var(--s2) 0; }

/* De acties plakken rechts vast. De primaire handeling mag nooit wegscrollen —
   dat gebeurde in de eerste bouw wél, bij 1440px al. */
.voet-acties {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  position: sticky;
  right: 0;
  padding-left: var(--s3);
  background: linear-gradient(to right, transparent, var(--vel) var(--s3));
}

select, .button, .file-picker span, .text-button {
  font-size: var(--t-chrome);
  border-radius: var(--straal);
  transition: background var(--duur), border-color var(--duur);
}

select {
  background: var(--vel);
  border: 1px solid var(--lijn);
  padding: var(--s1) var(--s2);
  max-width: 200px;
  text-overflow: ellipsis;
}

select:hover { background: var(--bank); }

.button {
  border: 1px solid var(--lijn);
  background: var(--vel);
  padding: var(--s1) var(--s3);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.button:hover:not(:disabled) { background: var(--bank); }
.button:active:not(:disabled) { background: var(--bank-diep); }
.button.primary { background: var(--inkt); color: var(--vel); border-color: var(--inkt); }
.button.primary:hover:not(:disabled) { background: #000; }
.button:disabled { background: var(--bank); border-color: var(--lijn); }

.text-button {
  background: none;
  border: 0;
  color: var(--potlood);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: var(--s1);
}

.text-button:hover { color: var(--inkt); }

.file-picker { position: relative; overflow: hidden; display: inline-flex; }
.file-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.file-picker span {
  border: 1px dashed var(--lijn);
  background: var(--vel);
  padding: var(--s1) var(--s3);
  color: var(--potlood);
}

.file-picker:hover span { background: var(--bank); color: var(--inkt); }

/* ── melding ───────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--voet) + var(--s4));
  transform: translateX(-50%);
  max-width: min(560px, calc(100% - var(--s8)));
  padding: var(--s2) var(--s4);
  border-radius: var(--straal);
  background: var(--inkt);
  color: var(--vel);
  font-size: var(--t-chrome);
  z-index: 20;
}

.toast.bad { background: var(--ernst); }

/* ── gedeeld met het roundtrip lab ─────────────────────────────────── */

main.plat { width: min(1100px, calc(100% - var(--s8))); margin: 0 auto; padding: var(--s8) 0; }

.hero { margin-bottom: var(--s8); }
.hero-copy { max-width: 68ch; }
.eyebrow { margin: 0 0 var(--s2); }
.hero h1 { font-size: var(--t-cijfer); font-weight: 500; margin: 0 0 var(--s2); letter-spacing: -0.02em; }
.lead { margin: 0; color: var(--potlood); }
.hero-actions { display: flex; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }

.panel, .step-card, .proof-card, .detail-box {
  background: var(--vel);
  border: 1px solid var(--lijn);
  border-radius: var(--straal);
  padding: var(--s4);
}

.panel-heading, .proof-header, .section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.panel-heading h3, .proof-header h2, .section-heading h2 {
  font-size: var(--t-kop);
  font-weight: 500;
  margin: 0;
}

.panel-hint { margin: 0; font-size: var(--t-chrome); color: var(--potlood); }

.pill {
  font-family: var(--mono);
  font-size: var(--t-chrome);
  color: var(--potlood);
  border: 1px solid var(--lijn);
  border-radius: var(--straal);
  padding: 0 var(--s1);
}

.steps { display: grid; gap: var(--s3); }
.step-card { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s3); align-items: baseline; }
.step-number { font-family: var(--mono); font-size: var(--t-chrome); color: var(--potlood); }
.step-title { font-weight: 500; }
.step-content { margin: var(--s1) 0 0; font-size: var(--t-chrome); color: var(--potlood); }
.step-status { font-size: var(--t-chrome); color: var(--potlood); }
.step-status.busy { color: var(--let-op); }
.step-status.ready { color: var(--inkt); }
.step-status.failed { color: var(--ernst); }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }
.results { display: grid; gap: var(--s4); }
.result-panels { display: grid; gap: var(--s4); }
.result-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }

.changes-list, .issues-list, .trace-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.changes-list li, .issues-list li { padding: var(--s2) 0; border-bottom: 1px solid var(--lijn); font-size: var(--t-chrome); }
.trace-list div { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: var(--s3); font-size: var(--t-chrome); }
.trace-list dt { color: var(--potlood); }
.trace-list dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }

.guardrails { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--lijn); }
.guardrails div { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.guardrails span { font-size: var(--t-chrome); color: var(--potlood); border: 1px solid var(--lijn); border-radius: var(--straal); padding: 0 var(--s2); }

/* ── smal scherm ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .werkvlak { grid-template-columns: 1fr; height: auto; }
  .band { border-right: 0; border-bottom: 1px solid var(--lijn); max-height: 40vh; }
  .vel { padding: var(--s6) var(--s4); }
  .vergelijking { grid-template-columns: 1fr; gap: var(--s4); }
  .doc-identiteit .knip { display: none; }
  .voet { height: auto; padding: var(--s2) var(--s4); flex-wrap: wrap; }
}