/* ==========================================================================
   docs.css — documentation, and the Markdown it is written in
   --------------------------------------------------------------------------
   Two things live here: the card that holds documentation (view, writing
   surface, attachments, import) and the prose styles for what markdown.js
   builds. Both are shared by the project page and the task page, which is the
   whole point of the component.

   The prose is set narrower than the card it sits in. A README at full page
   width is unreadable — the eye loses the line — so it is held to a measure
   the same way a book is.
   ========================================================================== */

/* ==========================================================================
   The card
   ========================================================================== */

/* minmax(0, 1fr), not the default `auto`: an auto track sizes to its content's
   max-content width, and .doc__prose's 74ch measure IS a max-content width —
   which pushed the whole card past the edge of a phone. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

.doc__empty { padding: var(--space-2) 0; }

.doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* ---- writing ------------------------------------------------------------ */

.doc__edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }

.doc__input {
  min-height: 320px;
  resize: vertical;
  line-height: 1.65;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  tab-size: 2;
}

.doc__syntax {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.doc__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.doc__status {
  flex: 1 1 8rem;
  min-width: 0;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.doc__status--saved { color: var(--good-ink); }
.doc__status--bad   { color: var(--text-danger); }

/* ==========================================================================
   Attachments
   ========================================================================== */

.doc-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.doc-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.doc-file__open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.doc-file__open:hover { background: var(--surface-hover); }
.doc-file__open:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

.doc-file__icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doc-file__text { min-width: 0; display: grid; }

.doc-file__name {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-file__meta { font-size: var(--text-xs); color: var(--text-muted); }

.doc-file__drop { flex: none; margin-right: var(--space-2); }

/* ==========================================================================
   Prose — what markdown.js builds
   ========================================================================== */

/* Held to a measure. A README run out to the full width of a desk monitor is
   unreadable — the eye loses its place coming back to the next line — so the
   documentation is set like a page, not like a table. */
.doc__prose,
.doc-files {
  max-width: var(--doc-measure);
}

.doc__prose {
  color: var(--text-primary);
  font-size: var(--text-md);
  line-height: 1.7;
  overflow-wrap: break-word;
}

.md-p { margin: 0 0 var(--space-4); }
.md-p:last-child { margin-bottom: 0; }

.md-h {
  margin: var(--space-6) 0 var(--space-3);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--text-primary);
}

.md-h:first-child { margin-top: 0; }

/* h1 in the source, so the document's own title. It carries a rule under it
   the way a title page does. */
.md-h--2 {
  font-size: var(--text-xl);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

/* h2 in the source — the sections of the document. It has to be visibly a
   heading next to 14px body text, so it gets both size and weight. */
.md-h--3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: var(--space-6);
}

.md-h--4 {
  font-size: var(--text-md);
  font-weight: 700;
}

.md-h--5,
.md-h--6 {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.md-rule {
  margin: var(--space-5) 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

.md-link { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.md-link:hover { text-decoration-thickness: 2px; }

/* A URL we refused to make clickable. It stays visible, and it is marked, so
   nobody wonders where the link went. */
.md-badurl {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--critical-bg);
  color: var(--critical-ink);
  word-break: break-all;
}

.md-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
}

.md-pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  overflow-x: auto;
  position: relative;
}

.md-pre code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  white-space: pre;
  color: var(--text-primary);
}

/* The language, quietly, so a block of shell is not mistaken for a block of
   JavaScript. */
.md-pre[data-lang]::after {
  content: attr(data-lang);
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-transform: lowercase;
  pointer-events: none;
}

.md-quote {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 3px solid var(--accent);
  color: var(--text-secondary);
}

.md-quote > :last-child { margin-bottom: 0; }

.md-list { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.md-list:last-child { margin-bottom: 0; }
.md-item { margin-bottom: var(--space-2); }
.md-item:last-child { margin-bottom: 0; }
.md-item > .md-list { margin-top: var(--space-2); margin-bottom: 0; }

.md-image {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: var(--radius-sm);
}

/* A row of badges should read as one line, not as a stack. */
.md-p > .md-link > .md-image { margin-right: var(--space-1); }

.md-tablewrap {
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.md-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.md-table th,
.md-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.md-table th {
  background: var(--surface-sunken);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

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

/* ==========================================================================
   The import dialog
   ========================================================================== */

.dialog--import { max-width: 34rem; }

.import__block {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.import__block .field { width: 100%; gap: 0; }

/* The rule goes BETWEEN the two ways in, not under each of them — a line under
   the last block would read as the start of something that is not there. */
.import__block + .import__block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.import__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.import__icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The real control is unstyleable, so the label is the button and the input
   itself is taken off screen rather than hidden — `display: none` would take
   it out of the tab order along with its label. */
.import__file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.import__file:focus-visible + .btn { box-shadow: var(--focus-ring); }

.import__result {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-height: 1.4em;
}

.import__result--good { color: var(--good-ink); }
.import__result--bad  { color: var(--text-danger); }

.import__mode {
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-2);
}

.import__mode legend { padding: 0; margin-bottom: var(--space-1); }

.radio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
}

.radio input { accent-color: var(--accent); }


/* ==========================================================================
   A preview of a document, where the document is not the point
   ========================================================================== */

.doc__prose--clip {
  max-height: 26rem;
  overflow: hidden;
  /* The fade says "there is more" without a hard cut, which reads as a bug. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.doc__all { margin-left: auto; }
.doc__all .btn__icon { margin-left: calc(var(--space-1) * -1); }

/* ==========================================================================
   The documentation page
   ========================================================================== */

.doc-page__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.doc-page__count {
  flex: 1;
  min-width: 12rem;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ---- the jump list ------------------------------------------------------ */

.doc-index {
  margin-bottom: var(--space-5);
  max-width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.doc-index__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.doc-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Chips rather than a paragraph of underlined links: a jump list is something
   you scan, and fifteen underlines in a row is not scannable. */
.doc-index__link {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-index__link:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.doc-index__link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* A task nobody has written anything for yet: still listed, because seeing the
   gap is half the reason to open this page — but quieter, so what IS written
   is what the eye lands on. */
.doc-index__link--empty {
  color: var(--text-muted);
  background: none;
  border-style: dashed;
}

/* ---- one part ----------------------------------------------------------- */

.doc-part__link { color: inherit; text-decoration: none; }
.doc-part__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* .card__link is styled for something you can click; this is a status and a
   name, so it keeps the layout and drops the link colour. */
.doc-part__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--text-muted);
  font-weight: 400;
}

.doc-part--empty .card__title { color: var(--text-secondary); }

.doc-part__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

.doc-part__block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }

.doc-part__label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* The flat card: no chrome of its own, because the block around it has it. */
.doc--flat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

.doc__saved {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.doc--flat .doc__actions { border-top: 0; padding-top: 0; }

.doc__prose--brief { color: var(--text-secondary); }

/* ---- anchors inside a document ------------------------------------------ */

/* A link in a README to one of its own headings. It is a button, because
   following a real href would be read as a route — see markdown.js. */
.md-anchor {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.md-h:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 4px; border-radius: var(--radius-sm); }

/* ==========================================================================
   Narrow
   ========================================================================== */

@media (max-width: 640px) {
  .doc__prose { font-size: var(--text-sm); }
  .md-h--2 { font-size: var(--text-lg); }
  .md-h--3 { font-size: var(--text-md); }
  .doc__input { min-height: 240px; }
  .doc__foot .btn { flex: 1 1 auto; justify-content: center; }
  .doc__status { flex-basis: 100%; }
  .doc__all { margin-left: 0; }
  .doc-page__bar { gap: var(--space-3); }
  .doc-index__list { flex-direction: column; gap: var(--space-2); }
  .doc__prose--clip { max-height: 18rem; }
}

/* ==========================================================================
   De bibliotheek — de documentatiepagina van een project

   Links alles wat er is, rechts één stuk tegelijk. Twee kolommen die allebei
   `minmax(0, …)` krijgen, want een lange bestandsnaam in de linkerkolom of een
   brede tabel in de rechter duwt anders de hele pagina uit het scherm.
   ========================================================================== */

/* Rand tot rand, net als Code en Berichten. Het ontwerp legt hier geen blad met
   twee kaarten erop neer maar twee kolommen die tot de rand doorlopen: gemeten
   staat het raster daar op `[0,64,1500,886]` met kolommen van 300 en 1200 en
   gap 0 — geen bladmarge, geen tussenruimte. */
#docs-page.page { max-width: none; padding: 0; }

.dl { display: flex; flex-direction: column; }

/* De balk loopt over de volle breedte, met een haarlijn eronder. `.pd-jump`
   zelf blijft ongemoeid: die staat ook op de project- en de codepagina, en op
   de projectpagina ligt hij nog wél op een blad. */
.dl-jump {
  margin-bottom: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.dl-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  background: var(--surface-raised);
}

/* Volledig scherm: de kolom links gaat weg en de tekst krijgt alles.

   "Alles" stond er al, maar deed het niet. De lijst verdween wel en de kolom
   groeide van 956 naar 1256 — en de tekst bleef op 725 staan, want de leesmaat
   gold ook hier. Je won driehonderd pixels witruimte en geen letter meer. Dat
   is precies het knopje indrukken en niets zien gebeuren.

   Dus in deze stand gaat de maat eraf. Een leesmaat is er om te voorkomen dat
   je oog de regel kwijtraakt op een breed scherm; iemand die zélf om volledig
   scherm vraagt heeft die afweging al gemaakt en wil de ruimte. Buiten deze
   stand blijft de maat gewoon staan. */
.dl--zen .dl-grid { grid-template-columns: minmax(0, 1fr); }
.dl--zen .dl-col,
.dl--zen .doc__prose,
.dl--zen .doc-files,
.dl--zen .editor__surface > * { max-width: none; }

/* 1100 en niet 900: tussen die twee is de rechterkolom nog geen 400 pixels
   breed, en dat is te smal om een document in te schrijven. */
@media (max-width: 1100px) {
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Boven 1100 staat de pagina vast en schuift alleen het document: de kopregel
   en de knoppenbalk blijven staan waar ze staan. Anders is de opmaakbalk na
   een halve pagina schrijven van het scherm af — gemeten: hij stond op −329.
   Meteen ook het gat eronder weg: op een leeg stuk hield de kaart op halverwege
   het scherm en stond de rest grijs te zijn.

   Alleen hierboven, want onder 1100 staan de lijst en het document ónder
   elkaar — die passen samen niet in één schermhoogte, en dan hoort de pagina
   gewoon te schuiven. */
@media (min-width: 1101px) {
  #docs-page.page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height));
    min-height: 0;
  }
  #docs-page .dl { flex: 1; min-height: 0; }
  #docs-page .dl-grid { flex: 1; min-height: 0; align-items: stretch; }
  /* De lijst schuift, de rest van de kolom niet: het zoekveld, de knop om iets
     nieuws te maken en het sleepvak horen te blijven staan. Anders zoek je een
     stuk op door te scrollen en is het zoekveld precies dan weg.

     De haarlijn staat hier en niet bij `.dl-rail` zelf, want alleen hierboven
     staat het document er daadwerkelijk naast. */
  #docs-page .dl-rail {
    position: static;
    overflow: hidden;
    border-right: 1px solid var(--border-subtle);
  }
  /* Alles in de kolom houdt zijn eigen hoogte. Dat moet er staan: `.pr-search`
     komt van de knoppenbalk op de projectpagina en heeft daar `flex: 1`, en
     zodra deze kolom een vaste hoogte krijgt groeit het zoekveld uit tot een
     vak van tweehonderdvijftig pixels. Alleen de lijst mag de rest opeten —
     die regel staat er met opzet ná, want even sterk wint de laatste. */
  #docs-page .dl-rail > * { flex: none; }
  #docs-page .dl-groups { flex: 1; min-height: 0; overflow-y: auto; }
  #docs-page .dl-drop { margin-top: var(--space-2); }
  #docs-page .dl-pane { display: flex; flex-direction: column; min-height: 0; }
  #docs-page .dl-head,
  #docs-page .dl-ribbon { flex: none; }
  #docs-page .dl-body { flex: 1; min-height: 0; overflow-y: auto; }
}

/* ---- de linkerkolom ---------------------------------------------------- */

/* Geen omlijsting en geen ronde hoeken meer: de scheiding met het document is
   een haarlijn, en die staat verderop in de mediaquery — alleen daar waar er
   ook echt een kolom naast staat. Onder 1100 staan ze onder elkaar, en dan is
   een streep aan de zijkant een streep naar niets. */
.dl-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface-raised);
  position: sticky;
  top: var(--space-4);
}
.dl-rail--over { outline: 2px dashed var(--accent); outline-offset: 3px; }

.dl-rail__head { display: flex; align-items: baseline; gap: var(--space-2); }

.dl-rail__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.dl-rail__count {
  margin-left: auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

.dl-search { width: 100%; }

.dl-rail__acts { display: flex; gap: var(--space-2); }
.dl-new { flex: 1; }
.dl-upload { cursor: pointer; }

.dl-compose {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-page);
}

.dl-compose__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  padding: var(--space-1) 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.dl-compose__input:focus-visible { outline: none; border-bottom-color: var(--accent); }

.dl-compose__kinds { flex-wrap: wrap; }
.dl-compose__foot { display: flex; align-items: center; gap: var(--space-2); }

.dl-groups { display: flex; flex-direction: column; }

.dl-groups__empty {
  margin: 0;
  padding: var(--space-3) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.dl-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-1);
}

.dl-group__name {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.dl-group__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.dl-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
}
.dl-row:hover { background: var(--surface-hover); }
.dl-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* De open rij, met een vulling die de gedempte regel eronder niet opeet: op
   volle --accent-soft haalde de tweede regel maar 4,1:1. Dezelfde oplossing als
   de gekozen rij op de takenlijst. */
.dl-row--on {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-raised));
  border-left-color: var(--accent);
}

