/*
 * Ontwerptaal: papier en inkt met één meetkleur.
 *
 * De vier methoden gaan allemaal over afdalen in lagen, dus de dragende vorm op
 * elke pagina is een ladder met een genummerde diepte in een monospace-cijfer.
 * Die nummering staat er omdat de volgorde echt informatie draagt, niet als
 * versiering. --signal is de markeerkleur (de 80%-lijn, de gekozen oorzaak) en
 * wordt spaarzaam gebruikt; --verified en --assumption krijgen straks betekenis
 * in de methodeschermen: bewijs tegenover aanname.
 */

:root {
    --ink: #101a22;
    --ink-soft: #4a565f;
    --paper: #f2f3ef;
    --surface: #ffffff;
    --rule: #d3d7d0;
    --signal: #e0a800;
    --verified: #2f6f5e;
    --assumption: #8a8f88;

    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --step: 0.75rem;
    --measure: 34rem;
    --radius: 3px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
    line-height: 1.2;
    margin: 0 0 var(--step);
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
    letter-spacing: -0.02em;
}

h2 {
    font-size: 1.4rem;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.1rem;
}

p {
    margin: 0 0 var(--step);
    max-width: var(--measure);
}

a {
    color: var(--ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.skiplink {
    position: absolute;
    left: -9999px;
}

.skiplink:focus {
    left: var(--step);
    top: var(--step);
    z-index: 10;
    background: var(--surface);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ink);
}

/* Kop en voet */

.masthead {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--step) 1rem;
    border-bottom: 1px solid var(--rule);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
}

/* Geen gap op .wordmark: die zou ook tussen "grond" en "oorzaak" vallen en het
   woord in tweeen breken. De ruimte hoort alleen naast het beeldmerk, dus staat
   hij als marge op het beeldmerk zelf.

   Het beeldmerk zakt een haartje, zodat de balken optisch op de x-hoogte van de
   letters uitkomen in plaats van op de basislijn. */
.wordmark__mark {
    flex: none;
    width: 1.35em;
    height: 1.35em;
    margin-right: 0.45rem;
    transform: translateY(0.04em);
}

.wordmark__leaf {
    color: var(--ink-soft);
}

.nav {
    display: flex;
    gap: 1rem;
    align-items: baseline;
}

