/* Dorpshuys — verfijnde werkstijl, voorstel 2.0, 28 oktober 2026.
   Scope: voeg class="dh-app" toe aan de applicatiewortel.
   Dit bestand verzorgt presentatie; opslag, validatie en navigatie vragen applicatielogica.
   Zie STIJLADVIES.html en PROJECTINSTRUCTIE.md voor toepassing. */
.dh-app {
  --dh-brand: #193e5b;
  --dh-brand-hover: #123047;
  --dh-bg: #f7f8fa;
  --dh-surface: #ffffff;
  --dh-sidebar: #f1f3f6;
  --dh-selected: #e8eff5;
  --dh-text: #293642;
  --dh-muted: #52606b;
  --dh-border: #d7dde3;
  --dh-input-border: #7d8995;
  --dh-success: #28633d;
  --dh-warning: #865f12;
  --dh-error: #a02c2c;
  --dh-radius-control: 6px;
  --dh-radius-card: 10px;
  --dh-shadow: 0 2px 8px rgb(25 62 91 / 6%);
  --dh-space-1: 4px;
  --dh-space-2: 8px;
  --dh-space-3: 12px;
  --dh-space-4: 16px;
  --dh-space-6: 24px;
  --dh-space-8: 32px;
  --dh-space-12: 48px;
  color-scheme: light;
  color: var(--dh-text);
  background: var(--dh-bg);
  font: 400 1rem/1.55 Verdana, Geneva, sans-serif;
  text-align: start;
}
.dh-app *, .dh-app *::before, .dh-app *::after { box-sizing: border-box; }
.dh-app :where(button, input, select, textarea) { font: inherit; }
.dh-app :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--dh-brand); outline-offset: 3px;
  scroll-margin-block: 6rem;
}
.dh-app [hidden] { display: none !important; }
.dh-app a { color: var(--dh-brand); text-underline-offset: .2em; }
.dh-app a:hover { text-decoration-thickness: 2px; }
.dh-app :where(h1, h2, h3, p) { margin-block-start: 0; }
.dh-app h1 { color: var(--dh-brand); font-size: clamp(1.75rem, 2.3vw, 2rem); line-height: 1.25; font-weight: 700; margin-block-end: 12px; }
.dh-app h2 { color: var(--dh-brand); font-size: 1.375rem; line-height: 1.35; font-weight: 700; margin-block-end: 12px; }
.dh-app h3 { color: var(--dh-brand); font-size: 1.125rem; line-height: 1.45; font-weight: 700; margin-block-end: 8px; }
.dh-app .dh-muted { color: var(--dh-muted); }
.dh-app .dh-small { font-size: .875rem; line-height: 1.5; }
.dh-app .dh-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100svh; align-items: start; }
.dh-app .dh-sidebar { position: sticky; top: 0; height: 100svh; overflow: auto; padding: 24px 16px; background: var(--dh-sidebar); border-inline-end: 1px solid var(--dh-border); }
.dh-app .dh-brand-block { display: grid; gap: 12px; margin-block-end: 32px; }
.dh-app .dh-app-icon { display: grid; place-items: center; inline-size: 80px; block-size: 80px; border-radius: 18px; color: white; background: var(--dh-brand); flex: none; }
.dh-app .dh-app-icon > svg { inline-size: 76%; block-size: 76%; stroke-width: 2.2; padding: 0; }
.dh-app .dh-icon { inline-size: 22px; block-size: 22px; stroke-width: 2; flex: none; }
.dh-app .dh-subject-icon { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 10px; background: var(--dh-selected); color: var(--dh-brand); margin-block-end: 12px; }
.dh-app .dh-nav { display: grid; gap: 4px; }
.dh-app .dh-nav a, .dh-app .dh-nav button { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--dh-text); text-decoration: none; text-align: start; }
.dh-app .dh-nav :is(a, button):hover { background: var(--dh-selected); }
.dh-app .dh-nav [aria-current="page"] { background: var(--dh-selected); color: var(--dh-brand); box-shadow: inset 3px 0 var(--dh-brand); font-weight: 700; }
.dh-app .dh-main-area { min-inline-size: 0; }
.dh-app .dh-header { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; min-block-size: 64px; padding: 12px 24px; background: var(--dh-brand); color: white; }
.dh-app .dh-header a { color: white; }
.dh-app .dh-header :focus-visible { outline-color: white; }
.dh-app .dh-header .dh-button--secondary { color: white; background: transparent; border-color: #bdcbd6; }
.dh-app .dh-header .dh-button--secondary:hover { background: rgb(255 255 255 / 12%); }
.dh-app .dh-page { inline-size: 100%; max-inline-size: 1440px; padding: 32px; margin-inline: auto; }
.dh-app .dh-page--canvas { max-inline-size: none; }
.dh-app .dh-page-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-block-end: 24px; }
.dh-app .dh-page-heading p { color: var(--dh-muted); margin-block-end: 0; }
.dh-app .dh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.dh-app .dh-card { min-inline-size: 0; padding: 24px; background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: var(--dh-radius-card); box-shadow: var(--dh-shadow); }
.dh-app a.dh-card { display: block; color: var(--dh-text); text-decoration: none; }
.dh-app a.dh-card:hover { border-color: var(--dh-input-border); box-shadow: 0 3px 12px rgb(25 62 91 / 9%); }
.dh-app .dh-card p { margin-block-end: 0; }
.dh-app .dh-card p + a { display: inline-block; margin-block-start: 16px; }
.dh-app .dh-resume { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-block-end: 24px; padding: 16px 20px; border-radius: 8px; background: var(--dh-selected); }
.dh-app .dh-resume p { margin: 0; }
.dh-app .dh-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 20px; }
.dh-app .dh-toolbar .dh-search { flex: 1 1 280px; }
.dh-app .dh-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-inline-size: 44px; min-block-size: 44px; padding: 10px 16px; border: 1px solid var(--dh-brand); border-radius: var(--dh-radius-control); background: var(--dh-brand); color: white; font-size: 1rem; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; }
.dh-app .dh-button:hover { background: var(--dh-brand-hover); }
.dh-app .dh-button--secondary { color: var(--dh-brand); background: var(--dh-surface); border-color: var(--dh-input-border); }
.dh-app .dh-button--secondary:hover { background: var(--dh-selected); }
.dh-app .dh-button--quiet { color: var(--dh-brand); background: transparent; border-color: transparent; font-weight: 400; text-decoration: underline; text-underline-offset: .2em; }
.dh-app .dh-button--quiet:hover { background: var(--dh-selected); }
.dh-app .dh-button--danger { background: var(--dh-error); border-color: var(--dh-error); }
.dh-app .dh-button--danger:hover { background: #7e2121; }
.dh-app .dh-button:disabled { color: #65717b; background: #e7ebee; border-color: #a0a9b1; cursor: not-allowed; }
.dh-app .dh-button[aria-busy="true"] { cursor: progress; }
.dh-app .dh-form { display: grid; gap: 24px; max-inline-size: 42rem; }
.dh-app .dh-form fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.dh-app .dh-form legend { padding: 0 0 16px; font-size: 1.125rem; font-weight: 700; }
.dh-app .dh-field { display: grid; gap: 8px; margin-block-end: 20px; }
.dh-app .dh-field label { font-weight: 700; }
.dh-app .dh-input { inline-size: 100%; min-inline-size: 0; min-block-size: 44px; padding: 10px 12px; border: 1px solid var(--dh-input-border); border-radius: var(--dh-radius-control); background: var(--dh-surface); color: var(--dh-text); font-size: 1rem; }
.dh-app .dh-input::placeholder { color: var(--dh-muted); opacity: 1; }
.dh-app textarea.dh-input { min-block-size: 120px; resize: vertical; }
.dh-app .dh-input[aria-invalid="true"] { border-color: var(--dh-error); border-width: 2px; }
.dh-app .dh-field-help { margin: 0; font-size: .875rem; color: var(--dh-muted); }
.dh-app .dh-field-error { margin: 0; color: var(--dh-error); font-size: .875rem; }
.dh-app .dh-form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dh-app .dh-message { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 16px; margin-block: 16px; background: var(--dh-surface); color: var(--dh-text); border: 1px solid var(--dh-border); border-radius: 6px; }
.dh-app .dh-message p { flex: 1 1 200px; margin: 0; }
.dh-app .dh-message > .dh-icon { color: var(--dh-brand); margin-block-start: 2px; }
.dh-app .dh-message--success > .dh-icon { color: var(--dh-success); }
.dh-app .dh-message--warning > .dh-icon { color: var(--dh-warning); }
.dh-app .dh-message--error > .dh-icon { color: var(--dh-error); }
.dh-app .dh-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.dh-app .dh-order-summary { position: sticky; top: 88px; }
.dh-app .dh-order-summary--long { position: static; }
.dh-app .dh-list { display: grid; background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: 8px; }
.dh-app .dh-list-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 144px; align-items: center; gap: 16px; padding: 16px; min-inline-size: 0; }
.dh-app .dh-list-row + .dh-list-row { border-block-start: 1px solid var(--dh-border); }
.dh-app .dh-list-row > * { min-inline-size: 0; overflow-wrap: anywhere; }
.dh-app .dh-stepper { display: grid; grid-template-columns: 44px minmax(44px, 1fr) 44px; align-items: stretch; }
.dh-app .dh-stepper :is(button, input) { min-inline-size: 0; inline-size: 100%; min-block-size: 44px; padding: 8px; border-radius: 0; text-align: center; }
.dh-app .dh-stepper > :first-child { border-radius: 6px 0 0 6px; }
.dh-app .dh-stepper > :last-child { border-radius: 0 6px 6px 0; }
.dh-app .dh-reader { display: grid; grid-template-columns: 200px minmax(0, 64ch); align-items: start; gap: 32px; }
.dh-app .dh-toc { padding: 16px; border-radius: 8px; background: var(--dh-selected); }
.dh-app .dh-toc a { display: block; padding-block: 8px; font-size: .875rem; }
.dh-app .dh-document { min-inline-size: 0; max-inline-size: 64ch; color: var(--dh-text); font-size: 1.0625rem; line-height: 1.7; }
.dh-app .dh-document :where(h2, h3) { scroll-margin-top: 96px; margin-block-start: 32px; }
.dh-app .dh-document p { margin-block-end: 20px; }
.dh-app .dh-summary { padding: 16px; border-radius: 8px; background: var(--dh-selected); margin-block-end: 24px; }
.dh-app .dh-canvas { min-block-size: 65svh; background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: 8px; }
.dh-app .dh-mobile-nav { display: none; }
.dh-app .dh-skip { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 12px; transform: translateY(-200%); color: white; background: var(--dh-brand); }
.dh-app .dh-skip:focus { transform: translateY(0); }
.dh-app .dh-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1199px) {
  .dh-app .dh-shell { grid-template-columns: 216px minmax(0, 1fr); }
  .dh-app .dh-page { padding: 24px; }
  .dh-app .dh-split, .dh-app .dh-reader { grid-template-columns: minmax(0, 1fr); }
  .dh-app .dh-order-summary { position: static; }
}
@media (max-width: 767px) {
  .dh-app .dh-shell { display: block; }
  .dh-app .dh-sidebar { display: none; }
  .dh-app .dh-header { padding: 12px 16px; }
  .dh-app .dh-page { padding: 24px 16px calc(88px + env(safe-area-inset-bottom)); }
  .dh-app .dh-mobile-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; gap: 4px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--dh-border); background: var(--dh-surface); }
  .dh-app .dh-mobile-nav > a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-block-size: 48px; padding: 8px 4px; color: var(--dh-muted); border-radius: 6px; text-decoration: none; font-size: .875rem; }
  .dh-app .dh-mobile-nav > a[aria-current="page"] { background: var(--dh-selected); color: var(--dh-brand); font-weight: 700; }
  .dh-app .dh-card { padding: 20px; }
  .dh-app .dh-list-row { grid-template-columns: minmax(0, 1fr) 144px; gap: 12px; }
  .dh-app .dh-list-row .dh-package { grid-column: 1; grid-row: 2; color: var(--dh-muted); font-size: .875rem; }
  .dh-app .dh-list-row .dh-stepper { grid-column: 2; grid-row: 1 / span 2; }
  .dh-app .dh-resume .dh-button { inline-size: 100%; }
  .dh-app .dh-document { max-inline-size: 100%; }
}
@media (max-width: 359px) {
  .dh-app .dh-list-row { grid-template-columns: minmax(0, 1fr); }
  .dh-app .dh-list-row .dh-package, .dh-app .dh-list-row .dh-stepper { grid-column: auto; grid-row: auto; }
  .dh-app .dh-form-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .dh-app .dh-button, .dh-app a.dh-card { transition: background-color 120ms, border-color 120ms, box-shadow 120ms; }
}
@media (forced-colors: active) {
  .dh-app :focus-visible { outline-color: Highlight; }
  .dh-app .dh-nav [aria-current="page"] { border-inline-start: 3px solid Highlight; }
  .dh-app .dh-message, .dh-app .dh-card { border-color: CanvasText; }
}
@media print {
  .dh-app { background: white; color: black; font-size: 11pt; }
  .dh-app .dh-shell, .dh-app .dh-reader { display: block; }
  .dh-app :is(.dh-sidebar, .dh-header, .dh-mobile-nav, .dh-toc, .dh-toolbar, .dh-no-print) { display: none !important; }
  .dh-app .dh-page { padding: 0; max-inline-size: none; }
  .dh-app .dh-document { max-inline-size: none; color: black; }
  .dh-app .dh-card { box-shadow: none; }
  .dh-app :is(h1, h2, h3) { color: black; break-after: avoid; }
  .dh-app .dh-message, .dh-app .dh-summary { background: white; }
}