.dl-row__badge {
  flex: none;
  width: 40px;
  padding: 3px 0;
  border-radius: var(--radius-sm);
  background: var(--neutral-bg);
  color: var(--neutral-ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}
.dl-row__badge--page { background: var(--proj-2-bg); color: var(--proj-2-ink); }
.dl-row__badge--sheet { background: var(--proj-1-bg); color: var(--proj-1-ink); }
.dl-row__badge--check { background: var(--proj-3-bg); color: var(--proj-3-ink); }
.dl-row__badge--link { background: var(--proj-5-bg); color: var(--proj-5-ink); }
.dl-row__badge--task { background: var(--proj-4-bg); color: var(--proj-4-ink); }

.dl-row__text { display: grid; gap: 2px; min-width: 0; }

.dl-row__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-row__meta {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-drop {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* ---- de rechterkolom --------------------------------------------------- */

/* Ook hier geen kaart meer. `overflow: hidden` blijft wél staan: de kopregel en
   de opmaakbalk erin hebben een eigen vlak, en zonder dit loopt de tekst er bij
   het schuiven onderdoor. */
.dl-pane {
  min-width: 0;
  background: var(--surface-raised);
  overflow: hidden;
}

.dl-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

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

.dl-head__by {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-3);
}

.dl-head__acts { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dl-head__drop { color: var(--critical-ink); }

.dl-body { padding: var(--space-5) var(--space-6) var(--space-6); }

@media (max-width: 700px) {
  .dl-body { padding: var(--space-4); }
}

.dl-title { margin-bottom: var(--space-4); }

.dl-title__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.dl-title__field {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.dl-title__field:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 0 var(--accent);
}

.dl-title__line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dl-title__where { color: var(--text-muted); }

/* Een link is zijn eigen adres, en een adres breekt niet af uit zichzelf. Op
   een telefoon duwde hij daardoor de hele regel het scherm uit. */
.dl-title__meta {
  color: var(--text-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}
.dl-title__meta--after::before { content: "· "; }

/* Rechts, náást wat er links op de regel staat. Staat er links niets — op een
   leeg stuk zegt de kopregel al "nog niet geschreven" en blijft de regel
   verder leeg — dan zweeft hij aan de overkant met niets ernaast, en hoort hij
   gewoon links te beginnen, onder de titel. */
.dl-watch { display: flex; align-items: center; gap: var(--space-2); }
.dl-watch:not(:first-child) { margin-left: auto; }
.dl-watch__line { font-size: var(--text-2xs); color: var(--text-muted); }

.dl-title__task {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-link);
}

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

.dl-notes { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }

.dl-note {
  padding: var(--space-3);
  border-left: 3px solid var(--info-ink, var(--accent));
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.dl-note--done { opacity: 0.72; border-left-color: var(--border-strong); }

.dl-note__head { display: flex; align-items: center; gap: var(--space-2); }
.dl-note__who { font-size: var(--text-xs); color: var(--text-primary); }
.dl-note__when { margin-left: auto; font-size: var(--text-2xs); color: var(--text-muted); }

.dl-note__text {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}
.dl-note--done .dl-note__text { text-decoration: line-through; }

.dl-note__reply {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

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

.dl-note__input,
.dl-note-add__input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-primary);
}
.dl-note__input:focus-visible,
.dl-note-add__input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.dl-note-add { display: flex; align-items: center; gap: var(--space-2); }

/* ---- de knoppenbalk ----------------------------------------------------- */

.dl-ribbon {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.dl-ribbon__group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.dl-tool {
  min-width: 28px;
  height: 26px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.dl-tool:hover:not(:disabled) { background: var(--surface-hover); }
.dl-tool:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Uitgeschakeld, niet onleesbaar: je moet kunnen zien wat je nú niet kunt, en
   --text-faint haalt de 4,5:1 niet. */
.dl-tool:disabled { color: var(--text-muted); cursor: default; }

.dl-tool--more {
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
.dl-tool--on { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: var(--accent); }

.dl-ribbon__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

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

.dl-doc { display: flex; flex-direction: column; gap: var(--space-4); }

/* Eén maat voor lezen en schrijven, en die staat op een bakje om het veld heen
   in plaats van op het veld zelf: `ch` is in een monospace van 12px iets heel
   anders dan in de leesletter van 14, en op de bak eromheen zou hij ook de
   knoppenbalk versmallen — die hoort juist de volle breedte te hebben, anders
   valt hij over drie regels uiteen. */
/* Eén kolom, in het midden — titel, opmerkingen, tekst en de vraagrij. Alleen
   de kopregel en de knoppenbalk lopen over de hele kaart; dat zijn balken van
   het venster, zoals in Word.

   Dit stond eerst per onderdeel: het schrijfveld gecentreerd, de titel niet.
   Dan begint de titel honderdveertig pixels links van de tekst die eronder
   staat, en in volledig scherm driehonderd. Het hoort één kolom te zijn. */
/* Geen leesmaat meer op de schrijfkolom. Hij stond op 96ch en dat was in het
   ontwerp ook zo, maar in de app viel het anders uit: naast de zijbalk en de
   lijst hield je een strook van 725 over op een scherm van 1500, en om er
   fatsoenlijk in te kunnen werken moest je eerst op Volledig scherm drukken.
   Een maat die je pas kunt gebruiken nadat je een knop hebt gevonden is geen
   maat maar een drempel.

   Dit is een bewuste afwijking van het ontwerp: daar staat de tekst in een
   kolom van 1200 zonder zijbalk ernaast, hier niet. Wat blijft staan is de
   maat op het léésbeeld buiten deze pagina — zie `.doc__prose` hieronder. */
.dl-col { width: 100%; margin-inline: auto; }

/* `width: 100%` hoort erbij: dit is een flexitem in een kolom, en zonder die
   regel krimpt een leeg tekstvak naar zijn inhoud — honderdtachtig pixels. */
.dl-measure { width: 100%; }

.dl-area {
  width: 100%;
  min-height: 320px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  resize: vertical;
}

.dl-preview {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.dl-preview--only { padding-top: 0; border-top: 0; }
.dl-preview__empty { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

.dl-brief {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.dl-brief__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.dl-brief__p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.dl-brief__p:last-child { margin-bottom: 0; }

/* ---- checklist ---------------------------------------------------------- */

.dl-check { display: flex; flex-direction: column; gap: var(--space-3); }
.dl-check__line { display: flex; align-items: center; gap: var(--space-3); }
.dl-check__meter { flex: 1; }
.dl-check__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

.dl-check__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.dl-check__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.dl-check__text,
.dl-check__new {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: var(--space-1) 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.dl-check__text:focus-visible,
.dl-check__new:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--accent); }
.dl-check__item--done .dl-check__text { text-decoration: line-through; color: var(--text-muted); }
.dl-check__text--read { padding: var(--space-1) 0; }

.dl-check__drop {
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
}
.dl-check__drop:hover { color: var(--critical-ink); }
.dl-check__drop:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.dl-check__empty { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.dl-check__add { display: flex; align-items: center; gap: var(--space-2); }

/* ---- link ---------------------------------------------------------------- */

.dl-link { display: flex; flex-direction: column; gap: var(--space-3); }
.dl-link__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.dl-link__field {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
}
.dl-link__field:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--accent); }
.dl-link__note { min-height: 72px; }
.dl-link__read { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- een bestand --------------------------------------------------------- */

.dl-file { display: flex; flex-direction: column; gap: var(--space-3); }

.dl-file__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.dl-file__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dl-file__name {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-file__meta { margin: 0; font-size: var(--text-2xs); color: var(--text-muted); }
.dl-file__note { margin: 0; font-size: var(--text-xs); color: var(--text-muted); max-width: 60ch; }
.dl-file__shot {
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.dl-empty { padding: var(--space-8) var(--space-4); }

/* ---- aandachtsblokken en afvinkregels in de tekst ------------------------ */

.md-callout { border-left-width: 3px; }
.md-callout--note { border-left-color: var(--good-ink); background: var(--good-bg); }
.md-callout--tip { border-left-color: var(--good-ink); background: var(--good-bg); }
.md-callout--warning { border-left-color: var(--critical-ink); background: var(--critical-bg); }
.md-callout--caution { border-left-color: var(--critical-ink); background: var(--critical-bg); }
.md-callout--important { border-left-color: var(--warning-ink); background: var(--warning-bg); }

.md-callout__label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

.md-item--task { list-style: none; margin-left: -1.2em; }
.md-task { margin-right: var(--space-2); color: var(--text-muted); }
.md-task--on { color: var(--good-ink); }

/* De terugweg draagt hier een langere zin dan op de projectpagina en mag niet
   over twee regels vallen. */
.dl-jump .pd-jump__back { white-space: nowrap; }

/* Vier gezichten naast elkaar in een regel van elf pixels hoog: de stapel mag
   hier minder overlappen dan in een kaart, anders is er één gezicht te zien. */
.dl-watch .avatar-stack .avatar { margin-left: -6px; }
.dl-watch .avatar-stack .avatar:first-child { margin-left: 0; }

/* Onder één kolom staat de lijst bóven het document, en dan mag hij niet meer
   vastplakken: hij zou over de tekst heen komen te liggen die hij hoort te
   openen. Deze regel staat achteraan met opzet — een mediaquery telt niet mee
   voor specificiteit, dus hij moet ná `.dl-rail` komen om te winnen. */
@media (max-width: 1100px) {
  .dl-rail { position: static; }
}

/* De wissel tussen lezen en schrijven staat vooraan in de kop, waar de andere
   twee wissels in deze applicatie ook staan. */
.dl-modes { flex: none; }

/* Een verborgen bestandsveld is de gewone manier om een uploadknop te maken,
   maar dan moet je wél zien waar je bent als je erheen tabt. */
.dl-upload:focus-within { outline: none; box-shadow: var(--focus-ring); }

.dl-filled {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  cursor: pointer;
}
.dl-filled__label { font-size: var(--text-2xs); color: var(--text-muted); }

.dl-ask {
  align-self: flex-start;
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.dl-ask:hover { color: var(--text-primary); }
.dl-ask:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* De knoppenbalk hoort bij het veld, dus hij staat eraan vast. */
/* De balk staat nu naast de kopregel, als kind van de kaart zelf — hij hoeft
   zich niet meer uit de marge van .dl-body te wringen. */

/* Een vraag die openstaat, in de lijst. Geen kleurvlek maar een cijfer: je wilt
   weten hóéveel er open staan. */
.dl-row__asks {
  flex: none;
  align-self: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--warning-bg);
  color: var(--warning-ink);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* De vraagrij onder het document. De breedte komt van .dl-col. */
.dl-asking {
  width: 100%;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dl-asking .dl-note-add { flex: 1; }

/* ---- de documentatiepagina werkt, en leest niet alleen ------------------

   `.doc__prose` houdt zijn leesmaat overal waar je een document alleen
   bekíjkt — op een taak, in een kaart, op de bestandspagina. Maar dit is de
   pagina waar je zit te schrijven, met een lijst van 300 pixels ernaast en de
   zijbalk van de app daar weer naast. Daar bleef een strook van 725 over op
   een scherm van 1500, en de ruimte was pas te gebruiken nadat je Volledig
   scherm had gevonden.

   Lezen en schrijven horen hier bovendien even breed te zijn: wisselen tussen
   de twee mag de tekst niet laten verspringen. Het schrijfvlak vult zijn
   kolom, dus de leesstand ook. */
#docs-page .doc__prose,
#docs-page .doc-files { max-width: none; }