.nav__lang {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

main {
    padding: 0 1rem;
}

.colophon {
    margin-top: 3rem;
    padding: var(--step) 1rem 2rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 0.875rem;
}

/* Blokken */

.hero {
    padding: 3rem 0 2rem;
}

.hero--compact {
    padding: 2rem 0 1rem;
}

.eyebrow,
.rung__label,
.card__status {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.5rem;
}

.lead {
    font-size: 1.125rem;
    color: var(--ink-soft);
}

.button {
    display: inline-block;
    margin-top: var(--step);
    padding: 0.6rem 1.1rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 500;
}

.button:hover,
.button:focus-visible {
    background: var(--ink-soft);
}

/* De ladder: de dragende vorm van het hele product */

.descent {
    padding: 2rem 0;
    border-top: 1px solid var(--rule);
}

.descent__intro {
    color: var(--ink-soft);
}

.ladder {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.rung {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0 var(--step);
    padding-bottom: 1.5rem;
    position: relative;
}

.rung::before {
    content: "";
    position: absolute;
    left: 1.15rem;
    top: 1.7rem;
    bottom: 0;
    width: 1px;
    background: var(--rule);
}

.rung:last-child::before {
    display: none;
}

.rung__depth {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 50%;
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
}

.rung:last-child .rung__depth {
    border-color: var(--signal);
    box-shadow: inset 0 0 0 2px var(--signal);
}

.rung__name {
    margin-bottom: 0.25rem;
}

.rung__body p:last-child {
    margin-bottom: 0;
    color: var(--ink-soft);
}

.note {
    padding: 2rem 0;
    border-top: 1px solid var(--rule);
}

.cards {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    gap: var(--step);
}

.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1rem;
}

.card p:last-child {
    margin-bottom: 0;
}

.card__status {
    margin-top: var(--step);
    margin-bottom: 0;
    color: var(--assumption);
}

.debug {
    max-width: 100%;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    padding: var(--step);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* Vanaf tablet: één gecentreerde kolom. Een blok met max-width in een
   gecentreerde kolom blijft anders links hangen, vandaar margin-inline. */

@media (min-width: 48rem) {
    .masthead,
    main,
    .colophon {
        max-width: 60rem;
        margin-inline: auto;
        padding-inline: 2rem;
    }

    .rung {
        grid-template-columns: 3.5rem 1fr;
    }

    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------------------------------------------------------------------------
   Casusoverzicht en casusformulier (stap 2)
   --------------------------------------------------------------------------- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: var(--step) 0;
    border-bottom: 1px solid var(--rule);
}

/*
 * .actionlink hoort hier en niet bij .button: dat is de opvallende knop met een
 * eigen maat en een bovenmarge. Een link tussen knoppen moet er precies zo
 * uitzien als zijn buren, anders springt hij eruit zonder dat hij belangrijker is.
 */
button,
.filebutton,
.actionlink {
    font: inherit;
    font-size: 0.9375rem;
    padding: 0.45rem 0.9rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
}

/*
 * Een knop en een link krijgen niet vanzelf dezelfde hoogte: een knop rekent zijn
 * regelhoogte anders dan een inline-block. Met flex en align-items: center komen
 * ze allebei op dezelfde maat uit, en align-items: stretch op de rij zorgt dat ze
 * even hoog blijven als er eentje over twee regels valt.
 */
.actionlink {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

button:hover:not(:disabled),
.filebutton:hover,
.actionlink:hover {
    border-color: var(--ink-soft);
}

button:disabled {
    color: var(--assumption);
    cursor: not-allowed;
}

button.is-primary {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.filebutton {
    display: inline-block;
}

.filebutton input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.filebutton:focus-within {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.notice {
    margin: var(--step) 0;
    padding: 0.6rem 0.8rem;
    background: var(--surface);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
    font-size: 0.9375rem;
}

.notice--error {
    border-left-color: #a8341f;
}

.notice--quiet {
    border-left-color: var(--rule);
    color: var(--ink-soft);
}

.caselist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.caselist__item {
    padding: var(--step) 0;
    border-bottom: 1px solid var(--rule);
}

.caselist__title {
    font-size: 1.0625rem;
    font-weight: 600;
}

.caselist__meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin: 0.2rem 0 0.5rem;
}

.caselist__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.caselist__empty {
    padding: 2rem 0;
    color: var(--ink-soft);
}

.field {
    margin-bottom: 1.25rem;
    max-width: var(--measure);
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.field .hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin-bottom: 0.35rem;
}

.field input,
.field textarea {
    font: inherit;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.field input:focus,
.field textarea:focus {
    border-color: var(--ink);
}

.field textarea {
    min-height: 6rem;
    resize: vertical;
}

/* ---------------------------------------------------------------------------
   Methodetekst (stap 3)
   --------------------------------------------------------------------------- */

.prose h2 {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.prose h3 {
    margin-top: 1.5rem;
}

.prose ul,
.prose ol {
    max-width: var(--measure);
    padding-left: 1.2rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.matrix {
    width: 100%;
    max-width: 46rem;
    border-collapse: collapse;
    margin: var(--step) 0 1.5rem;
    font-size: 0.9375rem;
}

.matrix th,
.matrix td {
    text-align: left;
    vertical-align: top;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--rule);
    background: var(--surface);
}

.matrix th {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.steps {
    list-style: decimal;
    padding-left: 1.4rem;
}

.steps h3 {
    margin: 0 0 0.25rem;
}

.chain {
    list-style: decimal;
    padding-left: 1.4rem;
    border-left: 2px solid var(--signal);
    margin-left: 0.2rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.cta-band {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.cta-band h2 {
    margin-top: 0;
}

.card__status--ready {
    color: var(--verified);
}

/* ---------------------------------------------------------------------------
   Werkblad 5x Waarom
   --------------------------------------------------------------------------- */

.problem {
    padding: var(--step) 0 1rem;
    border-bottom: 1px solid var(--rule);
}

.problem__statement {
    font-size: 1.0625rem;
}

.pickmethod {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.tree {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

/*
 * Inspringen via vaste klassen en niet via een style-attribuut: de CSP staat
 * geen inline stijl toe, dus een berekende padding-left zou stil wegvallen.
 * Dieper dan zes wordt niet verder ingesprongen; het nummer in de kop vertelt
 * dan hoe diep je zit.
 */
.node {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.node--d2 { margin-left: 0.75rem; }
.node--d3 { margin-left: 1.5rem; }
.node--d4 { margin-left: 2.25rem; }
.node--d5 { margin-left: 3rem; }
.node--d6 { margin-left: 3.75rem; }

.node--root {
    border-left-color: var(--signal);
}

.node__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.node__depth {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.node__buttons {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.node__buttons button {
    font-size: 0.8125rem;
    padding: 0.25rem 0.55rem;
}

.node__text,
.node__evidence textarea {
    font: inherit;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    resize: vertical;
}

.node__text {
    min-height: 3.5rem;
    font-size: 1rem;
}

.node__evidence {
    margin-top: 0.5rem;
}

.node__evidence textarea {
    min-height: 2.5rem;
    font-size: 0.9375rem;
}

.node__evidence-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin-bottom: 0.15rem;
}

.node__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.6rem;
    font-size: 0.9375rem;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.switch--root {
    margin-left: auto;
}

.switch input:checked + label {
    font-weight: 600;
}

.node__warning {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.65rem;
    background: var(--paper);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--ink-soft);
    max-width: none;
}

.node__measures {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--rule);
}

.node__measures-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
}

.measure {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.measure input {
    font: inherit;
    font-size: 0.9375rem;
    padding: 0.35rem 0.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    min-width: 0;
}

.measure__what {
    grid-column: 1 / -1;
}

.measure__remove {
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.measure__add {
    font-size: 0.8125rem;
    padding: 0.25rem 0.55rem;
}

.summary {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.summary__cause {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule);
}

.summary__text {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.summary__meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-bottom: 0.3rem;
}

.summary__measures {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9375rem;
}

@media (min-width: 48rem) {
    .node--d2 { margin-left: 1.5rem; }
    .node--d3 { margin-left: 3rem; }
    .node--d4 { margin-left: 4.5rem; }
    .node--d5 { margin-left: 6rem; }
    .node--d6 { margin-left: 7.5rem; }

    .measure {
        grid-template-columns: 2fr 1fr 10rem auto;
    }

    .measure__what {
        grid-column: auto;
    }
}

/* ---------------------------------------------------------------------------
   Werkblad Is / Is-niet
   --------------------------------------------------------------------------- */

.spec {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.spec__progress {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.group {
    margin-top: 1.5rem;
}

.group__title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--ink);
}

.grow {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.grow__q {
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.grow__q label {
    cursor: pointer;
}

.grow__pair {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.grow__cell {
    display: block;
}

.grow__cap {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.2rem;
}

.grow textarea {
    font: inherit;
    font-size: 0.9375rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.45rem 0.55rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    resize: vertical;
}

.grow__warn {
    margin: 0.5rem 0 0;
    padding: 0.45rem 0.6rem;
    background: var(--paper);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--ink-soft);
    max-width: none;
}

.hypothesis {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.hypothesis__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.hypothesis__number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}

.hypothesis__text,
.hypothesis__note {
    font: inherit;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    resize: vertical;
}

.hypothesis__text {
    min-height: 3.5rem;
}

.hypothesis__note {
    min-height: 2.5rem;
    font-size: 0.9375rem;
    margin-top: 0.5rem;
}

.hypothesis__verdicts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.6rem;
    font-size: 0.9375rem;
}

.candidate {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
}

.candidate__text {
    margin: 0;
    font-weight: 600;
    flex: 1 1 14rem;
}

@media (min-width: 48rem) {
    .grow__pair {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Werkblad Ishikawa
   --------------------------------------------------------------------------- */

.setpicker {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: var(--step);
}

.board {
    margin-top: var(--step);
}

.bone {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.bone__title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.bone__count {
    color: var(--assumption);
}

.bone__note {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.causes {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.cause {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.cause--sub {
    padding-left: 1.25rem;
    border-left: 1px solid var(--rule);
}

.cause__text {
    font: inherit;
    font-size: 0.9375rem;
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.cause__buttons {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.cause__buttons button {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}

.vote {
    min-width: 2rem;
}

.vote__count {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    min-width: 1.25rem;
    text-align: center;
}

/* Het diagram. Op een telefoon is het bord hierboven de werkkant en is dit
   alleen om te lezen; horizontaal schuiven is dan eerlijker dan een tekening
   van 1000 eenheden breed in 380 pixels persen. */

.diagram {
    margin-top: var(--step);
    overflow-x: auto;
}

.fish {
    display: block;
    width: 100%;
    min-width: 40rem;
    height: auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.fish__spine,
.fish__bone {
    stroke: var(--ink);
    fill: none;
}

.fish__spine {
    stroke-width: 2;
}

.fish__bone {
    stroke-width: 1.5;
}

.fish__head {
    fill: var(--paper);
    stroke: var(--ink);
    stroke-width: 2;
}

.fish__headtext {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    fill: var(--ink);
}

.fish__cat {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--ink);
}

.fish__cause {
    font-family: var(--font-body);
    font-size: 12px;
    fill: var(--ink-soft);
}

.fish__more {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: var(--assumption);
}

/* ---------------------------------------------------------------------------
   Werkblad Pareto
   --------------------------------------------------------------------------- */

.tallies {
    margin-top: var(--step);
}

.tally {
    display: grid;
    grid-template-columns: 1fr 7rem auto;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.tally input {
    font: inherit;
    font-size: 0.9375rem;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.tally__value {
    font-family: var(--font-mono);
    text-align: right;
}

.tally__total {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 0.5rem;
}

.paste {
    margin: 1rem 0;
    padding: 0.6rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.paste summary {
    cursor: pointer;
    font-weight: 600;
}

.paste textarea {
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    width: 100%;
    padding: 0.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    resize: vertical;
}

.field--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: none;
}

.field--inline input {
    font: inherit;
    font-family: var(--font-mono);
    width: 5rem;
    padding: 0.35rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.field--inline .hint {
    flex: 1 1 16rem;
    margin: 0;
}

.par {
    display: block;
    width: 100%;
    min-width: 34rem;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.vital {
    margin: var(--step) 0;
    padding-left: 1.4rem;
}

.vital li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--rule);
}

.vital__label {
    font-weight: 600;
}

.vital__share {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.nextstep {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
}

.nextstep h3 {
    margin-top: 0;
}

@media (min-width: 48rem) {
    .tally {
        grid-template-columns: 1fr 9rem auto;
    }
}

/* ---------------------------------------------------------------------------
   Methodekiezer
   --------------------------------------------------------------------------- */

.hero__second {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
}

.chooser {
    margin: 1.5rem 0;
}

.question {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.question legend {
    padding: 0 0.4rem;
    font-weight: 600;
    font-size: 1.0625rem;
}

.question .hint {
    display: block;
    margin-bottom: 0.6rem;
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.choice label {
    cursor: pointer;
}

.choice input {
    margin-top: 0.3rem;
    flex: none;
}

.advice {
    margin: 1.5rem 0 2rem;
}

.advice__card {
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
}

.advice__card + .advice__card {
    border-left-color: var(--rule);
}

.advice__lead {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.3rem;
}

.advice__name {
    margin: 0 0 0.3rem;
    font-size: 1.25rem;
}

.advice__because {
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Deellink en ontvangst
   --------------------------------------------------------------------------- */

.sharepanel {
    margin: var(--step) 0;
    padding: 0.75rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
}

.sharepanel__title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
}

.sharepanel__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0;
    max-width: none;
}

.sharepanel__row input {
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.preview {
    margin: var(--step) 0 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.preview h2 {
    margin-top: 0;
}

.preview:empty {
    display: none;
}

/* ---------------------------------------------------------------------------
   Rapport
   --------------------------------------------------------------------------- */

.report {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: var(--step) 0 1.5rem;
}

.report__head {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--ink);
}

.report__brand {
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.report__meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0;
}

.report__section {
    margin-top: 2rem;
}

.report__section h2 {
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--rule);
}

.report__section h3 {
    margin-top: 1.25rem;
    font-size: 1rem;
}

.report__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.rlist {
    margin: 0;
}

.rpair {
    margin-bottom: 0.75rem;
}

.rpair dt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.rpair dd {
    margin: 0.1rem 0 0;
}

.rrow {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
}

.rrow h3 {
    margin: 0 0 0.4rem;
}

.rrow__cells {
    display: grid;
    gap: 0.5rem;
}

.rcell p {
    margin: 0;
}

.rcell__cap {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.rbadge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    white-space: nowrap;
}

.rhyps,
.rvital,
.rcauses {
    padding-left: 1.2rem;
}

.rhyps li,
.rvital li,
.rcauses li {
    margin-bottom: 0.5rem;
}

.rhyp__text {
    font-weight: 600;
}

.rhyp__note {
    margin: 0.2rem 0 0;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.rvital__share {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin-left: 0.5rem;
}

.rgroup {
    margin-top: 1rem;
}

.rwhy {
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-left: 2px solid var(--rule);
    margin-bottom: 0.4rem;
}

.rwhy--d2 { margin-left: 1rem; }
.rwhy--d3 { margin-left: 2rem; }
.rwhy--d4 { margin-left: 3rem; }
.rwhy--d5 { margin-left: 4rem; }
.rwhy--d6 { margin-left: 5rem; }

.rwhy--root {
    border-left-color: var(--signal);
}

.rwhy__head {
    margin-bottom: 0.15rem;
}

.rwhy__number {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.rwhy__text {
    margin: 0;
}

.rwhy__evidence,
.rwhy__root {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.rwhy__root {
    font-weight: 600;
    color: var(--ink);
}

.rtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.rtable th,
.rtable td {
    text-align: left;
    vertical-align: top;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--rule);
}

.rtable th {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

@media (min-width: 48rem) {
    .rrow__cells {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Afdrukken. De pdf komt uit de browser, dus dit ís de pdf-vormgeving.
   --------------------------------------------------------------------------- */

@media print {
    @page {
        margin: 18mm 14mm;
    }

    .masthead,
    .colophon,
    .skiplink,
    .report__controls,
    .notice {
        display: none !important;
    }

    html,
    body {
        background: #fff;
        color: #000;
        font-size: 10.5pt;
    }

    main {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .report {
        border: 0;
        padding: 0;
        margin: 0;
        background: #fff;
    }

    /* De diagrammen staan op het scherm in een schuifbalk omdat ze breed zijn.
       Op papier is schuiven onmogelijk, dus die beperking gaat eraf. */
    .diagram {
        overflow: visible;
    }

    .fish,
    .par {
        min-width: 0;
        width: 100%;
        border: 1px solid #999;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    /* Een oorzaak of maatregel die over twee pagina's valt is onleesbaar. */
    .report__section,
    .rrow,
    .rwhy,
    .rgroup,
    .rtable tr,
    .diagram {
        break-inside: avoid;
    }

    .report__section h2,
    .report__section h3 {
        break-after: avoid;
    }
}

/* ---------------------------------------------------------------------------
   Voorpagina
   --------------------------------------------------------------------------- */

.hero--home {
    padding: 3.5rem 0 2.5rem;
}

.hero--home h1 {
    font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem);
    max-width: 14ch;
}

.hero--home .lead {
    font-size: 1.1875rem;
    max-width: 38rem;
}

/* De drie zinnen van de herkenning. Monospace en een streep ervoor: ze lezen
   als citaten uit drie verschillende werelden, en dat is precies de bedoeling. */

.recognise {
    padding: 2rem 0;
    border-top: 1px solid var(--rule);
}

.recognise__list {
    list-style: none;
    margin: var(--step) 0;
    padding: 0;
    max-width: 40rem;
}

.recognise__list li {
    position: relative;
    padding: 0.6rem 0 0.6rem 1.1rem;
    border-left: 3px solid var(--rule);
    margin-bottom: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink);
}

.recognise__list li:last-child {
    border-left-color: var(--signal);
}

.recognise__punch {
    font-size: 1.0625rem;
    font-weight: 600;
    max-width: var(--measure);
}

.argument {
    padding: 2rem 0;
    border-top: 1px solid var(--rule);
}

.argument p {
    font-size: 1.0625rem;
}

.cases {
    padding: 2rem 0;
    border-top: 1px solid var(--rule);
}

.cases__list {
    list-style: none;
    margin: var(--step) 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-width: 46rem;
}

.cases__list li {
    padding: 0.55rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

@media (min-width: 48rem) {
    .cases__list {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Statistieken
   --------------------------------------------------------------------------- */

.stats__totals {
    display: grid;
    gap: var(--step);
    margin-bottom: 1.5rem;
}

.stats__total {
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
    color: var(--ink-soft);
}

.stats__number {
    display: block;
    font-family: var(--font-mono);
    font-size: 2rem;
    line-height: 1.1;
    color: var(--ink);
}

.stats__table td:not(:first-child),
.stats__table th:not(:first-child) {
    text-align: right;
}

.stats__table td {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

@media (min-width: 40rem) {
    .stats__totals {
        grid-template-columns: 1fr 1fr;
    }
}

/* Periodekiezer op de statistiekenpagina. Gewone links, geen javascript: zo is
   elke periode een adres dat je kunt bewaren of doorsturen. */

.periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: var(--step);
}

.period {
    padding: 0.35rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    text-decoration: none;
}

.period:hover {
    border-color: var(--ink-soft);
}

.period--on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.periods__custom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: var(--step);
    font-size: 0.9375rem;
}

.periods__custom input[type="date"] {
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    padding: 0.3rem 0.45rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

/* De hoogst gestemde oorzaak in de visgraat. De kleur zit in de stip en niet in
   de letter: signaalgeel op wit is te licht voor tekst van twaalf punts. */

.fish__cause--top {
    font-weight: 600;
    fill: var(--ink);
}

.fish__pick {
    fill: var(--signal);
}

/* De hoogst gescoorde oorzaak in het rapport. Dezelfde markering als in het
   diagram: een gouden aanwijzing en vette letters, niet gouden tekst. */

.rcauses__item--top {
    position: relative;
}

.rcauses__item--top::marker {
    color: var(--signal);
}

.rcause--top {
    font-weight: 600;
    color: var(--ink);
}

.rbadge--top {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--ink);
    font-weight: 600;
}

@media print {
    .rbadge--top {
        border: 1px solid var(--ink);
    }
}