/* Proeftuin, de huisstijl van uitkomst.ai in een donker en een licht thema.
   Karakter van een meetpaneel: dunne randen, mono labels, tabulaire cijfers.
   De donkere kleuren komen uit SPEC.md paragraaf 6; de vlakken en lijnen
   zijn daarna een stap uit elkaar gezet, zie de toelichting bij :root. Het lichte thema gebruikt dezelfde namen met de kleuren van de
   website, zodat de rest van dit bestand van geen van beide hoeft te weten.

   Het thema staat als data-thema op <html>. Donker is de standaard en dus
   ook wat een nieuwe bezoeker ziet; assets/thema.js zet het attribuut op
   "licht" zodra iemand daar zelf voor kiest. De systeemvoorkeur speelt bewust
   geen rol: de proeftuin is als donker meetpaneel ontworpen. */

:root {
  --inkt: #0c0c0f;          /* achtergrond */
  /* Vlakken en lijnen liggen verder van de achtergrond dan in SPEC
     paragraaf 6 (14141a, 1b1b23, 26262f). Daar zat een paneel op 1,06:1 en
     een lijn op 1,3:1, en op een gewoon scherm was dan niet te zien waar een
     paneel begon. Het oog ziet in het donker kleine stappen slechter dan in
     het licht, dus de donkere ladder is bewust groter dan de lichte:
     paneel 1,27:1, verhoogd 1,45:1, veld 1,64:1, lijn 2,0:1. Tekst haalt op
     elk vlak nog minstens 4,3:1. */
  --inkt-op: #24242d;       /* panelen */
  --inkt-hoog: #2e2e38;     /* verhoogd vlak */
  --rand: #444452;          /* lijnen */
  --papier: #f2f1ee;        /* tekst */
  --papier-zacht: #a6a6b2;  /* bijtekst */
  --papier-vaag: #6d6d79;   /* labels */
  --accent: #c98aa0;        /* opgelichte bordeaux, van de site */
  --accent-diep: #7d2b4a;   /* accent van de site, voor vullingen */
  --accent-vol-hover: #8f3355;
  --op-accent: #f2f1ee;     /* tekst op een bordeaux vulling, in beide thema's */
  --goed: #7fbf9a;
  --let-op: #d9a441;
  --let-op-vlak: rgba(217, 164, 65, 0.08);

  /* De kleur van het taalmodel. Overal waar op het scherm staat welk model
     iets heeft gedaan, staat het in deze kleur: in een skill, bij een
     meting, in het vergelijkscherm. Bewust koel, want de bordeaux van de
     site is van Uitkomst en niet van het model, en groen en oranje zeggen al
     goed en let op. Haalt 6,4:1 op de achtergrond. */
  --model: #6fc3dd;
  --model-vlak: rgba(111, 195, 221, 0.12);
  --accent-vlak: rgba(201, 138, 160, 0.12);

  /* Vlakken met doorzicht. Als losse variabelen, omdat een rgba-waarde niet
     uit een andere variabele is af te leiden. */
  --balk-vlak: rgba(12, 12, 15, 0.94);
  --stip: rgba(242, 241, 238, 0.04);
  --glans: rgba(242, 241, 238, 0.18);

  /* Invoervelden. Panelen en lijnen mogen wegvallen in de achtergrond, een
     veld waar je in moet typen niet. Daarom een eigen, lichtere vulling en
     een rand die minstens 3:1 haalt op achtergrond en paneel. */
  --veld: #363644;         /* 1,64:1 op de achtergrond, 1,29:1 op een paneel */
  --veld-rand: #8f8f9d;    /* 3,7:1 op de vulling */
  --veld-hint: #a4a4b1;    /* placeholder, 4,8:1 op de vulling */

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  --radius: 6px;
  --kader: clamp(1rem, 3vw, 2.5rem);
  --zijbalk: 15.5rem;
}

/* Het lichte thema, in de kleuren van uitkomst.ai. Het accent is hier de
   gewone bordeaux van de site: op wit haalt die 7:1, de opgelichte variant
   van het donkere thema haalt er maar 2.6:1 en is daar dus onbruikbaar. */
:root[data-thema="licht"] {
  --inkt: #f6f5f3;
  --inkt-op: #ffffff;
  --inkt-hoog: #edebe7;
  --rand: #e4e2de;
  --papier: #16161a;
  --papier-zacht: #55555f;
  --papier-vaag: #8a8a94;
  --accent: #7d2b4a;
  --accent-diep: #7d2b4a;
  --accent-vol-hover: #692540;
  --goed: #2f7d55;
  --let-op: #9a6a12;
  --let-op-vlak: rgba(154, 106, 18, 0.08);
  --model: #1c6b85;        /* 5,4:1 op wit */
  --model-vlak: rgba(28, 107, 133, 0.09);
  --accent-vlak: rgba(125, 43, 74, 0.08);
  --balk-vlak: rgba(246, 245, 243, 0.94);
  --stip: rgba(22, 22, 26, 0.06);
  --glans: rgba(22, 22, 26, 0.08);
  --veld: #ffffff;
  --veld-rand: #8a8a94;    /* 3,1:1 op de achtergrond */
  --veld-hint: #6f6f79;    /* 5,0:1 op wit */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

html[data-thema="licht"] {
  color-scheme: light;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  /* De app is precies zo hoog als het scherm. Wat niet past, scrolt binnen het
     tabblad zelf; een paginascrollbar naast een scrollend paneel leest als twee
     verschillende dingen die hetzelfde doen. */
  overflow: hidden;
  background-color: var(--inkt);
  /* Stippenraster, steek 24px, dekking 4 procent. */
  background-image: radial-gradient(circle at 1px 1px, var(--stip) 1px, transparent 0);
  background-size: 24px 24px;
  color: var(--papier);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

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

/* --- gedeelde bouwstenen ------------------------------------------------ */

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Labels in mono, hoofdletters, ruim gespatieerd. De kleur is bewust
   papier-zacht: papier-vaag haalt op deze achtergrond geen 4.5:1 en blijft
   daarom voorbehouden aan lijnen en uitgeschakelde knoppen. */
.label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papier-zacht);
}

