/*
 * Draaiboek web shell.
 *
 * The contract this implements is .planning/UI-SPEC-webschil.md, with the palette and the rulings
 * behind it in .agents/context/DESIGN.md. Two things worth knowing before editing:
 *
 * One hue (195, drawing ink) tints every neutral, and the accent is reserved for four things: the
 * filled part of the progress bar, the marker on the step being written, the focus ring, and a
 * selected rating button. A primary action is filled with ink instead. Every ratio was computed
 * (OKLCH to WCAG luminance), not judged by eye; --lijn is the one value below 3:1 and is decoration
 * only, never the boundary of a control.
 *
 * Four type sizes, two weights. Hierarchy is weight and colour, not scale.
 */

:root {
  --papier: oklch(0.985 0.003 195);
  --blad: oklch(0.997 0.002 195);
  --inkt: oklch(0.22 0.012 195);
  --inkt-zacht: oklch(0.50 0.010 195);
  --lijn: oklch(0.90 0.006 195);
  --lijn-sterk: oklch(0.62 0.008 195);
  --petrol: oklch(0.52 0.080 195);
  --geschreven: oklch(0.52 0.090 150);
  --aandacht: oklch(0.52 0.100 75);
  --geweigerd: oklch(0.50 0.140 25);

  /* The two highlight meanings, in the two hues Word paints into the .docx: yellow for new text,
     orange for revised. Word's literal FFFF00 and FFC000 were tried and are too loud on a screen
     you read for twenty minutes, so both are lightened, and the orange is pulled further away from
     yellow than FFC000 is: FFC000 lightens INTO an amber that reads as a paler yellow, and the pair
     has to stay tellable apart at a glance.

     Mixed 85% with the page rather than laid on top of it, which is the "a little transparent" that
     was asked for, and which does the right thing in both themes from one declaration: on paper it
     softens, on a near-black page it dims. Only the lightness moves, so yellow stays yellow and
     orange stays orange, which is the entire reason there are two of them. */
  --merk-nieuw: color-mix(in srgb, #FFF176 85%, var(--papier));
  --merk-herzien: color-mix(in srgb, #FFB74D 85%, var(--papier));

  --xs: 4px;
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 32px;
  --2xl: 48px;
  --3xl: 64px;

  --radius: 6px;
  --radius-panel: 8px;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  --snel: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --binnen: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: oklch(0.190 0.008 195);
    --blad: oklch(0.230 0.009 195);
    --inkt: oklch(0.940 0.006 195);
    --inkt-zacht: oklch(0.700 0.008 195);
    --lijn: oklch(0.320 0.010 195);
    --lijn-sterk: oklch(0.560 0.012 195);
    --petrol: oklch(0.720 0.090 195);
    --geschreven: oklch(0.750 0.100 150);
    --aandacht: oklch(0.780 0.100 75);
    --geweigerd: oklch(0.680 0.130 25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 400 15px/1.55 var(--ui);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--md);
  padding: 12px var(--lg);
  border-bottom: 1px solid var(--lijn);
}

/* The mark, then the name. The file is the tab icon's own, which exists in both inks already and
   weighs 3kB where logo.png weighs 234; it carries its own padding, so the box is a good deal
   bigger than the drawing in it. */
.brand { display: inline-flex; align-items: center; gap: var(--xs); font-weight: 600; letter-spacing: -0.01em; }
/* The drawing fills a little over half of its own file, so a 30px box holds a 17px mark: the
   negative margin gives the padding back to the header instead of making the bar taller. */
.brand img { width: 30px; height: 30px; margin: -6px 0; }
/* Who you are and how to stop being them, in that order, as one thing in the corner. */
.wie { display: inline-flex; align-items: baseline; gap: var(--md); }
.who { color: var(--inkt-zacht); font-size: 13px; }
#uit { font-size: 13px; color: var(--inkt-zacht); }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--lg) var(--lg) var(--3xl);
}

h1 { font: 600 22px/1.25 var(--ui); letter-spacing: -0.01em; margin: 0 0 var(--xs); }
h2 { font: 600 17px/1.35 var(--ui); margin: var(--lg) 0 var(--sm); }
h3 { font: 600 17px/1.35 var(--ui); margin: var(--md) 0 var(--xs); }

/* Announced, not shown. The attention column used to be the live region itself, with a clock ticking
   inside it, which made a screen reader read the whole panel out loud once a second. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--inkt-zacht); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* The underline is the ONLY thing that marks a link here, because the accent is reserved for
   progress, the current step and focus. So it has to carry the text's own colour: at --lijn-sterk
   it was all but invisible in dark mode, and "Open de map Huisstijl" read as part of a sentence. */
a { color: var(--inkt); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

/* ── Controls ─────────────────────────────────────────────────────────────── */

/* An anchor that looks and behaves like a button. There used to be a <button> INSIDE the <a> on
 * every "Openen in Word": invalid HTML (interactive content may not nest), and the two elements
 * disagreed about what a click and a keypress meant. Same selectors as button below, so the two
 * cannot drift apart. */
a.knop { display: inline-flex; align-items: center; gap: var(--sm); text-decoration: none; }

a.knop,
button {
  font: inherit;
  padding: var(--sm) var(--md);
  border-radius: var(--radius);
  border: 1px solid var(--lijn-sterk);
  background: var(--blad);
  color: var(--inkt);
  cursor: pointer;
  transition: background var(--snel), border-color var(--snel), transform var(--snel);
}
a.knop:hover,
button:hover:not(:disabled) { border-color: var(--inkt-zacht); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: default; }

a.knop.primary,
button.primary {
  background: var(--inkt);
  border-color: var(--inkt);
  color: var(--papier);
  font-weight: 600;
}
a.knop.primary:hover,
button.primary:hover:not(:disabled) { background: var(--inkt-zacht); border-color: var(--inkt-zacht); }

a.knop.gevaar,
button.gevaar { border-color: var(--geweigerd); color: var(--geweigerd); }
a.knop.gevaar:hover,
button.gevaar:hover:not(:disabled) { background: var(--geweigerd); color: var(--papier); }

a.knop.plat,
button.plat {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--lijn-sterk);
  padding: var(--xs) 0;
}

@media (pointer: coarse) {
  a.knop, button { min-height: 44px; }
}

label { display: block; font: 600 13px/1.4 var(--ui); margin: var(--md) 0 var(--sm); }
label .hint { display: block; font-weight: 400; color: var(--inkt-zacht); margin-top: 2px; }

textarea, input[type=text], select {
  width: 100%;
  font: inherit;
  padding: var(--sm);
  border-radius: var(--radius);
  border: 1px solid var(--lijn-sterk);
  background: var(--blad);
  color: var(--inkt);
}
textarea { min-height: 80px; resize: vertical; }
.veldfout { color: var(--geweigerd); font-size: 13px; margin-top: var(--xs); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

/* Lopend and Opgeleverd are two tables under one another. Auto layout sizes each one from its own
   content, so the same five columns landed at different places and the pair read as two unrelated
   lists. Fixed layout plus one shared colgroup is what makes them line up. */
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
col.c-klant { width: 26%; }
col.c-product { width: 16%; }
col.c-status { width: 19%; }
col.c-voortgang { width: 17%; }
col.c-laatst { width: 11%; }
/* The way to the deletion screen, last. A link and not a button: it opens a screen that lists what
   would go, so this click destroys nothing and must not look like it does. Wide enough for the
   whole word: at 7% "verwijderen" broke after "verwijder", and a word split down the middle in a
   fixed column reads as a defect. */
col.c-op { width: 11%; }
.c-op { text-align: right; }
/* Middle, not top: a row is two lines of customer plus a one-line status pill and a bar, and with
   top alignment the pill and the bar sat against the ceiling while the name ran on below them. */
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
th { font: 600 13px/1.4 var(--ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--inkt-zacht); }
tbody tr:hover { background: var(--blad); }
/* A project folder name has no spaces to break on and now lives in a fixed column. */
td .small { overflow-wrap: anywhere; }

/* On a phone the two secondary columns go, rather than the table scrolling sideways: what a
   colleague opens this list for on a phone is who and how far. */
@media (max-width: 600px) {
  .c-product, .c-laatst, .c-op { display: none; }
  col.c-product, col.c-laatst, col.c-op { width: 0; }
  col.c-klant { width: 44%; }
  col.c-status { width: 30%; }
  col.c-voortgang { width: 26%; }
}

/* Block, not inline-block: a status is read down a column, and tags of different widths make that
   column look ragged. Every tag is exactly as wide as its cell, so the words line up. */
/* One width for every tag, and no wider than the longest word actually on the page: the shell
   measures that word and passes it down as --tagbreedte. min-width rather than width, so a word
   nobody predicted grows the pill instead of wrapping inside it. */
.tag {
  display: inline-block;
  min-width: var(--tagbreedte, auto);
  white-space: nowrap;
  text-align: center;
  padding: 3px var(--sm);
  border-radius: 999px;
  border: 1px solid var(--lijn-sterk);
  font: 600 13px/1.4 var(--ui);
  color: var(--inkt-zacht);
}
.tag.klaar { color: var(--geschreven); border-color: currentColor; }
.tag.wacht { color: var(--aandacht); border-color: currentColor; }
.tag.fout { color: var(--geweigerd); border-color: currentColor; }

/* A pill that wraps is a balloon. On a phone the colour carries the status and the border goes.
   After the rules above, not inside the table media block: same specificity, so source order is
   what decides and an earlier override loses to the base rule. */
@media (max-width: 600px) {
  /* The status column is a third of a phone, which is narrower than the longest word. So the pill
     goes: the colour carries the status and the words may wrap. */
  .tag { border: 0; padding: 0; border-radius: 0; text-align: left; min-width: 0; white-space: normal; }
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.panel > :first-child { margin-top: 0; }
.panel {
  border: 1px solid var(--lijn);
  border-radius: var(--radius-panel);
  padding: var(--md);
  background: var(--blad);
}
/* Every block of a review sits the same distance from the one above it. The findings brought their
   own margin and the panel with the ratings brought none, so the last finding was glued to it. */
#aandacht > * + * { margin-top: var(--md); }
.bar { display: flex; align-items: center; gap: var(--md); flex-wrap: wrap; }
.kop { display: flex; align-items: baseline; gap: var(--md); flex-wrap: wrap; margin-bottom: var(--lg); }
/* The way back sits at the right edge of the heading row, on every screen that has one. It used to
   be pushed there by a spacer <span> written into the order page's own markup, so the new-order
   page, which has no such span, had it against the title. */
.kop .terug { margin-left: auto; }
/* align-items, because a .rij is a button beside a line of text as often as it is two
   buttons. Stretched, the clock beside "Order aanmaken en beginnen" was as tall as the
   button with its text pinned to the top of that box, half a line above the label. */
.rij { display: flex; align-items: center; gap: var(--sm); flex-wrap: wrap; margin-top: var(--md); }

.orde {
  display: grid;
  gap: var(--xl);
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}
/* Before the first section is written there is nothing to put in the rail, and paintRail empties
   it. The 320px column stayed, so the huisstijl gate -- the first screen of every new order --
   was squeezed into two thirds of the page beside a column holding nothing. */
.orde:has(#rail:empty) { grid-template-columns: minmax(0, 1fr); }
/* The right column stays in view. It already holds the two facts a reviewer keeps looking up (how
   far the document is, and which part is being written), and a gate is long enough that they used
   to scroll away for the rest of the page. Sticky rather than fixed, so it lines up with the
   column it belongs to and stops at the end of it. */
#rail { position: sticky; top: var(--md); }
/* As tall as the screen allows and no taller. A fixed 55vh left a third of the screen empty beside
   a document of thirty sections. The LIST is what scrolls, not the panel: the progress bar and the
   jump to the decision have to stay put. */
#rail { display: flex; max-height: calc(100vh - var(--md) * 2); }
#rail > .panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#rail .secties {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* The gutter is reserved whether it scrolls or not: the default bar was drawn on top of the
     words at the right edge of every row. */
  scrollbar-gutter: stable;
  padding-right: var(--sm);
}
/* Drawn as the site draws things: a thin rounded thumb in the line colour, on no track. Written as
   the ::-webkit pseudo elements and NOT as scrollbar-width/scrollbar-color, which is the standard
   pair: measured in Chrome 152, the standard pair wins when both are present and paints a step
   arrow at each end of the bar, which is two controls this list has no use for. Browsers without
   these pseudo elements keep their own bar, which the reserved gutter above already keeps off the
   words. */
#rail .secties::-webkit-scrollbar { width: 8px; }
#rail .secties::-webkit-scrollbar-button { display: none; }
#rail .secties::-webkit-scrollbar-track { background: transparent; }
#rail .secties::-webkit-scrollbar-thumb { background: var(--lijn-sterk); border-radius: 999px; }
.railextra:not(:empty) { margin-top: var(--sm); }
@media (max-width: 900px) {
  .orde { grid-template-columns: minmax(0, 1fr); gap: var(--lg); }
  /* Stacked under the review, where sticking to the top of the screen would cover it, and where a
     list that scrolls inside itself is a second scrollbar for no reason. */
  #rail { position: static; display: block; max-height: none; }
  #rail > .panel { display: block; }
  #rail .secties { max-height: none; overflow-y: visible; padding-right: 0; }
}
@media (max-width: 600px) {
  main { padding: var(--md) var(--md) var(--2xl); }
  header { padding: var(--sm) var(--md); }
}

.doc {
  border: 1px solid var(--lijn);
  border-radius: var(--radius-panel);
  padding: var(--md) var(--lg);
  background: var(--papier);
  max-height: 62vh;
  overflow: auto;
}
#tekst .doc, .panel + .doc { margin-top: var(--md); }
.doc p, .doc ul { max-width: 68ch; }
.doc h3 { font-size: 17px; margin: var(--md) 0 var(--xs); }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px 20px; padding: 0; }
.doc code { font-family: var(--mono); background: var(--blad); padding: 1px var(--xs); border-radius: 3px; }
/* A drawing from the client's own stukken, where the text puts it. Bounded by the column and never
   wider: the drawer is 640px and a scanned A3 is not. White behind it for the same reason the
   thumbnails have it: half of these are line drawings on a transparent ground, which on a
   near-black panel is a black drawing on black. */
.doc figure { margin: var(--md) 0; max-width: 68ch; }
.doc figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: #fff;
}
.doc figcaption { margin-top: var(--xs); }

/* ── The wave, while the model writes ─────────────────────────────────────── */
/*
 * Five bars that stretch in sequence, 1s each, 100ms apart. Asked for as a React component on
 * motion/react; this is the same animation without a bundler, a runtime and a Tailwind config,
 * which a shell that deliberately has none of the three should not acquire for one loader.
 * Transform only, on five elements, so nothing lays out per frame.
 */
.golf { display: inline-flex; gap: 4px; align-items: center; height: 24px; }
.golf i {
  display: block;
  width: 4px;
  height: 16px;
  /* Pill, and scaling from the CENTRE. The first version had square ends and
   * `transform-origin: bottom`, so the bars grew upward out of a baseline: recognisably not the
   * component this is a copy of, which is a motion.div with the default centre origin and
   * rounded-full ends. Everything else already matched (scaleY 1 -> 1.5, 1000ms, 100ms per bar). */
  border-radius: 999px;
  background: var(--petrol);
  transform-origin: center;
  animation: golf 1000ms ease-in-out infinite;
}
.golf i:nth-child(2) { animation-delay: 100ms; }
.golf i:nth-child(3) { animation-delay: 200ms; }
.golf i:nth-child(4) { animation-delay: 300ms; }
.golf i:nth-child(5) { animation-delay: 400ms; }
@keyframes golf {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.5); }
}

