/* Krava — huisstijl van de app zelf.
   Licht en papierachtig, want het product maakt witte Word-documenten.
   Eén inktblauw accent, 1px haarlijnen, geen gradiënten en geen gloed. */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/source-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/source-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* KOUD INKTZWAAT MET WARM MESSING.
     Het vorige palet was warm op warm: een bruinige achtergrond met een boter-
     geel accent. Twee warme tinten naast elkaar lezen als modder, niet als luxe.
     Daarom nu de omgekeerde spanning: een koude, blauwige bijna-zwarte basis
     (als natte inkt) met één verzadigd messing accent dat daardoor echt als
     metaal leest. Het papieren blad blijft warm — dat is het licht in de kamer. */
  --papier: oklch(0.155 0.026 205);
  --blad: oklch(0.218 0.028 205);
  --paneel: oklch(0.192 0.028 205);
  --paneel-2: oklch(0.232 0.029 205);

  /* Diepte via tinten, niet via schaduwen. Op een donkere achtergrond verdwijnen
     schaduwen; elk niveau krijgt daarom een iets lichtere eigen tint. */
  --verhoogd: oklch(0.262 0.030 205);

  /* inkt: koel gebroken wit, geen puur wit — dat trilt op bijna-zwart */
  --inkt: oklch(0.955 0.006 205);
  --inkt-2: oklch(0.79 0.018 205);
  --inkt-3: oklch(0.625 0.020 205);

  --lijn: oklch(0.305 0.032 205);
  --lijn-zacht: oklch(0.245 0.028 205);

  /* Messing, maar nu echt: hogere chroma en iets meer licht, zodat het goud
     wordt in plaats van boter. Alleen voor lijnen, actieve standen en het
     woordmerk — nooit voor grote vlakken. */
  --accent: oklch(0.885 0.052 88);
  --accent-inkt: oklch(0.93 0.045 90);
  --accent-vlak: oklch(0.285 0.022 88);
  --accent-lijn: oklch(0.47 0.040 88);

  /* Tweede accent met een eigen rol: vermiljoen, de rode pen van de corrector.
     Alleen voor signalen — het actieve streepje, een markering, een telmerk.
     Nooit voor knoppen, zodat het niet als foutmelding leest. */
  --sein: oklch(0.665 0.185 34);
  --sein-vlak: oklch(0.262 0.062 34);
  --sein-lijn: oklch(0.40 0.10 34);

  --goed: oklch(0.762 0.125 158);
  --goed-vlak: oklch(0.255 0.045 158);
  --let: oklch(0.805 0.118 75);
  --let-vlak: oklch(0.268 0.045 75);
  --fout: oklch(0.685 0.168 22);
  --fout-vlak: oklch(0.268 0.055 22);

  /* Ruimer dan strikt nodig. Dit is de grootste reden dat de app eerder krap
     aanvoelde: overal net genoeg ruimte in plaats van ruim. */
  --ruimte-xs: 5px;
  --ruimte-sm: 9px;
  --ruimte-md: 14px;
  --ruimte-lg: 20px;
  --ruimte-xl: 30px;
  --ruimte-2xl: 40px;

  --radius: 9px;
  --radius-groot: 15px;
  --schaduw-vel: 0 1px 2px oklch(0 0 0 / 0.5);
  --schaduw-blad: 0 1px 2px oklch(0 0 0 / 0.42), 0 18px 44px oklch(0 0 0 / 0.42);
  --schaduw-paneel: inset 0 1px 0 oklch(1 0 0 / 0.045), 0 10px 30px oklch(0 0 0 / 0.3);

  /* ---------------------------------------------------------------------
     Ruimte: één dieptesysteem voor alles wat los boven de pagina zweeft.

     De vensters, menu's en het toegangsscherm zijn geen platte vlakken maar
     voorwerpen die boven het werkblad hangen. Dat is geen decoratie: het
     zegt waar je bent. Een venster dat vooruitkomt vraagt aandacht, het
     werkblad erachter doet even niet mee, en een veld dat je aanklikt licht
     op alsof je het optilt.

     Alles met CSS-transforms — geen WebGL, geen bibliotheek, geen extern
     verzoek. Dat is een eis van dit project, niet een tekortkoming: het houdt
     het product licht en het werkt ook zonder internet.

     DE KANTELING IS KLEIN EN MET OPZET
     Dit ontwerp is van papier en precisie. Een venster dat met je muis
     meedraait als een kaartje op een beursvloer hoort daar niet bij. De
     kanteling is daarom een paar tienden van een graad: je voelt dat het
     driedimensionaal is zonder dat je het ziet bewegen.
     --------------------------------------------------------------------- */
  --diepte-perspectief: 1400px;
  --diepte-achter: -60px;
  --diepte-kaart: 0px;
  --diepte-voor: 40px;
  --diepte-kantel: 0.6deg;

  /* De lichtbron staat boven en voor de pagina: het toegangsscherm heeft een
     lichte plek bovenaan, en het messing leest als metaal door het licht van
     boven. De schaduwen waaieren daarom naar beneden uit, met een korte
     tegenhanger boven zodat het voorwerp niet los lijkt te zweven. */
  --schaduw-zweef:
    inset 0 1px 0 oklch(1 0 0 / 0.06),
    0 1px 2px oklch(0 0 0 / 0.5),
    0 12px 24px oklch(0 0 0 / 0.34),
    0 36px 72px oklch(0 0 0 / 0.44);
  --schaduw-zweef-hoog:
    inset 0 1px 0 oklch(1 0 0 / 0.08),
    0 2px 4px oklch(0 0 0 / 0.5),
    0 22px 44px oklch(0 0 0 / 0.38),
    0 60px 110px oklch(0 0 0 / 0.5);

  /* Messing met een lichte glans: onderaan dieper, bovenaan lichter. Zo leest
     het als metaal in plaats van als een egale gele kleur. */
  --messing-glas: linear-gradient(180deg, oklch(0.885 0.128 84), oklch(0.795 0.128 79));

  --ui-font: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display-font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --schuif: oklch(0.33 0.030 205);
  --schuif-hover: oklch(0.43 0.032 205);

  /* Beweging. De bandbreedtes komen uit de richtlijnen: micro 100-200ms,
     algemeen 150-400ms, paginawissel 300-500ms. Daarboven voelt het traag. */
  --duur-micro: 130ms;
  --duur-snel: 180ms;
  --duur: 320ms;
  --duur-traag: 460ms;
  --duur-verhaal: 820ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-uit: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-uit: cubic-bezier(0.65, 0, 0.35, 1);

  /* Zorgt dat keuzelijsten, schuifbalken en autofill meedoen met het donkere thema. */
  color-scheme: dark;
}

/* Getal-achtige eigen variabelen die de browser soepel kan interpoleren.
   Zonder @property springt een custom property in stapjes in plaats van te
   bewegen, en dat kost elke frame een herberekening van de stijl. */
@property --glans-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --glans-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --vulstand {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Fijn korreltje over de donkere vlakken. Het haalt de vlakheid eraf die
   donkere thema's zo goedkoop maakt, en het is één tegel van 2 kB. */
.korrel {
  position: relative;
}
.korrel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  border-radius: inherit;
}

/* Typografie: titels krijgen evenwichtige regels, lopende tekst geen losse
   laatste woordjes. Twee regels CSS die handmatig gepriegel overbodig maken. */
h1, h2, h3, .kop, .plan-naam, .dash-plan {
  text-wrap: balance;
}
p, li, .hint, .klein {
  text-wrap: pretty;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 15px/1.6 var(--ui-font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.verborgen { display: none !important; }

#app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
}

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

.topbar {
  display: flex;
  align-items: center;
  gap: var(--ruimte-lg);
  padding: 13px var(--ruimte-xl);
  background: var(--paneel);
  border-bottom: 1px solid var(--lijn);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.03) inset;
}

.logo {
  font-family: var(--display-font);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--inkt);
}
.logo span { color: var(--accent); }

.projectveld {
  display: flex;
  align-items: center;
  gap: var(--ruimte-sm);
  flex: 1;
  min-width: 0;
}
.projectveld input {
  flex: 1 1 auto;
  /* Een minimum, anders duwt een lange projectnaam in de kiezer dit veld dicht.
     Dat is gemeten: met een titel van 78 tekens werd de kiezer 696 px breed en
     dit veld 26 px. Dan staat er een smal leeg staafje in de balk waar je hoort
     te typen, en dat ziet eruit als een fout in de opmaak — want dat is het. */
  min-width: 160px;
  max-width: 460px;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 8px;
  border-radius: var(--radius);
  font: 600 14px/1.4 var(--ui-font);
  color: var(--inkt);
  text-overflow: ellipsis;
}
.projectveld input:hover { border-color: var(--lijn); }
.projectveld input:focus { outline: none; border-color: var(--accent); background: var(--blad); }

/* De projectkiezer groeit mee met de langste projectnaam en kan daardoor het
   hele veld opeisen. Een bovengrens en afkapping met puntjes houdt de balk in
   het gareel; de volledige naam zie je als je hem openklapt.
   De ondergrens is er om dezelfde reden als bij het titelveld: zonder minimum
   wordt de kiezer zélf een leeg staafje zodra het scherm krapper wordt (gemeten:
   26 px op 940 px breed). */
.projectveld select {
  flex: 0 1 auto;
  min-width: 130px;
  max-width: 240px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.topacties { display: flex; align-items: center; gap: var(--ruimte-sm); }

.meter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  padding-right: var(--ruimte-sm);
}
.meter-waarde { font-weight: 600; font-variant-numeric: tabular-nums; }
.meter-label { font-size: 10px; color: var(--inkt-3); font-variant-numeric: tabular-nums; letter-spacing: .07em; text-transform: uppercase; }

/* ---------------- knoppen ---------------- */

.knop {
  font: 500 13.5px/1 var(--ui-font);
  color: var(--inkt);
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 10px 15px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.knop:hover:not(:disabled) { background: var(--paneel-2); border-color: var(--inkt-3); }
.knop:disabled { opacity: .45; cursor: default; }
.knop.primair {
  background: var(--messing-glas);
  border-color: oklch(0.80 0.045 88);
  color: oklch(0.19 0.014 72);
  font-weight: 600;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.28);
}
.knop.primair:hover:not(:disabled) {
  background: linear-gradient(180deg, oklch(0.925 0.115 86), oklch(0.845 0.125 80));
  border-color: oklch(0.78 0.12 80);
}
/* Op het lichte vel is het accent donkerder, dus daar moet het opschrift licht zijn. */
.document .knop.primair { color: oklch(0.985 0.004 85); background: var(--accent); box-shadow: none; }
.knop.klein { padding: 7px 12px; font-size: 12.5px; }
.knop.breed { width: 100%; }
.knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------- werkblad ---------------- */

.werkblad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 0;
}
#app.details-dicht .werkblad { grid-template-columns: minmax(0, 1fr); }
#app.details-dicht .paneel.rechts { display: none; }

.blad {
  display: grid;
  /* Het document krijgt de ruimte; de lade mag nooit alles opeisen. */
  grid-template-rows: minmax(240px, 1fr) auto;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--lijn);
}
#app.details-dicht .blad { border-right: none; }