.klein {
  font-size: 0.8125rem;
  color: var(--papier-zacht);
}

/* Merkjes: kleine labels in mono met een rand eromheen. Het modelmerk zegt
   wie de tekst heeft geschreven, het betamerk dat een onderdeel nog in
   aanbouw is. Zelfde vorm, andere kleur, zodat ze naast elkaar rustig staan. */
.model-merk,
.beta-merk {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.model-merk {
  padding-left: 0.45rem;
  background: var(--model-vlak);
  color: var(--model);
}

.model-merk::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--model);
}

/* Beta: dit werkt, maar kijk het na voordat je het naar een klant stuurt. */
.beta-merk {
  background: var(--let-op-vlak);
  color: var(--let-op);
  text-transform: lowercase;
}

.mt { margin-top: 0.75rem; }
.mb { margin-bottom: 0.4rem; }

.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-hoog);
  color: var(--papier);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.knop:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.knop:disabled {
  color: var(--papier-vaag);
  cursor: not-allowed;
}

.knop-vol {
  background: var(--accent-diep);
  border-color: var(--accent-diep);
  color: var(--op-accent);
}

.knop-vol:hover:not(:disabled) {
  background: var(--accent-vol-hover);
  border-color: var(--accent);
  color: var(--op-accent);
}

.knop-vol:disabled {
  background: var(--inkt-hoog);
  border-color: var(--rand);
}

.knop-klein {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: none;
  border: 1px solid var(--rand);
  color: var(--papier-zacht);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.knop-klein:hover {
  border-color: var(--accent);
  color: var(--accent);
}

textarea,
select,
input[type="text"] {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--veld-rand);
  border-radius: var(--radius);
  background: var(--veld);
  color: var(--papier);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.55;
  resize: vertical;
}

textarea::placeholder {
  color: var(--veld-hint);
}

textarea:focus,
select:focus,
input:focus {
  outline: none;
  border-color: var(--accent);
}

select {
  resize: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.5rem 0.6rem;
}

/* Paneel: donker vlak met een dunne lichte lijn erboven, als op apparatuur. */
.paneel {
  position: relative;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-op);
  animation: binnen 0.28s ease both;
}

.paneel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--glans), transparent);
}

@keyframes binnen {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* --- bovenbalk ---------------------------------------------------------- */

.balk {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Verbergt de scanlijn die aan de rechterkant de balk uit loopt; zonder dit
     krijgt de pagina een horizontale schuifbalk. */
  overflow: hidden;
  border-bottom: 1px solid var(--rand);
  background: var(--balk-vlak);
}

.balk-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1680px;
  margin-inline: auto;
  padding: 0.65rem var(--kader);
}

.merk {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.merk-woord {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
}

.merk-tak {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}

/* Snelkoppelingen naar de waarneming. Ze horen op de achtergrond te blijven:
   wie ze niet zoekt, hoort ze niet te zien. Daarom dezelfde kleur als de
   labels, en pas bij aanwijzen het accent. Zie docs/meetproef.md. */
.meetlink {
  display: inline-flex;
  color: var(--papier-vaag);
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.meetlink svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.meetlink:hover,
.meetlink:focus-visible {
  color: var(--accent);
  opacity: 1;
}

.balk-rechts {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tenant {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--papier-zacht);
}

.tenant::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--goed);
}

.wie {
  font-size: 0.8125rem;
  color: var(--papier-zacht);
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Themaknop: een zonnetje in het donkere thema, een maantje in het lichte.
   Welk van de twee te zien is regelt de CSS op het data-thema-attribuut, zodat
   de knop ook klopt voordat de module heeft geladen. */
.knop-thema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  /* Lijntje tussen de identiteitsgroep en de themaknop. */
  margin-left: 0.25rem;
  padding-left: 0;
  position: relative;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: none;
  color: var(--papier-zacht);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.knop-thema::before {
  content: "";
  position: absolute;
  left: -0.625rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--rand);
}

.knop-thema:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.knop-thema svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knop-thema .maan { display: none; }

html[data-thema="licht"] .knop-thema .zon { display: none; }
html[data-thema="licht"] .knop-thema .maan { display: block; }

/* De scanlijn loopt over de kop zolang er een run bezig is. */
.scan {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 16%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
}

body[data-bezig="true"] .scan {
  opacity: 1;
  animation: schuif 1.7s linear infinite;
}

@keyframes schuif {
  from { transform: translateX(-20%); }
  to { transform: translateX(640%); }
}

/* --- aanmeldscherm ------------------------------------------------------ */

.aanmelden {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--kader);
}