/* ── The document drawer ──────────────────────────────────────────────────── */
/*
 * A tab on the right edge that slides the document in over the page. It replaces a reader that
 * opened in the middle of the review screen and pushed the rating buttons a document's length
 * downwards, so the thing being judged and the judgement were two scroll positions apart.
 */

.doctab {
  position: fixed;
  right: 0;
  top: 45%;
  writing-mode: vertical-rl;
  padding: var(--md) 10px;
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: 0;
  z-index: 10;
}
.doctab[aria-expanded="true"] { display: none; }

.docpaneel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(640px, 94vw);
  display: flex;
  flex-direction: column;
  background: var(--blad);
  border-left: 1px solid var(--lijn-sterk);
  box-shadow: -8px 0 24px rgb(0 0 0 / 0.14);
  transform: translateX(100%);
  transition: transform var(--binnen);
  z-index: 20;
}
.docpaneel.open { transform: translateX(0); }
/*
 * Two rows, not one. All four controls plus the title used to share a single flex row inside a
 * 640px panel: they overflowed onto a second line anyway, but as a ragged wrap with "Sluiten"
 * alone under the rest. The title row now holds only the name and the close cross, and the three
 * actions sit on a row of their own that is allowed to wrap.
 */
.dockop {
  display: flex;
  align-items: center;
  gap: var(--md);
  padding: 12px var(--lg);
}
.docacties {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--md);
  padding: 0 var(--lg) 12px;
  border-bottom: 1px solid var(--lijn);
}
/* Square, so the cross sits in the middle of it and not beside a word that is not there. */
.icoonknop {
  padding: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.icoonknop .ico { width: 16px; height: 16px; }
/*
 * The legend and the two explaining sentences are children of the panel, not of the scroller, so
 * they had no padding of their own and stood flush against the panel's left edge while everything
 * above and below them was indented by --lg.
 */
.docmeta { padding: var(--md) var(--lg) 0; }
.docmeta > p { margin: 0 0 var(--xs); }
.docmeta > p:last-child { margin-bottom: 0; }
#docbereik { color: var(--inkt-zacht); }
#docinhoud { overflow: auto; padding: var(--md) var(--lg) var(--xl); }
#docinhoud .doc { border: 0; padding: 0; max-height: none; background: none; }

/*
 * A table inside the document. Rendering it as a table was not enough: the page-wide rules give
 * every table `table-layout: fixed` for the two order lists, which cut a six-column control matrix
 * into six equal slivers and wrapped every cell down to one word per line. Auto layout sizes the
 * columns from the text, and the scroller around it is what allows a wide matrix to exist inside a
 * 640px panel instead of being crushed into it.
 */
.tabelrol { overflow-x: auto; margin: 0 0 var(--md); max-width: 100%; }
.doc table { table-layout: auto; width: auto; min-width: 100%; margin: 0; font-size: 13px; }
.doc th, .doc td {
  padding: 6px 10px;
  vertical-align: top;
  border: 1px solid var(--lijn);
  /* Cells hold sentences, so they need a ceiling, or one long cell makes the table wider than any
     screen and every other column disappears behind the scroll. */
  max-width: 34ch;
}
.doc thead th { background: var(--blad); white-space: nowrap; }

/*
 * Word's own two highlight values, taken from docx-export.ts: FFFF00 for new text, FFC000 for
 * revised text.
 *
 * The first version used two strengths of this palette's warm tone instead, on the argument that
 * FFFF00 is harsh. It is, but the drawer and the .docx are two views of ONE document, and a
 * reviewer who reads orange here and finds yellow there stops trusting both. The two mixes also
 * read as the same colour, so the two meanings were indistinguishable anyway. The ink is pinned
 * dark in both themes, because these are light backgrounds whatever the rest of the page does.
 */
mark.nieuw, mark.herzien {
  background: var(--merk-nieuw);
  color: oklch(0.22 0.01 250);
  border-radius: 2px;
  padding: 0 2px;
}
mark.herzien { background: var(--merk-herzien); }
/* A code span inside a highlight painted its OWN background over the highlight, and the ink pinned
   above then had nothing to do with it: measured at 1.02:1 on a dark screen, so every project
   number, discipline code and product code inside a marked paragraph was an empty box. On paper it
   was readable but punched a white hole in the yellow. A tint of the ink instead keeps the code
   legible as code, in one declaration that is right in both themes, and lets the highlight through
   so the marking still means what it says. */
mark.nieuw code,
mark.herzien code { background: color-mix(in srgb, currentColor 10%, transparent); }
.legenda { display: flex; gap: var(--md); flex-wrap: wrap; font-size: 13px; color: var(--inkt-zacht); }

/* Two decisions, one width. A reviewer compares them, and unequal buttons read as a nudge. */
.besluit button { min-width: 170px; }

/* ── Progress ─────────────────────────────────────────────────────────────── */

.balk {
  height: 6px;
  border-radius: 3px;
  background: var(--lijn);
  overflow: hidden;
}
.balk > i {
  display: block;
  height: 100%;
  background: var(--petrol);
  border-radius: 3px;
  transition: width var(--binnen);
}
.balk.bezig { position: relative; }
/* The one continuous animation in the product: it separates "working" from "stalled". Transform
   only, on a pseudo-element, so nothing lays out per frame. */
.balk.bezig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--petrol) 35%, transparent), transparent);
  animation: schuif 1400ms linear infinite;
}
@keyframes schuif {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.balk.mini { width: 80px; }

.secties { list-style: none; margin: var(--md) 0 0; padding: 0; }
.secties li {
  display: flex;
  align-items: center;
  gap: var(--sm);
  min-height: 36px;
  padding: var(--xs) 0;
  border-bottom: 1px solid var(--lijn);
  font-size: 13px;
}
.secties li:last-child { border-bottom: 0; }
.secties .stip {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--lijn-sterk);
}
.secties li.klaar .stip { background: var(--geschreven); border-color: var(--geschreven); }
.secties li.nu .stip { background: var(--petrol); border-color: var(--petrol); }
.secties li.nu { font-weight: 600; }
.secties li.open .kopje { color: var(--inkt-zacht); }
.secties .kopje { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.secties .staat { flex: 0 0 auto; color: var(--inkt-zacht); font-size: 13px; }
.secties button.kopje { text-align: left; border: 0; background: none; padding: 0; font: inherit; text-decoration: underline; text-decoration-color: var(--lijn-sterk); }

/* ── The gate ─────────────────────────────────────────────────────────────── */

/* One finding, in one column, read top to bottom. Not a card grid: a reviewer stops at the first
   block that matters and the rest is context, which is an order, not a set of tiles. */
.melding {
  border: 1px solid var(--lijn);
  border-radius: var(--radius-panel);
  padding: 12px var(--md);
  margin-top: var(--md);
  background: var(--blad);
}
.melding h4 { font: 600 15px/1.35 var(--ui); margin: 0; }
.melding p { margin: var(--xs) 0 0; }
.melding ul { margin: var(--sm) 0 0; padding-left: 18px; max-width: 68ch; }
.melding li { margin: 0 0 var(--xs); }
.melding li:last-child { margin-bottom: 0; }
.melding summary { font-weight: 600; cursor: pointer; }

/* The unplaced figures, as pictures. Listed by description alone, they asked a reviewer to judge a
   drawing from a sentence about it, which is the one thing a sentence cannot do here. A thumbnail is
   enough to recognise a drawing; the click is for reading one. */
.figlijst { list-style: none; margin: var(--sm) 0 0; padding: 0; display: grid; gap: var(--md); }
.figlijst li { display: grid; gap: var(--xs); }
.figvb {
  max-width: 100%;
  max-height: 140px;
  width: auto;
  justify-self: start;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius);
  /* Paper, not the panel: half of these are line drawings on a transparent ground, which on a
     near-black panel is a black drawing on black. */
  background: #fff;
  cursor: zoom-in;
}
.figvb.groot { max-height: none; width: 100%; cursor: zoom-out; }
.melding[open] summary { margin-bottom: var(--sm); }

