/* Speelse huisstijl van Pieter Leek: stickerlook, harde schaduwen, paars + geel */
:root {
  --primary: #6c3cf0; --primary-d: #4d22c9; --primary-t: #efe9ff;
  --ink: #1d1b2e; --text: #3a3850; --muted: #6d6a85;
  --bg: #fff7e6; --card: #ffffff; --line: #1d1b2e; --line2: #b9b4d0; --track: #ece8f7;
  --navy: #1d1b2e; --aqua: #d7f5ec; --aqua-d: #0e8a72; --sun: #ffd23f; --coral: #ff6b81;
  --ok: #138a45; --ok-t: #dff7e8; --warn: #a65f00; --warn-t: #fff0c9; --bad: #d4143a; --bad-t: #ffe3e8;
  --font: "Poppins", "Nunito", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px; --shadow: 4px 4px 0 var(--ink);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); }
#app { flex: 1; display: flex; flex-direction: column; }
.bg-grid { position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 87% 8%, rgba(255,210,63,.55), transparent 24rem), radial-gradient(rgba(108,60,240,.16) 1.5px, transparent 1.8px) 0 0 / 24px 24px; }
a { color: var(--primary-d); }
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); font-weight: 700; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 2rem; letter-spacing: -.02em; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .9em; }
.mono { font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .small { font-size: .875rem; } .hidden { display: none !important; }
.green { color: var(--ok); } .amber { color: var(--warn); } .red { color: var(--bad); } .cyan { color: var(--ink); }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 3px solid #1b1b1b; outline-offset: 2px; }

/* header + layout */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(255,247,230,.96); border-bottom: 2px solid var(--ink); backdrop-filter: blur(14px); }
.topbar::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: repeating-linear-gradient(90deg, var(--primary) 0 40px, var(--sun) 40px 80px, var(--coral) 80px 120px); }
.topbar-in { max-width: 1240px; margin: 0 auto; padding: 1rem 2rem .85rem; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); font-weight: 750; font-size: 1.08rem; letter-spacing: -.02em; white-space: nowrap; }
.brand .logo { background: var(--sun); color: var(--ink); padding: .27rem .75rem; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); font-weight: 800; letter-spacing: -.02em; transform: rotate(-2deg); transition: transform .15s; }
.brand:hover .logo { transform: rotate(2deg) scale(1.05); }
.nav { display: flex; gap: .2rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a, .nav button { font: 650 .9rem var(--font); color: var(--ink); text-decoration: none; padding: .52rem .85rem; border-radius: 999px; border: 0; background: none; cursor: pointer; }
.nav a:hover, .nav button:hover { background: var(--primary-t); color: var(--primary-d); }
.nav a.active { background: var(--sun); border: 2px solid var(--ink); padding: .4rem .8rem; }
.nav .who { color: var(--muted); font-size: .82rem; margin: 0 .35rem; padding-left: .8rem; border-left: 1px solid var(--line); }
main.page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 2.75rem 2rem 4.5rem; }
.center-screen { flex: 1; display: grid; place-items: center; padding: 2rem 1.2rem; }
.footer { background: var(--ink); color: #d9d6ec; border-top: 6px solid var(--sun); font-size: .82rem; padding: 1.75rem 1.5rem; text-align: center; margin-top: auto; }
.footer b { color: #fff; } .footer-grap { display: inline-block; margin-top: .35rem; color: var(--sun); font-style: italic; }
.grid2 { display: grid; gap: 1.5rem; grid-template-columns: 1.15fr 1fr; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

/* kaarten (voorheen "window") */
.window { background: var(--card); border: 2px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.5rem; }
.window.narrow { max-width: 440px; width: 100%; box-shadow: 6px 6px 0 var(--ink); }
.window-bar { display: flex; align-items: center; padding: 1.35rem 1.5rem .15rem; background: none; border: 0; }
.dots { display: none; }
.window-title { display: block; font: 700 1.15rem var(--font); color: var(--ink); }
.window-bar + .window-body { padding-top: .8rem; }
.window-body { padding: 1.35rem 1.5rem 1.5rem; }

/* dashboard */
.welcome { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .5fr); gap: 2.5rem; align-items: center; padding: 2.6rem 2.8rem; margin-bottom: 1.5rem; border-radius: 24px; color: #fff; background: linear-gradient(125deg, #5a2fe0 0%, #8b5cf6 100%); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.welcome::before { content: ""; position: absolute; width: 22rem; height: 22rem; right: -6rem; top: -11rem; border-radius: 50%; background: var(--sun); opacity: 1; }
.welcome::after { content: ""; position: absolute; width: 12rem; height: 12rem; left: -4rem; bottom: -7rem; border-radius: 50%; background: var(--coral); opacity: .8; }
.welcome > * { position: relative; z-index: 1; }
.eyebrow, .section-kicker { margin: 0 0 .55rem; color: var(--primary-d); font-size: .74rem; font-weight: 800; letter-spacing: .095em; text-transform: uppercase; }
.welcome .eyebrow { color: var(--sun); }
.welcome h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 .7rem; }
.welcome-grap { font-size: 1.25rem; font-weight: 600; color: #fff; margin: 0 0 .8rem; max-width: 36rem; }
.welcome-copy { max-width: 36rem; color: #efe9ff; font-size: .98rem; line-height: 1.6; margin: 0; }
.tip { display: flex; gap: 1rem; padding: 1.3rem; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(1.2deg); transition: transform .2s; }
.tip:hover { transform: rotate(0deg) translateY(-2px); }
.tip-icoon { width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--aqua); font-size: 1.4rem; animation: wiebel 3.5s ease-in-out infinite; }
.tip b { display: block; font-size: .95rem; }
.tip p { color: var(--text); font-size: .86rem; line-height: 1.5; margin: .25rem 0 0; }
@keyframes wiebel { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 92% { transform: rotate(12deg); } }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-bottom: 1.75rem; }
.stat { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; background: var(--card); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.stat:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.stat:nth-child(1) .stat-icoon { background: var(--sun); } .stat:nth-child(2) .stat-icoon { background: var(--aqua); }
.stat-icoon { width: 3rem; height: 3rem; flex: 0 0 3rem; display: grid; place-items: center; border-radius: 14px; background: var(--aqua); font-size: 1.5rem; }
.stat div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.stat span:not(.stat-icoon) { color: var(--muted); font-size: .84rem; font-weight: 600; line-height: 1.3; }
.stat strong { color: var(--navy); font-size: 1.8rem; line-height: 1; letter-spacing: -.05em; }
.stat--attention { background: var(--primary-t); } .stat--attention strong { color: var(--primary); } .stat--attention .stat-icoon { background: var(--primary-t); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(360px, .87fr); gap: 1.5rem; align-items: start; }
.dashboard-grid .window { margin: 0; }
.window--primary { background: #fbf9ff; }
.window--history { min-height: 100%; }
.section-intro { color: var(--muted); font-size: .9rem; margin: 0 0 1.4rem; }
.empty { display: grid; justify-items: center; gap: .25rem; padding: 3.2rem 1rem; line-height: 1.55; }
.empty b { color: var(--ink); }
.empty-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .55rem; border-radius: 50%; background: var(--primary-t); color: var(--primary); font-size: 1.25rem; font-weight: 800; }

/* formulieren */
label { display: block; font: 600 .9rem var(--font); color: var(--ink); margin: 0 0 .35rem; }
label.check { text-transform: none; }
input[type=text], input[type=password], select, textarea { width: 100%; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; padding: .7rem .85rem; font: 1rem var(--font); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,60,240,.25); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2rem; }
.field { margin-bottom: 1.1rem; }
.row { display: flex; gap: .9rem; flex-wrap: wrap; } .row > * { flex: 1 1 180px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 700 .95rem var(--font); color: #fff; background: var(--primary); border: 2px solid var(--primary); padding: .65rem 1.4rem; border-radius: 999px; cursor: pointer; text-decoration: none; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s, background .15s; }
.btn:hover { background: var(--primary-d); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--ink); } .btn.ghost:hover { background: var(--primary-t); }
.btn.danger { background: #fff; color: var(--bad); border-color: var(--ink); } .btn.danger:hover { background: var(--bad-t); }
.btn.sm { padding: .35rem .9rem; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.alert { border-left: 4px solid var(--bad); background: var(--bad-t); color: #7d0012; border-radius: 6px; padding: .75rem 1rem; font-size: .92rem; margin-bottom: 1rem; }
.alert.ok { border-color: var(--ok); background: var(--ok-t); color: #0e5429; }
.alert.warn { border-color: var(--warn); background: var(--warn-t); color: #6b3d00; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check span { display: block; padding: .45rem .9rem; border: 2px solid var(--line2); border-radius: 999px; font-size: .9rem; color: var(--text); background: #fff; }
.check input:checked + span { border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--primary-d); background: var(--primary-t); font-weight: 600; }
.check input:focus-visible + span { outline: 3px solid #1b1b1b; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.seg .check span { text-align: center; padding: .8rem; border-radius: 10px; }

.drop { border: 3px dashed var(--primary); border-radius: var(--r); padding: 1.8rem 1rem; text-align: center; cursor: pointer; transition: .15s; background: var(--bg); position: relative; }
.drop:hover, .drop.over { background: var(--sun); border-color: var(--ink); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .big { font-weight: 700; color: var(--ink); } .drop .file { color: var(--primary-d); margin-top: .4rem; word-break: break-all; font-size: .92rem; }

/* badges, tabellen */
.badge { display: inline-block; font-weight: 700; font-size: .75rem; padding: .18rem .65rem; border-radius: 999px; white-space: nowrap; }
.badge.green { color: var(--ok); background: var(--ok-t); }
.badge.amber { color: var(--warn); background: var(--warn-t); }
.badge.red { color: var(--bad); background: var(--bad-t); }
.badge.cyan { color: var(--ink); background: var(--track); }
.badge.gray { color: var(--muted); background: var(--track); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; font-weight: 700; font-size: .85rem; color: var(--muted); padding: .6rem .7rem; border-bottom: 2px solid var(--ink); }
td { padding: .75rem .7rem; border-bottom: 1px solid var(--track); vertical-align: top; }
tr:hover td { background: #fafaf8; }
.tablewrap { overflow-x: auto; }
.link-row { cursor: pointer; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }

/* login */
.boot { display: none; }
.login-title { font-size: 1.9rem; letter-spacing: -.04em; margin-bottom: .2rem; }
.tagline { color: var(--muted); margin-bottom: 1.4rem; }
.window.narrow { position: relative; }
.center-screen { background: radial-gradient(circle at 15% 85%, rgba(255,107,129,.18), transparent 22rem), radial-gradient(circle at 85% 15%, rgba(255,210,63,.3), transparent 24rem); }

/* humor-details */
.quip { color: var(--primary-d); font-size: .95rem; min-height: 1.6em; margin: 0 0 .8rem; }
.quip-line { font-style: italic; color: var(--primary-d); font-weight: 600; margin-bottom: .6rem; }
.busy { text-align: center; padding-top: 2rem; padding-bottom: 2rem; }
.busy-icoon { font-size: 3.2rem; display: inline-block; animation: speur 2.4s ease-in-out infinite; }
@keyframes speur { 0%, 100% { transform: translateX(-14px) rotate(-8deg); } 50% { transform: translateX(14px) rotate(8deg); } }
.busy .progress { max-width: 420px; margin: 1.2rem auto; }

/* resultaten */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 1.8rem; align-items: center; }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.ring { --p: 0; --c: var(--ok); width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--track) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
.ring b { position: relative; font: 800 2rem var(--font); color: var(--ink); } .ring small { position: relative; display: block; font-size: .72rem; color: var(--muted); margin-top: -.3rem; text-align: center; }
.ring > div { position: relative; text-align: center; }
.tabs { display: flex; gap: .2rem; flex-wrap: wrap; border-bottom: 2px solid var(--ink); margin-bottom: 1.4rem; }
.tab { font: 600 .95rem var(--font); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: .7rem 1rem; cursor: pointer; margin-bottom: -1px; }
.tab:hover { color: var(--ink); } .tab[aria-selected=true] { color: var(--ink); border-bottom-color: var(--primary); background: var(--sun); border-radius: 10px 10px 0 0; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { border: 2px solid var(--ink); background: #fff; border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 1rem 1.1rem; }
.card.s-gedekt { border-left: 4px solid var(--ok); } .card.s-gedeeltelijk { border-left: 4px solid var(--warn); } .card.s-niet_gedekt { border-left: 4px solid var(--bad); }
.card h3 { display: flex; gap: .6rem; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.kv { font-size: .85rem; color: var(--muted); margin-bottom: .2rem; } .kv b { color: var(--ink); font-weight: 600; }
.bar { height: 10px; border-radius: 99px; background: var(--track); overflow: hidden; } .bar > i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .8s ease; }
.bar.amber > i { background: var(--warn); } .bar.red > i { background: var(--bad); }
.kt { display: grid; grid-template-columns: 1fr 3fr auto; gap: .8rem; align-items: center; margin-bottom: .7rem; font-size: .92rem; }
@media (max-width: 640px) { .kt { grid-template-columns: 1fr; gap: .2rem; } }
.list { margin: 0; padding-left: 1.2rem; } .list li { margin-bottom: .5rem; }
.qa { border: 2px solid var(--ink); border-radius: 14px; background: #fff; margin-bottom: .8rem; }
.qa summary { cursor: pointer; padding: .9rem 1.1rem; list-style: none; display: flex; gap: .7rem; align-items: baseline; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "›"; font-weight: 700; color: var(--primary); transition: transform .15s; } .qa[open] summary::before { transform: rotate(90deg); }
.qa .in { padding: 0 1.1rem 1.1rem 2.2rem; }
.qa .q { font-weight: 600; }
.spin { display: inline-block; width: 1ch; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.progress { height: 5px; background: var(--track); border-radius: 4px; overflow: hidden; margin: 1rem 0; }
.progress i { display: block; height: 100%; width: 35%; background: var(--primary); border-radius: 4px; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.glitch { font: 800 5rem var(--font); color: var(--primary); margin: 0; }
.noscript { padding: 2rem; text-align: center; }
#toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); border: 2px solid var(--sun); color: #fff; font-size: .92rem; padding: .7rem 1.2rem; border-radius: 8px; transition: .25s; z-index: 100; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.pill-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; }
.toolbar .grow { flex: 1; }

/* kleine details die formulieren en resultaten rustiger maken */
.page--home .field > label:not(.check) { color: #45464b; }
.page--home .btn[type=submit] { min-width: 11.5rem; }
.page--home .welcome h1 { text-shadow: 3px 3px 0 var(--ink); }
.page--home .drop .big::before { content: "＋"; display: block; margin-bottom: .25rem; color: var(--primary); font-size: 1.25rem; font-weight: 400; }
.page--home .check span { transition: border-color .15s, background .15s, color .15s; }
.page--home .check:hover span { border-color: var(--primary); }
.page--home .tablewrap { margin: 0 -.2rem; }
.page--home tr.link-row { transition: background .15s; }
.page--home tr.link-row:hover td { background: var(--primary-t); }
.page--home table td:first-child { min-width: 14rem; }

@media (max-width: 900px) {
  .topbar-in, main.page { padding-left: 1.25rem; padding-right: 1.25rem; }
  .welcome { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.6rem; }
  .tip { max-width: 620px; transform: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .window--history { min-height: 0; }
}
@media (max-width: 640px) {
  .topbar-in { gap: .7rem; padding-top: .85rem; }
  .brand { font-size: 1rem; }
  .nav { width: 100%; margin-left: 0; gap: 0; justify-content: space-between; }
  .nav .who { display: none; }
  .nav a, .nav button { padding: .43rem .55rem; font-size: .8rem; }
  main.page { padding-top: 1.75rem; padding-bottom: 3rem; }
  .welcome h1 { font-size: 2rem; letter-spacing: -.02em; }
  .welcome-grap { font-size: 1.1rem; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .stat { padding: .85rem 1rem; }
  .dashboard-stats { gap: .7rem; }
  .window-bar, .window-body { padding-left: 1.1rem; padding-right: 1.1rem; }
  .window-bar { padding-top: 1.1rem; }
  .window-body { padding-bottom: 1.15rem; }
  .seg { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; } .topbar, .tabs, .toolbar, .footer, #toast { display: none !important; }
  .window, .card, .qa { box-shadow: none; border-color: #999; }
  .tab-panel { display: block !important; } .qa .in { display: block; } details > * { display: block; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .tip { transform: none; } }