.aanmelden-kaart {
  width: min(28rem, 100%);
  padding: 2.25rem;
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.aanmelden .merk {
  justify-content: center;
}

.aanmelden p {
  color: var(--papier-zacht);
  text-wrap: pretty;
}

/* --- kop en tabbladen --------------------------------------------------- */

/* --- schermvullende opbouw ---------------------------------------------- */

#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.blad {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding: 1.5rem var(--kader) 1.25rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Vanaf 900px staan de onderdelen in een zijbalk links van de inhoud. Elk
   tabblad is een eigen pagina met een eigen kop, dus rechts staat alleen het
   gekozen tabblad. */
@media (min-width: 900px) {
  .blad {
    display: grid;
    grid-template-columns: var(--zijbalk) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 2.25rem;
  }

  .zijbalk {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    /* De ruimte voor de scrollbalk staat altijd gereserveerd, zodat de
       pijltjes van de afdelingen niet verspringen als die verschijnt. */
    scrollbar-gutter: stable;
    padding-right: 0.75rem;
    border-right: 1px solid var(--rand);
  }

  /* Ingeklapt is de zijbalk net breed genoeg voor de iconen. */
  .blad.ingeklapt {
    grid-template-columns: 4rem minmax(0, 1fr);
    column-gap: 1.5rem;
  }

  .blad.ingeklapt .zijbalk {
    padding-right: 0.4rem;
  }

  .blad > [role="tabpanel"]:not([hidden]) {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Het zichtbare tabblad vult wat er over is en scrolt desnoods zelf. Alleen
   de pagina's zelf; een tabpanel binnen een pagina, zoals op Skills, niet. */
.blad > [role="tabpanel"]:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Met alleen overflow-y op auto rekent de browser overflow-x ook als auto,
     en dan geeft elke pixel die ergens te breed uitvalt een horizontale balk.
     Zijwaarts scrollen hoort op geen enkele pagina. */
  overflow-x: hidden;
}

#paneel-vergelijk:not([hidden]) {
  display: flex;
  flex-direction: column;
}

/* Kop en uitleg van een pagina: de kop als koptekst, de uitleg eronder.
   Eerder stonden ze naast elkaar om hoogte te winnen voor de kolommen; met de
   zijbalk is die ruimte er en leest een kop met een regel eronder rustiger. */
.intro {
  display: grid;
  gap: 0.35rem;
  max-width: 78rem;
  margin-bottom: 1.1rem;
  flex: none;
}

.intro h1 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
}

.intro p {
  max-width: 70ch;
  color: var(--papier-zacht);
  text-wrap: pretty;
}

/* Op een smal scherm staan de onderdelen als een rij tabbladen boven de
   inhoud, zoals voorheen. Vanaf 900px worden ze een zijbalk, zie verderop. */
.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 1rem;
  flex: none;
  /* Alleen zijwaarts uitwijken op een smal scherm. Zonder de tweede regel zet
     Chrome er ook een verticale scrollbalk naast, en die stond er zichtbaar bij. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs [role="tab"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 0.6rem 0.9rem;
  margin-bottom: -1px;
  color: var(--papier-zacht);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}

.tabs [role="tab"]:hover {
  color: var(--papier);
}

.tabs [role="tab"][aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (min-width: 900px) {
  /* Met .zijbalk ervoor, anders wint de ondermarge die de tabbladrij verderop
     op lage schermen krijgt, en schuift de zijbalk tien pixels. */
  .zijbalk .tabs {
    flex-direction: column;
    gap: 0.1rem;
    border-bottom: 0;
    margin-bottom: 0;
    overflow: visible;
    /* Vult de zijbalk onder de inklapknop, zodat het laatste tabblad naar
       beneden kan zakken. */
    flex: 1;
    min-height: 0;
  }

  .tabs [role="tab"] {
    border-bottom: 0;
    border-left: 2px solid transparent;
    margin-bottom: 0;
    padding: 0.55rem 0.85rem;
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  .tabs [role="tab"]:hover {
    background: var(--inkt-op);
  }

  .tabs [role="tab"][aria-selected="true"] {
    border-left-color: var(--accent);
    background: var(--inkt-op);
  }

  .tab-voet {
    border-radius: 0;
    font-size: 0.6875rem;
  }

  .tabs .tab-voet:hover,
  .tabs .tab-voet[aria-selected="true"] {
    background: none;
  }
}

/* Een afdeling bundelt de skills van één team onder een kopje dat open en
   dicht klapt. Op een smal scherm is daar geen ruimte voor: dan is het kopje
   weg en staan de skills gewoon in de rij tabbladen. */
.afdeling,
.afdeling-lijst,
.voet {
  display: contents;
}

.afdeling-knop,
.afdeling-leeg {
  display: none;
}

