/* ==========================================================================
   word.css — de tekstverwerker

   Het karkas om een A4: lineaal, drie kolommen met het blad in het midden, en
   een statusbalk. De maten komen uit `docs/tekstverwerker-ontwerp.md` en zijn
   daar gemeten, niet geschat.

   De titelbalk, de tabbalk, het lint en zijn menu's staan NIET hier maar in
   `lint.css`. Die deelt de tekstverwerker met het werkblad; daar staat ook
   waarom.

   Twee dingen die hier anders zijn dan overal elders in deze map:

   1. HET BLAD IS ALTIJD WIT, OOK IN HET DONKERE THEMA. Het is papier; het is
      wat er uit de printer komt en wat er in Word te zien is. De omgeving
      volgt het thema, het blad niet. Om te voorkomen dat de tekst er in het
      donker onleesbaar op komt te staan worden de inkt- en lijntokens BINNEN
      `.wp-sheet` opnieuw gezet op hun lichte waarden. Dat is geen losse hex —
      het zijn dezelfde variabelen, één laag lager aangewezen.

   2. DE PAGINA-EINDES ZIJN EEN `::after`, GEEN ELEMENT. Zie `pagineer()` in
      `word-ui.js`: een `<div>` tussen de alinea's zou als blok terugkomen in
      `blocks()`, meetellen bij de tekens en in de ongedaan-stapel blijven
      staan. Gegenereerde inhoud staat niet in de DOM, dus geen van drieën.
   ========================================================================== */

/* De pagina die de tekstverwerker draagt gebruikt de volle breedte en hoogte;
   het karkas regelt zijn eigen ruimte. */
.page--word {
  display: flex;
  flex-direction: column;
  max-width: none;
  min-height: 0;
  height: calc(100vh - var(--topbar-height));
  padding: 0;
}

.wp {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--surface-raised);
}

/* Twee bestanden naast elkaar. Het tweede staat er om naar te kijken; de
   tekstverwerker houdt de rest van de breedte, en zijn eigen `@container`
   verderop laat de panelen vanzelf over het blad schuiven zodra die kolom
   daar te smal voor wordt. */
.wp-split {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.wp-split > .wp { min-width: 0; }
.wp-split > .filepage__beside {
  width: 380px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-subtle);
  overflow: auto;
}

/* --------------------------------------------------------------------------
   De stijlgalerij en de ontwerptegels

   Twee vormen van lintknop die alleen de tekstverwerker heeft. De rest van het
   lint staat in `lint.css`, want dat deelt hij met het werkblad; deze twee
   niet — een werkblad heeft geen "Kop 1" en geen bladontwerp.
   Elke tegel laat zien wat hij doet: bovenin het woord in de stijl waar hij
   voor staat, eronder de naam.
   -------------------------------------------------------------------------- */

.wp-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Het ontwerp heeft vier tegels van 74 breed; wij hebben er zes, want Citaat
     en Code kon de oude keuzelijst ook. Zes van 74 duwen de groep Bewerken van
     het lint af, dus ze zijn hier smaller. */
  width: 64px;
  height: 46px;
  padding: 0 4px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
  overflow: hidden;
}

.wp-tile:hover { background: var(--surface-hover); }
.wp-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.wp-tile--on {
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
}