/* ---------------- het document ---------------- */

.document {
  overflow-y: auto;
  padding: var(--ruimte-2xl) var(--ruimte-xl) 64px;

  /* Het vel blijft licht, ook in een donkere app. Dat is geen compromis maar het
     idee: een verlicht vel in een donkere kamer. Bovendien moet het scherm laten
     zien wat Word straks afdrukt, en dat is een witte pagina met donkere tekst.
     Door hier de lichte waarden opnieuw te zetten, klopt elke regel die op het
     vel staat automatisch — zonder ze allemaal apart te hoeven aanpassen. */
  --blad: oklch(0.978 0.006 85);
  --paneel: oklch(0.955 0.007 85);
  --paneel-2: oklch(0.925 0.008 85);
  --inkt: oklch(0.255 0.012 85);
  --inkt-2: oklch(0.44 0.011 85);
  --inkt-3: oklch(0.615 0.009 85);
  --lijn: oklch(0.895 0.007 85);
  --lijn-zacht: oklch(0.935 0.005 85);
  --accent: oklch(0.48 0.045 88);
  --accent-inkt: oklch(0.40 0.042 88);
  --accent-vlak: oklch(0.945 0.020 88);
  --accent-lijn: oklch(0.80 0.038 88);
  --sein: oklch(0.53 0.19 32);
  --sein-vlak: oklch(0.94 0.04 32);
  --sein-lijn: oklch(0.78 0.10 32);
  --verhoogd: oklch(0.955 0.007 85);
  --goed: oklch(0.48 0.1 158);
  --goed-vlak: oklch(0.94 0.03 158);
  --let: oklch(0.55 0.11 78);
  --let-vlak: oklch(0.945 0.04 78);
  --fout: oklch(0.5 0.15 28);
  --fout-vlak: oklch(0.945 0.03 28);
  --schaduw-blad: 0 1px 2px oklch(0 0 0 / 0.5), 0 18px 45px oklch(0 0 0 / 0.38);
  --schuif: oklch(0.8 0.01 85);
  --schuif-hover: oklch(0.7 0.01 85);
  /* Het vel is licht, dus native bediening erop ook. */
  color-scheme: light;

  background: var(--papier);
  /* Een nauwelijks zichtbaar licht van boven, zodat het vel loskomt van de
     achtergrond. Geen kleurverloop, alleen minder licht aan de randen. */
  background-image: radial-gradient(120% 90% at 50% -10%, oklch(0.26 0.030 205) 0%, oklch(0.155 0.009 72) 62%);

  /* Deze variabelen zet app.js uit de huisstijl, zodat het scherm laat zien
     wat er in Word uitkomt. */
  --doc-font: "Segoe UI", sans-serif;
  --doc-kopfont: "Segoe UI", sans-serif;
  --doc-size: 14px;
  --doc-accent: #1F3A93;
  --doc-kop2: #2E5BA8;
  --doc-kop3: #4A6FA5;
  --doc-inkt: #1A1A1A;
  --doc-h1: 22px;
  --doc-h2: 18px;
  --doc-h3: 15px;
  --doc-beeldbreedte: 100%;
}

.document > .sectie,
.document > .leegstaat,
.document > .doc-kop {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.doc-kop {
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw-blad);
  padding: var(--ruimte-xl) 40px;
  margin-bottom: var(--ruimte-lg);
}
.doc-kop .omslag-titel { font: 600 var(--doc-h1)/1.25 var(--doc-kopfont); color: var(--doc-inkt); }
.doc-kop .omslag-sub { margin-top: 6px; color: var(--inkt-2); font-size: 14px; }
.doc-kop .omslag-meta { margin-top: var(--ruimte-md); font-size: 12.5px; color: var(--inkt-3); }

.sectie {
  /* Een vel dat op het bureau ligt: van boven iets lichter, met een zachte
     schaduw eronder. Een egaal wit vlak leest als een tekstvak. */
  background: linear-gradient(180deg, oklch(0.99 0.005 85), var(--blad));
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw-blad);
  padding: var(--ruimte-xl) 44px var(--ruimte-2xl);
  margin-bottom: var(--ruimte-lg);
  position: relative;
}
.sectie.sub { margin-left: 28px; }

.sectie-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ruimte-md);
  margin-bottom: var(--ruimte-sm);
}
.sectie-kop h2 {
  margin: 0;
  font: 600 var(--doc-h2)/1.3 var(--doc-kopfont);
  color: var(--doc-kop2);
  letter-spacing: -0.005em;
}
.sectie.sub .sectie-kop h2 { font-size: var(--doc-h3); color: var(--doc-kop3); }
.sectie-kop .nummers { font-size: 11.5px; color: var(--inkt-3); margin-top: 3px; font-variant-numeric: tabular-nums; }

.sectie-acties { display: flex; gap: 4px; flex-shrink: 0; opacity: .35; transition: opacity .12s ease; }
/* Deze knoppen staan op het lichte vel, niet op de donkere schil. */
.sectie-acties .knop {
  background: var(--paneel-2);
  border-color: var(--lijn);
  color: var(--inkt-2);
}
.sectie-acties .knop:hover:not(:disabled) { background: var(--paneel); color: var(--inkt); border-color: var(--inkt-3); }
.sectie:hover .sectie-acties,
.sectie:focus-within .sectie-acties { opacity: 1; }

.sectie-doel {
  font-size: 12.5px;
  color: var(--inkt-3);
  border-top: 1px dashed var(--lijn);
  padding-top: var(--ruimte-sm);
  margin: var(--ruimte-sm) 0 var(--ruimte-md);
}

.sectie-tekst {
  font: var(--doc-size)/1.7 var(--doc-font);
  color: var(--doc-inkt);
  white-space: pre-wrap;
  cursor: text;
  border-radius: var(--radius);
  padding: 2px 0;
}
.sectie-tekst.vacant { color: var(--inkt-3); font-style: italic; cursor: text; }
.sectie-tekst:hover { outline: 1px dashed var(--lijn); outline-offset: 4px; }

.sectie textarea {
  width: 100%;
  min-height: 220px;
  font: var(--doc-size)/1.7 var(--doc-font);
  color: var(--doc-inkt);
  background: var(--paneel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--ruimte-md);
  resize: vertical;
}
.sectie textarea:focus { outline: none; }

.figuurzicht {
  margin: var(--ruimte-lg) 0 var(--ruimte-sm);
  width: var(--doc-beeldbreedte);
}
.figuurzicht img {
  width: 100%;
  display: block;
  border: 1px solid var(--lijn);
  border-radius: 3px;
  background: var(--blad);
}
.figuurzicht .bijschrift {
  font: 12.5px/1.5 var(--doc-font);
  color: var(--inkt-2);
  margin-top: 6px;
}
.figuurzicht .bijschrift strong { color: var(--inkt); font-weight: 600; }
.figuurzicht .bijschrift strong::before { content: "Figuur — "; color: var(--inkt-3); font-weight: 500; }
.figuurzicht.ontbreekt div:first-child {
  height: 90px;
  border: 1px dashed var(--fout);
  border-radius: 3px;
  background: var(--fout-vlak);
}

/* de figuur waar je met slepen naartoe gaat */
.sectie.sleept-niet,
.figuurzicht.sleept-niet { opacity: .45; }
.sectie.sleepdoel { border-color: var(--accent); background: var(--accent-vlak); }

/* ---------------- lege staat ---------------- */

.leegstaat {
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw-blad);
  padding: 40px;
  margin-top: var(--ruimte-xl);
  text-align: center;
}
.leegstaat h1 {
  margin: 0 0 var(--ruimte-sm);
  font: 600 22px/1.3 var(--ui-font);
  letter-spacing: -0.01em;
}
.leegstaat > p { margin: 0 auto var(--ruimte-lg); max-width: 52ch; color: var(--inkt-2); }
.leegstaat-acties { display: flex; gap: var(--ruimte-sm); justify-content: center; margin-bottom: var(--ruimte-xl); }
.leegstaat .uitleg {
  margin: 0;
  text-align: left;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ruimte-sm) var(--ruimte-lg);
  max-width: 460px;
  margin: 0 auto;
}
.leegstaat .uitleg dt { font-weight: 600; font-size: 13px; }
.leegstaat .uitleg dd { margin: 0; color: var(--inkt-2); font-size: 13px; }

/* ---------------- figurenlade ---------------- */

.figurenlade {
  border-top: 1px solid var(--lijn);
  background: var(--paneel);
  padding: var(--ruimte-md) var(--ruimte-lg);
  max-height: 26vh;
  overflow-y: auto;
}
/* Met een paneel open is er meer hoogte nodig, anders valt de knop buiten beeld. */
.figurenlade.met-paneel { max-height: 52vh; }

.lade-kop { display: flex; align-items: center; gap: var(--ruimte-sm); flex-wrap: wrap; }
.lade-kop h2 { margin: 0; font: 600 10.5px/1 var(--ui-font); letter-spacing: .09em; text-transform: uppercase; color: var(--inkt-3); }
.lade-ruimte { flex: 1; }

.badge {
  font: 600 11px/1 var(--ui-font);
  font-variant-numeric: tabular-nums;
  background: var(--paneel-2);
  color: var(--inkt-2);
  border: 1px solid var(--lijn);
  border-radius: 20px;
  padding: 3px 7px;
}

.dropzone {
  margin-top: var(--ruimte-sm);
  border: 1px dashed var(--lijn);
  border-radius: var(--radius);
  padding: 10px var(--ruimte-md);
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-sm);
  color: var(--inkt-2);
  font-size: 12.5px;
}
.dropzone strong { color: var(--inkt); font-size: 13px; }
.dropzone.boven { border-color: var(--accent); background: var(--accent-vlak); }

/* ---------------- rubric ----------------
   De rubric is het beoordelingsformulier waaraan het document moet voldoen.
   De criteria krijgen een genummerde lijst met het gewicht erachter, en de
   uitslag per criterium een gekleurd label. De kleuren komen uit de huisstijl:
   gehaald is het accent, deels is een tussenkleur, en niet gehaald blijft
   rood. Groen zou hier niet passen — dat staat nergens in dit ontwerp. */

.rubric-acties {
  display: flex;
  align-items: center;
  gap: var(--ruimte-sm);
  flex-wrap: wrap;
  margin-top: var(--ruimte-md);
}

.rubric-lijst {
  margin: var(--ruimte-sm) 0 0;
  padding-left: 1.4em;
  display: grid;
  gap: var(--ruimte-sm);
}
.rubric-lijst li { color: var(--inkt); font-size: 13.5px; line-height: 1.5; }
.rubric-lijst li strong { display: block; }
/* De eisen en het "let op" horen ELK op hun eigen regel. Zonder display:block
   lopen ze aan elkaar vast — "scherp geformuleerdLet op: Is het onderwerp
   afgebakend?" — en dat leest als één zin die nergens op slaat. */
.rubric-lijst li .eisen { display: block; color: var(--inkt-2); }
.rubric-lijst li .let-op { display: block; color: var(--inkt-3); font-size: 12.5px; }