@media (min-width: 900px) {
  .afdeling {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .afdeling-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    /* Iets ingesprongen, zodat de skills zichtbaar bij het kopje horen. */
    padding-left: 0.85rem;
  }

  /* Kennisbank en Over de proeftuin horen niet bij het werk zelf en staan
     daarom apart, helemaal onderaan, achter een lijntje. Deze regel staat na
     de display: contents hierboven, anders wint die. */
  .voet {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rand);
  }

  .afdeling-knop[aria-expanded="false"] + .afdeling-lijst {
    display: none;
  }

  .afdeling-leeg {
    padding: 0.4rem 0.85rem;
    color: var(--papier-vaag);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }

  /* Dezelfde maat en letter als een tabblad, met rechts een pijltje. */
  .afdeling-knop {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    appearance: none;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: none;
    padding: 0.55rem 0.85rem;
    color: var(--papier-zacht);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }

  .afdeling-knop:hover {
    color: var(--papier);
    background: var(--inkt-op);
  }

  .afdeling-knop .pijl {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
    margin-left: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
  }

  /* Dicht wijst het pijltje omlaag, als een uitklapmenu; open wijst het
     omhoog, zodat je ziet dat een klik het weer dichtklapt. */
  .afdeling-knop[aria-expanded="true"] .pijl {
    transform: rotate(180deg);
  }
}

/* Elk onderdeel heeft een klein Heroicon voor het woord. Het volgt de
   tekstkleur, dus het kleurt mee met hover en met het gekozen tabblad. */
.icoon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* De inklapknop bestaat alleen in de zijbalk; in de rij op een smal scherm
   valt er niets in te klappen. */
.zijbalk-knop {
  display: none;
}

@media (min-width: 900px) {
  .zijbalk-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex: none;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.35rem;
    appearance: none;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--papier-vaag);
    cursor: pointer;
  }

  .zijbalk-knop:hover {
    color: var(--papier);
    background: var(--inkt-op);
  }

  .zijbalk-knop .icoon {
    transition: transform 0.15s ease;
  }

  .blad.ingeklapt .zijbalk-knop {
    align-self: center;
  }

  .blad.ingeklapt .zijbalk-knop .icoon {
    transform: rotate(180deg);
  }

  /* Ingeklapt blijven alleen de iconen over, gecentreerd. De skills van een
     afdeling gaan dicht; het kopje van de afdeling toont dan de gekozen
     staat en klapt bij een klik de zijbalk weer uit. */
  .blad.ingeklapt .tabs [role="tab"] span,
  .blad.ingeklapt .afdeling-knop span,
  .blad.ingeklapt .afdeling-knop .pijl,
  .blad.ingeklapt .afdeling-lijst {
    display: none;
  }

  .blad.ingeklapt .tabs [role="tab"],
  .blad.ingeklapt .afdeling-knop {
    justify-content: center;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .blad.ingeklapt .afdeling-knop.actief {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--inkt-op);
  }
}

[role="tabpanel"]:focus {
  outline: none;
}

/* --- tab Vergelijk ------------------------------------------------------ */

.invoer {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  max-width: 68rem;
  flex: none;
}

/* Het vak groeit mee met de tekst (zie pasHoogteAan), maar niet verder dan
   deze grens: daarboven scrolt het vak zelf, zodat er voor de antwoorden ruimte
   overblijft. */
#prompt {
  min-height: 5.25rem;
  max-height: 45vh;
  resize: vertical;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--inkt-op);
  color: var(--papier-zacht);
  font-family: var(--mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.acties {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.toets {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--papier-zacht);
}

.runstatus {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-op);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--papier-zacht);
  flex: none;
}

.runstatus b {
  color: var(--papier);
  font-weight: 500;
}

.kolommen {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .kolommen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* De rij kolommen krijgt alle hoogte die overblijft.

   Elke kaart is een subgrid van acht rijen: naam, leverancier, badge, merkjes,
   leesvlak, snelheidslijn, metingen en verzoek-ID. Zo staat elke regel in alle
   kaarten op dezelfde hoogte, ook als een modelnaam of een SKU in de ene kaart
   op twee regels valt en in de andere niet. grid-auto-rows herhaalt het
   patroon, dus het werkt ook als de kaarten over meer rijen staan. */
.kolommen {
  flex: 1;
  min-height: 0;
  grid-auto-rows: auto auto auto auto minmax(9rem, 1fr) auto auto auto;
}

/* Vaste hoogte met eigen scroll, zodat de meetwaarden op hun plek blijven.
   De hoogte schaalt mee met het scherm: op een gewone laptop blijft er zo
   ruimte voor een kop of vijftien tekst, genoeg om de antwoorden echt naast
   elkaar te lezen in plaats van te moeten raden. Op een klein scherm zakt hij
   terug, en boven de 34rem wordt hij niet groter, want dan past de rij niet
   meer op één beeld. */
.kolommen .paneel {
  /* Wordt het scherm zo laag dat hier niets meer van te lezen valt, dan houdt
     het paneel deze hoogte en scrolt het tabblad eromheen. */
  min-height: 17rem;
  display: grid;
  grid-row: span 8;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
}

.kolommen .paneel-kop {
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0.3rem;
}

.kolommen .paneel-voet {
  grid-row: span 3;
  grid-template-rows: subgrid;
}

/* Eén meting per regel, label links en waarde rechts. In twee kolommen viel
   "kosten / 1.000" op een smalle kaart over twee regels. */
.kolommen .meting {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
}

.kolommen .meting > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.kolommen .meting dt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kolommen .meting dd {
  white-space: nowrap;
}

.paneel-kop {
  padding: 0.75rem 0.85rem 0.6rem;
  border-bottom: 1px solid var(--rand);
  display: grid;
  gap: 0.3rem;
}

.paneel-kop h3 {
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.leverancier {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--papier-zacht);
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--papier-zacht);
}

.bol {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: none;
}

/* Drie standen: vol, half, open bolletje. Naast de vorm staan altijd woorden. */
.badge-regionaal { color: var(--goed); }
.badge-regionaal .bol { background: currentColor; }