/* The one line on a gate that reports something the READER did rather than something Draaiboek
   did, so it wears the same orange the reader's own changes wear in the Word document. Ink pinned
   the way mark.nieuw pins it: the ground is a fixed colour in both themes, so inheriting a near
   white ink would leave this unreadable in the dark one. */
.gewijzigd {
  margin-top: var(--sm);
  padding: var(--sm) var(--md);
  border-radius: var(--radius);
  background: var(--merk-herzien);
  color: oklch(0.22 0.01 250);
  max-width: 68ch;
}

/* The reviewer's actual question, in the recipe's own words. It is a sentence, not a label. */
.vraag { font: 600 17px/1.35 var(--ui); margin: var(--xs) 0 var(--md); max-width: 68ch; }

.cijfers { display: flex; gap: var(--xs); flex-wrap: wrap; }
.cijfers button { min-width: 40px; padding: var(--sm) 0; }
.cijfers button[aria-pressed="true"] {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--papier);
  font-weight: 600;
}

/* ── The run log ──────────────────────────────────────────────────────────── */

.log { list-style: none; margin: var(--md) 0 0; padding: 0; font-size: 13px; }
.log li {
  display: flex;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--xs) 0;
  border-bottom: 1px solid var(--lijn);
}
.log li:last-child { border-bottom: 0; }
.log .duur { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--inkt-zacht); }
.klok { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--inkt-zacht); }
/* One control in one place: stopping the run and resuming it are the same button as far as the eye
   is concerned, so neither gets .primary and both get the width of the longer label. Without this,
   "Doorgaan" was half the width and a different colour, on a panel where it sits exactly where
   "Stop na deze stap" was a second earlier. 20ch is that longer label plus slack, measured in a
   browser rather than guessed, so the label cannot wrap in a font with wider lowercase. */