.wp-tile__show {
  max-width: 100%;
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wp-tile__show[data-style="h1"] { font-size: 15px; font-weight: 600; }
.wp-tile__show[data-style="h2"] { font-size: 13px; font-weight: 700; color: var(--accent-soft-ink); }
.wp-tile__show[data-style="h3"] { font-size: 12px; font-weight: 700; }
.wp-tile__show[data-style="quote"] { font-style: italic; color: var(--text-secondary); }
.wp-tile__show[data-style="code"] { font-family: var(--font-mono); font-size: var(--text-xs); }

.wp-tile__name {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---- de ontwerptegels -----------------------------------------------------

   Zes tegels van dezelfde maat, en dat is geen detail. In het ontwerp is de
   breedste tegel 80 en de rest 72, en het opschrift wordt vet zodra hij
   aanstaat: de groep groeit dan van 467 naar 469 en de drie groepen erachter
   schuiven twee tot drie pixels op. Een knop die onder je cursor vandaan loopt
   op het moment dat je hem kiest. Hier verandert de aan-stand alleen de kleur.
   -------------------------------------------------------------------------- */

.wp-tile--theme {
  width: 74px;
  height: 62px;
  gap: 4px;
  padding: 4px;
}

/* Het blaadje op de tegel. Zes spans en geen pictogram: het pictogram zou voor
   alle zes hetzelfde zijn, en wat er verschilt is nu juist wat je wilt zien. */
.wp-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 44px;
  height: 34px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  background: var(--white);
}

.wp-mini__bar { background: var(--accent); }
.wp-mini__rule { width: 100%; height: 1px; background: var(--border-strong); }
.wp-mini__line { width: 100%; height: 1px; background: var(--stone-300); }
.wp-mini__head { width: 18px; height: 2px; }

/* De titelbalk krijgt de accentkleur van zijn eigen ontwerp mee — niet die van
   de app, want dan lijken alle zes op elkaar. */
.wp-tile--theme[data-item="th-vleetle"] .wp-mini__bar { background: #276a3e; }
.wp-tile--theme[data-item="th-rapport"] .wp-mini__bar { background: #1d5e35; }
.wp-tile--theme[data-item="th-zakelijk"] .wp-mini__bar { background: #1f4b8f; }
.wp-tile--theme[data-item="th-redactie"] .wp-mini__bar { background: #16584c; }
.wp-tile--theme[data-item="th-compact"] .wp-mini__bar { background: #0a1313; }
.wp-tile--theme[data-item="th-overeenkomst"] .wp-mini__bar { background: #404e4b; }

/* --------------------------------------------------------------------------
   Zoeken en vervangen
   -------------------------------------------------------------------------- */

.wp-find {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 47px;
  flex-shrink: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-page);
  overflow-x: auto;
}

.wp-find__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  color: var(--text-muted);
}

.wp-find__field {
  width: 220px;
  height: 30px;
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.wp-find__count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wp-find__spacer { flex: 1; }
.wp-find .wp-icon { width: 28px; height: 28px; }

.editor__hit--now {
  background: var(--accent);
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Lineaal
   -------------------------------------------------------------------------- */

.wp-ruler {
  display: flex;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-page);
  /* `auto` en niet `hidden`, met de balk zelf verborgen. Twee redenen. Ten
     eerste schuift de lineaal mee met het blad — `word-ui.js` zet zijn
     `scrollLeft` gelijk aan die van het bladvak — en dat kan alleen in een bak
     die kan schuiven. Ten tweede is dit de vorm die `test/widenew.mjs`
     herkent: iets binnen een zijwaarts schuivende bak mag breder zijn dan het
     scherm, iets binnen een `hidden` bak niet, ook al is het net zo onzichtbaar. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.wp-ruler::-webkit-scrollbar { display: none; }

.wp-ruler__bar {
  position: relative;
  height: 21px;
  flex-shrink: 0;
  margin: 0 auto;
  /* Het stuk binnen de marges is licht, de marges zelf zijn grijs — dat is de
     hele reden dat een lineaal er staat. */
  background:
    linear-gradient(to right,
      var(--surface-active) 0 var(--wp-r-left),
      var(--surface-raised) var(--wp-r-left) calc(100% - var(--wp-r-right)),
      var(--surface-active) calc(100% - var(--wp-r-right)) 100%);
  border-left: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
}

.wp-ruler__tick {
  position: absolute;
  top: 12px;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
  font-size: 8px;
  line-height: 1;
  color: var(--text-faint);
}

.wp-ruler__tick--big {
  top: 2px;
  width: auto;
  background: none;
  transform: translateX(-50%);
}

.wp-ruler__grip {
  position: absolute;
  top: 2px;
  width: 11px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--border-hover);
  border-radius: 2px;
  background: var(--surface-raised);
  cursor: ew-resize;
  touch-action: none;
}

.wp-ruler__grip--left { transform: translateX(-100%); }
.wp-ruler__grip:hover { background: var(--accent-soft); border-color: var(--accent); }
.wp-ruler__grip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --------------------------------------------------------------------------
   Het werkgebied: drie kolommen
   -------------------------------------------------------------------------- */

.wp-work {
  container-type: inline-size;
  container-name: wpwork;
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

/* De kolom met de lineaal erboven en het blad eronder. */
.wp-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.wp-nav,
.wp-comments {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--surface-raised);
  overflow: hidden;
}

.wp-nav {
  width: 236px;
  border-right: 1px solid var(--border-subtle);
}

.wp-comments {
  width: 288px;
  border-left: 1px solid var(--border-subtle);
}

.wp-pane__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 51px;
  flex-shrink: 0;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.wp-pane__title {
  flex: 1;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wp-pane__head .wp-icon { width: 26px; height: 26px; border-color: transparent; }

.wp-pane__empty {
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* ---- koppenlijst ---------------------------------------------------------- */

.wp-nav__list {
  flex: 1;
  padding: var(--space-2);
  overflow-y: auto;
}

.wp-nav__row {
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.wp-nav__row:hover { background: var(--surface-hover); color: var(--text-primary); }
.wp-nav__row:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.wp-nav__row--on {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  font-weight: 500;
}

.wp-nav__row--h1 { padding-left: 10px; font-weight: 500; color: var(--text-primary); }
.wp-nav__row--h2 { padding-left: 22px; }
.wp-nav__row--h3 { padding-left: 34px; font-size: var(--text-xs); }
.wp-nav__row--h4 { padding-left: 46px; font-size: var(--text-xs); }

/* ---- opmerkingen ---------------------------------------------------------- */

.wp-comments__list {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.wp-remark {
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--chart-1);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--chart-1-soft);
}

.wp-remark--mine {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.wp-remark + .wp-remark { margin-top: var(--space-2); }

.wp-remark__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.wp-remark__who { font-size: var(--text-xs); font-weight: 700; color: var(--text-primary); }

.wp-remark__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* Een antwoord staat onder de opmerking waar het bij hoort, ingesprongen en met
   een streepje ervoor — anders leest een draad als één lange alinea. */
.wp-remark__text--reply {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-strong);
}

.wp-remark--on {
  outline: none;
  box-shadow: var(--focus-ring);
}

.wp-remark__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.wp-remark__reply {
  flex: 1;
  min-width: 0;
  height: 28px;
  font-size: var(--text-xs);
}

/* ---- wijzigingen bijhouden ------------------------------------------------

   Een streep in de marge naast elke alinea die veranderd is sinds je het
   aanzette. Word zet elke letter in `<w:ins>` of `<w:del>`; dit is per alinea,
   en dat staat ook in de tooltip van de knop. In het ontwerp markeert bijhouden
   niets — de knop gaat aan en verder gebeurt er niets.
   -------------------------------------------------------------------------- */

.wp[data-track="on"] .wp-sheet .editor__surface > [data-changed] {
  position: relative;
}

.wp[data-track="on"] .wp-sheet .editor__surface > [data-changed]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22px;
  width: 2px;
  border-radius: var(--radius-pill);
  background: var(--chart-2);
}

/* --------------------------------------------------------------------------
   Het blad
   -------------------------------------------------------------------------- */

.wp-paper {
  /* De kleur van de ruimte tussen twee bladen. Hij staat HIER en niet in
     `.wp-sheet`, want daar zijn de tokens op hun lichte waarden gezet — het
     gat tussen twee bladen hoort bij het werkgebied en volgt dus wél het
     thema. Zonder deze aparte naam is het gat in het donkere thema lichtgrijs
     op een donkere ondergrond. */
  --wp-gap-ink: var(--surface-active);
  flex: 1;
  min-width: 0;
  padding: 22px 0 48px;
  background: var(--surface-active);
  overflow: auto;
}

.wp-paper__box { margin: 0 auto; }

.wp-paper__zoom {
  transform-origin: top left;
  will-change: transform;
}

.wp-sheet {
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(10, 19, 19, 0.16);

  /* Papier is papier: wit, met zwarte inkt, in beide thema's. De tokens
     worden hier één laag lager opnieuw aangewezen zodat alles wat binnen het
     blad getekend wordt — de tekst, de tabellen, de aandachtsblokken — zijn
     lichte waarden krijgt en niet de donkere van de omgeving. */
  color-scheme: light;
  --surface-raised: var(--white);
  --surface-page:   var(--white);
  --surface-sunken: var(--stone-100);
  --surface-hover:  var(--stone-100);
  --surface-active: var(--stone-150);
  --text-primary:   var(--stone-950);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-faint:     var(--stone-400);
  --border-subtle:  var(--stone-150);
  --border-strong:  var(--stone-200);

  /* Ook het groen. Zonder deze twee regels tekent een nootnummer of een
     kruisverwijzing in het donkere thema met het lichte accent van de app —
     gemeten 2,94:1 op wit papier. Wat op het blad staat is inkt, en inkt is in
     beide thema's dezelfde. */
  --accent:          var(--leaf-600);
  --accent-soft-ink: #1d5e35;

  /* Het ontwerp van het document, en dit is de enige plek waar deze namen
     wonen. "Vleetle" is wat hier staat; de vijf andere ontwerpen in
     `word-ui.js` zetten alleen wat ze anders willen op dit element. Er is dus
     geen tweede lijst die stilletjes uit de pas kan lopen — in het
     ontwerpbestand staat hij twee keer, en daar klopt de ene na de eerste
     themawissel niet meer. */
  --wp-body-font: Carlito, Calibri, var(--font-sans);
  --wp-body-size: 11pt;
  --wp-body-lead: 1.15;
  --wp-body-align: start;
  --wp-h1-size: 26pt;
  --wp-h1-weight: 600;
  --wp-h1-track: -0.01em;
  --wp-h1-caps: none;
  --wp-h1-align: inherit;
  --wp-h1-rule: 0 solid transparent;
  --wp-h1-pad: 0;
  --wp-h2-size: 15pt;
  --wp-h2-ink: var(--accent-soft-ink);
  --wp-h2-caps: none;
  --wp-h2-track: normal;
  --wp-h2-top: 16pt;
  --wp-h3-size: 12.5pt;
  --wp-h3-ink: var(--stone-950);
  --wp-th-bg: var(--stone-100);
  --wp-th-ink: var(--stone-950);
  --wp-th-size: 1em;
  --wp-th-caps: none;
  --wp-th-track: normal;
  /* De onderrand van een tabelkop is dezelfde als die van een cel, tenzij een
     ontwerp er een streep van maakt in plaats van een kader. */
  --wp-th-rule: var(--wp-cell-border);
  --wp-cell-pad: 5pt 7pt;
  --wp-cell-border: 0.75pt solid var(--stone-300);
  --wp-quote-bg: transparent;
  --wp-quote-style: italic;

  background: var(--white);
  color: var(--stone-950);
}

.wp-sheet .editor,
.wp-sheet .editor__stage { display: block; }

.wp-sheet .editor__surface {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--wp-body-font);
  font-size: var(--wp-body-size);
  line-height: var(--wp-body-lead);
  text-align: var(--wp-body-align);
}

.wp-sheet .editor__surface:focus-visible { outline: none; box-shadow: none; }

/* ---- wat een ontwerp van de tekst maakt -----------------------------------

   Alleen variabelen, geen waarden. Wat hier staat is de vorm; wat erin komt
   staat op `.wp-sheet` hierboven en wordt door een ontwerptegel overschreven.
   -------------------------------------------------------------------------- */

.wp-sheet .editor__surface > h1 {
  font-size: var(--wp-h1-size);
  font-weight: var(--wp-h1-weight);
  letter-spacing: var(--wp-h1-track);
  text-transform: var(--wp-h1-caps);
  text-align: var(--wp-h1-align);
  border-bottom: var(--wp-h1-rule);
  padding-bottom: var(--wp-h1-pad);
}

.wp-sheet .editor__surface > h2 {
  margin-top: var(--wp-h2-top);
  font-size: var(--wp-h2-size);
  letter-spacing: var(--wp-h2-track);
  text-transform: var(--wp-h2-caps);
  color: var(--wp-h2-ink);
}

.wp-sheet .editor__surface > h3 {
  font-size: var(--wp-h3-size);
  color: var(--wp-h3-ink);
}

.wp-sheet .editor__surface th {
  padding: var(--wp-cell-pad);
  border: var(--wp-cell-border);
  border-bottom: var(--wp-th-rule);
  background: var(--wp-th-bg);
  color: var(--wp-th-ink);
  font-size: var(--wp-th-size);
  letter-spacing: var(--wp-th-track);
  text-transform: var(--wp-th-caps);
}

.wp-sheet .editor__surface td {
  padding: var(--wp-cell-pad);
  border: var(--wp-cell-border);
}

.wp-sheet .editor__surface > blockquote {
  background: var(--wp-quote-bg);
  font-style: var(--wp-quote-style);
}

/* ---- het voorblad ---------------------------------------------------------

   Gewone alinea's met een klasse, en niet een blok met een eigen bak eromheen:
   ze horen in `blocks()` te staan, mee te tellen bij de tekens in de statusbalk
   en gewoon te bewerken te zijn. Wat het één bladzijde maakt is het
   paginaeinde erachter, en dat is er een die de paginering ook echt kent.
   -------------------------------------------------------------------------- */

.wp-sheet .editor__surface > [data-cover] { text-align: center; }

.wp-sheet .editor__surface > .wp-cover__over {
  margin-top: 150px;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.wp-sheet .editor__surface > .wp-cover__title {
  margin: 0.5em 0 0;
  font-size: 34pt;
  font-weight: 300;
  line-height: 1.15;
}

.wp-sheet .editor__surface > .wp-cover__sub {
  margin: 0.3em 0 0;
  font-size: 13pt;
  color: var(--text-secondary);
}

.wp-sheet .editor__surface > .wp-cover__rule {
  width: 120pt;
  height: 2pt;
  margin: 18pt auto;
  background: var(--accent);
}

.wp-sheet .editor__surface > .wp-cover__meta {
  margin: 0.2em 0 0;
  font-size: 10pt;
  color: var(--text-secondary);
}

/* ---- waar een pagina ophoudt ---------------------------------------------

   De strook loopt van de ondermarge van het ene blad tot de bovenmarge van het
   volgende. Hij bloedt met een negatieve marge tot de rand van het blad door,
   zodat het grijs van de ruimte ertussen over de volle breedte staat.
   -------------------------------------------------------------------------- */

.wp-sheet [data-page-end]::after {
  content: "";
  display: block;
  /* `--wp-strip-h` en `--wp-strip-top` worden per breuk gemeten en op het blok
     zelf gezet; de waarden hier zijn alleen wat er staat als dat (nog) niet is
     gebeurd. Zie `pagineer()` in word-ui.js voor waarom ze niet vast zijn. */
  height: var(--wp-strip-h, var(--wp-strip));
  margin-left: calc(-1 * var(--wp-mx-left));
  margin-right: calc(-1 * var(--wp-mx-right));
  background: linear-gradient(
    to bottom,
    transparent 0 calc(var(--wp-strip-top) - 1px),
    var(--border-strong) calc(var(--wp-strip-top) - 1px) var(--wp-strip-top),
    var(--wp-gap-ink) var(--wp-strip-top) calc(var(--wp-strip-top) + var(--wp-strip-gap)),
    var(--border-strong) calc(var(--wp-strip-top) + var(--wp-strip-gap))
      calc(var(--wp-strip-top) + var(--wp-strip-gap) + 1px),
    transparent calc(var(--wp-strip-top) + var(--wp-strip-gap) + 1px)
  );
}

/* Een handmatig paginaeinde tekent zijn eigen streepje niet meer zodra het
   ook echt een pagina afsluit — anders staat er een stippellijn boven de
   strook die al zegt wat er gebeurt. */
/* Een handmatig paginaeinde draagt zijn eigen strook en hoeft er zelf niets
   meer bij te tekenen: geen streep, geen woord "Paginaeinde".

   Hier stond `height: 0`, en dat was een gat. De strook is een `::after` op dít
   blok, en een blok van nul hoog geeft zijn gegenereerde inhoud geen ruimte —
   de grijze strook werd wél getekend maar duwde niets opzij, dus de tekst erna
   liep er dwars doorheen en de teller telde de bladzijde niet mee. Nu is het
   corps nul en niet de hoogte: het blok is precies zo hoog als zijn strook. */
.wp-sheet .editor__break[data-page-end] {
  border: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* ---- het watermerk --------------------------------------------------------

   Achter de tekst, één per bladzijde, en niet aan te klikken. In het ontwerp
   staat er één op het hele vel en loopt VERTROUWELIJK 927 pixels breed over een
   blad van 794 heen; hier schaalt de maat mee met het blad én met de lengte van
   het woord.
   -------------------------------------------------------------------------- */

.wp-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.wp-mark {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.14em;
  /* Geen token: dit is inkt op papier en niet op een vlak van de app, en het
     hoort in beide thema's hetzelfde te zijn — het blad is altijd wit.

     Het ontwerp zet er 5,5 procent op en dan is het op een schermafdruk niet
     terug te vinden; negen is nog steeds licht genoeg om er dwars doorheen te
     lezen. Een watermerk haalt geen enkele contrasteis en dat kán ook niet —
     daarom staat het woord óók in de statusbalk, in gewone letters. */
  color: rgba(10, 19, 19, 0.09);
  transform: translate(-50%, -50%) rotate(-38deg);
  user-select: none;
}

/* De tekst moet erbovenop, anders ligt het watermerk eroverheen. De laag met
   de kop- en voetregels krijgt zijn z-index in zijn eigen blok hieronder: die
   staat op `absolute`, en hem hier meenemen zette hem op `relative` — precies
   de stille overschrijving waar `test/cssdubbel.py` voor bestaat, en hij ving
   hem ook meteen. */
.wp-sheet .editor { position: relative; z-index: 1; }

/* ---- regelnummers ---------------------------------------------------------

   In de linkermarge, naast elke echte regel. Het ontwerp zet ze op
   `left:-45px` onder een `overflow:hidden` — daar staan ze wel maar zie je ze
   nooit.
   -------------------------------------------------------------------------- */

.wp-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.wp-line {
  position: absolute;
  width: 32px;
  text-align: right;
  font-family: Carlito, Calibri, var(--font-sans);
  font-size: 8pt;
  line-height: 1.15;
  /* Licht genoeg om niet mee te lezen, donker genoeg om te lezen als je hem
     zoekt: gemeten 4,6:1 op wit papier. */
  color: var(--stone-500);
  user-select: none;
}

/* ---- kop- en voetregel, één per pagina ------------------------------------ */

.wp-runs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.wp-run {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 18px;
  font-family: Carlito, Calibri, var(--font-sans);
  font-size: 9pt;
  /* Word tekent de kop- en voetregel lichtgrijs; op wit papier haalt dat 3,48:1
     en dat is te weinig om te lezen. Een stap donkerder haalt 6,4 en blijft
     duidelijk lichter dan de tekst. */
  color: var(--stone-500);
  pointer-events: auto;
}

.wp-run--head { border-bottom: 1px solid var(--stone-150); padding-bottom: 3px; }
.wp-run--foot { border-top: 1px solid var(--stone-150); padding-top: 3px; }

/* Een kopregel zonder tekst tekent geen lijntje. Hij staat er wel — anders
   heeft de kopregel van pagina een niets om naar te schrijven — maar een
   streepje boven elke bladzijde waar niets boven staat is geen kopregel maar
   een vlek. */
.wp-run--head:empty { border-bottom-color: transparent; }

.wp-run__text { flex: 1; min-width: 0; }
.wp-run__page { flex-shrink: 0; font-variant-numeric: tabular-nums; }

.wp-run [contenteditable="true"]:focus-visible,
.wp-run[contenteditable="true"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* ---- de inhoudsopgave, op het blad ----------------------------------------

   Het blok blijft wat het was — een `data-kind="toc"` dat als Word-veld naar
   het bestand gaat — maar op het scherm staat de echte lijst erin, met de
   bladzijde waar elke kop op staat. In het ontwerp is dat altijd 1, want daar
   komt er nooit een tweede vel.
   -------------------------------------------------------------------------- */

.wp-sheet .editor__toc {
  margin: 1em 0;
  padding: 0;
  border: 0;
  background: none;
  font-style: normal;
  color: inherit;
}

.wp-toc__title {
  margin: 0 0 0.4em;
  font-size: 1.15em;
  font-weight: 600;
}

.wp-toc__empty { color: var(--text-muted); font-style: italic; }

.wp-toc__row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  width: 100%;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wp-toc__row:hover .wp-toc__text { color: var(--accent-soft-ink); }
.wp-toc__row:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.wp-toc__row--h2 { padding-left: 1.2em; }
.wp-toc__row--h3 { padding-left: 2.4em; }
.wp-toc__row--h4 { padding-left: 3.6em; }

.wp-toc__text { flex: 0 1 auto; }

/* De stippellijn tussen de kop en zijn bladzijnummer. Een rand met stippen en
   niet een rij punten in de tekst: puntjes die je kunt selecteren komen mee als
   je de inhoudsopgave kopieert. */
.wp-toc__dots {
  flex: 1;
  min-width: 1em;
  border-bottom: 1px dotted var(--stone-300);
  transform: translateY(-0.25em);
}

.wp-toc__page { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* Een koppeling op het blad. Hij draagt de accentkleur van het ontwerp — inkt
   op papier, en dus in beide thema's dezelfde — en een onderstreping, want
   kleur alleen is geen aanwijzing voor wie hem niet ziet. De cursor zegt dat
   er iets te openen valt; welke toets daarbij hoort staat in de `title`. */
.wp-sheet .editor__surface a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---- voetnoten -------------------------------------------------------------

   Het nootje staat in de tekst; de noot zelf staat onderaan zijn eigen
   bladzijde, in een eigen laag. `pagineer()` houdt er ruimte voor vrij door het
   tekstvlak van díé bladzijde te laten krimpen — zonder dat zou de noot over de
   ondermarge heen vallen.
   -------------------------------------------------------------------------- */

.wp-sheet .editor__fn {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--accent);
  vertical-align: super;
  line-height: 0;
  user-select: none;
}

.wp-foots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.wp-foot {
  position: absolute;
  padding-top: 6px;
  /* Het streepje boven de noten. Word tekent er een van een derde van de
     tekstbreedte; dat is wat de `separator` in het bestand ook is. */
  border-top: 1px solid var(--stone-300);
  border-image: linear-gradient(to right, var(--stone-300) 33%, transparent 33%) 1;
  pointer-events: auto;
}

.wp-sheet .wp-foot__line {
  margin: 0 0 2px;
  font-size: 0.8em;
  line-height: 1.35;
  color: var(--text-secondary);
}

.wp-foot__n {
  margin-right: 0.4em;
  font-weight: 600;
  color: var(--accent);
  vertical-align: super;
  line-height: 0;
}

.wp-foot__text:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- noten, bladwijzers, bijlagen, bijschriften --------------------------- */

.wp-ref {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--accent);
  vertical-align: super;
  line-height: 0;
}

.wp-sheet .wp-notes-head { font-size: 1.1em; }

.wp-sheet .wp-note {
  font-size: 0.85em;
  color: var(--text-secondary);
}

/* Een bladwijzer is een plek en geen tekst: hij neemt geen breedte in en je
   ziet alleen een vlaggetje in de kantlijn. */
.wp-bookmark {
  position: relative;
  display: inline-block;
  width: 0;
}

.wp-bookmark::after {
  content: "";
  position: absolute;
  top: -0.1em;
  left: -1px;
  width: 3px;
  height: 1em;
  border-radius: 1px;
  background: var(--chart-4);
}

.wp-xref {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
}

.wp-sheet .wp-cite {
  font-size: 0.9em;
  padding-left: 0.8em;
  border-left: 2px solid var(--stone-200);
  color: var(--text-secondary);
}

.wp-sheet .wp-caption {
  font-size: 0.85em;
  text-align: center;
  color: var(--text-muted);
}

/* ---- rasterlijnen ---------------------------------------------------------
   In het ontwerp verandert er op het blad niets als je ze aanzet. Hier staan
   ze er echt: een net van een halve centimeter over het tekstgebied. */

.wp[data-grid="on"] .wp-sheet .editor__surface {
  background-image:
    repeating-linear-gradient(to right, var(--stone-150) 0 1px, transparent 1px 18.9px),
    repeating-linear-gradient(to bottom, var(--stone-150) 0 1px, transparent 1px 18.9px);
}

/* ---- opmaaktekens ---------------------------------------------------------
   Een alinea-einde achter elke alinea. Het ontwerp zet alleen de knop groen en
   laat de tekst byte-voor-byte gelijk; hier staat het teken er. Spaties als
   puntjes tonen zou tekst per letter moeten hertekenen, en dat is inhoud
   aanraken om weergave te veranderen — dat gebeurt hier niet. */

.wp[data-marks="on"] .wp-sheet .editor__surface > p::after,
.wp[data-marks="on"] .wp-sheet .editor__surface > h1::after,
.wp[data-marks="on"] .wp-sheet .editor__surface > h2::after,
.wp[data-marks="on"] .wp-sheet .editor__surface > h3::after,
.wp[data-marks="on"] .wp-sheet .editor__surface > h4::after,
.wp[data-marks="on"] .wp-sheet .editor__surface > blockquote::after {
  content: "¶";
  margin-left: 2px;
  color: var(--chart-1);
  font-weight: 400;
  user-select: none;
}

/* Een blok dat óók een pagina afsluit heeft al een `::after` voor de strook.
   Twee kunnen niet, dus daar hangt het teken aan de `::before` van niets —
   het staat dan achterwege. Dat is één alinea per pagina zonder teken, en dat
   is beter dan een strook die verdwijnt. */
.wp[data-marks="on"] .wp-sheet [data-page-end]::after { content: ""; }

/* --------------------------------------------------------------------------
   Statusbalk
   -------------------------------------------------------------------------- */

.wp-status {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 32px;
  flex-shrink: 0;
  padding: 0 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11.5px;
  color: var(--text-muted);
  overflow-x: auto;
}

.wp-status__item { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wp-status__mark { flex-shrink: 0; }
.wp-status__sep { color: var(--border-strong); }
.wp-status__spacer { flex: 1; min-width: var(--space-4); }

.wp-status__button {
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.wp-status__button:hover { background: var(--surface-hover); color: var(--text-primary); }
.wp-status__button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.wp-status .wp-icon { width: 22px; height: 22px; border-color: transparent; }
.wp-status .wp-icon svg { width: 14px; height: 14px; }

.wp-status__slider {
  width: 104px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.wp-status__slider:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-pill); }

/* --------------------------------------------------------------------------
   De kijkstanden

   Lezen haalt het lint weg en zet de panelen dicht; focus dooft alles wat niet
   de alinea is waar de cursor in staat.
   -------------------------------------------------------------------------- */

.wp[data-view="lezen"] .wp-title__field { pointer-events: none; }
.wp[data-view="focus"] .wp-sheet .editor__surface > * { opacity: 0.38; transition: opacity var(--duration-base) var(--ease); }
.wp[data-view="focus"] .wp-sheet .editor__surface > *:focus-within,
.wp[data-view="focus"] .wp-sheet .editor__surface > *:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Smal

   Een mediaquery meet het vénster en niet de kolom, en een paneel dat opengaat
   maakt de kolom smal zonder dat het venster iets verandert. Daarom `@container`
   op het werkgebied zelf — dezelfde val als bij de tabel op Bestanden.
   -------------------------------------------------------------------------- */

@container wpwork (max-width: 900px) {
  .wp-nav,
  .wp-comments {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 12;
    box-shadow: var(--shadow-lg);
  }
  .wp-nav { left: 0; }
  .wp-comments { right: 0; }
}

@container wpwork (max-width: 560px) {
  .wp-nav { width: 100%; }
  .wp-comments { width: 100%; }
}

@media (max-width: 720px) {
  .wp-title { gap: var(--space-2); padding: 0 var(--space-3); }
  .wp-title__mark,
  .wp-title__faces { display: none; }
  .wp-title__field { width: 12ch; }
  .wp-tabs { padding: 0 var(--space-3); }
  .wp-find { padding: 0 var(--space-3); }
  .wp-find__field { width: 150px; }
  .wp-status { gap: var(--space-2); padding: 0 var(--space-3); }
  .wp-paper { padding: var(--space-3) 0 var(--space-6); }
}

/* --------------------------------------------------------------------------
   Papier

   Zonder dit komt het hele karkas mee de printer in: lint, lineaal,
   statusbalk, panelen, en een blad dat op de zoomfactor staat geschaald. Wat
   er op papier hoort is de tekst, met de kop- en voetregel die `printThis()`
   in `file-ui.js` er los bij zet — de browser weet niets van de
   sectie-eigenschappen in een .docx.
   -------------------------------------------------------------------------- */

@media print {
  .wp-title,
  .wp-tabs,
  .wp-ribbon,
  .wp-find,
  .wp-ruler,
  .wp-status,
  .wp-nav,
  .wp-comments,
  .wp-runs,
  .wp-menu { display: none !important; }

  .page--word,
  .wp,
  .wp-split,
  .wp-work,
  .wp-paper,
  .wp-paper__box {
    display: block !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  /* De zoom is een kijkstand en geen eigenschap van het document. Een blad dat
     op 150% staat hoort niet anderhalf keer zo groot uit de printer te komen. */
  .wp-paper__zoom {
    transform: none !important;
    width: auto !important;
  }

  .wp-sheet {
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* De strook tussen twee bladzijden is een tekening van een paginarand. Op
     papier is die rand er echt, dus wordt de tekening een echte breuk. */
  .wp-sheet [data-page-end]::after { content: none !important; }
  .wp-sheet [data-page-end] { break-after: page; page-break-after: always; }

  /* De voetnoten staan op het scherm op een uitgerekende plek onderaan hun
     bladzijde. Op papier klopt die plek niet meer: de browser breekt de
     bladzijden daar zelf, en onze getallen gaan over een blad dat er niet meer
     is. Ze worden dus gewone tekst achteraan — achteraan is de enige plek die
     je niet hoeft uit te rekenen. Weglaten kan niet: dan mist er tekst. */
  .wp-foots { position: static !important; }

  .wp-foot {
    position: static !important;
    width: auto !important;
    margin-top: 18px;
    break-inside: avoid;
  }
}