.badge-eu-datazone { color: var(--accent); }
.badge-eu-datazone .bol { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

.badge-wereldwijd { color: var(--let-op); }
.badge-wereldwijd .bol { background: none; }

/* Ondergrens voor het leesvlak. Past het geheel niet meer, dan scrolt het
   tabblad eromheen; wat er niet mag gebeuren is dat er nul regels tekst
   overblijven omdat het scherm laag is. */
.paneel-lijf {
  flex: 1;
  min-height: 9rem;
  overflow: auto;
  padding: 0.75rem 0.85rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rand) transparent;
}

/* Een antwoord dat langer is dan het vak liep halverwege een zin dood en dat
   leest als een fout. Deze vervaging aan de onderrand laat zien dat er meer is.
   Bij een kort antwoord valt hij over de achtergrond en zie je hem niet. */
.paneel-lijf {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
}

.paneel-lijf::-webkit-scrollbar { width: 8px; }
.paneel-lijf::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 4px; }

.antwoord {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.wacht {
  color: var(--papier-zacht);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.cursor {
  color: var(--accent);
  animation: knipper 1s steps(2, start) infinite;
}

@keyframes knipper {
  to { opacity: 0; }
}

.melding-fout {
  color: var(--let-op);
  font-size: 0.8125rem;
}

.paneel-voet {
  border-top: 1px solid var(--rand);
  padding: 0.55rem 0.85rem 0.65rem;
  display: grid;
  gap: 0.5rem;
}

.spark {
  width: 100%;
  height: 22px;
  display: block;
}

.spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.spark line {
  stroke: var(--rand);
  stroke-width: 1;
}

.meting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0;
}

.meting > div { min-width: 0; }

.meting dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papier-zacht);
}

.meting dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
}

.verzoek {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.verzoek span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--papier-zacht);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merkje {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merkje-snel { color: var(--goed); }
.merkje-goedkoop { color: var(--accent); }

.kop-merkjes {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.paneel[data-status="fout"] { border-color: var(--let-op); }
.paneel[data-status="fout"]::before { background: linear-gradient(90deg, transparent, var(--let-op), transparent); }

/* --- tabblad Modellen ---------------------------------------------------- */

.modellen-blad {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

table.stat {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.8125rem;
}

table.stat th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rand);
  background: var(--inkt-op);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papier-zacht);
  font-weight: 400;
  white-space: nowrap;
}

table.stat td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}

table.stat tr:last-child td {
  border-bottom: 0;
}

table.stat .num {
  text-align: right;
}

table.stat .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-naam {
  display: block;
  font-weight: 500;
}

.stat-lev {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--papier-vaag);
}

.stat-goed { color: var(--goed); }
.stat-letop { color: var(--let-op); }

/* De regels die niet met een prompt weg te praten zijn. */
.grenzen {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-op);
  padding: 0.7rem 0.85rem;
  display: grid;
  gap: 0.45rem;
}

.grenzen ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
  color: var(--papier-zacht);
  font-size: 0.8125rem;
}

/* Chrome verschuift de scrollpositie zelf als inhoud groeit. Bij een antwoord
   dat regel voor regel binnenkomt springt de kolom daardoor weg onder je ogen. */
.uitkomst,
.paneel-lijf,
[role="tabpanel"] {
  overflow-anchor: none;
}

/* Op een laag scherm gaat de ruimte naar de antwoorden en niet naar de kop. */
@media (max-height: 900px) {
  .blad {
    padding-top: 1rem;
  }

  .intro {
    margin-bottom: 0.65rem;
  }

  .intro h1 {
    font-size: 1.375rem;
  }

  .tabs {
    margin-bottom: 0.65rem;
  }

  #prompt {
    min-height: 4rem;
    max-height: 35vh;
  }

  .invoer {
    margin-bottom: 0.6rem;
  }
}

/* --- tab Eigen stukken -------------------------------------------------- */

.stukken {
  display: grid;
  gap: 1.5rem;
  max-width: 68rem;
}

.blokkop {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.sleepzone {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
  padding: 2rem 1rem;
  border: 1px dashed var(--veld-rand);
  border-radius: var(--radius);
  background: var(--veld);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sleepzone[data-over="true"] {
  border-color: var(--accent);
  background: var(--inkt-hoog);
}

.stappen {
  list-style: none;
  margin: 0;
  padding: 0.85rem;
  display: grid;
  gap: 0.4rem;
}

.stappen li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier-vaag);
}

.stappen li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--papier-vaag);
  flex: none;
}

.stappen li[data-staat="bezig"] {
  color: var(--papier);
}

.stappen li[data-staat="bezig"]::before {
  border-color: var(--accent);
  background: var(--accent);
  animation: pols 1.1s ease-in-out infinite;
}

.stappen li[data-staat="klaar"] {
  color: var(--papier-zacht);
}

.stappen li[data-staat="klaar"]::before {
  border-color: var(--goed);
  background: var(--goed);
}

.stappen li[data-staat="fout"] { color: var(--let-op); }
.stappen li[data-staat="fout"]::before { border-color: var(--let-op); background: var(--let-op); }

.stappen li small {
  color: var(--papier-zacht);
  font-size: 0.6875rem;
}

@keyframes pols {
  50% { opacity: 0.35; }
}

.doclijst {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.doclijst th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papier-zacht);
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--rand);
}