#pauze,
#verder { min-width: 20ch; }

/* ── Loading and errors ───────────────────────────────────────────────────── */

.skelet { display: block; height: 14px; border-radius: 3px; background: var(--lijn); }
.skelet + .skelet { margin-top: 14px; }
.skelet.kort { width: 40%; }
.skelet.half { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .skelet { animation: pols 1200ms ease-in-out infinite; }
}
@keyframes pols {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.err {
  color: var(--geweigerd);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: var(--md) 0;
}

/* Reduced motion keeps a signal rather than losing one: the shimmer becomes a static stripe, so
   "working" is still distinguishable from "stalled". */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; }
  /* The wave stops but stays a shape, so "the model is writing" is still distinguishable from
     "the model has stopped": the bars hold uneven heights instead of moving. */
  .golf i { animation: none; }
  .golf i:nth-child(even) { height: 12px; }
  .balk.bezig::after {
    animation: none;
    background: repeating-linear-gradient(
      45deg,
      color-mix(in oklch, var(--petrol) 30%, transparent) 0 6px,
      transparent 6px 12px
    );
  }
}

/* The Word mark on the button that opens Word. Microsoft's artwork is 1881.25 x 1750, so the
   width follows the height instead of being pinned square, which would squash it by 7%. The
   negative margin keeps an icon taller than the label out of the button's line box. */
