/* The screen "4 · Eerste beheerder" of the design. IBM Plex from this site: the policy allows no fonts from elsewhere. */
@font-face { font-family: "IBM Plex Sans"; src: url("/setup/fonts/IBMPlexSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/setup/fonts/IBMPlexSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/setup/fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --ink: #14222a; --muted: #55636b; --brand: #0e4f56; --link: #0e6b73; --surface: #f5f6f4;
  --line: #b9c2bd; --card: #ffffff; --card-line: #d6dbd6; --disabled: #b9c2bd; --disabled-ink: #3d4a51; --error: #a3271d;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--surface); color: var(--ink); }
body { font: 400 15px/22px "IBM Plex Sans", system-ui, sans-serif; }

.page { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; padding: 64px 32px; }
.panel { flex: 1 1 360px; max-width: 420px; display: flex; flex-direction: column; gap: 24px; }
.heading { display: flex; flex-direction: column; gap: 8px; }
h1 { margin: 0; font-size: 36px; line-height: 42px; font-weight: 600; color: var(--brand); }
h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.lead { margin: 0 0 20px; color: var(--muted); }
#done-view .lead, #closed-view .lead { color: var(--ink); }
.lead:focus { outline: none; }

form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
label { font-weight: 500; }
input { height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: #ffffff; font: inherit; color: var(--ink); }
input:focus-visible, button:focus-visible, a.button:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.hint { font-size: 13px; line-height: 18px; color: var(--muted); }
.notice { margin: 0 0 20px; padding: 10px 12px; border-radius: 8px; background: #fdf1e3; color: #7a3d06; font-size: 14px; }
.error { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fbe9e7; color: var(--error); font-size: 14px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
button, a.button { height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; text-decoration: none; padding: 0 20px; border-radius: 8px; border: none; background: var(--brand); color: #ffffff; font: 500 15px/1 "IBM Plex Sans", system-ui, sans-serif; cursor: pointer; }
button:disabled { background: var(--disabled); color: var(--disabled-ink); cursor: default; }

.art { flex: 1 1 420px; max-width: 560px; padding: 40px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-line); }
@media (max-width: 720px) { .art { display: none; } .page { padding: 32px 16px; } }