:root {
    color-scheme: light dark;
    --text: #1c1c1a;
    --muted: #5f5e5a;
    --line: #d3d1c7;
    --surface: #ffffff;
    --page: #f7f6f2;
    --ok: #2f7a4a;
    --ok-bg: #e3f2e8;
    --warn: #a8641a;
    --warn-bg: #fbeedc;
    --bad: #a83a2e;
    --bad-bg: #f9e3e0;
    --accent: #2b5c8a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--page);
}

header {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 12px 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand { font-weight: 500; text-decoration: none; color: var(--text); }
header nav { display: flex; gap: 16px; align-items: baseline; }
header nav a { color: var(--muted); text-decoration: none; }
header nav a:hover { color: var(--text); }
header .customer { margin-left: auto; color: var(--muted); }

main { padding: 24px 32px 64px; max-width: 1200px; }

h1 { font-size: 22px; font-weight: 500; margin: 16px 0 4px; }
h2 { font-size: 17px; font-weight: 500; margin: 0 0 8px; }
h3 { font-size: 15px; font-weight: 500; margin: 18px 0 6px; }

/* Every block of the page is a card with the same padding, so buttons and hints land in the same
   place on every step. */
.pile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    padding: 16px 20px;
    margin: 20px 0;
}

.hint { color: var(--muted); margin: 4px 0 12px; }

/* Where you are in the wizard, and where you go next. */
.wizard {
    display: flex;
    gap: 16px;
    align-items: baseline;
    margin: 4px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.wizard .id { margin-left: 0; }
.wizard a { color: var(--accent); }
.message { padding: 10px 14px; margin: 12px 0; background: var(--ok-bg); border: 1px solid var(--ok); }
.message.problem { background: var(--bad-bg); border-color: var(--bad); }

.count { color: var(--muted); font-weight: 400; }
.id { color: var(--muted); font-size: 12px; margin-left: 6px; }
.deviation { color: var(--muted); font-size: 12px; display: block; }

/* Meaning carries colour; decoration does not. Green is done or met, amber is attention or in
   progress, red is blocking or not met, grey is not started. */
.badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    vertical-align: middle;
    margin-right: 6px;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.muted { background: var(--page); color: var(--muted); border: 1px solid var(--line); }

/* Bezig is amber, net als aandacht: er gebeurt iets en het is nog niet af. Het knippert niet en
   het draait niet rond. Een wachtrij die tientallen seconden per regel doet is met een bewegend
   plaatje erbij niet sneller, alleen onrustiger. */
.badge.busy { background: var(--warn-bg); color: var(--warn); }
.advice-voortgang { margin-top: 0; }

table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; color: var(--muted); font-size: 13px; }

/* The agent's weighing, under the numbers it rests on. Set apart so it is clear which part is
   calculated and which part is weighed. */
.advice {
    margin: 8px 0 4px;
    padding: 8px 10px;
    background: var(--page);
    border-left: 3px solid var(--accent);
}

.rules, .impediments, .findings { margin: 6px 0 0; padding-left: 18px; }
.rules, .impediments { color: var(--muted); font-size: 13px; }

/* Het letterlijke antwoord van de agent. Dichtgeklapt, want in het goede geval leest niemand
   het en in het slechte geval is het het enige wat helpt. Eigen breedte en eigen schuifbalk,
   zodat een lang antwoord de tabel niet oprekt. */
.raw-reply { margin: 8px 0 4px; font-size: 13px; }
.raw-reply summary { color: var(--muted); cursor: pointer; }
.raw-reply summary:hover { color: var(--accent); }
.raw-reply pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    max-height: 22em;
    overflow: auto;
    background: var(--page);
    border: 1px solid var(--line);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.5;
}
.findings li { margin: 4px 0; }
.findings .fix { margin-left: 8px; font-size: 13px; color: var(--accent); white-space: nowrap; }

.customers { list-style: none; padding: 0; }
.customers li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.customers a.secondary { color: var(--muted); margin-left: 12px; font-size: 13px; }

/* One shape for every button; the primary action of a page is the one filled in. */
button {
    font: inherit;
    padding: 6px 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    border-radius: 3px;
}
button:hover { border-color: var(--muted); }
a.button {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}
a.button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.1); }
button[disabled] { opacity: 0.5; cursor: default; }

/* The action row of a form: always at the bottom, always right-aligned. */
.actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.field { margin: 14px 0; }
.field > label { display: block; font-weight: 500; margin-bottom: 4px; }
.field .hint { display: block; margin: 4px 0 0; font-size: 13px; }

input[type="text"], input:not([type]), input[type="number"], input[type="date"], select, textarea {
    font: inherit;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
}

.checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 4px 16px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.check { display: block; font-weight: 400; }