.woord { height: 1.35em; width: auto; margin: -0.2em 0; flex: 0 0 auto; }

/* Legend swatches. The legend used to BE two <mark> elements with the label as their text,
 * which read as two random highlighted fragments floating above the document rather than as a
 * key to it. */
.legenda { display: flex; flex-wrap: wrap; gap: var(--md); align-items: center; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.staal { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
/* The SAME two variables as mark.nieuw / mark.herzien, so the key cannot come to mean a
 * shade the document does not use. */
.staal.nieuw { background: var(--merk-nieuw); border: 1px solid var(--lijn-sterk); }
.staal.herzien { background: var(--merk-herzien); border: 1px solid var(--lijn-sterk); }

/* ── Assumptions: agree, disagree, correct ─────────────────────────────────── */

/* Three equal choices per line, each with its own word beside its icon. They were icon-only squares
 * until 2026-09-02: a tick, a cross and a pencil are three guesses a reviewer has to make before
 * daring to click, and the words cost one line of width. Equal, because an unequal set reads as a
 * recommendation. Colour still arrives only on the pressed one: three coloured buttons per
 * assumption, seven assumptions deep, is a traffic light the eye cannot read. */
.aannames { list-style: none; padding: 0; margin: 0; }
.aannames > li { padding: var(--sm) 0; border-top: 1px solid var(--lijn); }
.aannames > li:first-child { border-top: 0; }
.aannames .tekst { margin: 0 0 var(--xs); }
/* Decided: the sentence steps back, so what is left to do is what still stands out. */
.aannames > li.af .tekst { color: var(--inkt-zacht); }
#aannametel { font-weight: 400; margin-left: var(--sm); }
/* Wraps, because three worded buttons do not fit a phone on one line. */
.keuze { display: flex; align-items: center; gap: var(--sm); flex-wrap: wrap; }
.keuze button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xs);
  /* One width for all three, measured against the longest word: three words of three lengths make
     the widest button read as the recommended one. */
  min-width: 15ch;
  padding: var(--xs) var(--sm);
  font-size: 15px;
  line-height: 1.4;
}
/* Drawn, so it inherits the button's colour and flips to white when the button fills. */
.keuze .ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* A button whose label carries an action glyph. Its own class rather than a rule on every button:
   .plat has no box to centre anything in, and the .keuze ones set their own gap. */