.doclijst td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}

.doclijst tbody tr:last-child td { border-bottom: 0; }

.doclijst .getal {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.doclijst .doe { text-align: right; }

.leeg {
  padding: 0.85rem;
  color: var(--papier-zacht);
  font-size: 0.8125rem;
}

.vraagrij {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.vraagrij select { width: auto; min-width: 12rem; }

.uitkomst {
  padding: 0.95rem 1.1rem;
  display: grid;
  gap: 0.75rem;
}

.uitkomst .antwoord { font-size: 0.9375rem; }

.cite {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 0.1em;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7em;
  vertical-align: super;
  cursor: pointer;
}

.cite:hover { text-decoration: underline; }

.bronnen { display: grid; gap: 0.4rem; }

.bron {
  border: 1px solid var(--rand);
  border-radius: 4px;
  background: var(--inkt-hoog);
  padding: 0.5rem 0.7rem;
}

.bron summary {
  cursor: pointer;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier-zacht);
}

.bron summary b { color: var(--papier); font-weight: 500; }

.bron[open] { border-color: var(--accent); }

.bron p {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--papier-zacht);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- tab Herkomst ------------------------------------------------------- */

.herkomst {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  max-width: 68rem;
  align-items: start;
}

@media (min-width: 900px) {
  .herkomst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .herkomst .breed { grid-column: 1 / -1; }
}

.vak {
  padding: 0.95rem 1.1rem 1.1rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.vak > h3 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.rijen {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  align-items: baseline;
}

.rijen dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--papier-zacht);
}

.rijen dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rijen dd.code {
  font-family: var(--mono);
  font-size: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.niet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.niet li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--papier-zacht);
  font-size: 0.875rem;
}

.niet li::before {
  content: "\00d7";
  color: var(--goed);
  font-family: var(--mono);
}

.filterproef {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.proefprompt {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier-zacht);
  border-left: 1px solid var(--rand);
  padding-left: 0.7rem;
}

.proefuitslag {
  width: 100%;
  border: 1px solid var(--rand);
  border-radius: 4px;
  background: var(--inkt-hoog);
  padding: 0.7rem 0.85rem;
  display: grid;
  gap: 0.5rem;
}

.proefuitslag[data-uitslag="tegengehouden"] { border-color: var(--goed); }
.proefuitslag[data-uitslag="doorgelaten"] { border-color: var(--let-op); }

.categorieen {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.categorieen th,
.categorieen td {
  text-align: left;
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-bottom: 1px solid var(--rand);
}

.categorieen th {
  font-weight: 400;
  color: var(--papier-zacht);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.625rem;
}

.categorieen tr:last-child td { border-bottom: 0; }

.idlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier-zacht);
}

.idlijst li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.idlijst b { color: var(--papier); font-weight: 500; }

/* --- tab Schrijven ------------------------------------------------------- */

/* Drie bronkaarten naast elkaar; op een smal scherm onder elkaar. */
.bronkaarten {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  flex: none;
}