/* Het sleepvlak van de rubric heeft een kop en een uitleg onder elkaar. De
   gewone .dropzone zet ze naast elkaar met uitlijnen op de basislijn, en dat is
   goed voor één regel tekst maar niet hiervoor: op een smalle kolom breekt de
   kop dan af na elk woord. */
.dropzone.rubric-sleep {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
}
.dropzone.rubric-sleep .hint { display: block; }
.rubric-weegt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  font-size: 11px;
  color: var(--inkt-2);
}

.rubric-uitslag {
  margin-top: var(--ruimte-md);
  display: grid;
  gap: var(--ruimte-sm);
}
.rubric-regel {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 10px var(--ruimte-md);
}
.rubric-regel .kop {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-sm);
  flex-wrap: wrap;
}
.rubric-regel .naam { font-size: 13.5px; color: var(--inkt); font-weight: 600; }
.rubric-regel .waarom { color: var(--inkt-2); font-size: 13px; margin-top: 4px; line-height: 1.5; }
.rubric-regel .plek { color: var(--inkt-3); font-size: 12.5px; margin-top: 4px; }

.rubric-label {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  border: 1px solid var(--lijn);
  color: var(--inkt-2);
  white-space: nowrap;
}
.rubric-label.gehaald { border-color: var(--accent); color: var(--accent); }
.rubric-label.deels { border-color: var(--let); color: var(--let); }
.rubric-label.niet { border-color: var(--fout); color: var(--fout); }
.rubric-label.niet-beoordeeld { border-style: dashed; }

.rubric-oordeel {
  margin-top: var(--ruimte-md);
  padding: 10px var(--ruimte-md);
  border-left: 2px solid var(--accent);
  background: var(--accent-vlak);
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--inkt);
}
.rubric-telling { font-size: 13px; color: var(--inkt-2); }

/* De rubrictekst is vaak een tabel uit Word en dus lang. Veertien regels past,
   en hij mag met de hand groter gemaakt worden. Het lettertype is het gewone
   tekstlettertype en niet iets monospaced: een rubric uit Word heeft geen
   uitgelijnde kolommen meer zodra hij geplakt is, dus daar is niets mee gewonnen. */
#rubricTekst {
  min-height: 210px;
  resize: vertical;
  font-size: 12.5px;
  line-height: 1.45;
}

/* Panelen in de figurenlade: website opnemen en bewegend beeld maken. */.lade-paneel {
  margin-top: var(--ruimte-sm);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--paneel-2);
  padding: var(--ruimte-sm) var(--ruimte-md) var(--ruimte-md);
}
.paneel-kop { display: flex; align-items: baseline; gap: var(--ruimte-sm); flex-wrap: wrap; }
.paneel-kop strong { font-size: 13px; }
.paneel-kop .hint { flex: 1; min-width: 220px; margin: 0; }
.paneel-sluit {
  background: none;
  border: 0;
  color: var(--inkt-3);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.paneel-sluit:hover { color: var(--inkt); }
.paneel-rij {
  display: flex;
  align-items: flex-end;
  gap: var(--ruimte-sm);
  flex-wrap: wrap;
  margin-top: var(--ruimte-sm);
}
.paneel-rij > input[type="url"] {
  flex: 1;
  min-width: 240px;
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  color: var(--inkt);
  font: 13px/1.4 var(--ui-font);
  padding: 9px 11px;
}
.paneel-rij > input[type="url"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.paneel-rij select {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  color: var(--inkt);
  font: 12.5px/1.4 var(--ui-font);
  padding: 9px 10px;
}
.paneel-rij .veld { margin: 0; }
.paneel-rij .veld span { display: block; margin-bottom: 4px; }

.beweging-keuze {
  display: flex;
  gap: var(--ruimte-sm);
  overflow-x: auto;
  padding: var(--ruimte-sm) 0 2px;
}
.beweging-keuze label {
  position: relative;
  flex: 0 0 132px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paneel);
}
.beweging-keuze label:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.beweging-keuze input { position: absolute; top: 6px; left: 6px; accent-color: var(--accent); }
.beweging-keuze img { width: 100%; height: 62px; object-fit: cover; display: block; border-bottom: 1px solid var(--lijn); }
.beweging-keuze span {
  display: block;
  padding: 6px 7px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--inkt-2);
  max-height: 42px;
  overflow: hidden;
}
.beeldkaart .status.bewegend { color: var(--accent); }
.beeldkaart .bron-regel {
  font-size: 10.5px;
  color: var(--inkt-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Waarschuwing onderin wanneer een open tab oudere code draait dan de server. */.versiebalk {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--ruimte-sm);
  padding: 9px 12px 9px 16px;
  border: 1px solid var(--accent-lijn, var(--lijn));
  border-radius: 999px;
  background: var(--paneel-2);
  color: var(--inkt);
  font-size: 12.5px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
  animation: versiebalk-in var(--duur, 300ms) var(--ease, ease-out);
}
@keyframes versiebalk-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .versiebalk { animation: none; }
}

/* ------------------------------------------------------------------ *
 * Bijsnijden: een deel van een pagina kiezen of zelf een kader trekken
 * ------------------------------------------------------------------ */

.snijder {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(0 0 0 / 62%);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
}
.snijder-doos {
  display: flex;
  flex-direction: column;
  width: min(1100px, 94vw);
  max-height: 94vh;
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 70px rgb(0 0 0 / 55%);
}
.snijder-kop {
  display: flex;
  align-items: center;
  gap: var(--ruimte-sm);
  flex-wrap: wrap;
  padding: var(--ruimte-sm) var(--ruimte-md);
  border-bottom: 1px solid var(--lijn);
  background: var(--paneel-2);
}
.snijder-kop strong { font-size: 13px; }
.snijder-kop .hint { margin: 0; }
.snijder-ruimte { flex: 1; }
.snijder-presets { display: flex; gap: 5px; }
.snijder-presets button {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: 7px;
  color: var(--inkt-2);
  font: 11.5px/1 var(--ui-font);
  padding: 6px 9px;
  cursor: pointer;
}
.snijder-presets button:hover { color: var(--accent-inkt); border-color: var(--accent-lijn); }
.snijder-veld {
  position: relative;
  overflow: auto;
  background: var(--achter, #14161c);
  padding: var(--ruimte-md);
  cursor: crosshair;
}
.snijder-beelddoos { position: relative; width: 100%; line-height: 0; }
.snijder-veld img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* Slepen op de afbeelding is een selectie maken, geen pagina schuiven. In de
   "delen"-stand wordt er niets getekend en mag het gewoon scrollen. */
.snijder:not(.delen) .snijder-beelddoos { touch-action: none; }
.snijder-vak {
  position: absolute;
  border: 2px solid var(--accent);
  background: rgb(255 255 255 / 8%);
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 45%);
  pointer-events: none;
  display: none;
}
.snijder-delen { position: absolute; inset: 0; }
.snijder-deel {
  position: absolute;
  border: 2px solid var(--accent-lijn);
  border-radius: 4px;
  background: rgb(176 129 39 / 12%);
  cursor: pointer;
  transition: background var(--duur-snel, 150ms);
}
.snijder-deel:hover { background: rgb(176 129 39 / 26%); border-color: var(--accent); }
.snijder-deel span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  background: var(--accent);
  color: #16202e;
  font: 600 10.5px/1 var(--ui-font);
  padding: 3px 6px;
  border-radius: 4px 4px 0 0;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.snijder-voet {
  padding: var(--ruimte-sm) var(--ruimte-md);
  border-top: 1px solid var(--lijn);
  font-size: 11.5px;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}
.beeldkaart .mini-acties button.sterk { color: var(--accent-inkt); }

/* ---------------- het startscherm ----------------

   Een leeg document is geen leegte maar een vraag. Eén vraag, één knop met de
   prijs erop, en de beelden er meteen bij. Alles wat verder in de app zit (de
   assisentbalk, de tabs, de werkbalk) is er pas als het iets kan doen. */

.start {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--ruimte-2xl);
  /* Een vel, net als het document. Zonder deze achtergrond staat de tekst in de
     donkere schil en valt hij weg: de kleuren van dit deel van het scherm zijn
     die van het lichte vel, niet die van de app eromheen. */
  background: var(--blad);
  border: 1px solid var(--lijn-zacht, var(--lijn));
  border-radius: 2px;
  box-shadow: var(--schaduw-blad);
}
.start h1 {
  font: 600 clamp(26px, 4vw, 34px) / 1.15 var(--display-font);
  color: var(--inkt);
  margin: 0 0 var(--ruimte-sm);
}
.start-lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--inkt-2);
  margin: 0 0 var(--ruimte-lg);
}
.start textarea {
  width: 100%;
  min-height: 96px;
  font: 400 15px/1.6 var(--ui-font);
  padding: var(--ruimte-md);
  background: var(--blad);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  resize: vertical;
}
.start textarea::placeholder { color: var(--inkt-3); }
.start textarea:focus { outline: none; border-color: var(--accent); }

.start-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-sm);
  margin-top: var(--ruimte-md);
}
.start-acties .knop.primair.groot {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-sm);
  min-height: 46px;
  font-size: 14.5px;
}
.start-prijs {
  font: 500 12px/1 var(--ui-font);
  padding: 4px 8px;
  border-radius: 999px;
  /* Vaste kleuren en geen tokens: dit label staat op de messing knop en moet
     daar leesbaar blijven, ongeacht de kleurenset van het vak eromheen. */
  background: oklch(0.32 0.03 88);
  color: oklch(0.95 0.03 88);
  white-space: nowrap;
}

.start-drop {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: var(--ruimte-md);
  padding: var(--ruimte-md);
  border: 1px dashed var(--lijn);
  border-radius: var(--radius);
  color: var(--inkt-2);
}
.start-drop strong { font-size: 13.5px; color: var(--inkt); }
.start-drop span { font-size: 12.5px; color: var(--inkt-3); }
.start-drop.boven { border-color: var(--accent); background: var(--accent-vlak); }

.start-uitleg {
  list-style: none;
  margin: var(--ruimte-lg) 0 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--inkt-2);
}
/* Geen flex met gap: dan wordt elk stukje tekst een eigen vak en komt er een
   spatie te staan tussen de laatste woorden en de punt. */
.start-uitleg li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 5px;
}
.start-uitleg li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--accent);
  font-weight: 700;
}
.start-uitleg .los {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent-inkt);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---------------- wat gaat dit kosten ---------------- */