button.metico { display: inline-flex; align-items: center; gap: var(--sm); }
button.metico .ico { width: 16px; height: 16px; flex: 0 0 auto; }
.keuze button[aria-pressed=true].ja { background: var(--geschreven); border-color: var(--geschreven); color: var(--papier); }
.keuze button[aria-pressed=true].nee { background: var(--geweigerd); border-color: var(--geweigerd); color: var(--papier); }
.keuze button[aria-pressed=true].pas { background: var(--aandacht); border-color: var(--aandacht); color: var(--papier); }
.correctie { margin-top: var(--sm); }
.correctie label { margin-top: 0; }

@media (pointer: coarse) {
  .keuze button { min-height: 44px; }
}

/* ── A fork, not a form ───────────────────────────────────────────────────── */

/* Two answers to one question, side by side. Not two cards: one hairline between them, so there is
   a reading order instead of a pair of tiles of equal weight. The huisstijl gate is the screen this
   exists for, where the whole question is "with their opmaak or without". */
/* The question above the fork. The panel is the width of the page here, and a sentence set across
   1100px is not read, it is scanned. */
.optiekop { max-width: 68ch; }
.opties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--xl); margin-top: var(--lg); }
.opties .optie + .optie { border-left: 1px solid var(--lijn); padding-left: var(--lg); }
/* Each half ends on its button, and the buttons line up because the space between the text and
   the button absorbs the difference in sentence length. Without this the left button sat a line
   and a half above the right one, which reads as two unrelated screens rather than one choice. */
.optie { display: flex; flex-direction: column; }
.optie h4 { margin: 0 0 var(--xs); }
.optie p { margin: 0 0 var(--md); max-width: 52ch; }
.optie h4 .tag { vertical-align: middle; margin-left: var(--xs); }
/* The one consequence of the cheap answer, in the colour this page uses for "read this before you
   click". Not an error: nothing is wrong yet. */
.waarschuw { color: var(--aandacht); }
.optie > button,
.optie > .zone { margin-top: auto; }
.optie > button { align-self: flex-start; }

/* An area to let go of a file over, rather than a button to aim at. Dashed, because that is what a
   drop target has looked like since before this product existed and nobody has to be taught it. */
.zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sm);
  padding: var(--md);
  border: 1px dashed var(--lijn-sterk);
  border-radius: var(--radius-panel);
  background: var(--papier);
  transition: border-color var(--snel), background var(--snel);
}
.zone p { margin: 0; }
/* A file held over the zone. Solid and tinted, so the dashed outline reads as "not yet" and this
   reads as "let go here". */
.zone.sleep { border-style: solid; border-color: var(--petrol); background: var(--blad); }
/* The button inside carries the keyboard route, so the ring belongs to the zone when it has focus
   inside it: the zone is not focusable itself and must never look clickable when it is not. */
.zone:focus-within { border-color: var(--petrol); }

/* The third way in, for a file that is already in SharePoint. Its own strip under the fork rather
   than a sentence trailing off the bottom of it: it is a different route, not a footnote on one of
   the two answers. */
.derde {
  margin-top: var(--lg);
  padding-top: var(--md);
  border-top: 1px solid var(--lijn);
}
.derde p { margin: 0; }

@media (max-width: 700px) {
  .opties { grid-template-columns: 1fr; gap: var(--md); }
  .opties .optie + .optie {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--lijn);
    padding-top: var(--md);
  }
}

/* A block on a screen where something irreversible is about to happen. The same box as any other
   finding, in the colour the refusals already use, because this is the one place on the site where
   red means what red means. */
.melding.waarschuwing { border-color: var(--geweigerd); }
.melding.waarschuwing h4 { color: var(--geweigerd); }

/* ── Which of the tenant's own models Draaiboek offers ────────────────────── */

/* The section list's rows are one line each; a decision row is a name, a choice and a sentence
   about who made it, so it stacks instead. Same borders and rhythm, so the two read as the same
   kind of list. */
.secties.modellen li {
  display: block;
  padding: var(--md) 0;
}
.modelrij .rij { margin-top: var(--sm); }
.modelrij p { margin: var(--xs) 0 0; }
/* The four answers are one decision, so they sit on one line and wrap together rather than each
   claiming a row on a narrow screen. */
.modelrij .rij button { flex: 0 1 auto; }
.modelrij button[aria-pressed=true].ja { background: var(--geschreven); border-color: var(--geschreven); color: var(--papier); }
.modelrij button[aria-pressed=true].nee { background: var(--geweigerd); border-color: var(--geweigerd); color: var(--papier); }
.modelrij button[aria-pressed=true].pas { background: var(--aandacht); border-color: var(--aandacht); color: var(--papier); }