@media (min-width: 900px) {
  .bronkaarten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bronkaart {
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.bronkaart-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bronkaart h3,
.keten-kop h3 {
  font-size: 0.9375rem;
}

.bronkaart-knoppen {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* Ingeklapt toont de kaart de eerste regels; Open laat alles zien. */
.brontekst {
  margin: 0;
  max-height: 7.5rem;
  overflow: hidden;
  white-space: pre-wrap;
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--papier-zacht);
}

.bronkaart[data-open="true"] .brontekst {
  max-height: none;
}

.bronkaart[data-aangepast="true"] h3::after {
  content: " · aangepast";
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--let-op);
}

textarea.brontekst {
  max-height: none;
  color: var(--papier);
}

.ketens {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 900px) {
  .ketens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.keten-kop {
  display: grid;
  gap: 0.5rem;
}

/* Label, keuze, label, keuze op één regel; de keuzes delen de ruimte. */
.keten-kop .vraagrij {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.keten-kop select {
  width: 100%;
  min-width: 0;
}

.keten .antwoord {
  white-space: pre-wrap;
}

/* De twee stappen onder elkaar, onderzoeker boven schrijver, elk met zijn
   eigen regel cijfers. Naast elkaar leest het als één brij van getallen. */
.keten .meting {
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.keten .concept summary {
  cursor: pointer;
}

.keten .concept .antwoord {
  margin-top: 0.5rem;
  color: var(--papier-zacht);
}

/* --- tab Test ------------------------------------------------------------ */

.meting-breed {
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

/* De gebeurtenissen van de stroom, in volgorde. Mono, want het zijn
   sleutels en getallen, geen lopende tekst. */
.stroomlog {
  margin: 0;
  padding: 0 0 0 1.5rem;
  display: grid;
  gap: 0.2rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier-zacht);
}

.stroomlog b {
  color: var(--papier);
  font-weight: 500;
}

/* --- tab Over ------------------------------------------------------------ */

.over {
  max-width: 64ch;
  padding: 1.5rem 1.75rem;
  display: grid;
  gap: 0.85rem;
}

.over h2 {
  font-size: 1.375rem;
}

.over p {
  color: var(--papier-zacht);
  text-wrap: pretty;
}

.over a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.over b {
  color: var(--papier);
  font-weight: 500;
}

/* --- foutstrook en meldingen -------------------------------------------- */

.strook {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--let-op);
  border-radius: var(--radius);
  background: var(--let-op-vlak);
  color: var(--papier);
  font-size: 0.875rem;
}

.tostbak {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 30;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--inkt-hoog);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--papier);
}

/* --- terughoudendheid --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- tab Kennisbank ----------------------------------------------------- */

/* Links de documenten om uit te kiezen, rechts de tekst van het gekozen
   document. Op een smal scherm staat de lijst boven de tekst. */
.kennisbank {
  display: grid;
  gap: 1rem;
  /* minmax(0, 1fr) en niet 1fr: anders maakt een lange regel in de tekst de
     kolom breder dan een telefoon en valt de rechterkant weg. */
  grid-template-columns: minmax(0, 1fr);
  max-width: 68rem;
  align-items: start;
}

@media (min-width: 900px) {
  .kennisbank {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

.kennisbank-lijst {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* De lijst met documenten blijft staan terwijl de tekst ernaast doorloopt.
   Zonder dit scrolt hij weg en weet je halverwege niet meer waar je bent.
   Alleen naast de tekst, want daaronder staat hij gewoon bovenaan. */
@media (min-width: 900px) {
  .kennisbank-lijst {
    position: sticky;
    top: 0;
  }
}

.kennisbank-lijst button {
  appearance: none;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: none;
  padding: 0.5rem 0.75rem;
  text-align: left;
  color: var(--papier-zacht);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.kennisbank-lijst button:hover {
  color: var(--papier);
  background: var(--inkt-op);
}

.kennisbank-lijst button[aria-current="true"] {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--inkt-op);
}

.kennisbank-tekst {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem 1.1rem;
}

.kennisbank-tekst h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.kennisbank-inhoud {
  max-height: none;
  overflow: visible;
  color: var(--papier);
}

/* --- tab Dashboard ------------------------------------------------------ */

/* Per afdeling een kop en per skill een paneel met drie cijfers. Zolang het
   voorbeeld is, draagt de kop een merkje. */
.dash {
  display: grid;
  gap: 1.5rem;
  max-width: 60rem;
  margin-top: 0.5rem;
}

.dash-kop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.dash-kop .icoon {
  width: 0.9rem;
  height: 0.9rem;
}

.dash-merk {
  margin-left: 0.25rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--let-op);
  letter-spacing: 0.1em;
}

.dash-skills {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .dash-skills {
    grid-template-columns: 1fr 1fr;
  }
}

.dash-skill {
  display: grid;
  gap: 0.9rem;
  padding: 0.95rem 1.1rem 1.1rem;
}

.dash-skill h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.dash-tegels {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.75rem;
}

.dash-tegels dd {
  font-size: 1.25rem;
}

.dash-som {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--papier-zacht);
}

/* Tekst die er wel hoort te staan maar niet gezien hoeft te worden, zoals het
   onderschrift van een tabel die al een kop heeft. */
.enkel-voorlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- een pagina met een vaste strook bovenin ----------------------------- */

/* Dezelfde opbouw als de Offertemaker: de naam van de pagina, het merk en de
   stand staan stil, en alles daaronder scrolt. Het paneel zelf scrolt dan
   niet meer; dat doet .blad-rol, anders loopt de schuifbalk langs de strook
   omhoog terwijl die niet meebeweegt. */
.blad > [role="tabpanel"].blad-vast:not([hidden]) {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.blad-strook {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.5rem 0 0.6rem;
  background: var(--inkt);
  border-bottom: 1px solid var(--rand);
}

.blad-strook h1 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Wat links hoort te blijven duwt de rest naar rechts, zoals in de strook van
   de Offertemaker. Is er geen beta-merk, dan doet de naam het zelf. */
.blad-strook .beta-merk,
.blad-strook h1:last-child {
  margin-right: auto;
}

.blad-strook-bij {
  margin: 0;
  font-size: 0.75rem;
  color: var(--papier-vaag);
  white-space: nowrap;
}

/* Een ondertitel in plaats van een stand is langer en mag wel afbreken. */
.blad-strook h1 + .blad-strook-bij {
  white-space: normal;
  text-wrap: pretty;
}

/* De stand rechts: welke dag er staat en wat die kostte. */
.blad-strook-merk {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--accent-vlak);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.blad-rol {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 1.25rem;
}

@media (max-width: 34rem) {
  .blad-strook {
    flex-wrap: wrap;
  }
  .blad-strook-bij {
    flex-basis: 100%;
  }
}


/* --- tab Logboek --------------------------------------------------------- */

/* Zeven dagen onder elkaar, per dag een kop met het totaal en daaronder de
   regels. Op een smal scherm lopen de gegevens van een regel achter elkaar
   door; vanaf 68rem staan ze in kolommen die over de hele breedte van het
   scherm uitwaaieren. De kolombreedtes staan alleen hier. */

.logboek-wissel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1.5rem;
}

.logboek-wissel button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: none;
  color: var(--papier-zacht);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.logboek-wissel button:hover {
  color: var(--papier);
}

.logboek-wissel button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-vlak);
  color: var(--accent);
}

/* Onder de lijst: verder terug in de tijd, dertig dagen per klik. */
.logboek-meer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1rem;
}

.logboek-meer p {
  margin: 0;
  color: var(--papier-zacht);
}

.logboek-dag {
  margin-bottom: 2.25rem;
}

