/* JIP Level Up: gedeelde tokens en componenten (website en app) */
:root {
  --rood: #E3262E;
  --rood-donker: #9E1219;
  --blauw: #1E3FD8;
  --blauw-donker: #142C9E;
  --geel: #FFC814;
  --geel-licht: #FFE27A;
  --geel-donker: #D99E00;
  --inkt: #14112B;
  --wit: #FFFFFF;
  --papier: #FFF6E0;
  --lucht: #D6E0FF;
  --groen: #0F7F43;
  --gedempt: #3E3A5C;
  --gedempt-licht: #B9B6D3;
  --koper: #C9733A;
  --koper-licht: #F2A86E;
  --koper-donker: #8E4718;
  --messing: #E2B23A;
  --messing-licht: #FFE08A;
  --messing-donker: #A47712;
  --lcd: #9FB89A;

  /* rolkleuren (wisselen in donker thema) */
  --bg: var(--papier);
  --vlak: var(--wit);
  --tekst: var(--inkt);
  --tekst-2: var(--gedempt);
  --lijn: var(--inkt);
  --schaduw: var(--inkt);
  --raster: rgba(20, 17, 43, 0.05);

  --kop: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'Consolas', monospace;

  --r-s: 8px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 16px;
  --rand: 3px;
  --veer: cubic-bezier(.34, 1.56, .64, 1);
  --snel: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--tekst); background: var(--bg); line-height: 1.45; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blauw); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }
.op-donker :focus-visible, .donker-vlak :focus-visible { outline-color: var(--geel); }

.raster { background-image: linear-gradient(var(--raster) 2px, transparent 2px), linear-gradient(90deg, var(--raster) 2px, transparent 2px); background-size: 32px 32px; }

/* ---------- knoppen ---------- */
.knop {
  --k-bg: var(--geel); --k-fg: var(--inkt); --k-rand: var(--lijn); --k-sch: var(--schaduw);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 20px;
  font-family: var(--body); font-weight: 900; font-size: 16px; line-height: 1.1; text-decoration: none;
  background: var(--k-bg); color: var(--k-fg);
  border: var(--rand) solid var(--k-rand); border-radius: var(--r-m);
  box-shadow: 4px 4px 0 var(--k-sch);
  transition: transform .12s var(--snel), box-shadow .12s var(--snel), background-color .15s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.knop:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--k-sch); }
.knop:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--k-sch); }
.knop svg { flex: none; }
.knop--rood { --k-bg: var(--rood); --k-fg: var(--wit); }
.knop--blauw { --k-bg: var(--blauw); --k-fg: var(--wit); }
.knop--groen { --k-bg: var(--groen); --k-fg: var(--wit); }
.knop--wit { --k-bg: var(--wit); --k-fg: var(--inkt); }
.knop--lijn { --k-bg: var(--vlak); --k-fg: var(--blauw); --k-rand: var(--blauw); --k-sch: var(--blauw); }
.knop--groot { min-height: 58px; font-size: 18px; padding: 0 24px; border-radius: 12px; box-shadow: 5px 5px 0 var(--k-sch); }
.knop--klein { min-height: 44px; font-size: 14px; padding: 0 14px; box-shadow: 3px 3px 0 var(--k-sch); }
.knop--vierkant { width: 52px; padding: 0; }
.knop[disabled] { opacity: .5; pointer-events: none; }

/* ---------- labels, chips, codes ---------- */
.label {
  display: inline-block; align-self: flex-start;
  font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  background: var(--inkt); color: var(--geel); padding: 4px 10px; border-radius: 6px;
}
.label--geel { background: var(--geel); color: var(--inkt); border: 2px solid var(--inkt); }
.code-tag {
  display: inline-block; font-family: var(--mono); font-weight: 700; letter-spacing: .5px;
  background: var(--geel); color: var(--inkt); border: 2px solid var(--inkt); border-radius: 6px; padding: 0 6px; line-height: 1.5;
}
.code-tag--lucht { background: var(--lucht); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  font-weight: 800; font-size: 14px; background: var(--vlak); color: var(--tekst);
  border: 2px solid var(--lijn); border-radius: var(--r-s); cursor: pointer;
  transition: transform .12s var(--snel), box-shadow .12s, background-color .15s;
}
.chip[aria-pressed="true"] { background: var(--geel); color: var(--inkt); font-weight: 900; box-shadow: 2px 2px 0 var(--schaduw); }
.chip:active { transform: translate(1px, 1px); }

.kaart { background: var(--vlak); border: var(--rand) solid var(--lijn); border-radius: var(--r-xl); box-shadow: 6px 6px 0 var(--schaduw); }

/* ernst-meter */
.ernst { display: inline-flex; align-items: center; gap: 8px; }
.ernst__blok { display: flex; gap: 3px; }
.ernst__blok i { display: block; width: 14px; height: 12px; background: var(--wit); border: 2px solid var(--inkt); }
.ernst[data-ernst="laag"] .ernst__blok i:nth-child(-n+1) { background: var(--geel); }
.ernst[data-ernst="middel"] .ernst__blok i:nth-child(-n+2) { background: #F07A1A; }
.ernst[data-ernst="hoog"] .ernst__blok i { background: var(--rood); }
.ernst__tekst { font-weight: 900; font-size: 13px; }

/* munt */
.munt { display: inline-block; width: 1em; height: 1em; flex: none; }

/* JIP-woordmerk blok */
.jip-blok {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: var(--rood); border: 3px solid var(--inkt); border-radius: 10px; box-shadow: 3px 3px 0 var(--inkt);
}
.jip-blok .schroef { position: absolute; width: 18%; max-width: 12px; min-width: 5px; aspect-ratio: 1; }
.jip-blok .schroef:nth-of-type(1) { top: 7%; left: 5%; }
.jip-blok .schroef:nth-of-type(2) { top: 7%; right: 5%; }
.jip-blok .schroef:nth-of-type(3) { bottom: 7%; left: 5%; }
.jip-blok .schroef:nth-of-type(4) { bottom: 7%; right: 5%; }

/* DHPS-logo */
.dhps { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.dhps__pb { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--gedempt-licht); }
.dhps svg { display: block; width: auto; }

/* muntregen (eastereggje) */
.muntregen { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.muntregen .vallend { position: absolute; top: -60px; width: 34px; height: 34px; will-change: transform; }

/* leidingen: water dat stroomt */
@keyframes stroom { to { stroke-dashoffset: -40; } }
.water-stroom { stroke-dasharray: 10 14; animation: stroom .7s linear infinite; }
@keyframes munt-draai { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* koppelingen: kogelkraan-hendel en manometer-naald */
.f-kraan .hendel { transform: rotate(-90deg); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.f-kraan.is-open .hendel { transform: rotate(0deg); }
.f-mano .naald { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }