/* Nu-meting cultuureducatie. Alles zit onder .nm-app zodat het thema er niet doorheen komt. */
.nm-app{
  --bg:#f4f7f8; --surface:#ffffff; --fg:#17242b; --muted:#56656e; --line:#d6e0e4; --accent:#1f6fb2; --accent-fg:#ffffff; --soft:#e3eef6;
  --muziek:#c2410c; --beeldend:#2f7d32; --dans:#a3326e; --theater:#6d3fc0; --film:#0f6f8f; --erfgoed:#8a6a12;
  --ok:#2f7d32; --err:#b42318;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.5;
}
body:has(.nm-app){background:#f4f7f8}
@media (prefers-color-scheme:dark){
  body:has(.nm-app){background:#10171b}
  .nm-app{
    --bg:#10171b; --surface:#172127; --fg:#e4ecef; --muted:#97a8b1; --line:#2a3840; --accent:#6fb4ef; --accent-fg:#0b1418; --soft:#1d3241;
    --muziek:#f08a5d; --beeldend:#78c47b; --dans:#e57cb3; --theater:#b08cf0; --film:#5ec2e0; --erfgoed:#d9b44a; --ok:#78c47b; --err:#f97066;
    color-scheme:dark;
  }
}

.nm-app,.nm-app *,.nm-app *::before,.nm-app *::after{box-sizing:border-box}
.nm-app [hidden]{display:none!important}

.nm-app .nm-wrap{max-width:880px;margin:0 auto;padding:24px 16px 64px;display:grid;gap:20px}
.nm-app .nm-head{display:grid;gap:8px}
.nm-app .nm-h1,.nm-app .nm-h2,.nm-app .nm-h3{font-family:var(--display);text-wrap:balance;margin:0;padding:0;color:var(--fg);line-height:1.5;letter-spacing:normal;text-transform:none}
.nm-app .nm-h1{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:800;letter-spacing:-.01em}
.nm-app .nm-h2{font-size:1.25rem;font-weight:600}
.nm-app .nm-h3{font-size:1.05rem;font-weight:600}
.nm-app p{margin:0}
.nm-app .nm-lead{color:var(--muted);max-width:64ch}
.nm-app .nm-panel{display:grid;gap:18px}
.nm-app .nm-box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:14px}
.nm-app .nm-row{display:flex;flex-wrap:wrap;gap:14px}
.nm-app .nm-row>.nm-field{flex:1 1 220px;min-width:0}
.nm-app .nm-field{display:grid;gap:6px;min-width:0}
.nm-app .nm-field>label,.nm-app .nm-lbl{display:block;margin:0;font-weight:700;font-size:.92rem;line-height:1.5}
.nm-app .nm-hint{color:var(--muted);font-size:.88rem}

.nm-app .nm-field input[type=text],.nm-app .nm-field select,.nm-app .nm-field textarea{
  font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:9px 11px;width:100%;margin:0;height:auto;box-shadow:none;
}
.nm-app .nm-field textarea{min-height:76px;resize:vertical}
.nm-app button:focus-visible,.nm-app input:focus-visible,.nm-app select:focus-visible,.nm-app textarea:focus-visible,.nm-app label.nm-chip:focus-within{outline:3px solid var(--accent);outline-offset:2px}

.nm-app .nm-disc{border-left:6px solid var(--c)}
.nm-app .nm-disc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.nm-app .nm-disc-head .nm-h3{color:var(--c)}
.nm-app .nm-yn,.nm-app .nm-chips{display:flex;gap:8px;flex-wrap:wrap}
.nm-app .nm-chip{display:inline-flex;align-items:center;gap:6px;margin:0;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:400;font-size:.92rem;line-height:1.5;cursor:pointer;background:var(--bg);color:var(--fg)}
.nm-app .nm-chip input{accent-color:var(--accent);margin:0}
.nm-app .nm-chip:has(input:checked){background:var(--soft);border-color:var(--accent);font-weight:700}
.nm-app .nm-disc-body{display:grid;gap:14px}

.nm-app .nm-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nm-app .nm-btn,.nm-app .nm-btn:hover,.nm-app .nm-btn:focus,.nm-app .nm-btn:active{
  font:inherit;font-weight:700;border-radius:8px;padding:10px 18px;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);
  text-transform:none;letter-spacing:normal;box-shadow:none;text-decoration:none;
}
.nm-app .nm-btn[disabled]{opacity:.6;cursor:wait}
.nm-app .nm-status{font-size:.92rem;color:var(--muted)}
.nm-app .nm-status.ok{color:var(--ok);font-weight:700}
.nm-app .nm-status.err{color:var(--err);font-weight:700}
.nm-app .nm-bedankt{text-align:center;padding:40px 18px}
.nm-app .nm-hp{position:absolute;left:-9999px}