/* Smal scherm: alles achter elkaar, de getallen rechts eronder. */
.logboek-dagkop,
.logboek-regels li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  padding: 0.55rem 0;
}

.logboek-dagkop {
  border-bottom: 1px solid var(--accent);
  color: var(--papier);
}

.logboek-dagkop h2 {
  margin: 0;
  font-size: 0.875rem;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--accent);
}

.logboek-regels {
  margin: 0;
  padding: 0;
  list-style: none;
}

.logboek-regels li {
  border-bottom: 1px solid var(--rand);
  font-size: 0.8125rem;
}

.logboek-regels li:last-child {
  border-bottom: none;
}

/* Wat er op een regel staat. Leeg is echt leeg: op een smal scherm neemt zo'n
   vak anders een gat in, en in de kolommen blijft de plek gewoon open. */
.logboek-tijd {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--papier-vaag);
}

.logboek-skill,
.logboek-beurten {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papier-vaag);
}

.logboek-wat {
  min-width: 0;
  text-wrap: pretty;
}

.logboek-model {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Het model in hetzelfde merkje als op de andere schermen, maar wat kleiner:
   in een lijst met regels mag het de omschrijving niet overschreeuwen. */
.logboek-model .model-merk {
  padding: 0 0.4rem 0 0.35rem;
  font-size: 0.625rem;
  gap: 0.3rem;
}

.logboek-model .model-merk::before {
  width: 0.3rem;
  height: 0.3rem;
}

/* De drie getallen horen bij elkaar gelezen te worden. Op een smal scherm
   vallen ze daarom samen op een nieuwe regel, rechts uitgelijnd. */
.logboek-cijfers {
  flex: 1 0 100%;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.logboek-in,
.logboek-uit,
.logboek-euro {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.logboek-in,
.logboek-uit {
  color: var(--papier-zacht);
}

.logboek-euro {
  color: var(--papier);
}

.logboek-dagkop .logboek-in,
.logboek-dagkop .logboek-uit,
.logboek-dagkop .logboek-euro {
  font-size: 0.8125rem;
}

/* De kolommen dragen geen kopje, dus in en uit krijgen een klein merkteken. */
.logboek-in::after {
  content: " in";
  color: var(--papier-vaag);
}

.logboek-uit::after {
  content: " uit";
  color: var(--papier-vaag);
}

/* Een actie waarin iets misging krijgt een streepje, geen rode schreeuw. */
.logboek-regels li[data-fout="ja"] {
  box-shadow: inset 2px 0 0 var(--let-op);
  padding-left: 0.5rem;
}

.logboek-leeg {
  color: var(--papier-vaag);
  font-size: 0.875rem;
}

/* --- vanaf hier echte kolommen, over de hele breedte --------------------- */

/* Acht kolommen met vaste maten voor alles wat kort is en de omschrijving die
   de rest opeet. Vaste maten, want de dagkop en de regels zijn losse rasters
   en moeten toch onder elkaar uitkomen. */
@media (min-width: 68rem) {
  .logboek-dagkop,
  .logboek-regels li {
    display: grid;
    grid-template-columns: 3.25rem 8.5rem minmax(6rem, 1fr) auto 5.5rem 7.5rem 7.5rem 7.5rem;
    align-items: baseline;
    gap: 1rem;
  }

  /* Het vak om de getallen lost zich op, zodat in, uit en kosten zelf in de
     laatste drie kolommen vallen, zowel in de dagkop als op een regel. */
  .logboek-cijfers {
    display: contents;
  }

  /* De dag zelf staat links; de drie totalen vallen in dezelfde kolommen als
     de getallen eronder. */
  .logboek-dagkop h2 {
    grid-column: 1 / 6;
  }

  .logboek-dagkop .logboek-in {
    grid-column: 6;
  }

  .logboek-regels li[data-fout="ja"] {
    padding-left: 0;
    margin-left: -0.5rem;
    padding-inline-start: 0.5rem;
  }
}

/* --- tab Skills --------------------------------------------------------- */

/* Bovenaan een tabblad per skill, in de vorm van de keuzeknoppen op het
   Logboek maar een maat groter en met het icoon van de skill, zodat ze lezen
   als de hoofdkeuze op de pagina. Daaronder dezelfde opbouw als de Kennisbank. */
.skills-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.skills-tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: none;
  color: var(--papier-zacht);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.skills-tabs [role="tab"] .icoon {
  width: 1.05rem;
  height: 1.05rem;
}

.skills-tabs [role="tab"]:hover {
  color: var(--papier);
  border-color: var(--papier-zacht);
}

.skills-tabs [role="tab"][aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-vlak);
  color: var(--accent);
}

.skills-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* minmax(0, 1fr): een lange regel in de systeemprompt mag de kolom niet
   breder maken dan het scherm. */
.skills-inhoud,
.skills-samenstelling {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  min-width: 0;
}
.skills-inhoud pre,
.skills-blokken li { overflow-wrap: anywhere; }
.skills-samenstelling p { margin: 0; }
.skills-samenstelling h4 { margin: 0.6rem 0 0; }

.skills-blokken {
  margin: 0 0 0 1.2rem;
  padding: 0;
  line-height: 1.6;
}
.skills-blokken code {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--accent);
}

/* De link naar de pagina Skills in de strook van een skill. */
.skill-uitleg {
  font-size: 0.8125rem;
  color: var(--papier-zacht);
}
.skill-uitleg:hover { color: var(--accent); }