/* ==========================================================================
   file.css — one file on a page of its own, and the grid inside it

   The page is a single column with a maximum width, because everything it can
   show is something you read left to right. The one exception is the grid,
   which is allowed the whole width and scrolls sideways inside itself rather
   than pushing the page out.
   ========================================================================== */

.page--file { padding-bottom: var(--space-6); }

.filepage {
  display: grid;
  /* minmax(0, …) or a wide table stretches the column past the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* ---- the way back ------------------------------------------------------- */

.filepage__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  padding: 2px 6px 2px 2px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
}

.filepage__back:hover { background: var(--surface-hover); color: var(--text-primary); }

.filepage__back-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- the head ----------------------------------------------------------- */

.filepage__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.filepage__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}

.filepage__title {
  margin: 0;
  min-width: 0;
  font-size: var(--text-xl);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.filepage__icon {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.filepage__icon--sheet,
.filepage__icon--csv { stroke: var(--leaf-500); }
.filepage__icon--image { stroke: var(--chart-5); }
.filepage__icon--doc,
.filepage__icon--text { stroke: var(--chart-1); }

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

.filepage__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.filepage__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  max-width: 100%;
}

.filepage__star--on svg { fill: var(--warning-ink); stroke: var(--warning-ink); }

/* A button that happens to be a link is still a button. */
.filepage__actions a.btn { text-decoration: none; }

/* ---- the body ----------------------------------------------------------- */

.filepage__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.filepage__loading,
.filepage__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

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

/* Het leesbeeld van een bestand houdt wél een maat: daar lees je en typ je
   niet, en dan is een regel van twaalfhonderd pixels er één waarin je oog het
   begin van de volgende kwijtraakt. */
.filepage__prose { max-width: var(--doc-measure); }

.filepage__text {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.filepage__edit { display: grid; grid-template-columns: minmax(0, 1fr); }

.filepage__area {
  width: 100%;
  min-height: 58vh;
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  line-height: 1.65;
  resize: vertical;
}

.filepage__area:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--border-focus); }