.tokenvraag {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--ruimte-lg);
  background: oklch(0.18 0.02 90 / 0.72);
  backdrop-filter: blur(2px);
}
.tokenvraag-doos {
  width: min(440px, 100%);
  padding: var(--ruimte-lg);
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
}
.tokenvraag-doos h2 { margin: 0 0 6px; font: 600 17px/1.3 var(--kop-font); color: var(--inkt); }
.tokenvraag-regels {
  list-style: none;
  margin: var(--ruimte-md) 0 0;
  padding: 0;
}
.tokenvraag-regels li {
  display: flex;
  justify-content: space-between;
  gap: var(--ruimte-md);
  padding: 8px 0;
  border-bottom: 1px solid var(--lijn-zacht, var(--lijn));
  font-size: 13px;
  color: var(--inkt-2);
}
.tokenvraag-regels li em { font-style: normal; color: var(--inkt-3); }
.tokenvraag-regels li strong { color: var(--inkt); font-variant-numeric: tabular-nums; }
.tokenvraag-totaal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--ruimte-sm);
  padding-top: var(--ruimte-sm);
  border-top: 1px solid var(--accent-lijn);
  font-size: 13px;
  color: var(--inkt-2);
}
.tokenvraag-totaal strong { font: 600 20px/1 var(--ui-font); color: var(--accent); font-variant-numeric: tabular-nums; }
.tokenvraag-acties {
  display: flex;
  justify-content: flex-end;
  gap: var(--ruimte-sm);
  margin-top: var(--ruimte-lg);
}
.tokenvraag-acties .knop { min-width: 120px; justify-content: center; }

@media (max-width: 900px) {
  /* Niet `padding: var(--ruimte-lg) 0`: dan valt de tekst tegen de rand van het
     vel in plaats van erin. */
  .start { padding: var(--ruimte-lg); }
  .start-acties { flex-direction: column; }
  .start-acties .knop { width: 100%; min-height: 48px; }
  .tokenvraag-acties { flex-direction: column-reverse; }
  .tokenvraag-acties .knop { width: 100%; min-height: 48px; }
}

/* Op een leeg document blijven alleen de stappen over die je nu kunt zetten. */
#app.nog-geen-plan .chips .veld,
#app.nog-geen-plan .chip-scheiding,
#app.nog-geen-plan #btnHtml,
#app.nog-geen-plan .stap[data-stap="review"] { display: none; }

/* Zolang je nog niet begonnen bent, is het startscherm het enige op het scherm.

   De figurenlade, de assistent en de instellingen horen bij het werkblad, niet
   bij de vraag wat je wilt maken. Ze komen tevoorschijn zodra er een plan is —
   en dat is precies het "je weet niet waar je moet beginnen" waar een vol scherm
   je mee opzadelt. */
#app.op-start .figurenlade,
#app.op-start .composer,
#app.op-start .paneel.rechts { display: none; }
#app.op-start .werkblad { grid-template-columns: minmax(0, 1fr); }
#app.op-start .blad { border-right: none; }

/* Nieuw project: naast de projectkiezer, en op een smal scherm achter de
   "⋯"-knop, want daar is geen ruimte voor nog een knop in de balk. */
#btnNieuwProject { flex: 0 0 auto; white-space: nowrap; }

/* Wat dit document bij elkaar heeft gekost, in de bovenbalk. */.token-teller {
  align-self: center;
  padding: 5px 9px;
  border: 1px solid var(--accent-lijn);
  border-radius: 999px;
  font: 500 11.5px/1 var(--ui-font);
  color: var(--accent-inkt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}

/* Tokens in het dashboard. */
.dash-getal { font: 600 34px/1 var(--kop-font, var(--ui-font)); color: var(--accent); margin: 2px 0 6px; }
.token-prijzen { list-style: none; margin: 0; padding: 0; }
.token-prijzen li {
  display: flex;
  justify-content: space-between;
  gap: var(--ruimte-sm);
  padding: 5px 0;
  border-bottom: 1px solid var(--lijn-zacht, var(--lijn));
  font-size: 12.5px;
  color: var(--inkt-2);
}
.token-prijzen li:last-child { border-bottom: 0; }
.token-prijzen li strong { color: var(--inkt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.token-prijzen li em { color: var(--inkt-3); font-style: normal; }
.token-boek { list-style: none; margin: 0; padding: 0; }
.token-boek li {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-sm);
  padding: 6px 0;
  border-bottom: 1px solid var(--lijn-zacht, var(--lijn));
  font-size: 12.5px;
}
.token-boek li span { flex: 1; color: var(--inkt-2); }
.token-boek li strong { font-variant-numeric: tabular-nums; }
.token-boek li strong.bij { color: var(--goed, oklch(0.7 0.15 150)); }
.token-boek li strong.af { color: var(--inkt-3); }
.token-boek li em { font-style: normal; color: var(--inkt-3); font-size: 11.5px; }
.knop.termijn.niet-beschikbaar, .knop.termijn:disabled { opacity: .4; }
#kostenRaming td.getal { font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }


.beeldlijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--ruimte-sm);
  margin-top: var(--ruimte-md);
}

.beeldkaart {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--blad);
  overflow: hidden;
  cursor: grab;
}
.beeldkaart:active { cursor: grabbing; }
.beeldkaart img { width: 100%; height: 68px; object-fit: cover; display: block; border-bottom: 1px solid var(--lijn); }
.beeldkaart .info { padding: 7px 8px; }
.beeldkaart .kop { font-weight: 600; font-size: 12px; line-height: 1.3; }
.beeldkaart .meta { font-size: 10.5px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.beeldkaart .status { font-size: 10.5px; margin-top: 2px; color: var(--inkt-2); }
.beeldkaart .status.ok { color: var(--goed); }
.beeldkaart .status.wacht { color: var(--let); }

/* waar staat deze figuur? */
.beeldkaart .plaatsing {
  font-size: 11px;
  margin-top: var(--ruimte-xs);
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--paneel-2);
  color: var(--inkt-2);
}
.beeldkaart .plaatsing.leeg { background: var(--let-vlak); color: oklch(0.45 0.12 75); }

.beeldkaart .mini-acties { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.beeldkaart .mini-acties button {
  font: 500 11px/1 var(--ui-font);
  background: none;
  border: none;
  padding: 2px 0;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.beeldkaart .mini-acties button:hover { color: var(--accent-inkt); }

/* ---------------- account ---------------- */

.account { position: relative; }

.account-knop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 1px;
  font: 500 12.5px/1.2 var(--ui-font);
  color: var(--inkt);
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 6px 11px;
  cursor: pointer;
  max-width: 190px;
}
.account-knop:hover { border-color: var(--inkt-3); }
.account-naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.account-plan { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  background: var(--paneel-2);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  /* De schaduw komt uit .zweeft. */
  padding: 4px;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.account-menu button,
.account-menu .menu-link {
  font: 500 13px/1 var(--ui-font);
  text-align: left;
  color: var(--inkt);
  background: none;
  border: none;
  border-radius: 4px;
  padding: 9px 10px;
  cursor: pointer;
}
.account-menu button:hover,
.account-menu .menu-link:hover { background: var(--accent-vlak); color: var(--accent-inkt); }
/* De weg terug naar de website, apart gezet van de accountknoppen. */
.account-menu .menu-link {
  display: block;
  text-decoration: none;
  margin-top: 4px;
  border-top: 1px solid var(--lijn);
  border-radius: 0 0 4px 4px;
  padding-top: 11px;
}

/* ---------------- toegang ---------------- */

.toegang {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-xl);
  background: var(--papier);
  background-image: radial-gradient(85% 60% at 50% 0%, oklch(0.26 0.030 205) 0%, oklch(0.15 0.024 205) 70%);
  overflow-y: auto;
}

.toegang-kaart {
  width: 100%;
  max-width: 400px;
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  /* De schaduw komt uit .zweeft; die is gelaagd en hoort bij het dieptesysteem.
     Hier stond eerst --schaduw-blad, en die twee vochten met elkaar. */
  padding: var(--ruimte-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-md);
}
.toegang-kaart .logo { font-size: 24px; }
.toegang-kaart h1 { margin: 0; font: 600 24px/1.2 var(--display-font); }
.toegang-kaart .hint { margin: 0; }
.toegang-kaart form { display: flex; flex-direction: column; gap: var(--ruimte-md); }

/* De kop van de kaart: het merk met de leus ernaast. Op één regel als het past,
   anders onder elkaar. De leus staat er omdat het toegangsscherm het eerste is
   wat iemand ziet, en er stond alleen "Inloggen" — dat vertelt niet wat dit is. */
.toegang-kop {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-sm);
  flex-wrap: wrap;
  padding-bottom: var(--ruimte-md);
  border-bottom: 1px solid var(--lijn-zacht);
  margin-bottom: var(--ruimte-xs);
}
.toegang-leus {
  font-size: 12.5px;
  color: var(--inkt-3);
  letter-spacing: .01em;
}

/* De velden van dit formulier liggen op een donkere kaart in plaats van op het
   werkblad, dus ze hebben een eigen ondergrond nodig: zonder die achtergrond
   zie je alleen een rand en weet je niet waar je kunt typen. */
.toegang-kaart .veld input {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 11px 12px;
  font: 400 14px/1.3 var(--ui-font);
  color: var(--inkt);
  transition:
    border-color var(--duur-snel) var(--ease),
    background var(--duur-snel) var(--ease),
    box-shadow var(--duur-snel) var(--ease),
    transform var(--duur-snel) var(--ease);
}
.toegang-kaart .veld input:hover { border-color: var(--inkt-3); }
/* Het veld licht op als je erin staat: dezelfde gedachte als een figuur die je
   optilt. Klein genoeg om rustig te blijven. */
.toegang-kaart .veld input:focus {
  outline: none;
  border-color: var(--accent-lijn);
  background: var(--blad);
  transform: perspective(600px) translateZ(6px);
  box-shadow: 0 6px 16px oklch(0 0 0 / 0.32);
}
/* Autofill van de browser zet een lichtblauw vlak neer dat niet in dit ontwerp
   past. Deze truc vervangt het door de eigen achtergrondkleur. */
.toegang-kaart .veld input:-webkit-autofill,
.toegang-kaart .veld input:-webkit-autofill:hover,
.toegang-kaart .veld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--inkt);
  -webkit-box-shadow: 0 0 0 1000px var(--blad) inset;
  caret-color: var(--inkt);
}

/* De knop is het einddoel van dit scherm en mag dat laten zien: iets hoger,
   met de messing glans die de hoofdknop overal heeft. */
.toegang-kaart .knop.primair {
  padding: 13px 15px;
  font-size: 14.5px;
}

.toegang-fout {
  margin: 0;
  font-size: 12.5px;
  color: oklch(0.82 0.09 28);
  background: var(--fout-vlak);
  border: 1px solid oklch(0.36 0.06 28);
  border-radius: var(--radius);
  padding: var(--ruimte-sm) var(--ruimte-md);
}

/* Nog niet in de verkoop: de mededeling in de plaats van het aanmeldformulier.
   Zelfde rust als de rest van het paneel — geen rood, want er is niets fout. */
.nog-niet {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-sm);
  padding: var(--ruimte-md) var(--ruimte-lg);
  background: var(--accent-vlak);
  border: 1px solid var(--accent-lijn);
  border-radius: var(--radius);
}
.nog-niet p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--inkt-2); }
.nog-niet strong { color: var(--inkt); }
.nog-niet a { color: var(--accent); }

.koppeling {
  align-self: flex-start;
  font: 500 12.5px/1.4 var(--ui-font);
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.koppeling:hover { color: var(--accent-inkt); }

/* ---------------- dashboard ---------------- */

.dashboard {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--papier);
  overflow-y: auto;
}

.dashboard-binnen {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--ruimte-xl) var(--ruimte-lg) var(--ruimte-2xl);
}