.filepage__image {
  max-width: 100%;
  max-height: 70vh;
  justify-self: start;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.filepage__media { width: 100%; }

.filepage__pdf {
  width: 100%;
  height: 74vh;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.filepage__none {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  text-align: center;
}

.filepage__none-icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.filepage__none-title { margin: 0; font-weight: 600; }
.filepage__none-body { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- sheets ------------------------------------------------------------- */

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

.filepage__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.filepage__tab {
  padding: 3px var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.filepage__tab--on {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-soft-ink);
  font-weight: 600;
}

.filepage__docwrap { display: grid; grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   The grid
   ========================================================================== */

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

.sheet__tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.sheet__scroll {
  overflow: auto;
  max-height: 66vh;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.sheet__table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

/* The column letters and the row numbers stay put while the rest scrolls —
   a cell you cannot place is a cell you cannot trust. */
.sheet__head,
.sheet__corner {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 8.5rem;
  padding: 4px var(--space-2);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: left;
}

.sheet__corner { left: 0; z-index: 3; min-width: 2.6rem; }

.sheet__num {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 2.6rem;
  min-width: 2.6rem;
  padding: 0 var(--space-2);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--text-muted);
  text-align: right;
}

.sheet__cell {
  padding: 0;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.sheet__input {
  width: 100%;
  min-width: 8.5rem;
  padding: 5px var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  line-height: 1.6;
}

.sheet__input:read-only { cursor: default; }

/* The focused cell gets a ring inside itself rather than a border, so nothing
   moves by a pixel when you walk across the grid. */
.sheet__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
  background: var(--surface-raised);
}

.sheet__cell--head .sheet__input { font-weight: 600; }
.sheet__cell--num .sheet__input { text-align: right; font-variant-numeric: tabular-nums; }
.sheet__cell--formula .sheet__input { color: var(--text-link); }

.sheet__foot { min-height: 1.2rem; }

.sheet__totals {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---- the new-file dialog ------------------------------------------------ */

.picklist--kinds label { align-items: flex-start; }
.picklist__kind { display: grid; gap: 1px; }
.picklist__kindname { font-size: var(--text-sm); font-weight: 600; }
.picklist__kindnote { font-size: var(--text-xs); color: var(--text-muted); }


/* ==========================================================================
   The writing surface
   ========================================================================== */

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

.editor__bar,
.sheet__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  position: sticky;
  top: 0;
  z-index: 4;
}

.editor__group,
.sheet__group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: var(--space-2);
  border-right: 1px solid var(--border-subtle);
}

.editor__group:last-child,
.sheet__group:last-child { border-right: 0; padding-right: 0; }

.editor__tool,
.sheet__tool {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.editor__tool:hover,
.sheet__tool:hover { background: var(--surface-hover); color: var(--text-primary); }

.editor__tool:focus-visible,
.sheet__tool:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.editor__tool--on,
.sheet__tool--on {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-soft-ink);
}

.editor__tool[disabled],
.sheet__tool[disabled] { opacity: 0.4; cursor: default; }

.editor__tool-icon,
.sheet__tool-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The menus are flex items in a wrapping bar; without a fixed basis the
   global .select rule (width: 100%) makes each one claim a whole row. */
.editor__style { flex: none; width: 11rem; min-width: 0; }
.sheet__select { flex: none; width: 11.5rem; min-width: 0; }

/* The sheet of paper is as wide as the page; the line of text on it is not.
   `doc__prose` caps its own width, which would leave the paper stopping in
   the middle of the screen while the toolbar above it went the whole way. */
.editor__surface {
  min-height: 52vh;
  max-width: none;
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

/* De inhoud vult het schrijfvlak. Stond op de leesmaat, en dan schrijf je in
   een strook terwijl er ruimte naast staat — op de bestandspagina net zo goed
   als in de documentatie. Een tabel of een brede regel code werd er bovendien
   door afgeknepen terwijl er plek zat. */
.editor__surface > * { max-width: none; }
.editor__surface > table { max-width: 100%; }

.editor__surface:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

/* The editor draws with the same prose styles the reader uses, so what you
   type is what you saw a moment ago. */
.editor__surface > :first-child { margin-top: 0; }
.editor__surface p { margin: 0 0 var(--space-3); }
.editor__surface h1, .editor__surface h2, .editor__surface h3, .editor__surface h4 {
  margin: var(--space-5) 0 var(--space-2);
  line-height: 1.25;
}
.editor__surface h1 { font-size: var(--text-xl); }
.editor__surface h2 { font-size: var(--text-lg); }
.editor__surface h3 { font-size: var(--text-md); }
.editor__surface ul, .editor__surface ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.editor__surface li { margin: 0 0 var(--space-1); }
.editor__surface blockquote {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
  border-left: 3px solid var(--accent-soft-hover);
  color: var(--text-secondary);
}
.editor__surface pre {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  white-space: pre-wrap;
}
.editor__surface a { color: var(--text-link); }

.editor__table { width: 100%; margin: 0 0 var(--space-3); }

/* Something in the file we cannot draw. It is not editable and says so,
   rather than looking like a paragraph somebody deleted the text out of. */
.editor__kept {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  color: var(--text-muted);
  user-select: none;
}

/* Where a page ends. Word draws nothing at all for this; here it needs to be
   visible, because a break you cannot see is a break you move by accident. */
.editor__break {
  margin: var(--space-4) 0;
  border: 0;
  border-top: 1px dashed var(--border-strong);
  padding-top: var(--space-1);
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
}

/* The contents list is a promise Word keeps on open, so what stands here is
   a note saying so rather than a list this application invented. */
.editor__toc {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  user-select: none;
}

/* The typeface, size, colour and highlight lists sit in the toolbar and must
   not push it into a second row. */
.editor__pick {
  height: 30px;
  padding: 0 var(--space-5) 0 var(--space-2);
  font-size: var(--text-xs);
  max-width: 116px;
}

/* ==========================================================================
   Two versions, side by side in one column
   ========================================================================== */

.cmp {
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  padding: var(--space-2);
}

.cmp__line {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 1px var(--space-2);
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: var(--text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 2px;
}

.cmp__sign { flex: 0 0 auto; width: 1ch; color: var(--text-muted); }
.cmp__text { flex: 1 1 auto; }

.cmp__line--in { background: var(--good-bg); color: var(--good-ink); }
.cmp__line--out { background: var(--critical-bg); color: var(--critical-ink); }
.cmp__line--in .cmp__sign { color: var(--good-ink); }
.cmp__line--out .cmp__sign { color: var(--critical-ink); }
.cmp__line--out .cmp__text { text-decoration: line-through; }

.cmp__gap {
  margin: var(--space-1) 0;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}

.cmp__counts { display: flex; gap: var(--space-3); margin: 0 0 var(--space-3); }

.cmp__count {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
}

.cmp__count--in { background: var(--good-bg); color: var(--good-ink); }
.cmp__count--out { background: var(--critical-bg); color: var(--critical-ink); }

/* ==========================================================================
   The formula bar and the palettes
   ========================================================================== */

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

.sheet__address {
  min-width: 3.4rem;
  padding: 2px var(--space-2);
  border-right: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.sheet__bar-icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sheet__formula {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
}

.sheet__formula:focus-visible { outline: none; }
.sheet__bar:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }

.sheet__palette { position: relative; }

.sheet__swatches {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 6;
  grid-template-columns: repeat(3, 24px);
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.sheet__palette--open .sheet__swatches { display: grid; }

.sheet__swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

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

/* "No colour" has to look like an answer rather than like a missing swatch. */
.sheet__swatch--none {
  background:
    linear-gradient(to top right, transparent 46%, var(--status-critical) 46%,
      var(--status-critical) 54%, transparent 54%),
    var(--surface-raised);
}

.sheet__cell--error .sheet__input { color: var(--text-danger); font-weight: 600; }


/* ---- selection, filtering, sheets, charts ------------------------------- */

/* While a block is being picked, text selection inside the cells would fight
   the cell selection for the same drag. */
.sheet--picking .sheet__input { user-select: none; }

.sheet__cell--picked { background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); }
.sheet__cell--picked .sheet__input { background: transparent; }

.sheet__cell--here .sheet__input { box-shadow: inset 0 0 0 2px var(--border-focus); }

.sheet__row--hidden { display: none; }

.sheet__head { position: relative; }
.sheet__head-name { display: inline-block; }

.sheet__filter {
  position: absolute;
  top: 2px;
  right: 8px;
  display: none;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.sheet__head:hover .sheet__filter,
.sheet__filter--on,
.sheet__filter:focus-visible { display: grid; }
.sheet__filter--on { color: var(--accent); }
.sheet__filter:hover { background: var(--surface-active); color: var(--text-primary); }

.sheet__filter-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The grip is invisible until you are on it, because a column edge that
   looks like a control is a column edge people stop reading past. */
.sheet__grip {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}

.sheet__grip:hover { background: var(--accent-soft-hover); }

.sheet__sheets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.sheet__sheet {
  padding: 3px var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
}

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

.sheet__sheet--on {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-soft-ink);
  font-weight: 600;
}

.sheet__sheet--add,
.sheet__sheet--drop {
  min-width: 26px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--text-muted);
}

.sheet__sheet--drop:hover { background: var(--critical-bg); color: var(--critical-ink); }

/* ---- cells joined into one ---------------------------------------------- */

.sheet__cell--merged {
  vertical-align: middle;
  background: var(--surface-raised);
}

.sheet__cell--merged .sheet__input { font-weight: 500; }

/* ---- doorvoeren --------------------------------------------------------- */

/* Het blokje op de rechteronderhoek van de selectie. Het staat half buiten de
   cel, zoals in elke spreadsheet, zodat het te pakken is zonder de cel zelf
   te raken. */
.sheet__cell--corner { position: relative; }

.sheet__fill {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 3;
  width: 7px;
  height: 7px;
  border: 1px solid var(--surface-raised);
  border-radius: 1px;
  background: var(--accent);
  cursor: crosshair;
}

/* Waar het naartoe gaat, terwijl je trekt. */
.sheet__cell--filling { background: var(--accent-soft); }

/* ==========================================================================
   Twee bestanden naast elkaar

   Het tweede staat er om naar te kijken terwijl je in het eerste schrijft.
   Allebei scrollen ze los, want twee panelen die aan elkaar vastzitten zijn
   twee panelen waarvan er altijd één op de verkeerde plek staat.
   ========================================================================== */

.filepage__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.filepage__beside {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  max-height: 78vh;
  overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.filepage__beside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.filepage__beside-name {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 1099px) {
  .filepage__split { grid-template-columns: minmax(0, 1fr); }
  .filepage__beside { max-height: none; }
}

/* ==========================================================================
   Een presentatie, gelezen
   ========================================================================== */

.deck { display: grid; gap: var(--space-3); }

.deck__slide {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.deck__num {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.deck__title { margin: 0; font-size: var(--text-lg); line-height: 1.3; }

.deck__lines {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-secondary);
}

.deck__image {
  max-width: 100%;
  height: auto;
  justify-self: start;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.deck__notes { font-size: var(--text-sm); color: var(--text-secondary); }
.deck__notes summary { cursor: pointer; color: var(--text-muted); }
.deck__notes p { margin: var(--space-2) 0 0; white-space: pre-wrap; }
.deck__empty { margin: 0; font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }

/* ==========================================================================
   In een zip kijken
   ========================================================================== */

.ziplist { display: grid; gap: 1px; }

.ziplist__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

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

.ziplist__name { flex: 1 1 auto; min-width: 0; display: grid; }

.ziplist__path {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

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

/* ==========================================================================
   Code en gegevens
   ========================================================================== */

.code {
  overflow: auto;
  max-height: 74vh;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.code__table { border-collapse: collapse; width: 100%; }

.code__num {
  width: 1%;
  padding: 0 var(--space-3) 0 var(--space-2);
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--text-muted);
  text-align: right;
  vertical-align: top;
  user-select: none;
  white-space: nowrap;
}

.code__text {
  padding: 0 var(--space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.code__line:hover .code__num { color: var(--text-secondary); }

/* Vier kleuren en niet meer. Een regenboog leest niet beter dan een regel
   waarin je de tekst, de getallen en de sleutels uit elkaar kunt houden. */
.code__string { color: var(--code-string); }
.code__number { color: var(--code-number); }
.code__word { color: var(--code-word); font-weight: 600; }
.code__tag { color: var(--code-tag); font-weight: 600; }
.code__key { color: var(--code-key); }
.code__comment { color: var(--text-muted); font-style: italic; }

.code__more {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---- een aangewezen plaatje --------------------------------------------- */

.editor__figure { position: relative; }

.editor__figure--picked .editor__image {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.editor__image { cursor: pointer; max-width: 100%; height: auto; }

/* Het balkje hangt aan het plaatje zelf, niet in de werkbalk: het gaat over
   dít plaatje en is er alleen zolang je het aankijkt. */
.editor__imgbar {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}

.editor__pill {
  padding: 2px var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

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

/* ---- zoeken en vervangen ------------------------------------------------ */

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

.sheet__findwhat,
.sheet__findwith { max-width: 190px; }

.sheet__findcount { font-size: var(--text-xs); color: var(--text-secondary); }

.sheet__cell--hit { background: var(--warning-bg); }
.sheet__cell--hit .sheet__input { color: var(--warning-ink); }

/* ---- verborgen, en de rijhoogte ----------------------------------------- */

/* Verborgen door een filter is een kijkstand; verborgen omdat iemand dat zo
   wilde staat in het bestand. Ze zien er hetzelfde uit en zijn het niet. */
.sheet__row--away { display: none; }
.sheet__cell--away,
.sheet__head--away { display: none; }

.sheet__num { position: relative; }

.sheet__vgrip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 6px;
  cursor: row-resize;
}

.sheet__vgrip:hover { background: var(--accent-soft-hover); }

/* ---- een opmerking bij een cel ------------------------------------------ */

.sheet__cell--noted { position: relative; }

/* Hetzelfde hoekje dat Excel tekent, in de accentkleur in plaats van rood —
   rood betekent hier al "er is iets mis". */
.sheet__noteflag {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 7px solid var(--accent);
  border-left: 7px solid transparent;
  pointer-events: none;
}

/* ---- a list to choose from ---------------------------------------------- */

.sheet__cell--list { position: relative; }

/* Room for the chevron, so the longest item on the list is not sitting
   underneath it. */
.sheet__cell--list .sheet__input { padding-right: var(--space-6); }

.sheet__chevron {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.sheet__chevron::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.sheet__chevron:hover { background: var(--accent-soft); color: var(--accent-soft-ink); }

.sheet__list {
  position: absolute;
  z-index: 6;
  top: 100%;
  left: 0;
  min-width: 100%;
  max-height: 220px;
  overflow: auto;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}

.sheet__option {
  display: block;
  width: 100%;
  padding: 4px var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.sheet__option:hover { background: var(--surface-hover); }
.sheet__option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sheet__option--on { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 600; }

/* ---- the rows that stay put --------------------------------------------- */

/* Frozen rows are shown as fixed rather than made sticky: a sticky row inside
   a scrolling table needs every cell to be sticky too, and the header row is
   already sitting there. A line under the last frozen row says where the
   freeze ends, which is the part people actually need to see. */
.sheet__row--frozen:last-of-type .sheet__cell,
.sheet__row--frozen + tr:not(.sheet__row--frozen) .sheet__cell {
  border-top: 2px solid var(--accent);
}

.sheet__row--frozen .sheet__cell { background: var(--surface-sunken); }

.sheet__chart {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.sheet__chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sheet__chart-title { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.sheet__chart-stage { height: 260px; }
.sheet__chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sheet__chart-note { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

.dialog__swatches { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.sheet__swatch--on { box-shadow: 0 0 0 2px var(--border-focus); }
.picklist__all { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-weight: 600; }


/* ---- pictures, tables, comments, finding -------------------------------- */

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

@media (min-width: 1100px) {
  /* The margin only appears where there is room for it; below that the
     comments sit under the document rather than squeezing it. */
  .editor__stage:has(.editor__rail:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 230px;
  }
}

.editor__figure { margin: var(--space-4) 0; }

.editor__image {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.editor__file { display: none; }

.editor__commented {
  border-right: 3px solid var(--warning-line);
  padding-right: var(--space-3);
}

.editor__rail { display: grid; align-content: start; gap: var(--space-2); }

.editor__note {
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--warning-line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.editor__note-who { margin: 0 0 2px; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.editor__note-text { margin: 0; font-size: var(--text-sm); }

.editor__tablebar,
.editor__find {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.editor__tablebar-label,
.editor__find-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.editor__find-input { flex: 1 1 11rem; min-width: 0; }
.editor__count { font-size: var(--text-xs); color: var(--text-muted); padding: 0 var(--space-2); }

.editor__hit { background: var(--warning-bg); color: var(--warning-ink); border-radius: 2px; }
.editor__hit--on { background: var(--accent-soft-hover); color: var(--accent-soft-ink); }

.editor__outline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.editor__jump {
  padding: 2px var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor__jump:hover { background: var(--surface-hover); color: var(--text-primary); }
.editor__jump:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.editor__jump--h1 { font-weight: 600; }
.editor__jump--h3, .editor__jump--h4 { opacity: 0.8; }

/* ==========================================================================
   Narrower
   ========================================================================== */

@media (max-width: 700px) {
  .filepage__title { font-size: var(--text-lg); }
  .filepage__area { min-height: 44vh; }
  .sheet__scroll { max-height: 56vh; }
  .editor__surface { min-height: 40vh; padding: var(--space-4); }
  .editor__bar, .sheet__tools { position: static; }
  .sheet__head,
  .sheet__input { min-width: 7rem; }
  .filepage__pdf { height: 60vh; }
}

/* ==========================================================================
   Op een telefoon

   De balken passen wel op 390 pixels, maar comfortabel is anders: twintig
   knopjes van dertig pixels die over vier regels vallen duwen het document van
   het scherm af. Op een smal scherm wordt elke balk één regel die je opzij
   schuift — hetzelfde gebaar als in elke app op een telefoon — en worden de
   raakvlakken groter dan de vinger van een muis.
   ========================================================================== */

@media (max-width: 720px) {
  .editor__bar,
  .sheet__tools,
  .editor__tablebar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* Ruimte onder de balk zodat de schuifbalk het onderste knopje niet
       half afdekt. */
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }

  .editor__group,
  .sheet__group { flex: none; scroll-snap-align: start; }

  .editor__tool,
  .sheet__tool {
    width: 38px;
    height: 38px;
  }

  .editor__pick,
  .sheet__select {
    height: 38px;
    font-size: var(--text-sm);
  }

  /* Een cel die je met een vinger moet raken kan niet 8,5rem breed zijn en
     tegelijk 22 pixels hoog. */
  .sheet__input { padding: 9px var(--space-2); min-width: 7rem; }
  .sheet__head, .sheet__corner { min-width: 7rem; }
  .sheet__num { min-width: 2.4rem; }

  /* De greep om een kolom of rij te slepen is met een muis 6 pixels breed en
     met een vinger onvindbaar. */
  .sheet__grip { width: 14px; }
  .sheet__vgrip { height: 14px; bottom: -7px; }
  .sheet__fill { width: 11px; height: 11px; right: -5px; bottom: -5px; }

  .sheet__find { flex-wrap: wrap; }
  .sheet__findwhat, .sheet__findwith { max-width: 100%; flex: 1 1 130px; }

  .ziplist__row { flex-wrap: wrap; }
  .deck__slide { padding: var(--space-3); }
}

/* ==========================================================================
   Printen, en dus ook opslaan als PDF

   Er was hier nooit een printstijl, dus Ctrl+P leverde de hele app-schil op:
   zijbalk, bovenbalk, knoppen, en het document ergens in het midden. Nu blijft
   alleen het bestand staan.
   ========================================================================== */

.printonly { display: none; }

@media print {
  /* Alles wat de applicatie ís en niet het bestand. */
  .app__sidebar,
  .app__topbar,
  .nav-rail,
  .skip-link,
  .toasts,
  .chat-drawer,
  .call-screen,
  .call-mini,
  .splash,
  .filepage__back,
  .filepage__actions,
  .editor__bar,
  .editor__find,
  .editor__tablebar,
  .editor__outline,
  .editor__imgbar,
  .sheet__tools,
  .sheet__find,
  .sheet__sheets,
  .sheet__foot,
  .sheet__formula-bar,
  .filepage__note,
  .filepage__beside { display: none !important; }

  /* De pagina zelf mag alle ruimte hebben. */
  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  .app,
  .app__main,
  .page,
  .filepage,
  .filepage__split { display: block !important; padding: 0 !important; margin: 0 !important; }

  .filepage__prose,
  .editor__surface { max-width: none !important; }

  .editor__surface { border: 0 !important; padding: 0 !important; min-height: 0 !important; }

  /* Een raster op papier hoort niet in een venster te scrollen. */
  .sheet__scroll { overflow: visible !important; max-height: none !important; border: 0 !important; }
  .sheet__input { border: 0 !important; background: transparent !important; }

  /* Een kop hoort niet alleen onderaan een bladzijde te staan, en een rij
     hoort niet doormidden. */
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  tr, .deck__slide, .editor__figure { break-inside: avoid; page-break-inside: avoid; }

  /* Het pagina-einde uit het document doet op papier wat het belooft. */
  .editor__break { break-after: page; page-break-after: always; border: 0; color: transparent; }

  /* De kop- en voettekst die bij het document horen. De browser drukt alleen
     af wat er staat; van de sectie-eigenschappen in de .docx weet hij niets. */
  .printonly { display: block; }

  .printonly__head,
  .printonly__foot {
    margin: 0 0 12pt;
    font-size: 9pt;
    color: #444;
    text-align: center;
  }

  .printonly__foot { margin: 12pt 0 0; }
  .printonly__name { margin: 0 0 18pt; font-size: 8pt; color: #777; text-align: right; }

  @page { margin: 18mm; }
}

/* ---- aandachtsblokken en afvinkregels ín de editor -----------------------

   Dezelfde kleuren als `.md-callout` op de leeskant (zie docs.css): wat je
   schrijft hoort eruit te zien als wat je straks leest, anders schrikt de
   leesstand. Alleen de vorm is hier eenvoudiger — geen kopregel met het woord
   erboven, want die staat in de tekst zelf en zou meegetypt worden. */
.editor__note {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-left: 3px solid var(--good-ink);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--good-bg);
}
.editor__note--warning,
.editor__note--caution { border-left-color: var(--critical-ink); background: var(--critical-bg); }
.editor__note--important { border-left-color: var(--warning-ink); background: var(--warning-bg); }
.editor__note--steps { border-left-color: var(--accent); background: var(--accent-soft); }

/* Het hokje is een `::before` en geen teken in de tekst: zo staat het niet in
   de weg van de cursor en kan niemand het per ongeluk wegtypen. */
.editor__surface li[data-done]::before {
  content: "\2610";
  margin-right: var(--space-2);
  color: var(--text-muted);
}
.editor__surface li[data-done="1"]::before {
  content: "\2611";
  color: var(--good-ink);
}