.dashboard-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-lg);
  margin-bottom: var(--ruimte-xl);
}
.dashboard-kop h1 { margin: 0; font: 600 30px/1.1 var(--display-font); }

.dashboard-rooster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ruimte-md);
  margin-bottom: var(--ruimte-xl);
}

.dash-kaart {
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  padding: var(--ruimte-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-sm);
  align-items: flex-start;
}
.dash-kaart h2 { margin: 0; font: 600 10.5px/1 var(--ui-font); letter-spacing: .09em; text-transform: uppercase; color: var(--inkt-3); }
.dash-plan { margin: 0; font: 600 22px/1.2 var(--display-font); color: var(--accent); }
.dash-getal { margin: 0; font: 600 34px/1 var(--display-font); font-variant-numeric: tabular-nums; color: var(--inkt); }
.dash-kaart .klein { margin: 0; font-size: 12.5px; color: var(--inkt-2); }
.dash-kaart .knop { margin-top: auto; }

.dash-blok {
  border-top: 1px solid var(--lijn);
  padding-top: var(--ruimte-lg);
  margin-bottom: var(--ruimte-xl);
}
.dash-blok h2 { margin: 0 0 var(--ruimte-md); font: 600 16px/1.2 var(--display-font); display: flex; align-items: center; gap: var(--ruimte-sm); }

.projectlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ruimte-sm); }
.projectlijst button {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-md);
  cursor: pointer;
  color: var(--inkt);
}
.projectlijst button:hover { border-color: var(--accent); background: var(--accent-vlak); }
.projectlijst strong { font: 600 14px/1.3 var(--ui-font); }
.projectlijst span { font-size: 12px; color: var(--inkt-3); }

.dash-wachtwoord { display: flex; gap: var(--ruimte-sm); flex-wrap: wrap; }
.dash-wachtwoord input { max-width: 240px; }

.mensenlijst { list-style: none; margin: var(--ruimte-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ruimte-sm); }
.mensenlijst li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-md);
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-sm) var(--ruimte-md);
  flex-wrap: wrap;
}
.mensenlijst strong { display: block; font-size: 13.5px; }
.mensenlijst span { font-size: 11.5px; color: var(--inkt-3); }
.mensenlijst select { width: auto; max-width: 190px; }

.noot-blok {
  background: var(--accent-vlak);
  border: 1px solid var(--accent-lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-md) var(--ruimte-lg);
  margin-bottom: var(--ruimte-lg);
  font-size: 13px;
  color: var(--inkt-2);
}
.noot-blok a { color: var(--accent); }
.noot-blok.verleng-blok { background: var(--paneel-2); border-color: var(--lijn); }

/* termijnkeuze: hoe langer, hoe voordeliger per maand */
.termijnen { margin-top: var(--ruimte-md); display: flex; flex-direction: column; gap: var(--ruimte-md); }
.termijn-groep h3 {
  margin: 0 0 var(--ruimte-sm);
  font: 600 10.5px/1 var(--ui-font);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--inkt-3);
}
.termijn-rij { display: flex; gap: var(--ruimte-sm); flex-wrap: wrap; }

.knop.termijn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  text-align: left;
  line-height: 1.25;
}
.knop.termijn strong { font-size: 13px; font-weight: 600; }
.knop.termijn span { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--inkt); }
.knop.termijn em { font-style: normal; font-size: 11px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.knop.termijn.metDeal { border-color: var(--accent-lijn); background: var(--accent-vlak); }
.knop.termijn.metDeal em { color: var(--accent); }

/* weergave van de dia's in het paneel */
.presentatie-lijst { margin-top: var(--ruimte-md); display: flex; flex-direction: column; gap: var(--ruimte-sm); }
.dia-kaart {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--paneel-2);
  font-size: 12.5px;
}
.dia-kaart header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.dia-kaart .dia-nummer {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  min-width: 14px;
}
.dia-kaart strong { font-weight: 600; color: var(--inkt); flex: 1; }
.dia-kaart em { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-3); }
.dia-kaart ul { margin: 0; padding-left: 18px; color: var(--inkt-2); }
.dia-kaart li { margin: 2px 0; }
.dia-kaart .dia-notitie {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--lijn);
  color: var(--inkt-3);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ---------------- 3D en beweging ----------------
   Echt 3D met CSS-transforms: zelfstandig perspectief per element, dus geen
   vervorming door de scrollvakken. Bewust zuinig: alleen waar de diepte iets
   betekent (slepen, plaatsen, ingedrukt houden) en nooit bij het hertekenen
   van het document, zodat typen rustig blijft. */

.sectie {
  transition:
    transform .24s cubic-bezier(.22, 1, .36, 1),
    box-shadow .24s ease,
    border-color .15s ease,
    background .15s ease;
}

/* Waar je een figuur naartoe sleept komt naar voren. */
.sectie.sleepdoel {
  transform: perspective(1100px) translateZ(34px) scale(1.012);
  box-shadow: 0 22px 48px oklch(0.26 0.012 85 / 0.16);
}

/* Figuurkaarten in de lade: optillen en kantelen alsof je hem vastpakt. */
.beeldkaart {
  transition:
    transform .22s cubic-bezier(.22, 1, .36, 1),
    box-shadow .22s ease,
    border-color .15s ease;
}
.beeldkaart:hover {
  transform: perspective(900px) translateZ(16px) translateY(-2px);
  box-shadow: 0 10px 22px oklch(0.26 0.012 85 / 0.13);
  border-color: var(--inkt-3);
}
.beeldkaart:active {
  transform: perspective(900px) translateZ(34px) rotateX(6deg) scale(1.02);
  box-shadow: 0 20px 36px oklch(0.26 0.012 85 / 0.18);
}

/* Figuren in het document: lichte diepte bij aanwijzen. */
.figuurzicht { transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.figuurzicht:hover { transform: perspective(1400px) translateZ(20px); }
.figuurzicht img { transition: box-shadow .28s ease; }
.figuurzicht:hover img { box-shadow: 0 16px 34px oklch(0.26 0.012 85 / 0.16); }

/* Een figuur die je net hebt neergezet komt naar voren. */
.figuurzicht.komt { animation: figuur-komt .55s cubic-bezier(.22, 1, .36, 1); }
@keyframes figuur-komt {
  from { opacity: 0; transform: perspective(1200px) translateY(16px) rotateX(-12deg) scale(.95); }
}

/* Knoppen en chips: nauwelijks zichtbaar, wel voelbaar. */
.knop {
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1),
    box-shadow .28s ease;
}
.knop:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px oklch(0 0 0 / 0.34); }
.knop:active:not(:disabled) { transform: translateY(0) scale(.982); box-shadow: none; }

.stap {
  transition:
    border-color .14s ease,
    color .14s ease,
    transform .16s cubic-bezier(.22, 1, .36, 1),
    box-shadow .16s ease;
}
.stap:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px oklch(0.26 0.012 85 / 0.1); }
.stap:active:not(:disabled) { transform: translateY(0) scale(.985); box-shadow: none; }

/* Het voortgangspaneel komt uit de diepte naar voren. */
.voortgang-inhoud { animation: paneel-kom .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes paneel-kom {
  from { opacity: 0; transform: perspective(1000px) translateZ(-48px) scale(.97); }
}

/* De regel "de assistent denkt na" krijgt een korte ademhaling. */
.chatbericht.bezig { animation: denk 1.6s ease-in-out infinite; }
@keyframes denk {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}

/* ---------------- het eigen vraagvenster ----------------

   Vervangt window.confirm, window.prompt en window.alert. Die van de browser
   zijn niet te bereiken met CSS, dus je kreeg een licht venster met het adres
   erboven midden in een donker ontwerp.

   De vorm is die van het tokenvenster: hetzelfde paneel, dezelfde ronding,
   dezelfde zweefschaduw. De knoppen staan rechtsonder met de belangrijkste
   rechts, en de volgorde is Annuleren dan Doorgaan — dezelfde volgorde als in
   het tokenvenster, zodat je niet hoeft te zoeken waar je op moet klikken. */

.vraag {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--ruimte-lg);
  background: oklch(0.18 0.02 90 / 0.72);
  backdrop-filter: blur(2px);
}

.vraag-doos {
  width: min(430px, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  padding: var(--ruimte-lg);
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
}
.vraag-doos h2 { margin: 0 0 6px; font: 600 17px/1.3 var(--kop-font); color: var(--inkt); }

.vraag-inhoud {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--inkt-2);
  white-space: pre-line;
}
.vraag-inhoud:empty { display: none; }
.vraag-inhoud strong { color: var(--inkt); }

/* De opbouw bij de review: een korte lijst met wat er per sectie misgaat. */
.vraag-lijst {
  margin: var(--ruimte-sm) 0 0;
  padding-left: 1.1em;
  display: grid;
  gap: 5px;
}
.vraag-lijst li { color: var(--inkt-2); }
.vraag-lijst li strong { color: var(--inkt); }

.vraag-doos .veld { margin-top: var(--ruimte-md); }

.vraag-acties {
  display: flex;
  justify-content: flex-end;
  gap: var(--ruimte-sm);
  flex-wrap: wrap;
  margin-top: var(--ruimte-lg);
}

/* ---------------- zwevende vlakken: één dieptesysteem ----------------

   Alles wat los boven de pagina hangt — het toegangsscherm, het tokenvenster,
   het eigen vraagvenster, het accountmenu en het actiemenu op een telefoon —
   gebruikt dezelfde
   perspective, dezelfde kanteling en dezelfde schaduw. Daardoor voelt het als
   één product in plaats van vier losse vensters die toevallig hetzelfde kleur
   hebben.

   NIET MEEGEDAAN, EN MET OPZET
   Het startblad (.start), de documentkop (.doc-kop), de secties en de lege
   staat zijn geen vensters maar het papier zelf. Die krijgen dezelfde schaduw
   als het vel, niet de zweefschaduw: zij liggen op het bureau, ze hangen er
   niet boven. Wie ze toch laat zweven haalt het onderscheid weg dat deze
   diepte juist duidelijk maakt.

   De kanteling wordt met de hand gezet: app.js zet --kantel-x en --kantel-y
   tussen -1 en 1 op basis van waar de muis staat. Staat er niets, dan is de
   kaart vlak. */

.zweeft {
  transform-style: preserve-3d;
  transform:
    perspective(var(--diepte-perspectief))
    rotateX(calc(var(--kantel-y, 0) * var(--diepte-kantel)))
    rotateY(calc(var(--kantel-x, 0) * var(--diepte-kantel)))
    translateZ(var(--diepte-kaart));
  box-shadow: var(--schaduw-zweef);
  transition:
    box-shadow var(--duur) var(--ease),
    transform var(--duur-snel) var(--ease);
}

/* Binnenkomen: van achteren naar voren, met een lichte kanteling die wegtrekt.
   Dat is dezelfde beweging als een vel dat je van het bureau opneemt. */
.zweeft-kom { animation: zweeft-kom var(--duur-traag) var(--ease-uit) both; }
@keyframes zweeft-kom {
  from {
    opacity: 0;
    transform:
      perspective(var(--diepte-perspectief))
      rotateX(calc(var(--diepte-kantel) * 5))
      translateZ(var(--diepte-achter))
      scale(.965);
    box-shadow: var(--schaduw-vel);
  }
}

/* Het werkblad zakt weg als er een venster boven hangt, zodat de aandacht
   klopt met wat je ziet. Alleen wanneer er echt een venster openstaat, en
   alleen het werkblad en het zijpaneel: de bovenbalk laten we met rust, want
   daar staat het merk en dat hoort niet wazig te worden.

   Elke keer dat er een venster bij komt, hoort hij in deze lijst. Dat is één
   regel werk en het houdt het gedrag gelijk; vergeet je het, dan zakt het
   werkblad niet terug en lijkt dat ene venster minder belangrijk. */
#app:has(.tokenvraag:not(.verborgen)) .werkblad,
#app:has(.tokenvraag:not(.verborgen)) .paneel.rechts,
#app:has(.vraag:not(.verborgen)) .werkblad,
#app:has(.vraag:not(.verborgen)) .paneel.rechts {
  transform: perspective(var(--diepte-perspectief)) translateZ(var(--diepte-achter)) scale(.994);
  filter: blur(1.2px) saturate(.85);
  transition:
    transform var(--duur) var(--ease),
    filter var(--duur) var(--ease);
}
.werkblad,
.paneel.rechts {
  transition:
    transform var(--duur) var(--ease),
    filter var(--duur) var(--ease);
}

/* Wie liever geen beweging ziet, krijgt de diepte wel maar niet het draaien. */
@media (prefers-reduced-motion: reduce) {
  .zweeft,
  .zweeft-kom,
  #app:has(.tokenvraag:not(.verborgen)) .werkblad,
  #app:has(.tokenvraag:not(.verborgen)) .paneel.rechts,
  #app:has(.vraag:not(.verborgen)) .werkblad,
  #app:has(.vraag:not(.verborgen)) .paneel.rechts {
    animation: none;
    transform: none;
    filter: none;
  }
}

/* ---------------- details ---------------- */

.paneel.rechts {
  background: var(--paneel);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  box-shadow: inset 1px 0 0 oklch(1 0 0 / 0.035);
}

.tabs {
  display: flex;
  gap: 2px;
  padding: var(--ruimte-sm) var(--ruimte-sm) 0;
  border-bottom: 1px solid var(--lijn);
  /* Het paneel is 300 px en de vijf tabbladen hebben samen meer nodig. Zonder
     dit viel het laatste tabblad buiten het paneel en was het niet aan te
     klikken. Nu schuift de balk mee; de schuifbalk zelf verbergen we. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  font: 500 12.5px/1 var(--ui-font);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--inkt-2);
  padding: 9px 9px 8px;
  cursor: pointer;
}
.tab:hover { color: var(--inkt); }
.tab.actief { color: var(--accent); border-bottom-color: var(--accent); }

.tabbladen { overflow-y: auto; padding: var(--ruimte-lg); }
.tabblad { display: none; flex-direction: column; gap: var(--ruimte-lg); }
.tabblad.actief { display: flex; }

.veld { display: flex; flex-direction: column; gap: 7px; }
/* Het label is waar je naar zoekt als je dit paneel opent, dus het hoort
   helder te zijn — niet een vaag grijs regeltje boven een vak. */
.veld > span { font-size: 12.5px; color: var(--inkt); font-weight: 500; }
.veld.klein > span { font-size: 12px; color: var(--inkt-2); }

input[type="text"], input[type="number"], input[type="password"], select, textarea {
  font: 14px/1.45 var(--ui-font);
  color: var(--inkt);
  /* Duidelijk een vak: de vulling ligt een tint boven het paneel, zodat je
     ziet waar je kunt typen zonder dat er een zware rand nodig is. */
  background: var(--verhoogd);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 10px 12px;
  width: 100%;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--schuif-hover); }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type="color"] {
  padding: 3px;
  height: 38px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color var(--duur-snel) var(--ease);
}
input[type="color"]:hover { border-color: var(--accent-lijn); }
input[type="range"] { padding: 0; border: none; background: none; }
input[type="checkbox"], input[type="range"] { accent-color: var(--accent); }
input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; }

.rij2, .rij3 { display: grid; gap: var(--ruimte-sm); }
.rij2 { grid-template-columns: 1fr 1fr; }
.rij3 { grid-template-columns: 1fr 1fr 1fr; }
.kleurenrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ruimte-sm); }
.knoprij { display: flex; gap: var(--ruimte-sm); flex-wrap: wrap; }

.hint { font-size: 11.5px; color: var(--inkt-3); line-height: 1.45; }
hr { border: none; border-top: 1px solid var(--lijn); margin: var(--ruimte-xs) 0; }
.tabblad h3 { margin: 0; font: 600 11px/1 var(--ui-font); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }

.schakel { display: flex; align-items: center; gap: var(--ruimte-sm); font-size: 12.5px; }
.schakel input { width: auto; }
/* De kopjes boven de groepen velden zijn de kapstok van dit paneel. Ze waren
   bijna onzichtbaar; nu dragen ze de indeling. */
.tabblad h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 2px;
  font: 600 11px/1 var(--ui-font);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
}
.tabblad h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lijn);
}

.statusblok {
  display: flex;
  align-items: center;
  gap: var(--ruimte-sm);
  font-size: 12.5px;
  padding: var(--ruimte-sm);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--blad);
}
.statusblok .knop { margin-left: auto; }
.stip { width: 8px; height: 8px; border-radius: 50%; background: var(--inkt-3); flex-shrink: 0; }
.stip.ok { background: var(--goed); }
.stip.fout { background: var(--fout); }

.tarieventabel { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.tarieventabel th, .tarieventabel td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--lijn-zacht); }
.tarieventabel th { color: var(--inkt-3); font-weight: 500; }
.tarieventabel td:last-child, .tarieventabel th:last-child { text-align: right; }

.logboek { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.logboek .regel { display: flex; justify-content: space-between; gap: var(--ruimte-sm); padding: 5px 0; border-bottom: 1px solid var(--lijn-zacht); }
.logboek .regel time { color: var(--inkt-3); font-variant-numeric: tabular-nums; }

.bronlijst { display: flex; flex-direction: column; gap: var(--ruimte-md); }
.bron { border: 1px solid var(--lijn); border-radius: var(--radius); padding: var(--ruimte-md); background: var(--blad); display: flex; flex-direction: column; gap: var(--ruimte-sm); }
.bron-kop { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.bron-kop .verwijder { background: none; border: none; color: var(--fout); cursor: pointer; font: 500 11.5px var(--ui-font); text-decoration: underline; }
.bron .resultaat { font-size: 12px; color: var(--inkt-2); background: var(--paneel); border-radius: 4px; padding: var(--ruimte-sm); }
.bron .resultaat:empty { display: none; }

.profiel { font-size: 12px; color: var(--inkt-2); background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius); padding: var(--ruimte-sm); white-space: pre-wrap; }

.hulp { font-size: 12px; color: var(--inkt-2); }
.hulp summary { cursor: pointer; color: var(--accent); }

/* ---------------- composer ---------------- */

/* De assistentbalk onderaan: een vaste opbouw van boven naar beneden.

   Het gesprek is het enige dat mag krimpen; de invoerbalk en de actieknoppen
   houden hun hoogte. Daarvoor is dit een flex-kolom met min-height:0 op het
   gesprek — zonder dat groeit het gesprek door tot zijn volledige inhoud en
   duwt het "Plan maken" en "Schrijven" onder de onderrand van het scherm, waar
   je alleen nog met een extra scrollbeweging bij kon. */
.composer {
  display: flex;
  flex-direction: column;
  background: var(--paneel);
  border-top: 1px solid var(--lijn);
  padding: var(--ruimte-md) var(--ruimte-lg) var(--ruimte-md);
  max-height: 42vh;
  overflow-y: auto;
}

.gesprek {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto var(--ruimte-md);
}
.gesprek-kop { display: flex; align-items: center; gap: var(--ruimte-sm); margin-bottom: var(--ruimte-sm); flex: 0 0 auto; }
.gesprek-kop h2 { margin: 0; font: 600 10.5px/1 var(--ui-font); letter-spacing: .09em; text-transform: uppercase; color: var(--inkt-3); }

.chatlijst {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-sm);
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(18vh, 150px);
  overflow-y: auto;
}
.chatlijst:empty { display: none; }
.composer-balk,
.chips { flex: 0 0 auto; }

.chatbericht {
  padding: var(--ruimte-sm) var(--ruimte-md);
  border-radius: var(--radius);
  background: var(--blad);
  border: 1px solid var(--lijn);
  font-size: 13px;
}
.chatbericht p { margin: 3px 0 0; white-space: pre-wrap; }
.chatbericht .chatrol {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--inkt-3);
}
.chatbericht.gebruiker { background: var(--accent-vlak); border-color: oklch(0.91 0.020 205); }
.chatbericht.bezig { color: var(--inkt-2); font-style: italic; }

.composer-balk {
  max-width: 720px;
  /* De volle breedte van het gesprek, niet de breedte van de inhoud: anders
     wordt het invoerveld zo smal als de plaatsaanduiding en lijkt het los te
     staan van de knoppenrij eronder. */
  width: 100%;
  margin: 0 auto;
  display: flex;
  gap: var(--ruimte-sm);
  align-items: flex-end;
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  padding: var(--ruimte-sm);
  box-shadow: var(--schaduw-vel);
}
.composer-balk:focus-within { border-color: var(--accent); }
.composer-balk textarea {
  border: none;
  background: none;
  padding: 6px 4px;
  flex: 1;
  min-width: 0;
  max-height: 180px;
  resize: none;
}
.composer-balk textarea:focus { outline: none; }

.chips {
  max-width: 720px;
  width: 100%;
  margin: var(--ruimte-sm) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-sm);
  flex-wrap: wrap;
}
/* De scheidingslijn wordt op een breed scherm een regeleinde: de stappen staan
   dan boven en de omvang met het voorbeeld eronder, in plaats van één knop die
   alleen op de tweede regel achterblijft. */
.chip-scheiding { width: 1px; height: 20px; background: var(--lijn); flex: 0 0 auto; }
@media (min-width: 901px) {
  .chip-scheiding { flex-basis: 100%; height: 0; background: none; }
}
.chips .veld.klein { flex-direction: row; align-items: center; gap: 6px; }
.chips .veld.klein select { width: auto; padding: 5px 8px; font-size: 12px; }
.chips .veld.klein > span { font-size: 11.5px; white-space: nowrap; }

.stap {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font: 500 12.5px/1 var(--ui-font);
  color: var(--inkt);
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: 20px;
  padding: 6px 11px;
  cursor: pointer;
}
.stap:hover:not(:disabled) { border-color: var(--inkt-3); }
.stap:disabled { opacity: .45; cursor: default; }
.stap.actief { border-color: var(--accent); color: var(--accent); }
.stap em {
  font-style: normal;
  font-size: 11px;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}

/* ---------------- voortgang en meldingen ---------------- */

.voortgang {
  position: fixed;
  inset: 0;
  background: oklch(0.11 0.008 72 / 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.voortgang-inhoud {
  display: flex;
  align-items: center;
  gap: var(--ruimte-md);
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw-blad);
  padding: var(--ruimte-lg) var(--ruimte-xl);
  max-width: 460px;
}
.voortgang-inhoud p { margin: 2px 0 0; font-size: 12.5px; color: var(--inkt-2); }

.spinner {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2.5px solid var(--lijn);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

.meldingen { position: fixed; right: var(--ruimte-lg); bottom: var(--ruimte-lg); display: flex; flex-direction: column; gap: var(--ruimte-sm); z-index: 60; max-width: 380px; }
.melding {
  padding: 11px 13px;
  border-radius: var(--radius);
  background: var(--blad);
  border: 1px solid var(--lijn);
  box-shadow: var(--schaduw-blad);
  font-size: 13px;
  animation: kom .18s ease-out;
}
.melding.goed { background: var(--goed-vlak); border-color: oklch(0.88 0.05 155); }
.melding.fout { background: var(--fout-vlak); border-color: oklch(0.88 0.05 27); }
.melding.info { background: var(--accent-vlak); border-color: oklch(0.91 0.020 205); }
.melding strong { display: block; margin-bottom: 2px; }
@keyframes kom { from { opacity: 0; transform: translateY(6px); } }

/* ---------------- scrollbars ---------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--schuif, oklch(0.33 0.009 72)); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--schuif-hover, oklch(0.42 0.01 72)); background-clip: content-box; }

/* ---------------- beweging ----------------
   Alles draait op transform, opacity en filter: die drie gaan naar de grafische
   processor. Breedte, marge en lettergrootte blijven ongemoeid, want die kosten
   een herberekening van de hele lay-out en dat zie je haperen. */

/* Messing glans die de cursor volgt in de bovenbalk. Subtiel: het is er om het
   koude zwart leven te geven, niet om op te vallen. */
.topbar {
  position: relative;
  isolation: isolate;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duur) var(--ease);
  background: radial-gradient(
    320px circle at var(--glans-x, 50%) var(--glans-y, 50%),
    oklch(0.885 0.052 88 / 0.10),
    transparent 68%
  );
}
.topbar.glant::before { opacity: 1; }
.topbar.glant { --glans-x: 50%; --glans-y: 50%; }

/* Het actieve tabblad krijgt een streep in vermiljoen: de markering van de
   corrector. Het is het enige plek waar dat rood mag opduiken, zodat het nooit
   als foutmelding leest. */
.tab { position: relative; }
.tab::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--sein);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duur) var(--ease-uit);
}
.tab.actief::after { transform: scaleX(1); }
.tab.actief { color: var(--inkt); }

/* Een messing veeg over de hoofdknoppen bij aanwijzen. */
.knop.primair {
  position: relative;
  overflow: hidden;
}
.knop.primair::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 32%, oklch(1 0 0 / 0.30) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform var(--duur-traag) var(--ease-uit);
}
.knop.primair:hover:not(:disabled)::after { transform: translateX(130%); }

/* Secties komen binnen als het document opent: het vel valt neer en zet zich.
   Een lichte kanteling die rechtkomt, als papier dat op een bureau landt. Dat is
   het enige moment in de app dat mag opvallen — de rest blijft stil. */
@keyframes sectie-kom {
  from { opacity: 0; transform: translateY(16px) rotate(-0.4deg) scale(0.994); }
  62% { transform: translateY(2px) rotate(0.09deg) scale(1); }
  to { opacity: 1; transform: none; }
}
.document > .sectie,
.document > .doc-kop {
  animation: sectie-kom var(--duur-traag) var(--ease-uit) both;
}
.document > *:nth-child(2) { animation-delay: 30ms; }
.document > *:nth-child(3) { animation-delay: 60ms; }
.document > *:nth-child(4) { animation-delay: 90ms; }
.document > *:nth-child(5) { animation-delay: 120ms; }
.document > *:nth-child(6) { animation-delay: 150ms; }
.document > *:nth-child(n + 7) { animation-delay: 175ms; }

/* De figuurkaartjes in de lade komen trapsgewijs binnen. */
@keyframes kaart-kom {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
}
.figuurlade .beeldkaart {
  animation: kaart-kom var(--duur) var(--ease-uit) both;
}
.figuurlade .beeldkaart:nth-child(2) { animation-delay: 35ms; }
.figuurlade .beeldkaart:nth-child(3) { animation-delay: 70ms; }
.figuurlade .beeldkaart:nth-child(4) { animation-delay: 105ms; }
.figuurlade .beeldkaart:nth-child(n + 5) { animation-delay: 140ms; }

/* Zichtbare focus voor toetsenbordgebruikers, in messing. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  /* Geen diepteverschuivingen; de kleurmarkering van het sleepdoel blijft. */
  .sectie.sleepdoel,
  .beeldkaart:hover,
  .beeldkaart:active,
  .figuurzicht:hover,
  .knop:hover:not(:disabled),
  .knop:active:not(:disabled),
  .stap:hover:not(:disabled),
  .stap:active:not(:disabled) { transform: none; }
  .chatbericht.bezig { animation: none; opacity: 1; }
  /* De glans en de veeg verdwijnen; het streepje onder het tabblad blijft,
     want dat is informatie en geen versiering. */
  .topbar::before,
  .knop.primair::after { display: none; }
}

/* ---------------- kleiner scherm ----------------
   De oude aanpak verborg het hele rechterpaneel onder 860 px. Daarmee was de
   huisstijl, de bronnen, de export en de presentatie op een tablet of telefoon
   niet meer te bereiken — je kon er alleen nog naar kijken.

   Nu is het één ding tegelijk. Een onderbalk kiest welke van de vier
   onderdelen het scherm vult: het document, de figuren, de assistent of de
   instellingen. Boven de 900 px blijft alles naast elkaar staan. */

/* Eerst de overloop zelf. Zonder min-width:0 duwt de inhoud van een gridvak het
   vak breder dan het scherm, en dan loopt de hele pagina horizontaal weg. */
.topbar,
.werkblad,
.blad,
.document,
.figurenlade,
.composer,
.paneel.rechts,
.projectveld,
.topacties {
  min-width: 0;
}
html,
body {
  overflow-x: clip;
}

.mobielnav { display: none; }

@media (max-width: 1100px) {
  .werkblad { grid-template-columns: minmax(0, 1fr) 300px; }
  .document > .sectie,
  .document > .leegstaat,
  .document > .doc-kop { padding-left: var(--ruimte-lg); padding-right: var(--ruimte-lg); }
}

@media (max-width: 900px) {
  /* De onderbalk komt in de plaats van de derde gridrij. */
  #app {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .mobielnav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 1px solid var(--lijn);
    background: var(--paneel);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobielnav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 48 px: de ondergrens voor een duim. */
    min-height: 52px;
    padding: 6px 4px;
    background: none;
    border: 0;
    border-top: 2px solid transparent;
    color: var(--inkt-3);
    font: 500 11px/1.2 var(--ui-font);
    cursor: pointer;
    transition: color var(--duur-snel) var(--ease), border-color var(--duur-snel) var(--ease);
  }
  .mobielnav button::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .mobielnav button[data-weergave="document"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h7M9 16h5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h7M9 16h5'/%3E%3C/svg%3E");
  }
  .mobielnav button[data-weergave="figuren"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M4 17l5-4 4 3 3-2 4 3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M4 17l5-4 4 3 3-2 4 3'/%3E%3C/svg%3E");
  }
  .mobielnav button[data-weergave="assistent"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H7l-4 3V12a8 8 0 0 1 8-8h2a8 8 0 0 1 8 8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H7l-4 3V12a8 8 0 0 1 8-8h2a8 8 0 0 1 8 8z'/%3E%3C/svg%3E");
  }
  .mobielnav button[data-weergave="instellingen"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2'/%3E%3C/svg%3E");
  }
  .mobielnav button.actief {
    color: var(--accent);
    border-top-color: var(--sein);
  }

  /* De bovenbalk wordt één regel: merk, titel, en een knop voor de rest. */
  .topbar { gap: var(--ruimte-sm); padding: 8px var(--ruimte-md); flex-wrap: nowrap; }
  .topbar .merk { flex: 0 0 auto; }
  .projectveld { flex: 1 1 auto; }
  .projectveld input { max-width: none; width: 100%; font-size: 15px; }
  .projectveld select { display: none; }

  .topacties {
    position: absolute;
    top: calc(100% + 4px);
    right: var(--ruimte-md);
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 210px;
    padding: var(--ruimte-sm);
    background: var(--paneel-2);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-groot);
    /* Hetzelfde dieptesysteem als de andere zwevende vlakken, maar dan met een
       eigen aankomst: dit menu wordt met display aan- en uitgezet, en daar kan
       geen animatie op lopen. Vandaar een keyframe op de open-stand. */
    box-shadow: var(--schaduw-zweef);
    display: none;
  }
  .topacties.open {
    display: flex;
    animation: menu-kom var(--duur-traag) var(--ease-uit) both;
  }
  @keyframes menu-kom {
    from {
      opacity: 0;
      transform: perspective(var(--diepte-perspectief)) translateZ(var(--diepte-achter)) translateY(-8px) scale(.97);
    }
  }
  .topacties .knop { justify-content: flex-start; min-height: 44px; }
  .topacties .account { width: 100%; }
  .topacties .account-knop { width: 100%; min-height: 44px; }

  #btnMeer { display: inline-flex; }

  /* Eén weergave tegelijk. */
  .werkblad { grid-template-columns: minmax(0, 1fr); }
  /* Het paneel blijft een raster met de tabs boven en de inhoud eronder; alleen
     de kolomindeling van het werkblad verandert. */
  .paneel.rechts {
    grid-column: 1 / -1;
    border-left: none;
  }
  /* Op een smal scherm bepaalt de onderbalk wat je ziet, niet de oude
     dichtklap-stand van het paneel. Zonder deze regel bleef de
     instellingenweergave leeg als je het paneel ooit had dichtgeklapt. */
  #app.details-dicht .paneel.rechts { display: grid; }
  #app[data-weergave="document"] .figurenlade,
  #app[data-weergave="document"] .composer,
  #app[data-weergave="document"] .paneel.rechts,
  #app[data-weergave="figuren"] .document,
  #app[data-weergave="figuren"] .composer,
  #app[data-weergave="figuren"] .paneel.rechts,
  #app[data-weergave="assistent"] .werkblad,
  #app[data-weergave="instellingen"] .blad,
  #app[data-weergave="instellingen"] .composer { display: none; }

  #app[data-weergave="figuren"] .figurenlade {
    max-height: none;
    flex: 1 1 auto;
    border-top: none;
  }
  #app[data-weergave="figuren"] .figurenlade .lade-inhoud { max-height: none; }

  #app[data-weergave="assistent"] .composer {
    flex: 1 1 auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    border-top: none;
  }
  /* Het gesprek is hier een flex-kolom, zodat de berichtenlijst het overschot
     krijgt en zelf gaat scrollen. Zonder dit groeit de lijst door tot zijn
     volledige inhoud (duizenden pixels) en schuift de tekst onder de
     assistentbalk door, want een blokvak met hoogte auto krimpt niet. */
  #app[data-weergave="assistent"] .gesprek {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
  }
  #app[data-weergave="assistent"] .chatlijst {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  #app[data-weergave="assistent"] .chips { margin-top: auto; flex: 0 0 auto; }

  #app[data-weergave="instellingen"] .paneel.rechts { flex: 1 1 auto; overflow-y: auto; }
  #app[data-weergave="instellingen"] .tabs { position: sticky; top: 0; z-index: 2; background: var(--paneel); }

  /* De documenten zelf krijgen meer lucht op een smal scherm. */
  .document > .sectie,
  .document > .leegstaat,
  .document > .doc-kop { padding-left: var(--ruimte-md); padding-right: var(--ruimte-md); }
  .blad { border-right: none; }

  /* De knoppen naast een sectiekop nemen op een telefoon de hele regel in, en
     dan breekt de titel af na het nummer. Ze gaan daarom naar een eigen regel,
     en ze zijn altijd zichtbaar: op een aanraakscherm is er geen hover om ze
     tevoorschijn te halen. */
  .sectie-kop { flex-wrap: wrap; }
  .sectie-kop > :first-child { flex: 1 1 100%; }
  .sectie-acties {
    opacity: 1;
    order: 2;
    width: 100%;
    justify-content: flex-end;
    /* Zesenhalve knop past niet op één regel; laat ze liever doorlopen dan ze
       samenpersen, want dan wordt "herschrijf" afgekapt tot "hersch". */
    flex-wrap: wrap;
  }
  .sectie-acties .knop { min-width: 38px; min-height: 38px; }
  .sectie.sub { margin-left: 14px; }
  .sectie-doel { flex-wrap: wrap; }
  .sectie-doel .knop { min-height: 36px; }

  /* Het instellingenpaneel op een telefoon: meer lucht, grotere velden en
     raakvlakken van een duim. Een formulier met 32 px hoge vakjes is met een
     muis al krap, met een duim onbruikbaar. */
  .tabbladen { padding: var(--ruimte-lg); }
  .tabblad { gap: var(--ruimte-lg); }
  .tab {
    font-size: 13px;
    padding: 11px 9px;
    white-space: nowrap;
  }
  input[type="text"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 15px;
    padding: 10px 11px;
    min-height: 46px;
  }
  textarea { min-height: 90px; }
  input[type="color"] { height: 48px; }
  .kleurenrij { gap: var(--ruimte-md); }
  .schakel { min-height: 46px; font-size: 13.5px; gap: var(--ruimte-md); }
  .schakel input[type="checkbox"] { width: 21px; height: 21px; }
  .veld > span { font-size: 13.5px; }
  .veld.klein > span { font-size: 13px; }
  /* Twee kolommen blijven twee kolommen: een getalveld van 180 px is ruim
     genoeg, en zo blijft het paneel overzichtelijk in plaats van één lange lijst. */
  .rij2, .rij3 { grid-template-columns: 1fr 1fr; gap: var(--ruimte-md); }
  .rij3 > :last-child { grid-column: 1 / -1; }
  .hint { font-size: 12.5px; }
  .tabblad h3 { font-size: 11.5px; }

  /* Raakvlakken: een duim is groter dan een muisaanwijzer. */
  .knop,
  .stap,
  .tab { min-height: 42px; }
  .knop.klein { min-height: 34px; }
}

/* Boven de 900 px is er genoeg ruimte voor alle knoppen naast elkaar. */
@media (min-width: 901px) {
  #btnMeer { display: none; }
}

/* ---------------- TELEFOON: wat in de praktijk misging ----------------

   Drie dingen die pas op een echt scherm opvielen:

   1. De knoppen naast een sectiekop waren 38 pixels breed. Een duim raakt
      daarnaast; ze zijn nu 44 breed, de maat die Apple en Google aanhouden.
   2. Een figuur in een sectie zetten kon alleen door te slepen, en slepen
      bestaat niet op een aanraakscherm. Je tikt nu een figuur aan, waarna elke
      sectie "hier plaatsen" aanbiedt en er boven het document een balk staat
      met wat je aan het doen bent.
   3. In de assistentbalk stonden het label en de prijs naast elkaar, waardoor
      "Plan maken · opnieuw · 6 tokens" over twee scheve regels uitliep. */

@media (max-width: 900px) {
  .sectie-acties .knop { min-width: 44px; }
  .sectie-acties .knop[data-actie="plaats-hier"] { min-width: auto; padding-inline: 13px; }
  /* Zolang je een figuur een plek geeft is dat de enige taak; de rest van de
     knoppen is dan ruis en duwt de rij uit elkaar. */
  .sectie.plaatsdoel .sectie-acties .knop:not([data-actie="plaats-hier"]) { display: none; }

  .stap {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    text-align: center;
  }
  .stap em { font-size: 11.5px; }

  /* De kleine knoppen op een figuurkaart ("bijsnijden", "notitie",
     "verwijderen") waren 11 px hoge tekstlinkjes. Op een telefoon zit je er
     meteen naast — en "verwijderen" is geen knop die je per ongeluk wilt
     raken. Ze krijgen daar een echte knop met een duimwaardig vlak. */
  .beeldkaart .mini-acties { gap: 6px; }
  .beeldkaart .mini-acties button {
    font-size: 12px;
    padding: 0 10px;
    min-height: 44px;
    min-width: 44px;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--verhoogd);
  }

  /* Even breed als de andere tabbladen: "AI" is twee letters en werd daardoor
     een prikkaartje van een paar pixels breed. */
  .tab { min-width: 44px; }
}

/* De balk boven het document zolang er een figuur wacht op een plek. Hij staat
   binnen het vel, dus de kleuren komen uit de lichte set — en de tekstkleur
   moet hier expliciet mee, anders erft hij de lichte tekst van de donkere
   schil en valt hij weg tegen de lichte achtergrond. */
.plaatsbalk {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--ruimte-sm);
  margin: 0 0 var(--ruimte-md);
  padding: var(--ruimte-sm) var(--ruimte-md);
  background: var(--accent-vlak);
  border-bottom: 1px solid var(--accent-lijn);
  color: var(--inkt);
}
.plaatsbalk img {
  width: 44px;
  height: 34px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--accent-lijn);
  flex: 0 0 auto;
}
.plaatsbalk > div { flex: 1; min-width: 0; }
.plaatsbalk strong { display: block; font-size: 13px; color: var(--inkt); }
.plaatsbalk span { display: block; font-size: 12px; color: var(--inkt-2); }
.plaatsbalk .knop { flex: 0 0 auto; }

/* De snijder op een telefoon: het hele scherm, en het beeld past binnen het
   scherm zodat je nooit hoeft te scrollen om bij de hoek te komen die je wilt
   hebben. Dat is de manier waarop bijsnijden op een telefoon hoort te werken. */
@media (max-width: 900px) {
  .snijder { padding: 0; }
  .snijder-doos {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
    /* Kop boven, beeld in het midden van wat overblijft, uitsnede onderaan.
       Zonder dit hangt het beeld bovenin en blijft de onderste helft leeg. */
    display: flex;
    flex-direction: column;
  }
  .snijder-kop { padding: var(--ruimte-sm); }
  .snijder-kop .hint { flex: 1 1 100%; order: 3; font-size: 12px; }
  .snijder-veld {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ruimte-sm);
    min-height: 0;
  }
  /* De doos krimpt om de afbeelding heen; anders zouden de kaders van de
     gevonden blokken niet meer op het beeld passen. */
  .snijder-beelddoos { width: auto; max-width: 100%; }
  .snijder-veld img { width: auto; max-width: 100%; max-height: 62vh; }
  .snijder-presets button,
  .snijder-kop .knop { min-height: 44px; }
}

/* Op een aanraakscherm niets laten hangen aan zweven: daar is geen hover. */
@media (hover: none) {
  .knop:hover:not(:disabled),
  .beeldkaart:hover { transform: none; }
}

/* ---------------- TELEFOON: raakvlakken en de actierij ----------------

   Op een telefoon is een muisaanwijzer er niet: je raakt met een duim, en die
   is groter dan de pijl waarop dit ontworpen is. Alles wat je moet kunnen
   raken is hier minstens 44 pixels hoog - de maat die Apple en Google allebei
   aanhouden.

   En de actierij onderaan was een flexrij die op een smal scherm omsloeg naar
   drie rommelige regels met ongelijke breedtes. Dat is nu een raster. */

@media (max-width: 900px) {
  /* Alles wat aanklikbaar is krijgt een duimwaardig vlak. */
  .knop,
  .knop.klein,
  .stap,
  select,
  input[type="text"],
  input[type="number"],
  input[type="password"],
  textarea {
    min-height: 44px;
  }

  .knop.klein { padding: 11px 14px; font-size: 13px; }
  .stap { padding: 11px 14px; justify-content: center; }

  /* De actierij als raster: twee gelijke kolommen, en wat breed is over de
     volle breedte. Niets meer dat half uitsteekt. */
  .chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ruimte-sm);
    align-items: stretch;
  }
  .chips .stap { width: 100%; }
  .chips .stap:nth-child(3) { grid-column: 1 / -1; }
  .chip-scheiding { display: none; }

  /* Het veld "Omvang" en de knop eronder krijgen de volle breedte, anders
     duwen ze de select in een hoekje. */
  .chips .veld {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--ruimte-sm);
    margin: 0;
  }
  .chips .veld > span { margin: 0; white-space: nowrap; }
  .chips .veld select { width: 100%; }

  .chips .knop { grid-column: 1 / -1; width: 100%; justify-content: center; }

  /* De statuslabels in de stappen ("opnieuw", "bijgewerkt") waren op een
     telefoon nauwelijks te lezen. */
  .stap em { font-size: 12px; }

  /* De kop van het gesprek: de twee knoppen daar mogen groter. */
  .gesprek-kop { flex-wrap: wrap; }
  .gesprek-kop .knop { min-height: 44px; }

  /* De invoerbalk onderaan. */
  .composer-balk { gap: var(--ruimte-sm); }
  .composer-balk textarea { min-height: 48px; }
  .composer-balk .knop { min-height: 48px; padding: 0 18px; }
}

/* Op een heel smal scherm mogen de twee kolommen onder elkaar. */
@media (max-width: 380px) {
  .chips { grid-template-columns: 1fr; }
  .chips .stap:nth-child(3) { grid-column: auto; }
}

/* Twee dingen die buiten de algemene regel vielen.

   De tabbalk in het instellingenpaneel kwam op 42 pixels uit - net onder de
   maat. En een bestandskeuzeveld is een input type="file": dat tekent de
   browser zelf, dus min-height wordt genegeerd en het bleef 21 pixels hoog. */
@media (max-width: 900px) {
  .tab { padding: 16px 10px 15px; }

  input[type="file"] {
    min-height: 46px;
    padding: 11px 12px;
    font-size: 14px;
    line-height: 1.4;
  }
  input[type="file"]::file-selector-button {
    min-height: 30px;
    margin-right: 12px;
    padding: 6px 12px;
    font: 500 13.5px/1 var(--ui-font);
    color: var(--inkt);
    background: var(--verhoogd);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    cursor: pointer;
  }
}