/* Mono-portaal — prototype. Hub-vormtaal (docs/prototype-styleguide.md):
   Borna, beige canvas, zwevende eilanden, Phosphor regular.
   Alleen het klantlogo verandert per klant. */

@font-face { font-family:'Borna'; src:url('fonts/Borna-Regular.woff2')  format('woff2'); font-weight:400; font-display:block; }
@font-face { font-family:'Borna'; src:url('fonts/Borna-Medium.woff2')   format('woff2'); font-weight:500; font-display:block; }
@font-face { font-family:'Borna'; src:url('fonts/Borna-SemiBold.woff2') format('woff2'); font-weight:600; font-display:block; }

:root{
  --color-bg:#f4f1ec; --color-surface:#fff; --color-surface-sunk:#efeae2; --color-chip:#f0ece5;
  --color-ink:#3b3431; --color-ink-dim:#6b6b6b; --color-ink-faint:#a8a8a8;
  --color-accent:#3a2a22; --color-accent-fg:#efe9e1;
  --color-annotation:#d94f2a; --color-rule:#e3ddd3; --color-highlight:#e5ff11;

  --r-island:28px; --r-card:24px; --r-inner:16px; --r-sm:12px; --r-pill:999px;
  --shadow-island:0 1px 2px rgba(26,22,18,.04), 0 6px 20px rgba(26,22,18,.05);
  --shadow-float:0 4px 12px rgba(26,22,18,.08), 0 18px 48px rgba(26,22,18,.12);

  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px;
  --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px;

  --fs-xxs:10px; --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
  --fs-xl:24px; --fs-2xl:34px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  --vraag-open:#e0782a; --vraag-klaar:#3f8f5f;
  --cat-dev:#3f6f6b; --cat-copy:#b0473a; --cat-ops:#8a6d3b; --cat-strategy:#b5651d;

  --dur-fast:140ms; --dur-base:200ms; --dur-slow:320ms; --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-reveal:480ms; --dur-reveal-fade:200ms; --stagger:70ms; --dur-rail:420ms;

  --rail-w:72px; --nav-inset:8px; --dock-w:264px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; }
body{
  font-family:'Borna', ui-sans-serif, system-ui, sans-serif;
  background:var(--color-bg); color:var(--color-ink);
  font-size:var(--fs-base); line-height:1.5;
}
button{ font:inherit; color:inherit; border:none; background:none; cursor:pointer; }
input, textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
.ic{ width:20px; height:20px; display:block; flex:none; }
.ic--sm{ width:16px; height:16px; }

/* ── de zwevende rail — 1:1 uit hub/src/components/Sidebar.css ──────── */
.rail{
  position:fixed; left:var(--nav-inset); top:var(--nav-inset); bottom:var(--nav-inset);
  width:var(--rail-w); background:var(--merkkleur, var(--color-surface)); border-radius:var(--r-card);
  box-shadow:var(--shadow-island); z-index:30;
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-4); padding:var(--space-3) 0;
  animation:rail-in var(--dur-rail) var(--ease-out) backwards;
}
.rail .client{ display:grid; place-items:center; width:44px; height:44px; }
/* Het ene merkteken is vierkant, het andere een brede lockup — passend maken,
   nooit oprekken. */
.rail .client img{ width:100%; height:100%; display:block; object-fit:contain; }
.rail .client .merkletter{ font-weight:600; font-size:20px; }

.rail nav{ position:relative; display:flex; flex-direction:column; gap:6px; }
/* De actieve markering is één los pil-element dat naar de nieuwe positie
   animeert (dezelfde Instagram-truc als motion's layoutId in de hub). */
.rail nav .active-pill{
  position:absolute; left:0; top:0; width:48px; height:48px; z-index:0;
  background:var(--color-ink); border-radius:var(--r-sm);
  transform:translateY(calc(var(--i, 0) * 54px));
  transition:transform var(--dur-slow) var(--ease-out);
}
.rail nav button{
  position:relative; display:grid; place-items:center;
  width:48px; height:48px; border-radius:var(--r-sm);
  color:var(--color-ink-dim);
  transition:background 140ms ease, color 140ms ease;
  -webkit-tap-highlight-color:transparent;
}
.rail nav button > svg{ position:relative; z-index:1; }
.rail nav button.on{ color:var(--color-bg); }
@media (hover:hover) and (pointer:fine){
  .rail nav button:hover{ background:rgba(26,22,18,.06); color:var(--color-ink); }
  .rail nav button.on:hover{ background:transparent; color:var(--color-bg); }
  .rail nav button:hover .tip, .rail nav button:focus-visible .tip{
    opacity:1; transform:translateY(-50%) translateX(0);
  }
}

/* Draagt het portaal de merkkleur van de klant (`merkkleur` in klant.json), dan
   wordt de rail zwart: het merkteken van de klant in zijn eigen kleur, de iconen
   wit, en de actieve pil precies andersom — wit vlak, icoon in de merkkleur.
   Zonder merkkleur blijft de rail wit en verandert er niets. */
.rail[data-merk]{ background:var(--color-ink-deep, #1a1a1a); }
.rail[data-merk] nav .active-pill{ background:#fff; }
.rail[data-merk] nav button{ color:rgba(255,255,255,.72); }
.rail[data-merk] nav button.on{ color:var(--merkkleur); }
/* Het klantmerk is één vlak, dus een masker geeft 'm de merkkleur zonder een
   tweede bestand: de vorm komt uit de svg, de kleur uit klant.json. */
.rail .client .merkmask{
  display:block; width:100%; height:100%;
  background:var(--merkkleur);
  -webkit-mask:var(--merklogo) center/contain no-repeat;
          mask:var(--merklogo) center/contain no-repeat;
}
.rail[data-merk] .client .merkletter{ color:var(--merkkleur); }
/* Het Monostatic-merkteken onderin staat nu op zwart. */
.rail[data-merk] .studio img{ filter:brightness(0) invert(1); }
/* Een eigen rail uit klant.json (`rail`): wint van de merkkleur-variant hierboven. */
.rail[data-rail]{ background:var(--rail-bg, var(--color-ink-deep, #1a1a1a)); }
.rail[data-rail] .client{ width:40px; height:40px; margin-top:4px; }
.rail[data-rail] .client .merkmask{ background:var(--rail-logokleur, #fff); }
.rail[data-rail] nav .active-pill{ background:var(--rail-pil, #fff); }
.rail[data-rail] nav button{ color:var(--rail-icoon, rgba(255,255,255,.72)); }
.rail[data-rail] nav button.on{ color:var(--rail-pil-icoon, var(--merkkleur)); }
.rail[data-rail] .studio img{ filter:brightness(0) invert(1); }
@media (hover:hover) and (pointer:fine){
  .rail[data-rail] nav button:hover{ background:color-mix(in srgb, var(--rail-icoon, #fff) 14%, transparent); color:var(--rail-icoon, #fff); }
  .rail[data-rail] nav button.on:hover{ background:transparent; color:var(--rail-pil-icoon, var(--merkkleur)); }
}
.sub a.on{ background:var(--paneel-actief, var(--color-chip)); }
@media (hover:hover) and (pointer:fine){
  .rail[data-merk] nav button:hover{ background:rgba(255,255,255,.14); color:#fff; }
  .rail[data-merk] nav button.on:hover{ background:transparent; color:var(--merkkleur); }
}
/* Hover-tooltip — zwarte pill rechts van het icoon. */
.tip{
  position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--color-ink); color:var(--color-bg);
  font-size:var(--fs-xs); font-weight:var(--fw-medium);
  padding:6px 12px; border-radius:8px; white-space:nowrap;
  pointer-events:none; opacity:0; z-index:40;
  transition:opacity 120ms ease, transform 120ms ease;
}
/* Het Monostatic-merkteken claimt de omgeving als de onze — zelfde gebaar als in
   de ilumae-portal: klein, onderaan, en op hover vertelt het waar je bent. */
.rail .studio{
  position:relative; margin-top:auto; display:grid; place-items:center;
  width:44px; height:44px; opacity:.55;
  transition:opacity var(--dur-base) linear;
}
.rail .studio:hover{ opacity:1; }
.rail .studio img{ display:block; width:29px; height:auto; }
.rail .studio::after{
  content:attr(data-label);
  position:absolute; left:calc(100% + 10px); top:50%; translate:0 -50%;
  background:var(--color-ink); color:var(--color-bg);
  font-size:var(--fs-xs); font-weight:var(--fw-medium);
  padding:6px 12px; border-radius:10px; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) linear;
}
.rail .studio:hover::after{ opacity:1; }

/* ── de tweede kolom (submenu) ──────────────────────────── */
.sub{
  position:fixed; left:calc(2 * var(--nav-inset) + var(--rail-w));
  top:var(--nav-inset); bottom:var(--nav-inset);
  width:var(--dock-w); background:var(--color-surface); border-radius:var(--r-card);
  box-shadow:var(--shadow-island); z-index:20; padding:var(--space-4) var(--space-3);
  display:flex; flex-direction:column; gap:var(--space-1);
  animation:dock-in var(--dur-base) var(--ease-out);
}
.sub[hidden]{ display:none; }
.sub h2{ font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-faint); padding:0 var(--space-2) var(--space-2); }
.sub a{
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2); border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-ink-dim);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sub a:hover{ background:var(--color-chip); color:var(--color-ink); }
.sub a.on{ background:var(--color-chip); color:var(--color-ink); font-weight:var(--fw-semibold); }

/* ── chroom rechtsboven ─────────────────────────────────── */
.chrome{
  position:fixed; top:var(--space-4); right:var(--space-5); z-index:25;
  display:flex; align-items:center; gap:var(--space-2);
}
.chrome .bel{
  position:relative; width:40px; height:40px; border-radius:var(--r-pill);
  background:var(--color-surface); box-shadow:var(--shadow-island);
  display:grid; place-items:center; color:var(--color-ink-dim);
  transition:color var(--dur-fast) var(--ease-out);
}
.chrome .bel:hover{ color:var(--color-ink); }
.chrome .badge{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--color-ink); color:var(--color-bg);
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); line-height:1;
}
.chrome .av{
  width:40px; height:40px; border-radius:var(--r-pill);
  background:var(--color-ink); color:var(--color-bg);
  display:grid; place-items:center; font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  cursor:pointer;
}

/* Het paneel onder de bel en de avatar. Eén vorm voor allebei: ze hangen op
   dezelfde plek en gaan op dezelfde manier weer dicht. */
.chrome-paneel{
  position:fixed; top:calc(var(--space-4) + 48px); right:var(--space-5); z-index:60;
  width:min(360px, calc(100vw - 2 * var(--space-4)));
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-float);
  padding:var(--space-4); animation:fade var(--dur-base) var(--ease-out);
}
.chrome-paneel h3{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.chrome-paneel__sub{ font-size:var(--fs-xs); color:var(--color-ink-dim); margin-top:2px; }
.chrome-paneel__leeg{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:var(--space-2); line-height:1.5; }
.chrome-paneel__lijst{ display:flex; flex-direction:column; margin-top:var(--space-3); }
.chrome-paneel__rij{
  display:block; padding:var(--space-3); border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease-out);
}
.chrome-paneel__rij:hover{ background:var(--color-chip); }
.chrome-paneel__rij b{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); display:block; }
.chrome-paneel__rij p{ font-size:var(--fs-xs); color:var(--color-ink-dim); margin-top:2px; line-height:1.45; }
.chrome-paneel__rij small{ font-size:var(--fs-xxs); color:var(--color-ink-faint); }

@media (max-width: 860px){
  .chrome-paneel{ top:calc(var(--space-3) + 48px); right:var(--space-3); left:var(--space-3); width:auto; }
}

/* ── canvas ─────────────────────────────────────────────── */
.page{
  margin-left:calc(var(--nav-inset) + var(--rail-w) + var(--space-3));
  padding:var(--space-6) var(--space-6) var(--space-8);
  transition:margin-left var(--dur-base) var(--ease-out);
}
.page.with-sub{ margin-left:calc(2 * var(--nav-inset) + var(--rail-w) + var(--dock-w) + var(--space-3)); }
.wrap{ max-width:1200px; margin-inline:auto; }

.screen-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); }
.screen-header h1{ font-size:var(--fs-2xl); font-weight:var(--fw-semibold); line-height:1; letter-spacing:-.02em; }
.screen-header p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-2); }
.who{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-ink-dim); }
.who .av{
  width:30px; height:30px; border-radius:var(--r-pill); background:var(--color-ink);
  color:var(--color-bg); display:grid; place-items:center; font-size:var(--fs-xs); font-weight:var(--fw-semibold);
}

/* ── de begroeting ──────────────────────────────────────── */
.hi{
  display:flex; align-items:center; justify-content:center; gap:var(--space-3);
  margin:var(--space-6) 0 var(--space-5);
}
.hi .lottie{ width:44px; height:44px; flex:none; }
.hi .lottie svg{ display:block; }
.hi h1{ font-size:var(--fs-2xl); font-weight:var(--fw-semibold); letter-spacing:-.02em; line-height:1; }

/* ── het vraagveld ──────────────────────────────────────── */
.ask{
  width:min(740px,100%); margin:0 auto var(--space-7);
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3);
}
.ask textarea{
  border:none; outline:none; resize:none; background:transparent;
  font-size:var(--fs-base); line-height:1.5; min-height:84px;
}
.ask textarea::placeholder{ color:var(--color-ink-faint); }
.ask .row{ display:flex; justify-content:flex-end; }
.go{
  width:40px; height:40px; border-radius:var(--r-pill); background:var(--color-ink); color:var(--color-bg);
  display:grid; place-items:center; flex:none;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.go:hover:not(:disabled){ transform:translateX(2px); }
.go:disabled{ opacity:.45; cursor:default; }


/* ── bord ───────────────────────────────────────────────── */
.section{ border-top:1px solid var(--color-rule); padding-top:var(--space-4); }
.section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.section-header h2{ font-size:var(--fs-base); font-weight:var(--fw-medium); color:var(--color-ink-dim); }

/* het archief — één tik, geen verlamde vierde kolom */
.archive{ border-top:1px solid var(--color-rule); margin-top:var(--space-6); padding-top:var(--space-4); }
.archive summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-sm); color:var(--color-ink-dim);
}
.archive summary::-webkit-details-marker{ display:none; }
.archive summary .chev{ display:grid; transform:rotate(90deg); transition:transform var(--dur-fast) var(--ease-out); }
.archive[open] summary .chev{ transform:rotate(-90deg); }
.archive summary .n{
  background:var(--color-ink); color:var(--color-bg); border-radius:var(--r-pill);
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); padding:2px 8px;
}
.archive ul{ list-style:none; margin-top:var(--space-4); }
.archive li{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) 0; border-top:1px solid var(--color-rule);
  font-size:var(--fs-sm);
}
.archive li:first-child{ border-top:none; }
.archive li span{ margin-left:auto; font-size:var(--fs-xs); color:var(--color-ink-faint); }
.pebbles{ display:flex; gap:var(--space-1); }
.pebble{
  font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-dim);
  padding:var(--space-1) var(--space-3); border-radius:var(--r-pill);
  transition:background var(--dur-fast) var(--ease-out);
}
.pebble.on{ background:var(--color-surface); color:var(--color-ink); box-shadow:var(--shadow-island); }

.board{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); align-items:start; }
/* Vier kolommen zijn op een smal scherm te krap: eerst twee naast elkaar, onder 980px één. */
@media (max-width:1240px){ .board{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.col > header{ display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-1) var(--space-3); }
.col > header b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.col > header .n{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.stack{ display:flex; flex-direction:column; gap:var(--space-4); }

.tile{
  display:block; width:100%; text-align:left;
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-4); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
.tile h3{ font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1.35; }
.tile p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-1); }
/* Geen samenvatting, alleen dat het binnen is: zachter dan een echte ondertitel. */
.tile p.tile__stil{ color:var(--color-ink-dim); }
.tile .meta{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--color-ink-faint); }
.tile .meta .r{ margin-left:auto; }
.cat{ display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--color-ink-dim); }
.dot{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--color-ink-faint); flex:none; }
.dot.comm{ background:var(--cat-copy); } .dot.op{ background:var(--cat-ops); } .dot.tech{ background:var(--cat-dev); }
/* Het soort punt: een stil randje, geen gekleurd blok. Het is een feit over de
   kaart, niet een waarschuwing. Alleen 'idee' en 'signaal' wijken af, want dat
   zijn de twee die niet vanzelf werk worden en dat mag je zien. */
.soort{
  font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-dim);
  border:1px solid var(--color-rule);
  padding:1px 8px; border-radius:var(--r-pill); flex:none;
}
.soort--idee{ border-color:var(--cat-strategy); color:var(--cat-strategy); }
.soort--signaal{ border-color:var(--cat-ops); color:var(--cat-ops); }

/* De draad waar een punt bij hoort. Staat boven de meta-regel, want het is geen
   etiket maar een verwijzing: hier hangt meer aan. */
.draad{ display:flex; align-items:center; gap:6px; margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--color-ink-dim); }
.draad b{ font-weight:var(--fw-medium); }
.draad .n{ color:var(--color-ink-faint); }

/* ── sporen: de lijnen waarlangs we werken ─────────────────
   Een lopend spoor is een kaart zoals een tegel (wit, eiland-schaduw); een
   spoor dat nog niet gestart is heeft de gestippelde rand van een concept:
   het is er nog niet. Het label op een kaart is een vlak chipje, zodat het
   niet verward wordt met het soort punt (dat heeft een rand). */
.sporen{ margin-bottom:var(--space-6); }
.sporen-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-4); align-items:stretch; }
.spoor{
  display:flex; flex-direction:column; gap:var(--space-3);
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-4); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.spoor:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
.spoor.on{ box-shadow:inset 0 0 0 1.5px var(--color-ink), var(--shadow-island); }
.spoor__kop{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); }
.spoor__kop h3{ font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1.35; }
.spoor__n{ font-size:var(--fs-xs); color:var(--color-ink-faint); white-space:nowrap; }
.spoor__stand{ font-size:var(--fs-sm); color:var(--color-ink-dim); line-height:1.5; }
.spoor__regel{ border-top:1px solid var(--color-rule); padding-top:var(--space-3); }
.spoor__regel p{ font-size:var(--fs-sm); line-height:1.5; margin-top:var(--space-1); }
.spoor__kopje{
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:.04em;
  text-transform:uppercase; color:var(--color-ink-faint);
}
.spoor__nodig mark{
  background:var(--color-highlight); color:var(--color-ink); padding:1px 6px; border-radius:var(--r-sm);
  font-size:var(--fs-xs); font-weight:var(--fw-medium);
}
.sporen-later{ margin-top:var(--space-5); }
.sporen-later > h3{ font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-ink-dim); margin-bottom:var(--space-3); }
.sporen-later__lijst{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-3); align-items:start; }
.spoor-later{ border:1px dashed var(--color-rule); border-radius:var(--r-card); padding:var(--space-4); }
.spoor-later.on{ border:1.5px solid var(--color-ink); }
.spoor-later__kop{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); }
.spoor-later__kop b{ font-weight:var(--fw-semibold); }
.spoor-later__kop:hover b{ text-decoration:underline; text-underline-offset:2px; }
.spoor-later p{ font-size:var(--fs-xs); color:var(--color-ink-dim); line-height:1.5; margin-top:var(--space-1); }
.spoor-later ul{ list-style:none; margin-top:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2); }
.spoor-later li a{ font-size:var(--fs-xs); color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:2px; }
.spoor-later li a:hover{ color:var(--color-ink); }
.spoor-label{
  font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink);
  background:var(--color-chip); padding:1px 8px; border-radius:var(--r-pill); flex:none;
}
/* Spoor → pijlers: "Levert op" met de pijlers als dezelfde vlakke chips, en
   de koppen "Waar we aan werken" / "Wat het oplevert" met het vakwoord
   (Sporen, Pijlers) als klein label erachter. De spoorkaart is één klikvlak
   via de kop (::after over de kaart); de pijlerlabels liggen erboven. */
.spoor{ position:relative; }
.spoor__kop::after{ content:''; position:absolute; inset:0; border-radius:inherit; }
.spoor__pijlers{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:auto; }
.spoor .spoor__pijlers{ border-top:1px solid var(--color-rule); padding-top:var(--space-3); }
.spoor-later .spoor__pijlers{ margin-top:var(--space-3); }
.spoor__labels{ display:flex; flex-wrap:wrap; gap:6px; }
.spoor-label--link:hover{ text-decoration:underline; text-underline-offset:2px; }
.sporen__wat{
  margin-left:var(--space-2); font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:.04em;
  text-transform:uppercase; color:var(--color-ink-faint); vertical-align:.15em;
}
.pebbles--spoor{ flex-wrap:wrap; margin:calc(-1 * var(--space-2)) 0 var(--space-4); }
/* Waar een klik op een spoor naartoe scrolt: net boven het bord, niet eronder. */
#bord{ scroll-margin-top:var(--space-4); }

/* ── ter goedkeuring ─────────────────────────────────────
   De oplevering is het belangrijkste op de kaart: een vlak blok met de link,
   daaronder Akkoord en Reageren. Na een akkoord staat er een rustige regel in
   plaats van de knoppen; de kaart blijft staan tot wij het ticket afronden. */
.tile--gk{ display:flex; flex-direction:column; gap:var(--space-3); }
.tile--gk:hover{ transform:none; box-shadow:var(--shadow-island); }
.tile__open h3{ font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1.35; }
.tile__open p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-1); }
@media (hover:hover){ .tile__open:hover h3{ text-decoration:underline; text-underline-offset:2px; } }
.tile--gk .meta{ margin-top:0; }
.gk-link{
  display:flex; align-items:center; gap:var(--space-3);
  background:var(--color-surface-sunk); border-radius:var(--r-inner); padding:var(--space-3);
  transition:background var(--dur-fast) var(--ease-out);
}
.gk-link:hover{ background:var(--color-chip); }
.gk-link > span{ display:flex; flex-direction:column; min-width:0; flex:1; }
.gk-link small{ font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:.04em; text-transform:uppercase; color:var(--color-ink-faint); }
.gk-link b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); overflow-wrap:anywhere; }
.gk-acties{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.gk-acties .btn{ font-size:var(--fs-xs); padding:var(--space-1) var(--space-3); }
.gk-akkoord{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.gk-akkoord > span{ display:flex; flex-direction:column; }
.gk-akkoord small{ font-size:var(--fs-xs); font-weight:var(--fw-regular); color:var(--color-ink-faint); }
/* Klaar voor livegang: een gevuld vinkje in de inkt; Live: hetzelfde vinkje in groen. */
.klaar-vink .ic circle{ fill:var(--color-ink); }
.klaar-vink .ic path{ stroke:var(--color-surface); }
.klaar-vink--live .ic circle{ fill:#2f9e5b; }
.tile .klaar-vink{ margin-top:var(--space-3); }
.gk-detail{ border-top:1px solid var(--color-rule); margin-top:var(--space-4); padding-top:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); }
.gk-detail__kop{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }

/* ── te beslissen: vragen per verzoek ──────────────────────
   Een genummerde lijst; de open vragen hebben de vorm eronder (opties als
   pillen zoals bij de status, een veld voor eigen woorden), de beantwoorde
   klappen in tot het antwoord met wie en wanneer. Het neon blijft voor de
   markering op de kaart; hier doet de volgorde het werk. */
.vragen__kop{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.vragen__kop h2{ margin:0; }
.vragen__telling{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.vragen__lijst{ list-style:none; display:flex; flex-direction:column; }
.vraag{ display:flex; gap:var(--space-3); padding:var(--space-4) 0; border-top:1px solid var(--color-rule); }
.vraag:first-child{ border-top:none; padding-top:var(--space-2); }
.vraag__nr{
  flex:none; width:26px; height:26px; border-radius:var(--r-pill); display:grid; place-items:center;
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); background:var(--color-surface); color:var(--color-ink);
  box-shadow:inset 0 0 0 2px var(--color-rule);
}
/* De ring zegt de stand: oranje wacht nog op een antwoord, groen is
   beantwoord. Vervallen houdt de neutrale ring. */
.vraag--open .vraag__nr{ box-shadow:inset 0 0 0 2px var(--vraag-open); }
.vraag--beantwoord .vraag__nr, .vraag--verwerkt .vraag__nr{ box-shadow:inset 0 0 0 2px var(--vraag-klaar); }

/* Ingeklapt: één regel, klik om het antwoord te zien. */
.vraag--dicht{ display:block; padding:0; }
.vraag--dicht:first-child{ padding-top:0; }
.vraag--dicht details > summary{
  list-style:none; display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; cursor:pointer;
}
.vraag--dicht details > summary::-webkit-details-marker{ display:none; }
.vraag--dicht .vraag__vraag{ flex:1; min-width:0; font-size:var(--fs-sm); color:var(--color-ink-dim); }
.vraag--dicht summary:hover .vraag__vraag{ color:var(--color-ink); }
.vraag__vink{ flex:none; display:flex; align-items:center; gap:var(--space-1); font-size:var(--fs-xs); color:var(--vraag-klaar); font-weight:var(--fw-medium); }
.vraag--vervallen .vraag__vink{ color:var(--color-ink-faint); }
.vraag__body--dicht{ padding:0 0 var(--space-4) calc(26px + var(--space-3)); }
.vraag__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-2); }
.vraag__vraag{ font-size:var(--fs-base); font-weight:var(--fw-medium); line-height:1.4; }
.vraag--beantwoord .vraag__vraag, .vraag--verwerkt .vraag__vraag, .vraag--vervallen .vraag__vraag{ font-size:var(--fs-sm); color:var(--color-ink-dim); }
.vraag--vervallen .vraag__vraag{ text-decoration:line-through; }
.vraag__uitleg{ font-size:var(--fs-sm); color:var(--color-ink-dim); line-height:1.55; }
.vraag__vorm{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-1); }
.vraag__opties{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.vraag__opties button{
  font-size:var(--fs-sm); padding:var(--space-2) var(--space-3); border-radius:var(--r-pill);
  border:1.5px solid var(--color-rule); color:var(--color-ink); text-align:left;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.vraag__opties button:hover:not([aria-checked="true"]){ border-color:var(--color-ink); }
.vraag__opties button[aria-checked="true"]{ background:var(--color-ink); border-color:var(--color-ink); color:var(--color-bg); }
.vraag__vorm textarea{
  width:100%; resize:vertical; background:var(--color-surface-sunk); border:none; outline:none;
  border-radius:var(--r-inner); padding:var(--space-3); font-size:var(--fs-sm); line-height:1.5;
}
.vraag__vorm textarea:focus{ box-shadow:0 0 0 2px var(--color-ink); }
.vraag__acties{ display:flex; align-items:center; gap:var(--space-3); }
.vraag__acties .btn[disabled]{ opacity:.4; cursor:default; }
.vraag__antwoord{ background:var(--color-surface-sunk); border-radius:var(--r-inner); padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-1); }
.vraag__antwoord p{ font-size:var(--fs-sm); line-height:1.5; }
.vraag__antwoord b{ font-weight:var(--fw-semibold); }
.vraag__antwoord small, .vraag__stand{ display:flex; align-items:center; gap:var(--space-1); font-size:var(--fs-xs); color:var(--color-ink-faint); }
.vraag__antwoord .btn--stil{ align-self:flex-start; font-size:var(--fs-xs); padding:0; margin-top:var(--space-1); }
.vraag__acties .btn--stil{ padding:0; }

.meenemen h2{ display:flex; align-items:center; gap:var(--space-2); }
.meenemen ul{ margin-top:var(--space-3); display:flex; flex-direction:column; gap:var(--space-3); }
.meenemen li{ border-left:2px solid var(--color-rule); padding-left:var(--space-3); }
.meenemen li p{ font-size:var(--fs-sm); line-height:1.55; }
.meenemen li small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

.concept-soort{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
.concept-soort .label{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

.flag{ display:flex; align-items:center; gap:6px; margin-top:var(--space-3); font-size:var(--fs-xs); font-weight:var(--fw-medium); }
.flag mark{ background:var(--color-highlight); color:var(--color-ink); padding:1px 6px; border-radius:var(--r-sm); }
.empty{ border-radius:var(--r-card); padding:var(--space-4); font-size:var(--fs-sm); color:var(--color-ink-faint); text-align:center; }

/* ── modal ──────────────────────────────────────────────── */
.scrim{
  position:fixed; inset:0; background:rgba(26,22,18,.28); z-index:60;
  display:grid; place-items:center; padding:var(--space-5);
  animation:fade var(--dur-base) var(--ease-out);
}
@keyframes fade{ from{ opacity:0 } }
.modal{
  width:min(680px,100%); max-height:88vh; overflow:auto;
  background:var(--color-surface); border-radius:var(--r-island); box-shadow:var(--shadow-float);
  padding:var(--space-5); animation:rise var(--dur-base) var(--ease-out);
}
/* Een uiting op ware grootte heeft meer nodig dan een gesprek in een venster. */
.modal:has(.groot){ width:min(1100px,100%); }
@keyframes rise{ from{ opacity:0; transform:translateY(12px) } }
.modal .eyebrow{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-xs); color:var(--color-ink-dim); margin-bottom:var(--space-3); }
.modal h2{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); line-height:1.2; letter-spacing:-.01em; }
.modal .quote{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-2); }
.brieftekst{ font-size:var(--fs-base); line-height:1.6; margin-top:var(--space-4); }
/* De beschrijving in het detail is opgemaakte tekst: alinea's met lucht,
   lijstjes, vet. Geen blok zonder enters meer. */
div.brieftekst > * + *{ margin-top:var(--space-3); }
div.brieftekst h3{ font-size:var(--fs-base); font-weight:var(--fw-semibold); margin-top:var(--space-4); }
div.brieftekst ul, div.brieftekst ol{ padding-left:1.25em; display:flex; flex-direction:column; gap:var(--space-1); }
div.brieftekst li::marker{ color:var(--color-ink-faint); }
div.brieftekst b, div.brieftekst strong{ font-weight:var(--fw-semibold); }
div.brieftekst a{ text-decoration:underline; text-underline-offset:3px; }

/* ── klaar voor akkoord: een donker eiland boven in de zijkolom ── */
.island.akkoord-eiland{ background:var(--color-ink); color:var(--color-bg); display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4); }
.island.akkoord-eiland + .island{ margin-top:var(--space-3); }
.island.akkoord-eiland h2{ margin:0; color:var(--color-bg); font-size:var(--fs-base); font-weight:var(--fw-medium); }
.akkoord-eiland__rij{
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3);
  border:1.5px solid rgba(239,233,225,.28); border-radius:var(--r-inner);
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.akkoord-eiland__rij:hover{ border-color:var(--color-bg); background:rgba(239,233,225,.06); }
.akkoord-eiland__wat{ flex:1; min-width:0; display:flex; flex-direction:column; }
.akkoord-eiland__wat small{ font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:.04em; text-transform:uppercase; color:rgba(239,233,225,.6); }
.akkoord-eiland__wat b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); line-height:1.35; overflow-wrap:anywhere; }
.akkoord-eiland__acties{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.akkoord-eiland__acties .btn{ flex:1; justify-content:center; }
.btn.akkoord-eiland__ja{ background:var(--color-surface); color:var(--color-ink); }
.btn.akkoord-eiland__ja:hover{ background:var(--color-highlight); }
.btn.akkoord-eiland__reageer{ border:1.5px solid rgba(239,233,225,.4); color:var(--color-bg); }
.btn.akkoord-eiland__reageer:hover{ border-color:var(--color-bg); }
.akkoord-eiland__gegeven{ display:flex; align-items:flex-start; gap:var(--space-2); font-size:var(--fs-sm); line-height:1.4; }
.muted{ font-size:var(--fs-sm); color:var(--color-ink-faint); }
.flip{ display:grid; transform:rotate(180deg); }
.sunk{
  background:var(--color-surface-sunk); border-radius:var(--r-inner);
  padding:var(--space-3) var(--space-4); margin-top:var(--space-4);
  font-size:var(--fs-sm); color:var(--color-ink-dim);
  display:flex; gap:var(--space-2); align-items:flex-start;
}
.sunk b{ color:var(--color-ink); font-weight:var(--fw-medium); }
.q{ margin-top:var(--space-5); }
.q > p{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); margin-bottom:var(--space-2); }
.opts{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.opt{
  font-size:var(--fs-sm); padding:var(--space-2) var(--space-3); border-radius:var(--r-pill);
  border:1.5px solid var(--color-rule); transition:border-color var(--dur-fast) var(--ease-out);
}
.opt:hover{ border-color:var(--color-ink-faint); }
.opt.on{ border-color:var(--color-ink); background:var(--color-ink); color:var(--color-bg); font-weight:var(--fw-medium); }
.opt-other{ display:none; width:100%; margin-top:var(--space-2); }
.opt-other.show{ display:block; }
.opt-other input{
  width:100%; background:var(--color-surface-sunk); border:none; outline:none;
  border-radius:var(--r-inner); padding:var(--space-3); font-size:var(--fs-sm);
}
.modal .actions{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--color-rule); }
.btn{
  font-size:var(--fs-sm); font-weight:var(--fw-medium); padding:var(--space-2) var(--space-4);
  border-radius:var(--r-pill); border:1.5px solid transparent;
  display:inline-flex; align-items:center; gap:var(--space-2);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn--solid{ background:var(--color-ink); color:var(--color-bg); }
.btn--solid:hover{ background:var(--color-accent); color:var(--color-accent-fg); }
.btn--ghost{ border-color:var(--color-rule); }
.btn--ghost:hover{ border-color:var(--color-ink); }
/* Wegzetten is de lichtste van de drie, maar wel een knop: zonder rand en
   onderstreept. Eerst stond hij faint en tegen de rechterrand geduwd, en toen
   zag niemand hem staan. Zachter dan de rest mag; onzichtbaar niet. */
.btn--stil{ color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:3px; }
.btn--stil:hover{ color:var(--color-ink); }
.modal .actions .note{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-left:auto; }

/* ── verzoek-detail ─────────────────────────────────────── */
.back{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-ink-dim); margin-bottom:var(--space-4); }
.back:hover{ color:var(--color-ink); }
.detail{ display:grid; grid-template-columns:1fr 300px; gap:var(--space-4); align-items:start; }
/* Het zijpaneel blijft staan als je door een lang verzoek scrollt, onder de
   knoppen rechtsboven (melding, zoeken, profiel) door. */
.detail > div:last-child{ position:sticky; top:88px; }
.island{ background:var(--color-surface); border-radius:var(--r-island); box-shadow:var(--shadow-island); padding:var(--space-5); }
.island + .island{ margin-top:var(--space-4); }
.island h2{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); margin-bottom:var(--space-3); }
.island h1{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); line-height:1.2; letter-spacing:-.01em; }
.island .quote{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-2); }

.side dl > div{ padding:var(--space-3) 0; border-top:1px solid var(--color-rule); }
.side dl > div:first-child{ border-top:none; padding-top:0; }
.side dt{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-bottom:2px; }
.side dd{ font-size:var(--fs-sm); }

.steps{ display:flex; flex-direction:column; gap:0; }
.step{ display:grid; grid-template-columns:22px 1fr; gap:var(--space-3); }
.step .rail-dot{ display:flex; flex-direction:column; align-items:center; }
.step .rail-dot i{ width:10px; height:10px; border-radius:var(--r-pill); background:var(--color-rule); margin-top:5px; }
.step .rail-dot span{ flex:1; width:1.5px; background:var(--color-rule); }
.step.done .rail-dot i{ background:var(--color-ink); }
.step.now .rail-dot i{ background:var(--color-ink); box-shadow:0 0 0 4px var(--color-chip); }
.step .txt{ padding-bottom:var(--space-4); }
.step:last-child .txt{ padding-bottom:0; }
.step b{ font-size:var(--fs-sm); font-weight:var(--fw-medium); display:block; }
.step small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

.thread{ display:flex; flex-direction:column; gap:var(--space-4); }
.msg{ display:grid; grid-template-columns:32px 1fr; gap:var(--space-3); }
.msg .av{ width:32px; height:32px; border-radius:var(--r-pill); background:var(--color-chip); display:grid; place-items:center; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--color-ink-dim); }
.msg.us .av{ background:var(--color-ink); color:var(--color-bg); }
.msg .b b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.msg .b small{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-left:var(--space-2); }
.msg__tekst{ font-size:var(--fs-sm); line-height:1.6; color:var(--color-ink-dim); margin-top:2px; }
.msg__tekst > * + *{ margin-top:var(--space-2); }
.msg__tekst ul, .msg__tekst ol{ padding-left:1.25em; display:flex; flex-direction:column; gap:var(--space-1); }
.msg__tekst li::marker{ color:var(--color-ink-faint); }
.msg__tekst a{ text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.reply{ display:flex; align-items:flex-end; gap:var(--space-2); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-rule); }
.reply textarea{ flex:1; background:var(--color-surface-sunk); border:none; outline:none; border-radius:var(--r-inner); padding:var(--space-3); font-size:var(--fs-sm); line-height:1.5; resize:none; max-height:40vh; overflow-y:auto; }
/* Weghalen hoort bij je eigen bericht, niet bij de draad: klein, onder de
   tekst, en alleen zolang het venster open staat. */
.msg-intrek{ font-size:var(--fs-xs); padding:0; margin-top:var(--space-1); }

/* Een genoemde naam is geen link maar wel een aanwijzing: hij hoort op te
   vallen in een grijze regel, meer niet. */
.tagnaam{ color:var(--color-ink); font-weight:var(--fw-semibold); }
/* De kiezer hangt onder het veld, binnen het island: hij komt en gaat met wat
   je typt, dus hij mag geen ruimte innemen als hij dicht is. */
.reply{ position:relative; }
.tagkiezer{
  /* Boven het veld: onder staat de knop voor de stand, en die mag niet
     wegvallen achter een lijstje dat verschijnt terwijl je typt. */
  position:absolute; left:0; bottom:calc(100% + var(--space-1)); z-index:5; min-width:220px;
  background:var(--color-surface); border:1px solid var(--color-rule); border-radius:var(--r-inner);
  box-shadow:0 8px 24px rgba(0,0,0,.08); padding:var(--space-1); display:flex; flex-direction:column;
}
/* display:flex wint van het hidden-attribuut, dus dat moet er expliciet
   overheen. Zonder deze regel staat er een leeg pilletje boven het veld. */
.tagkiezer[hidden]{ display:none; }
.tagkiezer button{ display:flex; align-items:baseline; gap:var(--space-2); text-align:left; padding:var(--space-2) var(--space-3); border-radius:var(--r-inner); }
.tagkiezer button:hover{ background:var(--color-surface-sunk); }
.tagkiezer b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.tagkiezer small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

/* De stand staat bij Status en is daar te zetten: drie standen naast elkaar,
   de huidige ingevuld. Geen knop die ergens anders in het scherm zweeft. */
.standkeuze{ display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:2px; }
.standkeuze button{
  font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:var(--space-1) var(--space-3);
  border-radius:var(--r-pill); border:1.5px solid var(--color-rule); color:var(--color-ink-dim);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.standkeuze button:hover:not([aria-pressed="true"]){ border-color:var(--color-ink); color:var(--color-ink); }
.standkeuze button[aria-pressed="true"]{ background:var(--color-ink); border-color:var(--color-ink); color:var(--color-bg); }
.standkeuze button[disabled]{ opacity:.5; }

/* ── context & lab ──────────────────────────────────────── */
.prose{ max-width:720px; }
.prose h3{ font-size:var(--fs-base); font-weight:var(--fw-semibold); margin:var(--space-5) 0 var(--space-2); }
.prose h3:first-child{ margin-top:0; }
.prose p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-bottom:var(--space-2); }
.prose ul{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-2); }
.prose li{ font-size:var(--fs-sm); color:var(--color-ink-dim); padding-left:var(--space-4); text-indent:calc(-1 * var(--space-4)); }
.prose li::before{ content:'— '; color:var(--color-ink-faint); }
.prose li b{ color:var(--color-ink); font-weight:var(--fw-medium); }

.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:var(--space-3); }
.sw i{ display:block; height:64px; border-radius:var(--r-inner); }
.sw b{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-medium); margin-top:var(--space-2); }
.sw small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

.grid-img{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--space-3); }
.ph{
  aspect-ratio:4/3; border-radius:var(--r-inner); background:var(--color-surface-sunk);
  display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-3);
  font-size:var(--fs-xs); color:var(--color-ink-dim);
}
.ph b{ font-weight:var(--fw-medium); color:var(--color-ink); display:block; font-size:var(--fs-sm); }

/* Bronmateriaal is een la, geen bord: brede kaarten, want de naam van een
   rapport is lang en moet leesbaar blijven. */
.bronnen{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--space-4); align-items:start; }

.lab{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--space-4); }
.lab .card{
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lab .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
.icon-chip{ width:40px; height:40px; border-radius:var(--r-pill); background:var(--color-chip); display:grid; place-items:center; margin-bottom:var(--space-2); }
.lab .card b{ font-size:var(--fs-base); font-weight:var(--fw-semibold); }
.lab .card p{ font-size:var(--fs-sm); color:var(--color-ink-dim); }
.lab .card span{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:auto; padding-top:var(--space-3); }

@media (max-width:980px){
  .board{ grid-template-columns:1fr; gap:var(--space-5); }
  .detail{ grid-template-columns:1fr; }
  .detail > div:last-child{ position:static; }
  .page{ padding:var(--space-5) var(--space-4) var(--space-7); }
}

/* ── motion — uit hub/src/styles/motion.css ─────────────────────────
 * Twee animaties over hetzelfde element: de fade lineair (een opacity die
 * "vertraagt" ziet niemand), de opkomst van +50px naar 0 ease-out — dáár zit
 * het gevoel. backwards, niet both: anders wint de eindtransform van :hover. */
.reveal-stagger > *{
  animation:
    reveal-fade var(--dur-reveal-fade) linear backwards,
    reveal-drop var(--dur-reveal) var(--ease-out) backwards;
}
.reveal-stagger{ --reveal-base:120ms; }
.reveal-stagger > *:nth-child(1){ animation-delay:calc(var(--reveal-base) + 0 * var(--stagger)), calc(var(--reveal-base) + 0 * var(--stagger)); }
.reveal-stagger > *:nth-child(2){ animation-delay:calc(var(--reveal-base) + 1 * var(--stagger)), calc(var(--reveal-base) + 1 * var(--stagger)); }
.reveal-stagger > *:nth-child(3){ animation-delay:calc(var(--reveal-base) + 2 * var(--stagger)), calc(var(--reveal-base) + 2 * var(--stagger)); }
.reveal-stagger > *:nth-child(4){ animation-delay:calc(var(--reveal-base) + 3 * var(--stagger)), calc(var(--reveal-base) + 3 * var(--stagger)); }
.reveal-stagger > *:nth-child(5){ animation-delay:calc(var(--reveal-base) + 4 * var(--stagger)), calc(var(--reveal-base) + 4 * var(--stagger)); }
.reveal-stagger > *:nth-child(6){ animation-delay:calc(var(--reveal-base) + 5 * var(--stagger)), calc(var(--reveal-base) + 5 * var(--stagger)); }
/* Een trap die dóórloopt tot item twintig is geen choreografie meer. */
.reveal-stagger > *:nth-child(n + 7){ animation-delay:calc(var(--reveal-base) + 6 * var(--stagger)), calc(var(--reveal-base) + 6 * var(--stagger)); }

@keyframes reveal-fade{ from{ opacity:0 } to{ opacity:1 } }
/* Van onderen omhoog: de blokken komen op hun plek toe, ze vallen er niet in. */
@keyframes reveal-drop{ from{ transform:translateY(50px) } to{ transform:none } }
@keyframes rail-in{ from{ transform:translateX(-110%) } to{ transform:none } }
@keyframes dock-in{ from{ transform:translateX(-340px); opacity:0 } to{ transform:none; opacity:1 } }

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

/* ── galerij: flyers en mails ────────────────────────────── */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--space-4); }
.work{
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* De lift hoort bij de klik: hij staat op .work omdat élke .work nu een knop of
   een link is. Komt er ooit een kaart zonder bestemming, dan hoort die lift
   daar niet op. */
.work{ cursor:pointer; text-align:left; }
.work:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
/* Waar de klik heen gaat, in de voet van de kaart — zodat je het ziet zonder
   te hoeven hoveren. */
.work .b .foot .werk-open{
  margin-left:auto; color:var(--color-ink-dim);
  text-decoration:underline; text-underline-offset:2px;
}
.work:hover .b .foot .werk-open{ color:var(--color-ink); }

/* ── één uiting op ware grootte ──────────────────────────── */
.groot{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:var(--space-5); align-items:start; }
.groot__beeld{
  background:var(--color-surface-sunk); border-radius:var(--r-card); overflow:hidden;
  display:grid; place-items:center; max-height:72vh;
}
.groot__beeld img{ max-width:100%; max-height:72vh; object-fit:contain; display:block; }
.groot__b h2{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); }
.groot__b > p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-2); line-height:1.55; }
.groot__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--color-ink-faint); }
.groot__blader{ display:flex; gap:var(--space-1); margin-left:auto; }
@media (max-width:860px){
  .groot{ grid-template-columns:1fr; gap:var(--space-4); }
  .groot__beeld, .groot__beeld img{ max-height:46vh; }
  .groot__blader{ margin-left:0; }
}
.work .shot{
  aspect-ratio:3/4; background:var(--color-surface-sunk); overflow:hidden;
  display:grid; place-items:start center;
}
.work .shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.work .shot.mail img{ object-fit:cover; }
.work .b{ padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-1); flex:1; }
/* De datum staat bóven de titel, niet in de voet: bij twee flyers die op
   elkaar lijken is "welke is de nieuwste" de eerste vraag. */
.work .b .datum{
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:.04em;
  text-transform:uppercase; color:var(--color-ink-faint);
}
.work .b b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.work .b p{ font-size:var(--fs-xs); color:var(--color-ink-dim); }
.work .b .foot{
  display:flex; align-items:center; gap:var(--space-2);
  margin-top:auto; padding-top:var(--space-3); font-size:var(--fs-xs); color:var(--color-ink-faint);
}
.work .b .foot a{ color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:2px; }
.work .b .foot a:hover{ color:var(--color-ink); }
.stat{ font-size:var(--fs-xxs); font-weight:var(--fw-semibold); padding:2px 8px; border-radius:var(--r-pill); background:var(--color-chip); color:var(--color-ink-dim); }
.stat.def{ background:var(--color-ink); color:var(--color-bg); }
.stat.wacht{ background:var(--color-highlight); color:var(--color-ink); }

.lede{ font-size:var(--fs-sm); color:var(--color-ink-dim); max-width:640px; margin-bottom:var(--space-5); }
.lede b{ color:var(--color-ink); font-weight:var(--fw-medium); }

/* de koppeling met ons eigen werk */
.link-hub{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-xs); color:var(--color-ink-dim);
}
.link-hub:hover{ color:var(--color-ink); }
.side .bron{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:var(--space-3); line-height:1.5; }

/* ── beeldbank: mappen en assets ─────────────────────────── */
.work.map{ display:block; }
/* Vier beelden als collage: de kaart moet in één blik laten zien wat voor
   reeks het is. Vullend en uit het midden gesneden, zonder rand eromheen —
   een beeld dat klein in een grijs vlak zweeft zegt niets. */
.mapshot{
  aspect-ratio:16/10; background:var(--color-surface);
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px;
  color:var(--color-ink-faint); overflow:hidden;
}
.mapshot span{ display:block; width:100%; height:100%; overflow:hidden; }
.mapshot img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* Minder dan vier: laat ze de ruimte vullen in plaats van een gat te laten. */
.mapshot > span:only-child{ grid-column:1 / -1; grid-row:1 / -1; }
.mapshot > span:first-child:nth-last-child(2), .mapshot > span:first-child:nth-last-child(2) ~ span{ grid-row:1 / -1; }
.mapshot > span:first-child:nth-last-child(3){ grid-row:1 / -1; }

.assets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--space-4); }
.asset{ display:flex; flex-direction:column; gap:var(--space-2); }
.asset > span{
  aspect-ratio:4/3; background:var(--color-surface); border-radius:var(--r-inner);
  box-shadow:var(--shadow-island); display:grid; place-items:center; padding:var(--space-4);
  overflow:hidden;
}
.asset > span.foto{ padding:0; }
.asset img{ max-width:100%; max-height:100%; object-fit:contain; }
.asset > span.foto img{ width:100%; height:100%; object-fit:cover; }
.asset figcaption{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.asset figcaption .origineel{ display:block; margin-top:2px; color:var(--color-ink); }
.section-header .stat{ margin-left:auto; }

/* ── Cmd-K — zelfde jas als hub/src/components/SearchPalette.css ─────── */
.cmdk__scrim{
  position:fixed; inset:0; z-index:2000;
  background:rgba(26,22,18,.3); backdrop-filter:blur(2px);
  display:flex; justify-content:center; align-items:flex-start;
  padding:11vh 16px 16px; animation:fade var(--dur-fast) var(--ease-out);
}
.cmdk{ width:min(680px,100%); display:flex; flex-direction:column; gap:14px;
  animation:fade var(--dur-fast) var(--ease-out); }
.cmdk__bar{
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:var(--color-surface); border-radius:var(--r-island);
  box-shadow:var(--shadow-float); color:var(--color-ink-faint);
  transition:box-shadow var(--dur-fast) var(--ease-out);
}
.cmdk__bar:focus-within{ box-shadow:var(--shadow-float), 0 0 0 3px rgba(217,79,42,.12); }
.cmdk__input{
  flex:1; border:0; outline:0; background:none;
  font-size:var(--fs-lg); letter-spacing:-.3px; color:var(--color-ink);
}
.cmdk__input::placeholder{ color:var(--color-ink-faint); }
.cmdk__kbd{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); line-height:1;
  color:var(--color-ink-dim); background:rgba(26,22,18,.06); border-radius:6px;
}
.cmdk__panel{ background:var(--color-surface); border-radius:var(--r-island); box-shadow:var(--shadow-float); overflow:hidden; }
.cmdk__list{ max-height:52vh; overflow-y:auto; padding:6px; }
.cmdk__group + .cmdk__group{ border-top:1px solid var(--color-rule); }
.cmdk__grouphead{
  margin:10px 12px 6px; font-size:var(--fs-xxs); font-weight:var(--fw-medium);
  color:var(--color-ink-faint);
}
/* Geen transitie op de rij: de highlight moet de pijltoets bijhouden, niet
   ernaartoe faden. Hover is een muisgebaar en mag wel zacht. */
.cmdk__row{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:10px 12px; text-align:left; border-radius:var(--r-sm); color:var(--color-ink);
}
.cmdk__row:hover{ transition:background var(--dur-fast) var(--ease-out); background:var(--color-bg); }
.cmdk__row.is-active{ background:var(--color-bg); }
.cmdk__rowicon{
  flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:rgba(26,22,18,.05); color:var(--color-ink-dim);
}
.cmdk__row.is-active .cmdk__rowicon{ background:var(--color-ink); color:var(--color-bg); }
.cmdk__rowmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cmdk__rowtitle{
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmdk__rowtitle mark{ background:var(--color-highlight); color:var(--color-ink); border-radius:2px; padding:0 1px; }
.cmdk__rowsub{ font-size:var(--fs-xs); color:var(--color-ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk__pill{
  flex:none; padding:4px 11px; font-size:var(--fs-xxs); font-weight:var(--fw-semibold);
  color:var(--color-ink-dim); background:var(--color-chip); border-radius:var(--r-pill); white-space:nowrap;
}
.cmdk__empty{ padding:28px 16px; text-align:center; color:var(--color-ink-dim); font-size:var(--fs-sm); }
.cmdk__foot{
  display:flex; align-items:center; gap:var(--space-3);
  padding:10px 16px; border-top:1px solid var(--color-rule);
  font-size:var(--fs-xxs); color:var(--color-ink-faint);
}

/* ── de bouwstenen van UP zelf ───────────────────────────
 * Alles hieronder toont UP's eigen ontwerp, dus hier geldt hún letter en hún
 * kleur — gescoped in .up, zodat het portaal eromheen van ons blijft. */
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-regular.ttf');   font-weight:400; font-display:block; }
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-medium.ttf');    font-weight:500; font-display:block; }
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-demibold.ttf');  font-weight:600; font-display:block; }
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-bold.ttf');      font-weight:700; font-display:block; }
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-extrabold.ttf'); font-weight:800; font-display:block; }
.up{ font-family:'TT Norms Pro', 'Helvetica Neue', Arial, sans-serif; font-synthesis:none; }

.blok{ margin-top:var(--space-6); }
.blok:first-of-type{ margin-top:0; }
.blok > h2{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--color-ink-dim);
  padding-bottom:var(--space-3); border-bottom:1px solid var(--color-rule); margin-bottom:var(--space-4);
}
.blok > p.uitleg{ font-size:var(--fs-sm); color:var(--color-ink-dim); max-width:640px; margin:calc(-1 * var(--space-2)) 0 var(--space-4); }
.blok > p.uitleg code, .mono{
  font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.92em;
  background:var(--color-chip); border-radius:4px; padding:1px 5px;
}
.sub-h{ font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-faint); margin:var(--space-4) 0 var(--space-3); }

/* tokens */
.tok{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--space-3); }
.tok .kaart{
  background:var(--color-surface); border-radius:var(--r-inner); box-shadow:var(--shadow-island);
  padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2);
}
.tok .vlak{ height:56px; border-radius:var(--r-sm); border:1px solid var(--color-rule); }
.tok b{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xs); font-weight:var(--fw-medium); }
.tok small{ font-size:var(--fs-xs); color:var(--color-ink-faint); font-family:ui-monospace, "SF Mono", Menlo, monospace; }

.rij{
  display:grid; grid-template-columns:180px 1fr; gap:var(--space-4); align-items:baseline;
  padding:var(--space-3) 0; border-top:1px solid var(--color-rule);
}
.rij:first-child{ border-top:none; }
.rij dt{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xs); color:var(--color-ink-dim); }
.rij dd{ min-width:0; }
.rij .meta{ display:block; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:4px; }

/* componenten-vitrine */
.vitrine{
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center;
}
.vitrine.donker{ background:#1A1A1A; }
.vitrine.kolom{ flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.proef{ display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; }
.proef > figcaption{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xxs); color:var(--color-ink-faint); }

/* UP-knoppen, exact de tokens: pill 41px, 10/24, 3px outline */
.up-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; border-radius:41px;
  font-size:16px; font-weight:800; line-height:1.25; letter-spacing:-.32px;
}
.up-btn--solid{ background:#1A1A1A; color:#fff; }
.up-btn--outline{ background:transparent; color:#1A1A1A; box-shadow:inset 0 0 0 3px #1A1A1A; }
.up-btn--icon{ width:40px; height:40px; padding:0; justify-content:center; border-radius:9999px; }
/* Een <img> erft geen currentColor, dus een zwart pictogram verdwijnt op een
   zwarte knop. Als masker wél: het vlak is currentColor, het bestand de vorm. */
.up-ico{
  display:inline-block; width:18px; height:18px; flex:none;
  background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat;
}
.up-btn--icon .up-ico{ width:20px; height:20px; }
.icoon-vak .up-ico{ width:32px; height:32px; color:#1A1A1A; }

.up-badge{
  display:inline-block; padding:6px 14px; border-radius:41px;
  background:#FF3A00; color:#1A1A1A; font-weight:800; letter-spacing:-.02em; font-size:15px;
}
.up-badge--ink{ background:#1A1A1A; color:#fff; }
.up-badge--outline{ background:transparent; color:#FF3A00; box-shadow:inset 0 0 0 2px #FF3A00; }
.up-badge--groot{ font-size:24px; padding:10px 24px; }

.up-price{
  width:104px; height:104px; border-radius:9999px; background:#FF3A00; color:#1A1A1A;
  display:grid; place-content:center; text-align:center; line-height:1;
}
.up-price--ink{ background:#1A1A1A; color:#fff; }
.up-price--groot{ width:150px; height:150px; }
.up-price b{ font-size:34px; font-weight:700; font-feature-settings:"lnum" 1; letter-spacing:-.02em; }
.up-price--groot b{ font-size:48px; }
.up-price sup{ font-size:.55em; font-weight:800; vertical-align:super; }
.up-price span{ display:block; font-size:11px; font-weight:600; margin-top:5px; }
.up-price--groot span{ font-size:14px; }

.up-dotted{ width:100%; height:3px; background-image:radial-gradient(circle, #1A1A1A 1px, transparent 1.2px); background-size:9px 3px; }
.up-dotted.licht{ background-image:radial-gradient(circle, #fff 1px, transparent 1.2px); }

.logo-vak{
  background:var(--color-surface); border:1px solid var(--color-rule); border-radius:var(--r-inner);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3);
  align-items:flex-start; justify-content:space-between; min-height:132px;
}
.logo-vak.donker{ background:#1A1A1A; border-color:#1A1A1A; }
.logo-vak img{ max-width:100%; max-height:52px; }
.logo-vak figcaption{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xxs); color:var(--color-ink-faint); }
.logo-vak.donker figcaption{ color:#989898; }
.logo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-3); }

.icoon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:var(--space-3); }
.icoon-vak{
  aspect-ratio:1; background:var(--color-surface); border:1px solid var(--color-rule);
  border-radius:var(--r-sm); display:grid; place-items:center; padding:var(--space-3);
}
.icoon-vak img{ width:32px; height:32px; }
.patroon{ height:120px; border-radius:var(--r-inner); border:1px solid var(--color-rule); background-repeat:repeat; background-size:120px; }

/* Wat het moet opleveren. Mono vult het in, de klant stelt bij: een vraag erbij
   maakt er weer een formulier van, een ingevuld voorstel niet. */
.doel{ margin-top:var(--space-4); }
.doel > p{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); margin-bottom:var(--space-2); }
.doel input{
  width:100%; background:var(--color-surface-sunk); border:none; outline:none;
  border-radius:var(--r-inner); padding:var(--space-3); font-size:var(--fs-sm);
}
.doel input:focus{ box-shadow:0 0 0 2px var(--color-ink); }
.doel > small{ display:block; font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:var(--space-2); }
.doel--vast{
  display:flex; gap:var(--space-3); align-items:baseline;
  margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--color-rule);
}
.doel--vast > p{ font-size:var(--fs-xs); color:var(--color-ink-faint); font-weight:var(--fw-regular); margin:0; flex:none; }
.doel--vast > span{ font-size:var(--fs-sm); }

/* Mono die nadenkt. De wachttijd is echt (een modelaanroep duurt seconden),
   dus die verbergen we niet — we laten zien dat er iets gebeurt. */
.denk{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-5) 0 var(--space-3); color:var(--color-ink-dim); font-size:var(--fs-sm); }
.denk .pulse{ display:flex; gap:5px; }
.denk .pulse i{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--color-ink-faint); animation:blip 1.1s infinite ease-in-out; }
.denk .pulse i:nth-child(2){ animation-delay:.15s; }
.denk .pulse i:nth-child(3){ animation-delay:.3s; }
@keyframes blip{ 0%,60%,100%{ opacity:.25; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }
.modal .quote{ font-size:var(--fs-sm); color:var(--color-ink-faint); }

.toast{
  position:fixed; left:50%; bottom:var(--space-5); transform:translateX(-50%);
  background:var(--color-ink); color:var(--color-bg); z-index:3000;
  padding:var(--space-3) var(--space-4); border-radius:var(--r-pill);
  font-size:var(--fs-sm); box-shadow:var(--shadow-float);
  animation:fade var(--dur-base) var(--ease-out);
}

.opleveringen{ list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.opleveringen li{ display:flex; align-items:center; gap:var(--space-3); font-size:var(--fs-sm); }
.opleveringen li small{ margin-left:auto; font-size:var(--fs-xs); color:var(--color-ink-faint); }
.opleveringen li a{ text-decoration:underline; text-underline-offset:2px; color:var(--color-ink-dim); }

/* ── meetings: een verticale tijdlijn, nieuwste boven ───────
 * Zelfde stip-en-lijn als de voortgang bij een verzoek, maar met een eiland
 * per gesprek: datum erboven, titel, waar het over ging, wie erbij waren en
 * de ingangen naar het deck en het verslag. Een los deck krijgt hetzelfde
 * kaartje, met het soort-label erbij. */
.tijdlijn{ list-style:none; display:flex; flex-direction:column; max-width:720px; }
.tijdlijn li{ display:grid; grid-template-columns:22px 1fr; gap:var(--space-4); }
.tijdlijn .rail-dot{ display:flex; flex-direction:column; align-items:center; }
.tijdlijn .rail-dot i{ width:10px; height:10px; border-radius:var(--r-pill); background:var(--color-ink); margin-top:5px; flex:none; }
.tijdlijn .rail-dot span{ flex:1; width:1.5px; background:var(--color-rule); }
.tijdlijn .gesprek{ padding-bottom:var(--space-5); min-width:0; }
.tijdlijn li:last-child .gesprek{ padding-bottom:0; }
.tijdlijn .datum{ display:block; font-size:var(--fs-xs); color:var(--color-ink-dim); margin-bottom:var(--space-2); }
.tijdlijn .island{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
.tijdlijn .island h2{ margin:0; }
.tijdlijn .island p{ font-size:var(--fs-sm); color:var(--color-ink-dim); }

/* Deck en verslag naast elkaar; op een telefoon onder elkaar zodra het niet
   meer past. De knoppen dragen hun eigen ruimte, dus geen marge op .btn. */
.acties{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
.aanwezig{ display:flex; align-items:center; gap:var(--space-2); }

/* ── mobiel — een eigen app, geen versmalde desktop ─────────
 * De grens is 860px, net als in de hub. De rail wordt een zwevende pill-bar
 * onderaan, het submenu een horizontale strook onder de kop, en het bord één
 * kolom. Desktop blijft daarbij precies zoals hij was. */
@media (max-width: 860px) {
  .rail{
    position:fixed; top:auto; left:0; right:0;
    bottom:calc((6px + env(safe-area-inset-bottom, 0px)));
    width:max-content; max-width:calc(100% - 24px); margin-inline:auto; height:auto;
    flex-direction:row; gap:2px; padding:6px 8px;
    border-radius:var(--r-pill);
    background:color-mix(in srgb, var(--color-surface) 90%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
    border:1px solid color-mix(in srgb, var(--color-surface) 55%, transparent);
    box-shadow:var(--shadow-float);
    animation:rail-in-mobiel var(--dur-rail) var(--ease-out) backwards;
  }
  @keyframes rail-in-mobiel{ from{ transform:translateY(140%) } to{ transform:none } }
  .rail .client, .rail .studio{ display:none; }
  /* De items delen de breedte: met acht items (Sessies, Team, Locaties erbij)
     viel het laatste icoon anders half buiten de dock. De pil is een n-de van
     de breedte en schuift per item één breedte op. */
  .rail nav{ flex-direction:row; gap:2px; }
  /* Op mobiel staat de rail horizontaal, dus schuift de pil zijwaarts. */
  .rail nav .active-pill{ height:44px; width:52px; border-radius:var(--r-pill); transform:translateX(calc(var(--i, 0) * 54px)); }
  .rail nav button{ width:52px; height:44px; border-radius:var(--r-pill); }
  /* Zeven of meer items (.rail--vol, gezet in tekenRail): dan delen ze de
     breedte van de dock, anders valt het laatste icoon buiten beeld. */
  .rail--vol{ width:calc(100% - 24px); max-width:520px; }
  .rail--vol nav{ gap:0; width:100%; }
  .rail--vol nav .active-pill{ width:calc(100% / var(--n, 6)); transform:translateX(calc(var(--i, 0) * 100%)); }
  .rail--vol nav button{ flex:1 1 0; min-width:0; width:auto; }
  .tip{ display:none; }

  /* Het submenu: geen tweede kolom maar een strook die meescrollt. */
  .sub{
    position:static; width:auto; height:auto; inset:auto;
    flex-direction:row; overflow-x:auto; gap:var(--space-2);
    /* Onder de zwevende knoppen door, en dan mag de pagina er strak op volgen. */
    padding:var(--space-7) var(--space-4) 0; margin:0;
    border-radius:0; background:transparent; box-shadow:none; animation:none;
    scrollbar-width:none;
  }
  .sub::-webkit-scrollbar{ display:none; }
  .sub h2{ display:none; }
  .sub a{
    flex:none; background:var(--color-surface); box-shadow:var(--shadow-island);
    border-radius:var(--r-pill); padding:var(--space-2) var(--space-3); white-space:nowrap;
  }
  .sub a.on{ background:var(--color-ink); color:var(--color-bg); }

  /* Alles begint onder de zwevende knoppen rechtsboven. */
  .page{ margin-left:0; padding:var(--space-7) var(--space-4) var(--space-9); }
  .page.with-sub{ margin-left:0; padding:var(--space-4) var(--space-4) var(--space-9); }

  .chrome{ top:var(--space-3); right:var(--space-3); }
  /* De begroeting begint onder de knoppen rechtsboven, niet eronderdoor. */
  .hi{ margin:var(--space-3) 0 var(--space-4); gap:var(--space-2); flex-wrap:wrap; }
  .hi h1{ font-size:var(--fs-xl); }
  .hi .lottie{ width:30px; height:30px; }
  .ask{ width:100%; padding:var(--space-3); margin-bottom:var(--space-6); }
  .ask textarea{ min-height:64px; }

  .screen-header{ margin-bottom:var(--space-4); }
  .screen-header h1{ font-size:var(--fs-xl); }
  .board{ grid-template-columns:1fr; gap:var(--space-5); }
  .pebbles{ overflow-x:auto; scrollbar-width:none; }
  .pebbles::-webkit-scrollbar{ display:none; }
  .pebble{ flex:none; }
  .pebbles--spoor{ flex-wrap:nowrap; margin-top:0; }
  #bord{ scroll-margin-top:72px; }
  .sporen-grid, .sporen-later__lijst{ grid-template-columns:1fr; gap:var(--space-3); }
  .section-header{ flex-direction:column; align-items:flex-start; gap:var(--space-3); }
  .board{ padding-bottom:var(--space-8); }

  .detail{ grid-template-columns:1fr; }
  /* De status eerst: wie op zijn telefoon kijkt wil weten hoe het ervoor
     staat, niet de hele briefing herlezen. */
  .detail > div:last-child{ order:-1; }
  .island{ padding:var(--space-4); }
  .modal{ padding:var(--space-4); max-height:92vh; }
  .modal .actions{ flex-wrap:wrap; }
  .modal .actions .note{ margin-left:0; width:100%; }
  .gallery, .assets, .grid-img, .swatches, .tok{ grid-template-columns:1fr 1fr; }
  .tijdlijn li{ gap:var(--space-3); }
  .tijdlijn .gesprek{ padding-bottom:var(--space-4); }
  .lab{ grid-template-columns:1fr; }
  .rij{ grid-template-columns:1fr; gap:var(--space-1); }
  .cmdk__scrim{ padding:6vh 12px 12px; }
  .toast{ bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 520px) {
  .gallery, .assets, .grid-img, .swatches, .tok{ grid-template-columns:1fr; }
}

/* Labels op een beeldreeks: wat het is, wat je ermee mag, of het nog klopt. */
.merken{ display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
.merken.groot{ margin:0 0 var(--space-4); gap:var(--space-2); }
.merk{
  font-size:var(--fs-xxs); font-weight:var(--fw-medium);
  padding:3px 9px; border-radius:var(--r-pill);
  background:var(--color-chip); color:var(--color-ink-dim);
}
.merken.groot .merk{ font-size:var(--fs-xs); padding:5px 12px; }
.merk.ok{ background:#E8F0E6; color:#2C6E2C; }
.merk.let{ background:var(--color-highlight); color:var(--color-ink); }
.merk.nee{ background:var(--color-annotation); color:#fff; }
.work.reeks{ display:block; }
/* Nog geen beeld in de hub: geen grijs vlak met een icoontje, maar een kaart
   die zegt wat er mist en waar het staat. */
.mapshot .leeg{
  grid-column:1 / -1; grid-row:1 / -1; display:grid; place-items:center; align-content:center;
  gap:var(--space-1); background:var(--color-surface); color:var(--color-ink-faint);
  border:1px dashed var(--color-rule); border-radius:var(--r-inner); text-align:center;
}
.mapshot .leeg b{ font-size:var(--fs-sm); color:var(--color-ink); }
.mapshot .leeg span{ font-size:var(--fs-xs); }
.reeks-meta{ margin-top:var(--space-4); }
.reeks-meta > div{ display:grid; grid-template-columns:150px 1fr; gap:var(--space-3); padding:var(--space-3) 0; border-top:1px solid var(--color-rule); }
.reeks-meta dt{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.reeks-meta dd{ font-size:var(--fs-sm); }
.reeks-meta a{ text-decoration:underline; text-underline-offset:2px; }

/* ── docs: een feitenpagina moet te scannen zijn ──────────
 * Koppen met een lijn erboven markeren de secties, tabellen dragen de harde
 * gegevens, en een definitie zet de term voorop. */
.prose{ max-width:760px; }
.prose > *:first-child{ margin-top:0; }
.prose h2{
  font-size:var(--fs-lg); font-weight:var(--fw-semibold);
  margin:var(--space-6) 0 var(--space-3);
  padding-top:var(--space-4); border-top:1px solid var(--color-rule);
}
/* De streep boven een h2 scheidt twee secties. Begint de tekst er juist mee
   (een verslag doet dat), dan scheidt hij niets en hangt hij los in het
   eiland. */
.prose > h2:first-child{ padding-top:0; border-top:0; }
.prose h3{
  font-size:var(--fs-base); font-weight:var(--fw-semibold);
  margin:var(--space-5) 0 var(--space-2);
}
.prose h4{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.04em;
  text-transform:uppercase; color:var(--color-ink-faint);
  margin:var(--space-4) 0 var(--space-2);
}
.prose p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-bottom:var(--space-3); line-height:1.6; }
.prose p.lede{ font-size:var(--fs-base); color:var(--color-ink); margin-bottom:var(--space-4); }
.prose p.letop{
  font-size:var(--fs-sm); color:var(--color-ink);
  background:var(--color-surface-sunk); border-radius:var(--r-inner);
  padding:var(--space-3) var(--space-4); margin:var(--space-3) 0 var(--space-4);
}
.prose hr{ border:0; border-top:1px solid var(--color-rule); margin:var(--space-5) 0; }

.prose ul.lijst{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); margin:0 0 var(--space-4); }
.prose ul.lijst li{
  font-size:var(--fs-sm); color:var(--color-ink-dim); line-height:1.55;
  padding-left:var(--space-4); text-indent:calc(-1 * var(--space-4));
}
.prose ul.lijst li::before{ content:'— '; color:var(--color-ink-faint); }
/* Een definitie: term links, uitleg rechts. Op smal scherm onder elkaar. */
.prose ul.lijst li.def{
  display:grid; grid-template-columns:190px 1fr; gap:var(--space-3);
  padding:var(--space-2) 0; text-indent:0;
  border-top:1px solid var(--color-rule);
}
.prose ul.lijst li.def::before{ content:none; }
.prose ul.lijst li.def .term{ font-weight:var(--fw-medium); color:var(--color-ink); }

.tabel-wrap{ margin:0 0 var(--space-4); overflow-x:auto; }
.prose table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.prose th{
  text-align:left; font-size:var(--fs-xs); font-weight:var(--fw-medium);
  color:var(--color-ink-faint); padding:0 var(--space-3) var(--space-2) 0;
  border-bottom:1px solid var(--color-rule); white-space:nowrap;
}
.prose td{
  padding:var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom:1px solid var(--color-rule); color:var(--color-ink-dim); vertical-align:top;
}
.prose td:first-child{ color:var(--color-ink); font-weight:var(--fw-medium); white-space:nowrap; }
.prose tr:last-child td{ border-bottom:none; }
.prose a{ text-decoration:underline; text-underline-offset:2px; }

@media (max-width:860px){
  .prose ul.lijst li.def{ grid-template-columns:1fr; gap:2px; }
  .prose th, .prose td{ font-size:var(--fs-xs); }
}

/* Concepten uit het gesprek: zichtbaar, maar duidelijk nog niet ingediend. */
.concepten .section-header h2{ display:flex; align-items:center; gap:var(--space-2); }
.tile.concept{ border:1px dashed var(--color-rule); box-shadow:none; background:transparent; }
.tile.concept p{ margin-top:var(--space-2); }
.concept-acties{ display:flex; gap:var(--space-2); margin-top:var(--space-4); }
.concept-acties .btn{ font-size:var(--fs-xs); padding:var(--space-1) var(--space-3); }


/* ── Merktekens in een galerij ─────────────────────────────────────────────
   Een vel vult zijn kader; een merkteken past erin. Zonder dit sneed
   object-fit:cover de brede lockup tot een paar letters. De vlakken zijn de
   klantkleuren, nodig om een wit merkteken zichtbaar te maken. Die kleuren
   staan hier niet: app.js zet ze als --vlak-<naam> uit de huisstijl van de
   klant, anders staat er een klantkleur in de stylesheet van álle portalen. */

.work .shot--merk{ place-items:center; padding:var(--space-5); }
.work .shot--merk img{ width:100%; height:100%; object-fit:contain; object-position:center; }

/* ── narrowcasting: schermen als beheer ──────────────────────────────────
   Eén grid van even hoge kaarten (zelfde maat als .opl-kaart). Bovenin een
   vast beeldvlak van 4:3 waarin het scherm op zijn eigen verhouding staat,
   staand smal en liggend breed, in een dun zwart kader zodat het als
   apparaat leest. Eronder vaste regels, en de carrousel als rij thumbnails
   die scrolt in plaats van een lijst die de kaart oprekt. */
.tvkop{ display:flex; justify-content:flex-end; margin-bottom:var(--space-3); }
.tvkop .standkeuze button{ white-space:nowrap; }
.tvkop .standkeuze button span{ opacity:.6; font-weight:var(--fw-regular); margin-left:2px; }
.tvgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--space-4); }
.tvkaart{
  display:flex; flex-direction:column; background:var(--color-surface); border-radius:var(--r-card);
  box-shadow:var(--shadow-island); overflow:hidden; margin:0;
}
.tvkaart[hidden]{ display:none; }
.tvvlak{ position:relative; aspect-ratio:4/3; background:var(--color-surface-sunk); }
.tvscherm{
  position:absolute; top:8%; bottom:8%; left:50%; transform:translateX(-50%);
  background:#111; border:2px solid #111; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.18); overflow:hidden;
}
.tvscherm.is-staand{ aspect-ratio:9/16; }
.tvscherm.is-liggend{ aspect-ratio:16/9; top:auto; bottom:auto; width:88%; max-height:84%; }
.tvscherm img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#111; }
.tvkaart figcaption{ padding:var(--space-3) var(--space-4) var(--space-4); display:flex; flex-direction:column; gap:4px; min-width:0; }
.tvkaart figcaption b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tvplek{ font-size:var(--fs-xs); color:var(--color-ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tvmeta{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--color-ink-faint); white-space:nowrap; overflow:hidden; }
.tvmeta > span + span::before{ content:'·'; margin-right:8px; }
.tvmeta .staat{ display:inline-flex; align-items:center; gap:6px; color:var(--color-ink-dim); }
.tvmeta .staat::before{ content:''; width:7px; height:7px; border-radius:999px; background:var(--color-ink-faint); }
.tvmeta .staat.aan::before{ background:#3f9142; }
.tvslides{ display:flex; gap:8px; margin-top:var(--space-2); overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.tvslides::-webkit-scrollbar{ display:none; }
.tvslide{ flex:none; display:flex; flex-direction:column; align-items:center; gap:3px; padding:0; }
.tvslide img, .tvslide .n{ width:64px; height:40px; object-fit:cover; object-position:center 78%; border-radius:4px; background:#111; display:grid; place-items:center; color:#fff; font-size:11px; transition:transform var(--dur-fast) var(--ease-out); }
.tvslide:hover img{ transform:translateY(-2px); }
.tvslide small{ font-size:var(--fs-xxs); color:var(--color-ink-faint); font-variant-numeric:tabular-nums; }
.tvgroot{ background:#111; border-radius:var(--r-inner); overflow:hidden; display:grid; place-items:center; }
.tvgroot img{ display:block; max-width:100%; max-height:72vh; object-fit:contain; }
.tvgroot__naam{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-3); }
.modal:has(.tvgroot){ width:min(1100px,100%); }
@media (max-width:860px){ .tvgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); } .tvkop{ justify-content:flex-start; overflow-x:auto; scrollbar-width:none; } .tvkop .standkeuze{ flex-wrap:nowrap; } }
@media (max-width:520px){ .tvgrid{ grid-template-columns:1fr; } }

/* ── huisstijl uit de store: paren, beeld, toon (elke klant met tokens) ── */
.paren{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--space-3); }
.paar{ border-radius:var(--r-card); padding:var(--space-4) var(--space-3) var(--space-3); display:flex; flex-direction:column; gap:6px; min-height:170px; justify-content:flex-end; }
.paar__kop{ font-weight:900; font-size:30px; line-height:1; text-transform:uppercase; letter-spacing:-.01em; }
.paar__tekst{ font-size:var(--fs-sm); }
.paar__meta{ font-size:12px; opacity:.7; }
.beeldrij{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--space-3); margin:var(--space-3) 0; }
.beeldrij figure{ margin:0; }
.beeldrij img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-card); display:block; }
.beeldrij figcaption{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:8px; }
.welniet{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-3); }
.welniet h3{ font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink-dim); margin-bottom:8px; }
.welniet ul, .regellijst{ margin:0; padding-left:1.1em; }
.welniet li, .regellijst li{ margin:4px 0; }
.regellijst{ margin-top:var(--space-3); }
@media (max-width:720px){ .welniet{ grid-template-columns:1fr; } }

/* ── opleveringen: campagne → uiting → versie → variant ──── */
.opl-blok{ border-top:1px solid var(--color-rule); padding-top:var(--space-4); }
.opl-blok + .opl-blok{ margin-top:var(--space-6); }
.opl-kop{ font-size:var(--fs-base); font-weight:var(--fw-medium); color:var(--color-ink-dim); margin-bottom:var(--space-4); }
.opl-kop span{ color:var(--color-ink-faint); margin-left:var(--space-1); }
.opl-kopregel{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-4); }
.opl-kopregel .opl-kop{ margin-bottom:0; }
.opl-kopregel .standkeuze{ margin-top:0; }

/* Het vaste grid: elke tegel even breed en even hoog. */
.opl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-4); }
.opl-kaart{
  display:flex; flex-direction:column; background:var(--color-surface); border-radius:var(--r-card);
  box-shadow:var(--shadow-island); overflow:hidden; color:inherit;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.opl-kaart[hidden]{ display:none; }
.opl-kaart:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
.opl-kaart__beeld{
  position:relative; aspect-ratio:4/3; background:var(--color-surface-sunk);
  display:grid; place-items:center; color:var(--color-ink-faint);
}
/* Absoluut in het vlak, anders duwt een staand vel het vlak groter en is
   elke tegel weer anders hoog. */
.opl-kaart__beeld img{
  position:absolute; inset:var(--space-3); width:calc(100% - 2 * var(--space-3)); height:calc(100% - 2 * var(--space-3));
  object-fit:contain; display:block; filter:drop-shadow(0 1px 3px rgba(26,22,18,.14));
}
.opl-kaart__beeld .ic{ width:32px; height:32px; }
.opl-kaart__b{ padding:var(--space-3) var(--space-4) var(--space-4); display:flex; flex-direction:column; gap:2px; min-width:0; }
.opl-kaart__b b, .opl-kaart__b small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.opl-kaart__b b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.opl-kaart__b small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.opl-kaart__voet{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); min-width:0; }
.opl-kaart__voet .stat, .opl-voorjou .stat, .opl-nieuw{ white-space:nowrap; flex:none; }
.opl-kaart__datum{ margin-left:auto; font-size:var(--fs-xs); color:var(--color-ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* Voor jou: brede rijen met de actie erin. */
.opl-voorjou-lijst{ display:flex; flex-direction:column; gap:var(--space-3); }
.opl-voorjou{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto; align-items:center; gap:var(--space-4);
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island); padding:var(--space-3);
}
.opl-voorjou__beeld{
  position:relative; width:96px; height:96px; border-radius:var(--r-inner); background:var(--color-surface-sunk);
  display:grid; place-items:center; color:var(--color-ink-faint); overflow:hidden;
}
.opl-voorjou__beeld img{ position:absolute; inset:var(--space-2); width:calc(100% - 2 * var(--space-2)); height:calc(100% - 2 * var(--space-2)); object-fit:contain; }
.opl-voorjou__tekst{ display:flex; flex-direction:column; gap:2px; min-width:0; color:inherit; }
.opl-voorjou__tekst b{ font-size:var(--fs-base); font-weight:var(--fw-semibold); }
.opl-voorjou__tekst small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.opl-voorjou__tekst p{ font-size:var(--fs-xs); color:var(--color-ink-dim); margin-top:var(--space-1); max-width:560px; }
.opl-voorjou__acties{ display:flex; align-items:center; gap:var(--space-2); padding-right:var(--space-2); }
@media (max-width:860px){
  .opl-voorjou{ grid-template-columns:72px minmax(0,1fr); }
  .opl-voorjou__beeld{ width:72px; height:72px; }
  .opl-voorjou__acties{ grid-column:1 / -1; flex-wrap:wrap; padding:0; }
  .opl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
  .opl-kaart__datum{ display:none; }
}
.opl-archief > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-base); font-weight:var(--fw-medium); color:var(--color-ink-dim);
  margin-bottom:var(--space-4);
}
.opl-archief > summary::-webkit-details-marker{ display:none; }
.opl-archief:not([open]) > summary{ margin-bottom:0; }

.opl-detail{ grid-template-columns:minmax(0,1fr) 340px; }
.opl-varianten{ margin:0 0 var(--space-4); }
.opl-beeld figure{
  background:var(--color-surface-sunk); border-radius:var(--r-inner); overflow:hidden;
  display:grid; place-items:center;
}
.opl-beeld img{ display:block; max-width:100%; max-height:74vh; object-fit:contain; }
.opl-oud{
  font-size:var(--fs-sm); background:var(--color-highlight); border-radius:var(--r-sm);
  padding:var(--space-2) var(--space-3); margin-bottom:var(--space-4);
}
.opl-oud a{ text-decoration:underline; text-underline-offset:2px; margin-left:var(--space-1); }
.opl-zij h1{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); line-height:1.2; }
.opl-uitleg{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin:var(--space-2) 0 var(--space-4); line-height:1.55; }
.opl-zij dl{ margin-top:var(--space-3); }
.opl-bestanden, .opl-acties{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.opl-bestanden[hidden], .opl-vraag[hidden], .opl-beeld figure[hidden]{ display:none; }
.opl-vraag{ display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-4); }
.opl-vraag textarea{
  background:var(--color-surface-sunk); border:none; outline:none; border-radius:var(--r-inner);
  padding:var(--space-3); font-size:var(--fs-sm); resize:vertical;
}
.opl-vraag .btn{ align-self:flex-start; }
.opl-versies h2{ font-size:var(--fs-base); font-weight:var(--fw-medium); color:var(--color-ink-dim); margin-bottom:var(--space-3); }
.opl-versies ol{ list-style:none; }
.opl-versies li{ padding:var(--space-3) 0; border-top:1px solid var(--color-rule); }
.opl-versies li:first-child{ border-top:none; padding-top:0; }
.opl-versies li a{ display:flex; align-items:baseline; gap:var(--space-2); }
.opl-versies li b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.opl-versies li small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.opl-versies li p, .opl-versies > p{ font-size:var(--fs-xs); color:var(--color-ink-dim); margin-top:var(--space-1); line-height:1.5; }
.opl-versies li:not(.on) b{ font-weight:var(--fw-medium); color:var(--color-ink-dim); }
.opl-versies li:not(.on) a:hover b{ color:var(--color-ink); }

.opl-rijen{ margin-bottom:var(--space-2); }
.opl-rij{ display:flex; align-items:center; gap:var(--space-3); }
.opl-rij img{ width:44px; height:44px; object-fit:cover; border-radius:var(--r-sm); background:var(--color-surface-sunk); flex:none; }
.opl-rij__tekst{ display:flex; flex-direction:column; flex:1; min-width:0; }
.opl-rij b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.opleveringen .opl-rij small{ margin-left:0; font-size:var(--fs-xs); color:var(--color-ink-faint); }
.opl-rij a{ font-size:var(--fs-xs); color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:860px){
  .opl-detail{ grid-template-columns:1fr; }
  .opl-detail > div:last-child{ order:0; }
  .opl-beeld img{ max-height:60vh; }
}

/* ── locaties: de plattegrond per vestiging (public/locaties.js) ───────────
   Een rustige, technische tekening over de volle breedte: haarlijnen, inkt
   op wit en beige, microtypografie met nummers en m². Het paneel schuift van
   rechts over de kaart; legenda en filter zweven erop. De hub eromheen blijft
   de hub. */
.loc-pagina{ display:flex; flex-direction:column; gap:var(--space-3); height:calc(100vh - var(--space-6) - var(--space-8)); min-height:640px; }
.loc-kop{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.loc-kop h1{ font-size:var(--fs-2xl); font-weight:var(--fw-semibold); line-height:1; letter-spacing:-.02em; }
.loc-kop p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-2); max-width:920px; }
.loc-kop__keuze{ display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; }
.loc-kies, .loc-tabs{ margin:0; }
.loc-kies a, .loc-tabs a{
  font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:var(--space-1) var(--space-3);
  border-radius:var(--r-pill); border:1.5px solid var(--color-rule); color:var(--color-ink-dim);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.loc-kies a:hover:not([aria-pressed="true"]), .loc-tabs a:hover:not([aria-pressed="true"]){ border-color:var(--color-ink); color:var(--color-ink); }
.loc-kies a[aria-pressed="true"], .loc-tabs a[aria-pressed="true"]{ background:var(--color-ink); border-color:var(--color-ink); color:var(--color-bg); }
.loc-tabs a span, .loc-legenda button span, .loc-buren h3 .stat{ opacity:.6; font-weight:var(--fw-regular); margin-left:2px; }

.loc-vlak{
  position:relative; flex:1; min-height:0;
  background:var(--color-surface-sunk); border-radius:var(--r-island); box-shadow:var(--shadow-island); overflow:hidden;
}
.loc-kaart__scroll{ position:absolute; inset:0 0 64px 0; overflow:auto; touch-action:pan-x pan-y pinch-zoom; transition:right var(--dur-slow) var(--ease-out); }
/* Met het paneel open schuift de tekening mee naar links, zodat hij niet half achter het paneel staat. */
@media (min-width:861px){
  .loc-vlak.is-paneel .loc-kaart__scroll{ right:calc(400px + 2 * var(--space-3)); }
  .loc-vlak.is-paneel .loc-legenda{ left:calc((100% - 400px - 2 * var(--space-3)) / 2); max-width:calc(100% - 400px - 4 * var(--space-3)); }
}
.loc-svg{ display:block; width:100%; height:100%; font-family:inherit; }
.loc-legenda{
  /* In het midden van de kaart; met het paneel open in het midden van wat er
     van de kaart zichtbaar is. */
  position:absolute; left:50%; transform:translateX(-50%); bottom:var(--space-3); z-index:4; max-width:calc(100% - 2 * var(--space-3));
  transition:left var(--dur-slow) var(--ease-out);
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-radius:var(--r-inner); padding:var(--space-2); box-shadow:var(--shadow-island);
}
.loc-legenda{ width:max-content; overflow-x:auto; scrollbar-width:none; }
.loc-legenda .standkeuze{ margin:0; flex-wrap:nowrap; }
.loc-legenda button{ padding:var(--space-1) 10px; }
.loc-legenda button{ display:inline-flex; align-items:center; gap:6px; background:transparent; white-space:nowrap; }
.loc-legenda button[aria-pressed="true"]{ background:var(--color-ink); }
.loc-legenda__glyph{ width:13px; height:13px; overflow:visible; }
.loc-legenda__glyph .glyph{ fill:currentColor; stroke:currentColor; stroke-width:.12; }
.loc-legenda__glyph [data-soort="poster"] .glyph, .loc-legenda__glyph [data-soort="kaartje"] .glyph, .loc-legenda__glyph [data-soort="drukwerk"] .glyph{ fill:none; }
.loc-legenda__glyph .glyph-kern{ fill:#fff; }
.loc-legenda__glyph .glyph-lijn{ stroke:currentColor; stroke-width:.12; }
.loc-legenda button[aria-pressed="true"] .glyph-kern{ fill:var(--color-ink); }

.loc-terrein{ fill:var(--color-surface-sunk); }
.loc-grid line{ stroke:var(--color-ink); stroke-opacity:.07; stroke-width:1; vector-effect:non-scaling-stroke; }
.loc-vloer{ fill:var(--color-bg); }
.loc-wand{ fill:none; stroke:var(--color-ink); stroke-width:.32; pointer-events:none; }
.loc-ramen line{ stroke:#fff; stroke-width:.2; }
.loc-titel{ font-size:.85px; fill:var(--color-ink-dim); letter-spacing:.06em; text-transform:uppercase; }
.loc-schaal line, .loc-noord path{ stroke:var(--color-ink-dim); stroke-width:1; vector-effect:non-scaling-stroke; fill:none; }
.loc-noord path{ fill:var(--color-ink-dim); }
.loc-schaal text, .loc-noord text{ font-size:.75px; fill:var(--color-ink-dim); }

.loc-zone{ cursor:pointer; outline:none; }
.loc-zone rect{ fill:#fff; stroke:var(--color-ink); stroke-opacity:.38; stroke-width:1; vector-effect:non-scaling-stroke; transition:fill var(--dur-fast) linear, stroke-opacity var(--dur-fast) linear; }
.loc-zone[data-soort="studio"] rect{ fill:#f6f1e8; }
.loc-zone[data-soort="kleed"] rect{ fill:#f9f6f0; }
.loc-zone[data-soort="entree"] rect{ fill:#fcfaf6; }
.loc-zone[data-soort="dienst"] rect{ fill:url(#loc-arcering); }
.loc-zone[data-soort="baan"] rect{ fill:url(#loc-turf); }
#loc-arcering line{ stroke:var(--color-ink); stroke-opacity:.12; stroke-width:.05; }
#loc-turf line{ stroke:var(--color-ink); stroke-opacity:.16; stroke-width:.04; }
.loc-zone:hover rect, .loc-zone:focus-visible rect{ stroke-opacity:1; }
.loc-zone.is-open rect{ stroke-opacity:1; stroke-width:2; fill:color-mix(in srgb, var(--color-highlight) 18%, #fff); }
.loc-zone[data-soort="dienst"].is-open rect, .loc-zone[data-soort="baan"].is-open rect{ fill:color-mix(in srgb, var(--color-highlight) 18%, #fff); }
.loc-zone text{ font-size:.56px; fill:var(--color-ink); letter-spacing:.06em; text-transform:uppercase; font-weight:var(--fw-medium); pointer-events:none; paint-order:stroke; stroke:#fff; stroke-width:.3px; stroke-linejoin:round; }
.loc-zone text.klein{ font-size:.44px; letter-spacing:.04em; }
.loc-zone text.m2{ font-size:.48px; fill:var(--color-ink-dim); text-transform:none; letter-spacing:0; font-weight:var(--fw-regular); font-variant-numeric:tabular-nums; }

.loc-inrichting *{ stroke:var(--color-ink); stroke-opacity:.3; stroke-width:1; vector-effect:non-scaling-stroke; fill:none; pointer-events:none; }
.loc-inrichting .turf{ fill:var(--color-ink); fill-opacity:.05; }
.loc-inrichting .dik{ stroke-width:2.5; stroke-opacity:.55; }
.loc-deuren *{ pointer-events:none; }
.loc-deuren .loc-gat{ stroke:var(--color-bg); stroke-width:.4; }
.loc-deuren .loc-draai{ fill:none; stroke:var(--color-ink); stroke-opacity:.45; stroke-width:1; vector-effect:non-scaling-stroke; }
.loc-deuren .loc-pijl{ fill:none; stroke:var(--color-ink); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.loc-deuren .loc-poortje{ fill:#fff; stroke:var(--color-ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.loc-deurlabel{ font-size:.62px; fill:var(--color-ink-dim); letter-spacing:.08em; text-transform:uppercase; }

.loc-tp{ cursor:pointer; outline:none; }
.loc-tp .raak{ fill:transparent; }
.loc-tp .ring{ fill:none; stroke:var(--color-annotation); stroke-width:2; vector-effect:non-scaling-stroke; display:none; }
.loc-tp .glyph{ fill:var(--color-ink); stroke:var(--color-ink); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-linejoin:round; transition:stroke var(--dur-fast) linear; }
.loc-tp[data-soort="poster"] .glyph, .loc-tp[data-soort="kaartje"] .glyph, .loc-tp[data-soort="drukwerk"] .glyph{ fill:#fff; }
.loc-tp .glyph-kern{ fill:#fff; }
.loc-tp .glyph-lijn{ stroke:var(--color-ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.loc-tp text{ font-size:.58px; paint-order:stroke; stroke:var(--color-bg); stroke-width:.25px; fill:var(--color-ink-dim); pointer-events:none; font-variant-numeric:tabular-nums; }
.loc-tp:hover .glyph, .loc-tp:focus-visible .glyph{ stroke:var(--color-annotation); stroke-width:2; }
.loc-tp:hover text, .loc-tp:focus-visible text{ fill:var(--color-ink); }
.loc-tp.is-open .ring{ display:block; }
.loc-tp.is-open .glyph{ stroke:var(--color-annotation); }
.loc-tp.is-uit .glyph{ fill:#fff; stroke-dasharray:3 2; }
.loc-tp.is-weg{ display:none; }

.loc-tip{
  position:absolute; z-index:6; pointer-events:none; width:300px;
  display:flex; flex-direction:column; gap:8px; align-items:stretch;
  background:var(--color-ink); color:var(--color-bg); border-radius:10px; padding:8px 10px;
  font-size:var(--fs-xs); line-height:1.35; box-shadow:var(--shadow-float);
}
.loc-tip[hidden]{ display:none; }
.loc-tip img{ width:100%; height:190px; object-fit:contain; border-radius:6px; background:#fff; flex:none; }
.loc-tip b{ display:block; font-weight:var(--fw-medium); }
.loc-tip span{ opacity:.75; }

.loc-paneel{
  position:absolute; top:var(--space-3); right:var(--space-3); bottom:var(--space-3); z-index:5; width:400px; max-width:calc(100% - 2 * var(--space-3));
  overflow:auto; padding:var(--space-4); box-shadow:var(--shadow-float);
  transform:translateX(calc(100% + var(--space-4))); opacity:0; visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) linear, visibility 0s linear var(--dur-slow);
}
.loc-paneel.is-open{ transform:none; opacity:1; visibility:visible; transition-delay:0s; }
.loc-paneel__kop{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2); }
.loc-knoppen{ display:flex; gap:2px; }
.loc-kicker{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--color-ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.loc-sluit{ width:28px; height:28px; border-radius:var(--r-pill); display:grid; place-items:center; color:var(--color-ink-dim); font-size:18px; line-height:1; }
.loc-sluit:hover{ background:var(--color-chip); color:var(--color-ink); }
.loc-sluit .flip{ display:block; transform:scaleX(-1); }
.loc-paneel h2{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); line-height:1.2; margin-bottom:2px; }
.loc-paneel h3{ font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--space-2); display:flex; align-items:center; gap:6px; }
.loc-plek{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-bottom:var(--space-3); }
.loc-uitleg{ font-size:var(--fs-sm); color:var(--color-ink-dim); line-height:1.5; margin-bottom:var(--space-3); }
.loc-link{ color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:2px; padding:0; font-size:inherit; text-align:left; }
.loc-link:hover{ color:var(--color-ink); }
.loc-paneel__beeld{ background:var(--color-surface-sunk); border-radius:var(--r-inner); overflow:hidden; display:grid; place-items:center; margin-bottom:var(--space-3); }
.loc-paneel__beeld img{ display:block; max-width:100%; max-height:300px; object-fit:contain; }
.loc-paneel__beeld.is-tv{ aspect-ratio:4/3; position:relative; display:block; }
.loc-paneel__beeld.is-foto img{ width:100%; max-height:220px; object-fit:cover; }
.loc-feiten{ margin-bottom:var(--space-3); }
.loc-feiten > div{ display:flex; justify-content:space-between; gap:var(--space-3); padding:6px 0; border-top:1px solid var(--color-rule); font-size:var(--fs-sm); }
.loc-feiten > div:first-child{ border-top:none; padding-top:0; }
.loc-feiten dt{ color:var(--color-ink-faint); font-size:var(--fs-xs); }
.loc-feiten dd{ text-align:right; }
.loc-feiten dd small{ color:var(--color-ink-faint); }
.loc-feiten .staat{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--color-ink-dim); }
.loc-feiten .staat::before{ content:''; width:7px; height:7px; border-radius:999px; background:var(--color-ink-faint); }
.loc-feiten .staat.aan::before{ background:#3f9142; }
.loc-carrousel{ margin:0 0 var(--space-3); }
.loc-paneel .btn{ margin-top:var(--space-1); }
.loc-buren{ margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--color-rule); }
.loc-buren ul, .loc-mensen ul{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.loc-buren li .loc-link{ display:flex; align-items:baseline; gap:8px; text-decoration:none; font-size:var(--fs-sm); color:var(--color-ink); width:100%; }
.loc-buren li .loc-link:hover{ text-decoration:underline; text-underline-offset:2px; }
.loc-buren .n{ min-width:20px; font-size:var(--fs-xs); color:var(--color-ink-faint); font-variant-numeric:tabular-nums; }
.loc-buren small{ margin-left:auto; font-size:var(--fs-xs); color:var(--color-ink-faint); white-space:nowrap; }
.loc-mensen{ margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--color-rule); }
.loc-mensen a{ display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); }
.loc-mensen a:hover b{ text-decoration:underline; text-underline-offset:2px; }
.loc-mensen img, .loc-mensen__av{ width:32px; height:32px; border-radius:var(--r-pill); object-fit:cover; background:var(--color-chip); display:grid; place-items:center; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--color-ink-dim); flex:none; }
.loc-mensen b{ display:block; font-weight:var(--fw-medium); }
.loc-mensen small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

@media (max-width:1100px){
  .loc-legenda{ max-width:calc(100% - 2 * var(--space-3)); }
}
@media (max-width:860px){
  .loc-pagina{ height:auto; min-height:0; gap:var(--space-2); }
  .loc-kop h1{ font-size:var(--fs-xl); }
  .loc-kop p{ margin-top:var(--space-1); }
  /* De kaart over de volle breedte, te scrollen en te pinchen; het paneel als bottom sheet. */
  .loc-vlak{ flex:none; height:70vh; min-height:420px; border-radius:var(--r-card); margin:0 calc(-1 * var(--space-2)); }
  .loc-kaart__scroll{ inset:0 0 56px 0; }
  .loc-svg{ width:auto; height:100%; min-width:900px; }
  .loc-legenda{ left:var(--space-2); right:var(--space-2); transform:none; bottom:var(--space-2); padding:6px; overflow-x:auto; scrollbar-width:none; }
  .loc-legenda .standkeuze{ flex-wrap:nowrap; }
  .loc-legenda button{ flex:none; }
  .loc-tip{ display:none !important; }
  .loc-paneel{
    top:auto; left:0; right:0; bottom:0; width:auto; max-width:none; max-height:72%;
    border-radius:var(--r-island) var(--r-island) 0 0; transform:translateY(105%);
    padding-bottom:calc(var(--space-4) + 84px + env(safe-area-inset-bottom, 0px));
  }
  .loc-paneel.is-open{ transform:none; }
}

/* ── team: de medewerkers (public/medewerkers.js) ─────────
   Een vast grid van portretkaarten, 4:5 in een vast vlak zodat elke tegel
   even hoog is, en per persoon een pagina met de grote foto links en de
   feiten rechts. Prefix mw-. */
.mw-stats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--space-3); margin-bottom:var(--space-5); }
.mw-stat{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-4); border:1.5px solid transparent; color:inherit;
  transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mw-stat b{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); line-height:1; letter-spacing:-.02em; }
.mw-stat span{ font-size:var(--fs-sm); font-weight:var(--fw-medium); margin-top:var(--space-1); }
.mw-stat small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
button.mw-stat:hover{ border-color:var(--color-rule); transform:translateY(-1px); }
button.mw-stat[aria-pressed="true"]{ border-color:var(--color-ink); }
.mw-stat--totaal{ background:var(--color-ink); color:var(--color-bg); }
.mw-stat--totaal small{ color:color-mix(in srgb, var(--color-bg) 65%, transparent); }

.mw-filters{ display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); margin-bottom:var(--space-3); }
.mw-filter{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.mw-filter .standkeuze{ margin-top:0; }
.mw-filter__label{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.mw-uitleg{ font-size:var(--fs-sm); color:var(--color-ink-dim); max-width:720px; margin:var(--space-2) 0 var(--space-4); line-height:1.5; }
.mw-uitleg[hidden]{ display:none; }
.mw-uitleg b{ color:var(--color-ink); font-weight:var(--fw-semibold); margin-right:var(--space-1); }
.mw-leeg{ font-size:var(--fs-sm); color:var(--color-ink-faint); padding:var(--space-6) 0; }

.mw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--space-4); }
.mw-kaart{
  display:flex; flex-direction:column; background:var(--color-surface); border-radius:var(--r-card);
  box-shadow:var(--shadow-island); overflow:hidden; color:inherit;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.mw-kaart[hidden]{ display:none; }
.mw-kaart:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
.mw-kaart__beeld{ position:relative; aspect-ratio:4/5; background:var(--color-surface-sunk); }
.mw-kaart__beeld img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mw-vandaag{
  position:absolute; left:var(--space-3); top:var(--space-3);
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); padding:3px 8px; border-radius:var(--r-pill);
  background:var(--color-highlight); color:var(--color-ink);
}
.mw-kaart__b{ padding:var(--space-3) var(--space-4) var(--space-4); display:flex; flex-direction:column; gap:2px; min-width:0; }
.mw-kaart__b b, .mw-kaart__b small, .mw-kaart__waar{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mw-kaart__b b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.mw-kaart__b small{ font-size:var(--fs-xs); color:var(--color-ink-dim); }
.mw-kaart__waar{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:var(--space-2); }

/* De persoon: foto's links in een vaste kolom, de rest rechts. */
.mw-persoon{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:var(--space-5); align-items:start; }
.mw-persoon__beeld{ display:flex; flex-direction:column; gap:var(--space-3); position:sticky; top:var(--space-5); }
.mw-portret, .mw-werk{ margin:0; border-radius:var(--r-card); overflow:hidden; background:var(--color-surface-sunk); box-shadow:var(--shadow-island); }
.mw-portret{ aspect-ratio:4/5; }
.mw-werk{ aspect-ratio:4/3; position:relative; }
.mw-portret img, .mw-werk img{ width:100%; height:100%; object-fit:cover; display:block; }
.mw-werk figcaption{
  position:absolute; left:var(--space-3); bottom:var(--space-3);
  font-size:var(--fs-xxs); font-weight:var(--fw-medium); padding:3px 8px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--color-surface) 85%, transparent); color:var(--color-ink);
}
.mw-persoon__tekst{ display:flex; flex-direction:column; gap:var(--space-4); min-width:0; }
.mw-persoon__kop{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
.mw-persoon__kop h1{ font-size:var(--fs-2xl); font-weight:var(--fw-semibold); line-height:1.05; letter-spacing:-.02em; }
.mw-persoon__functie{ font-size:var(--fs-base); color:var(--color-ink-dim); }
.mw-persoon__nu{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-ink-dim); }
.mw-quote{
  font-size:var(--fs-lg); font-weight:var(--fw-medium); line-height:1.35; letter-spacing:-.01em;
  padding-left:var(--space-4); border-left:2px solid var(--color-ink); max-width:640px;
}
.mw-blok + .mw-blok{ margin-top:0; }
.mw-blok h2{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); margin-bottom:var(--space-3); }
.mw-blok h2.mw-sub{ margin-top:var(--space-4); }
.mw-bio{ font-size:var(--fs-base); line-height:1.55; color:var(--color-ink); max-width:640px; }
.mw-tweeluik{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); align-items:stretch; }
.mw-tweeluik .island{ margin:0; }
.mw-lijst{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.mw-lijst li{ font-size:var(--fs-sm); color:var(--color-ink-dim); padding-left:var(--space-4); text-indent:calc(-1 * var(--space-4)); }
.mw-lijst li::before{ content:'— '; color:var(--color-ink-faint); }
.mw-geen{ font-size:var(--fs-sm); color:var(--color-ink-faint); }
.mw-pillen{ display:flex; flex-wrap:wrap; gap:var(--space-1); }
.mw-pillen .stat{ font-size:var(--fs-xs); padding:4px 10px; }
.mw-zones{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.mw-zone{
  display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--fs-sm); font-weight:var(--fw-medium);
  padding:var(--space-1) var(--space-3); border-radius:var(--r-pill); border:1.5px solid var(--color-rule);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.mw-zone:hover{ border-color:var(--color-ink); }
.mw-feiten > div{ padding:var(--space-2) 0; border-top:1px solid var(--color-rule); }
.mw-feiten > div:first-child{ border-top:none; padding-top:0; }
.mw-feiten dt{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-bottom:2px; }
.mw-feiten dd{ font-size:var(--fs-sm); }
.mw-dim{ color:var(--color-ink-faint); }

/* Het rooster als weekregel: zeven cellen, vandaag ingevuld, een vrije dag stil. */
.mw-rooster{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--space-1); }
.mw-dag{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-1); padding:var(--space-2) var(--space-1);
  border-radius:var(--r-sm); background:var(--color-surface-sunk); text-align:center; min-width:0;
}
.mw-dag__naam{ font-size:var(--fs-xxs); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.06em; color:var(--color-ink-dim); }
.mw-dag__tijd{ font-size:var(--fs-xs); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mw-dag.is-vrij{ background:transparent; border:1px dashed var(--color-rule); }
.mw-dag.is-vrij .mw-dag__tijd{ color:var(--color-ink-faint); }
.mw-dag.is-vandaag{ background:var(--color-ink); color:var(--color-bg); }
.mw-dag.is-vandaag .mw-dag__naam{ color:color-mix(in srgb, var(--color-bg) 70%, transparent); }
.mw-dag.is-vandaag.is-vrij{ border-style:solid; border-color:var(--color-ink); background:var(--color-surface); color:var(--color-ink); }
.mw-dag.is-vandaag.is-vrij .mw-dag__naam{ color:var(--color-ink); }

@media (max-width:980px){
  .mw-persoon{ grid-template-columns:minmax(0,1fr); }
  .mw-persoon__beeld{ position:static; flex-direction:row; }
  .mw-portret{ flex:0 0 46%; }
  .mw-werk{ flex:1; aspect-ratio:auto; }
}
@media (max-width:860px){
  .mw-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
  .mw-stat{ padding:var(--space-3); }
  .mw-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
  .mw-kaart__b{ padding:var(--space-3); }
  .mw-tweeluik{ grid-template-columns:minmax(0,1fr); }
  .mw-rooster{ gap:2px; }
  .mw-dag{ padding:var(--space-2) 2px; }
  .mw-dag__tijd{ font-size:var(--fs-xxs); }
}
@media (max-width:520px){
  .mw-persoon__beeld{ flex-direction:column; }
  .mw-portret{ flex:none; }
  .mw-werk{ aspect-ratio:4/3; }
  .mw-persoon__kop h1{ font-size:var(--fs-xl); }
}
.mw-link{ text-decoration:underline; text-underline-offset:3px; }
.mw-link:hover{ color:var(--color-ink-dim); }
.mw-badge{ margin:0; display:flex; flex-direction:column; gap:var(--space-2); }
.mw-badge img{ width:60%; height:auto; display:block; margin-inline:auto; filter:drop-shadow(0 2px 6px rgba(26,22,18,.18)); }
.mw-badge figcaption{ font-size:var(--fs-xs); color:var(--color-ink-faint); text-align:center; }
.mw-voet{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-4); margin-top:var(--space-6); }
.mw-voet__kaart{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); color:inherit; margin:0; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.mw-voet__kaart:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
.mw-voet__kaart b{ font-size:var(--fs-base); font-weight:var(--fw-semibold); }
.mw-voet__kaart p{ font-size:var(--fs-sm); color:var(--color-ink-dim); }
@media (max-width:980px){ .mw-badge{ flex:0 0 22%; } .mw-badge img{ width:100%; } }
@media (max-width:520px){ .mw-badge{ flex:none; } .mw-badge img{ width:50%; } }
@media (max-width:860px){
  /* Zes tegels in twee kolommen vullen een heel telefoonscherm; drie smalle
     kolommen met het totaal erboven houden het grid in beeld. */
  .mw-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mw-stat--totaal{ grid-column:1 / -1; }
  .mw-stat b{ font-size:var(--fs-lg); }
  .mw-stat span{ font-size:var(--fs-xs); }
  .mw-stat small{ font-size:var(--fs-xxs); }
}
.mw-filters{ flex-direction:column; gap:var(--space-3); align-items:flex-start; }
.mw-filters .mw-uitleg{ margin:0 0 var(--space-2); }
@media (max-width:520px){
  /* Zeven kolommen passen niet op een telefoon: het rooster wordt een lijstje. */
  .mw-rooster{ grid-template-columns:minmax(0,1fr); gap:var(--space-1); }
  .mw-dag{ flex-direction:row; justify-content:space-between; padding:var(--space-2) var(--space-3); }
  .mw-dag__tijd{ font-size:var(--fs-sm); }
}

/* Keuzelijsten voor een uiting met veel varianten (opl-kies in app.js). */
.opl-kies{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3); margin:0 0 var(--space-4); }
.opl-kies label{ display:flex; flex-direction:column; gap:4px; min-width:180px; }
.opl-kies label span{ font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:.04em; text-transform:uppercase; color:var(--color-ink-faint); }
.opl-kies select{
  appearance:none; font:inherit; font-size:var(--fs-sm); color:var(--color-ink);
  background:var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%233b3431' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1.5px solid var(--color-rule); border-radius:var(--r-pill); padding:8px 38px 8px 16px; cursor:pointer;
}
.opl-kies select:hover, .opl-kies select:focus-visible{ border-color:var(--color-ink); outline:none; }
.opl-kies small{ font-size:var(--fs-xs); color:var(--color-ink-faint); padding-bottom:10px; }

/* Meetings: per maand, de dag links, een gesprek als eiland en een deck als
   lichtere kaart. */
.tl-maand{ max-width:920px; }
.tl-maand + .tl-maand{ margin-top:var(--space-6); }
.tl-maand h3{ font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--color-ink-faint); margin-bottom:var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--color-rule); }
.tl{ list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.tl li{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:var(--space-4); align-items:start; }
.tl-dag{ display:flex; flex-direction:column; padding-top:var(--space-3); }
.tl-dag b{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); line-height:1; letter-spacing:-.02em; }
.tl-dag span{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:2px; }
.tl-kaart h2{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); margin:var(--space-2) 0 var(--space-1); }
.tl-kaart p{ font-size:var(--fs-sm); color:var(--color-ink-dim); line-height:1.5; }
.tl-kaart--gesprek{ display:flex; flex-direction:column; align-items:flex-start; }
.tl-kaart--gesprek .aanwezig{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-2); }
.tl-kaart--gesprek .acties{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.tl-kaart--deck{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  background:var(--color-surface); border-radius:var(--r-card); padding:var(--space-4) var(--space-5);
  border:1px solid var(--color-rule);
}
.tl-kaart--deck h2{ font-size:var(--fs-base); }
.tl-kaart--deck .btn{ flex:none; }
@media (max-width:860px){
  .tl li{ grid-template-columns:44px minmax(0,1fr); gap:var(--space-3); }
  .tl-dag b{ font-size:var(--fs-lg); }
  .tl-kaart--deck{ flex-direction:column; align-items:flex-start; padding:var(--space-4); }
}

/* Het invoereiland van Mono op het verzoekenscherm: de bundel tekent het
   eiland zelf (.scomp), dit vlak is alleen de plek en de breedte. */
.ask--mono{ background:none; box-shadow:none; padding:0; display:block; }

/* ── invullijsten (module `lijsten`) ───────────────────────
   Een lijst die wij klaarzetten en die de klant per regel invult. Per groep
   een eiland; per regel de post links en het veld rechts, op de telefoon het
   veld onder de tekst. Het veld is hetzelfde verzonken vlak als het
   antwoordveld bij de vragen; de eenheidkeuze bij een eigen post zijn de
   pillen van de vragen (`vraag__opties`). Geen opslaan-knop: een veld bewaart
   zichzelf bij het verlaten, met een kleine bevestiging ernaast. */
.il [hidden]{ display:none !important; }
.il .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.il__intro{ max-width:720px; font-size:var(--fs-base); line-height:1.6; }
.il-stand{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-bottom:var(--space-4); }
.il .island.il-groep{ padding:var(--space-5) var(--space-5) var(--space-4); }
.il-groep h2{ margin-bottom:var(--space-2); }
.il-regels{ list-style:none; display:flex; flex-direction:column; }
.il-regel{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); column-gap:var(--space-5);
  padding:var(--space-3) 0 var(--space-2); border-top:1px solid var(--color-rule);
}
.il-regel:first-child{ border-top:none; }
.il-regel > *{ min-width:0; }
.il-regel__post{ font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1.4; display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.il-regel__uitleg{ font-size:var(--fs-sm); color:var(--color-ink-dim); line-height:1.5; margin-top:2px; }
.il-regel__invoer{ display:flex; flex-direction:column; }
.il-veld{
  display:flex; align-items:center; gap:var(--space-2); min-height:48px;
  background:var(--color-surface-sunk); border-radius:var(--r-inner); padding:0 var(--space-3);
  transition:box-shadow var(--dur-fast) var(--ease-out);
}
.il-veld:focus-within{ box-shadow:0 0 0 2px var(--color-ink); }
.il-veld input{
  flex:1; min-width:0; width:100%; border:none; outline:none; background:transparent;
  font-size:var(--fs-base); font-variant-numeric:tabular-nums; padding:var(--space-3) 0;
}
.il-veld input::placeholder{ color:var(--color-ink-faint); }
.il-veld input:disabled{ cursor:default; }
.il-veld:has(input:disabled){ opacity:.55; }
.il-veld__voor{ font-size:var(--fs-base); color:var(--color-ink-dim); }
.il-veld__na{ font-size:var(--fs-sm); color:var(--color-ink-dim); white-space:nowrap; }
.il-regel__onder{ display:flex; align-items:center; flex-wrap:wrap; column-gap:var(--space-4); min-height:40px; }
.il-vink{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-ink-dim); cursor:pointer; min-height:40px; }
.il-vink input{ width:18px; height:18px; accent-color:var(--color-ink); cursor:pointer; }
.il-link{ font-size:var(--fs-sm); color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:3px; min-height:40px; }
.il-link:hover{ color:var(--color-ink); }
.il-bewaard{
  margin-left:auto; display:inline-flex; align-items:center; gap:var(--space-1);
  font-size:var(--fs-xs); color:var(--vraag-klaar); font-weight:var(--fw-medium);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.il-bewaard.is-zichtbaar{ opacity:1; }
.il-bewaard.is-fout{ color:var(--color-ink); }
.il-regel__opm{ grid-column:1 / -1; margin-top:var(--space-2); display:flex; flex-direction:column; gap:var(--space-1); }
.il-regel__opm span{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.il-regel__opm textarea{
  width:100%; resize:vertical; background:var(--color-surface-sunk); border:none; outline:none;
  border-radius:var(--r-inner); padding:var(--space-3); font-size:var(--fs-base); line-height:1.5;
}
.il-regel__opm textarea:focus{ box-shadow:0 0 0 2px var(--color-ink); }
.il-erbij{ border-top:1px solid var(--color-rule); padding-top:var(--space-4); margin-top:var(--space-1); }
.il-erbij .btn{ min-height:44px; }
.il-erbij__vorm{ display:flex; flex-direction:column; gap:var(--space-3); }
.il-erbij__naam input{
  width:100%; min-height:48px; background:var(--color-surface-sunk); border:none; outline:none;
  border-radius:var(--r-inner); padding:0 var(--space-3); font-size:var(--fs-base);
}
.il-erbij__naam input:focus{ box-shadow:0 0 0 2px var(--color-ink); }
.il-erbij .vraag__acties .btn[disabled]{ opacity:.4; cursor:default; }
.il-totaal{ display:flex; flex-direction:column; gap:var(--space-2); }
.il-totaal__rij{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); }
.il-totaal__rij span{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); }
.il-totaal__rij b{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.il-totaal .il-stand{ margin:0; }

/* De verwijzing op het startscherm: rustig, één regel, naar de lijst. */
.il-wijzer{
  width:min(740px,100%); margin:calc(-1 * var(--space-5)) auto var(--space-6);
  display:flex; align-items:center; gap:var(--space-3);
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  transition:box-shadow var(--dur-fast) var(--ease-out);
}
.il-wijzer:hover{ box-shadow:var(--shadow-float); }
.il-wijzer:hover .btn{ border-color:var(--color-ink); }
.il-wijzer__ic{ width:36px; height:36px; border-radius:var(--r-pill); background:var(--color-chip); display:grid; place-items:center; flex:none; }
.il-wijzer__tekst{ flex:1; min-width:0; display:flex; flex-direction:column; }
.il-wijzer__tekst b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.il-wijzer__tekst span{ font-size:var(--fs-xs); color:var(--color-ink-dim); }
.il-wijzer + .il-wijzer{ margin-top:calc(-1 * var(--space-4)); }

@media (max-width:860px){
  .il .island.il-groep{ padding:var(--space-4); }
  .il-regel{ grid-template-columns:1fr; row-gap:var(--space-3); }
  .il-wijzer{ margin-top:calc(-1 * var(--space-4)); }
  .il-wijzer__ic{ display:none; }
}

/* ── resultaten (module `resultaten`) ──────────────────────
   Bovenaan de voortgang op zes pijlers, in de vorm van het rapportvel uit de
   decks: per pijler de naam met een onderregel, een balk met wat er bij de
   start stond (inkt) en wat erbij kwam (neon, alleen als vlak), het getal als
   "40 → 55%" en een i'tje. Het i'tje opent een paneel dat óver de lijst valt,
   zodat de balken nooit verspringen. Daaronder de kaartjes per maand: een rond
   neon vlak met een inkt vinkje, de titel semibold, de waarde eronder en de
   pijler als label. Gepland werk is een gestippelde rij "Volgt". */
.rs-voortgang{ position:relative; padding:var(--space-5) var(--space-5) var(--space-4); }
.rs-voortgang__kop{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-2); }
.rs-voortgang__kop h2{ margin:0; font-size:var(--fs-xl); }
.rs-totaal{ font-size:var(--fs-2xl); font-weight:var(--fw-medium); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
.rs-totaal .van, .rs-cijfer .van{ color:var(--color-ink-faint); }
.rs-pijlers{ list-style:none; }
.rs-pijler{
  --start:0%; --nu:0%; position:relative;
  display:grid; grid-template-columns:minmax(240px,340px) minmax(0,1fr) 92px 32px; column-gap:var(--space-4); align-items:center;
  padding:var(--space-3) 0; border-top:1px solid var(--color-rule);
  transition:opacity var(--dur-base) var(--ease-out);
}
.rs-pijler:first-child{ border-top:none; }
.rs-pijler.is-stil{ opacity:.45; }
.rs-pijler__naam{ text-align:left; display:flex; flex-direction:column; min-width:0; padding:var(--space-1) 0; border-radius:var(--r-sm); }
.rs-pijler__naam b{ font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1.3; }
.rs-pijler__naam small{ font-size:var(--fs-xs); color:var(--color-ink-dim); line-height:1.4; margin-top:2px; }
@media (hover:hover){ .rs-pijler__naam:hover b{ text-decoration:underline; text-underline-offset:3px; } }
.rs-pijler.is-aan .rs-pijler__naam b{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.rs-balk{ position:relative; height:14px; border-radius:var(--r-pill); background:var(--color-surface-sunk); overflow:hidden; }
.rs-balk::before, .rs-balk::after{ content:''; position:absolute; inset:0 auto 0 0; border-radius:var(--r-pill); }
.rs-balk::before{ width:var(--nu); background:var(--color-highlight); }
.rs-balk::after{ width:var(--start); background:var(--color-ink); }
.rs-cijfer{ text-align:right; font-size:var(--fs-base); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rs-i{
  justify-self:end; width:28px; height:28px; border-radius:var(--r-pill); display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--color-rule); font-size:var(--fs-sm); font-style:italic; line-height:1;
  transition:box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rs-i:hover{ box-shadow:inset 0 0 0 1.5px var(--color-ink); }
.rs-i[aria-expanded="true"]{ background:var(--color-ink); color:var(--color-bg); box-shadow:none; }
.rs-uitleg{
  position:absolute; z-index:6; top:calc(100% - var(--space-2)); right:0; width:min(520px,100%);
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-float);
  padding:var(--space-4) var(--space-5) var(--space-5); display:flex; flex-direction:column; gap:var(--space-1);
  animation:fade var(--dur-fast) var(--ease-out);
}
.rs-uitleg__wie{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); margin-bottom:var(--space-1); }
.rs-uitleg h4{ font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-faint); margin-top:var(--space-3); }
.rs-uitleg p{ font-size:var(--fs-sm); line-height:1.55; }
.rs-voet{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--color-rule); }
.rs-voet p{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.rs-legenda{ list-style:none; display:flex; gap:var(--space-4); font-size:var(--fs-xs); color:var(--color-ink-dim); }
.rs-legenda li{ display:flex; align-items:center; gap:var(--space-2); }
.rs-legenda i{ width:10px; height:10px; border-radius:var(--r-pill); display:block; }
.rs-legenda i.start{ background:var(--color-ink); }
.rs-legenda i.erbij{ background:var(--color-highlight); box-shadow:inset 0 0 0 1px rgba(26,22,18,.08); }

.rs-werk{ margin-top:var(--space-6); }
.rs-filter{ flex-wrap:wrap; margin-bottom:var(--space-5); }
.rs-maand + .rs-maand{ margin-top:var(--space-6); }
.rs-maand__kop{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.rs-maand__kop h2{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); letter-spacing:-.01em; }
.rs-maand__n{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.rs-kaartjes{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.rs-kaartje{
  display:flex; gap:var(--space-3); background:var(--color-surface); border-radius:var(--r-card);
  box-shadow:var(--shadow-island); padding:var(--space-4);
}
.rs-vink{
  flex:none; width:28px; height:28px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--color-highlight); color:var(--color-ink);
}
.rs-vink .ic{ width:16px; height:16px; }
.rs-vink--leeg{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--color-rule); }
.rs-kaartje__tekst{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-1); }
.rs-kaartje__titel{ font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1.35; padding-top:3px; }
.rs-kaartje__waarde{ font-size:var(--fs-sm); color:var(--color-ink-dim); line-height:1.5; }
.rs-kaartje__voet{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:auto; padding-top:var(--space-2); }
.rs-kaartje__labels{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); min-width:0; }
.rs-kaartje__spoor{ display:inline-flex; align-items:baseline; gap:6px; font-size:var(--fs-xs); color:var(--color-ink-dim); }
.rs-kaartje__spoorwat{ font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:.04em; text-transform:uppercase; color:var(--color-ink-faint); }
a.rs-kaartje__spoor:hover{ color:var(--color-ink); text-decoration:underline; text-underline-offset:2px; }
.rs-kaartje__link{ display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--fs-xs); color:var(--color-ink-dim); }
.rs-kaartje__link:hover{ color:var(--color-ink); text-decoration:underline; text-underline-offset:2px; }
/* Kerncijfers bovenaan: de tegels van Statistieken (`st-tegel`), met hier en
   daar een dunne balk in dezelfde taal als de pijlers. */
.rs-cijfers{ margin-bottom:var(--space-4); }
.rs-van{ color:var(--color-ink-faint); }
.rs-mini{ display:block; position:relative; height:6px; border-radius:var(--r-pill); background:var(--color-surface-sunk); overflow:hidden; margin:var(--space-1) 0 2px; }
.rs-mini::before, .rs-mini::after{ content:''; position:absolute; inset:0 auto 0 0; border-radius:var(--r-pill); }
.rs-mini::before{ width:var(--nu); background:var(--color-highlight); }
.rs-mini::after{ width:var(--start); background:var(--color-ink); }
.rs-mini--plek::before{ width:var(--p); background:color-mix(in srgb, var(--color-ink) 30%, var(--color-surface-sunk)); }
.rs-mini--plek::after{ width:var(--a); background:var(--color-ink); }

/* Aangesloten: de tekening uit eco-fable.js, met de periodekeuze in de kop.
   De tekening heeft de achtergrond van de pagina; in het eiland staat hij op
   een eigen vlak. Een plek is aan te klikken (de grijpvlakken van eco-fable
   zelf); het paneel staat op desktop naast het blok, op de telefoon onder de
   tekening. */
.rs-eco{ margin-bottom:var(--space-4); }
.rs-eco__kop{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); }
.rs-eco__kop h2{ margin:0; font-size:var(--fs-xl); }
.rs-eco__kop p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-1); }
.rs-perioden{ margin-top:0; justify-content:flex-end; }
.rs-perioden button{ white-space:nowrap; }
.rs-eco__vlak{ position:relative; }
.rs-eco__doek{ border-radius:var(--r-inner); overflow:hidden; background:var(--color-bg); }
.rs-eco__doek svg{ display:block; width:100%; height:auto; }
.rs-eco__doek .eco-grip{ pointer-events:all; cursor:pointer; }
.rs-eco__doek .eco-grip:hover{ fill:var(--color-ink); fill-opacity:.06; }
.rs-plek{
  position:absolute; z-index:6; left:var(--x, 8px); top:var(--y, 8px); width:300px;
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-float);
  padding:var(--space-3) var(--space-4) var(--space-4); display:flex; flex-direction:column; gap:var(--space-2);
  animation:fade var(--dur-fast) var(--ease-out);
}
.rs-plek__kop{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.rs-plek__kop b{ font-size:var(--fs-base); font-weight:var(--fw-semibold); }
.rs-plek__dicht{ width:32px; height:32px; border-radius:var(--r-pill); display:grid; place-items:center; color:var(--color-ink-dim); margin-right:calc(-1 * var(--space-2)); }
.rs-plek__dicht:hover{ background:var(--color-chip); color:var(--color-ink); }
.rs-plek__stand{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-dim); }
.rs-plek__stand i, .rs-legenda--eco i{ width:12px; height:12px; border-radius:4px; display:block; flex:none; }
.rs-plek__stand--aangesloten i, .rs-legenda--eco i.aan{ background:var(--color-surface); box-shadow:inset 0 0 0 1.5px var(--color-ink); }
.rs-plek__stand--potlood i, .rs-legenda--eco i.potlood{ background:var(--color-surface); box-shadow:inset 0 0 0 1.5px var(--color-ink); opacity:.45; }
.rs-plek__stand--los i, .rs-legenda--eco i.los{ border:1.5px dotted var(--color-ink-dim); }
.rs-plek__uitleg{ font-size:var(--fs-sm); line-height:1.5; }
.rs-plek__kaartje{ display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--fs-xs); color:var(--color-ink-dim); text-align:left; }
.rs-plek__kaartje:hover{ color:var(--color-ink); text-decoration:underline; text-underline-offset:2px; }
.rs-eco__voet{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-3); }
.rs-eco__tip{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.rs-eco__schuif{ display:none; }
.rs-eco__lijst{ display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-rule); }
.rs-eco__lijst h3{ font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-faint); margin-bottom:var(--space-2); }
.rs-eco__lijst > div > div{ display:flex; flex-wrap:wrap; gap:var(--space-1); }
.rs-chip{ font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:3px 10px; border-radius:var(--r-pill); background:var(--color-chip); color:var(--color-ink); transition:background var(--dur-fast) var(--ease-out); }
.rs-chip--potlood{ background:transparent; box-shadow:inset 0 0 0 1px var(--color-rule); color:var(--color-ink-dim); }
.rs-chip:hover{ background:color-mix(in srgb, var(--color-ink) 10%, var(--color-chip)); }
.rs-chip.is-aan{ background:var(--color-highlight); color:var(--color-ink); box-shadow:none; }
.rs-kaartje.is-gewezen{ animation:rs-gewezen 1.6s var(--ease-out); }
@keyframes rs-gewezen{ 0%, 40%{ box-shadow:0 0 0 3px var(--color-highlight), var(--shadow-island); } 100%{ box-shadow:var(--shadow-island); } }
.rs-kaartje{ scroll-margin:var(--space-6); }

.rs-label{ display:inline-flex; align-items:center; gap:var(--space-2); min-width:0; font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink); }
.rs-plus{
  flex:none; background:var(--color-highlight); color:var(--color-ink); border-radius:var(--r-pill);
  padding:1px 7px; font-size:var(--fs-xs); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.rs-label__naam{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-kort{ display:none; }
.rs-uitleg__lijst{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--color-rule); }
.rs-uitleg__lijst li{ display:flex; align-items:baseline; gap:var(--space-2); font-size:var(--fs-sm); line-height:1.45; }
.rs-uitleg__lijst .rs-plus{ min-width:46px; text-align:center; }
.rs-volgt-lijst{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); }
.rs-volgt{
  display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4);
  border:1px dashed var(--color-rule); border-radius:var(--r-card);
}
.rs-volgt .rs-kaartje__titel{ font-weight:var(--fw-medium); padding-top:0; }
.rs-volgt__kop{ font-size:var(--fs-xs); color:var(--color-ink-faint); padding-top:5px; }

@media (max-width:980px){
  .rs-kaartjes{ grid-template-columns:1fr; }
}
/* Een smalle telefoon: van de pijlernaam naast "+5%" alleen het eerste woord. */
@media (max-width:374px){
  .rs-lang{ display:none; }
  .rs-kort{ display:inline; }
}
@media (max-width:860px){
  .rs-cijfers{ margin-bottom:var(--space-3); }
  .rs-eco{ padding:var(--space-4); margin-bottom:var(--space-3); }
  .rs-eco__kop{ flex-direction:column; gap:var(--space-3); }
  .rs-eco__kop h2{ font-size:var(--fs-lg); }
  .rs-perioden{ justify-content:flex-start; }
  /* De tekening in zijn volle hoogte, op een maat waarop de namen te lezen
     zijn; opzij schuiven voor de rest. Hij begint bij de hub in het midden. */
  .rs-eco__doek{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; }
  .rs-eco__doek::-webkit-scrollbar{ display:none; }
  .rs-eco__doek svg{ width:720px; max-width:none; }
  .rs-plek{ position:static; width:auto; margin-top:var(--space-2); box-shadow:none; border:1px solid var(--color-rule); }
  .rs-eco__voet{ flex-direction:column; align-items:flex-start; gap:var(--space-2); }
  .rs-eco__schuif{ display:inline; }
  .rs-voortgang{ padding:var(--space-4); }
  .rs-voortgang__kop{ flex-wrap:wrap; row-gap:var(--space-2); }
  .rs-voortgang__kop h2{ font-size:var(--fs-lg); }
  .rs-totaal{ font-size:var(--fs-xl); }
  /* Telefoon: naam en i'tje boven, balk en getal eronder; zo past de
     langste naam op één regel. */
  .rs-pijler{ grid-template-columns:minmax(0,1fr) auto; column-gap:var(--space-3); row-gap:var(--space-1); }
  .rs-pijler__naam{ grid-column:1; grid-row:1; }
  .rs-i{ grid-column:2; grid-row:1; }
  .rs-balk{ grid-column:1; grid-row:2; height:10px; }
  .rs-cijfer{ grid-column:2; grid-row:2; font-size:var(--fs-sm); }
  .rs-pijler__naam small{ display:none; }
  .rs-uitleg{ padding:var(--space-4); }
  .rs-voet{ flex-direction:column; align-items:flex-start; gap:var(--space-2); }
  .rs-filter{ flex-wrap:nowrap; margin-bottom:var(--space-4); }
  .rs-kaartjes{ gap:var(--space-2); }
  .rs-kaartje{ padding:var(--space-3) var(--space-4) var(--space-3) var(--space-3); }
  .rs-maand__kop h2{ font-size:var(--fs-lg); }
  .rs-werk{ margin-top:var(--space-5); }
}
.akkoord-eiland .klaar-vink .ic circle{ fill:var(--color-highlight); }
.akkoord-eiland .klaar-vink .ic path{ stroke:var(--color-ink); }

/* ── statistieken (module `statistieken`) ──────────────────
   Een dashboard met cijfers uit een bron van de klant. Bovenaan de periode
   (pebbles) en wanneer het bijgewerkt is, dan vier tegels met het getal groot,
   daaronder eilanden met de grafieken. Balken zijn vlakken in inkt, gedempt;
   de piek in vol inkt met het getal erboven. Geen rood, ook niet bij de
   afhakers: dat label is grijs. Op de telefoon alles onder elkaar, de tegels
   twee aan twee. */
/* De periode staat onder de kop, niet ernaast: rechtsboven zit het chroom. */
.st-periode{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin:calc(-1 * var(--space-2)) 0 var(--space-4); }
.st-periode .pebbles{ flex-wrap:wrap; }
.st-bijgewerkt{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
[data-st-inhoud]{ transition:opacity var(--dur-base) var(--ease-out); }
[data-st-inhoud].is-laden{ opacity:.45; }

.st-tegels{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); }
.island.st-tegel{ padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:var(--space-1); margin:0; }
.st-tegel__label{ font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-ink-dim); }
.st-tegel__waarde{ font-size:40px; font-weight:var(--fw-medium); letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.st-tegel__onder{ font-size:var(--fs-xs); color:var(--color-ink-faint); line-height:1.4; }

.st-rij{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin-top:var(--space-3); align-items:stretch; }
.st-rij--breed{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.st-rij .island, .st .island + .island{ margin-top:0; }
.st-dagen{ margin-top:var(--space-3); }
.st .island{ padding:var(--space-5); }
.st-paneelkop{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-4); }
.st-paneelkop h2{ margin:0; }
.st-paneelkop p{ font-size:var(--fs-xs); color:var(--color-ink-dim); }
.st-voet{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--color-rule); line-height:1.5; }
.st-leeg{ font-size:var(--fs-sm); color:var(--color-ink-dim); }

/* Ritten per uur: 24 kolommen, de piek in vol inkt. */
.st-uren__plot{ display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:3px; height:220px; align-items:end; padding-top:var(--space-4); border-bottom:1px solid var(--color-rule); }
.st-uur{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.st-uur i{ display:block; height:var(--h); border-radius:4px 4px 0 0; background:color-mix(in srgb, var(--color-ink) 22%, var(--color-surface)); transition:background var(--dur-fast) var(--ease-out); }
.st-uur:hover i{ background:color-mix(in srgb, var(--color-ink) 45%, var(--color-surface)); }
.st-uur.is-piek i{ background:var(--color-ink); }
.st-uur b{ position:absolute; left:50%; bottom:calc(var(--h) + 4px); transform:translateX(-50%); font-size:var(--fs-xs); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; white-space:nowrap; }
.st-uren__as{ display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:3px; margin-top:var(--space-2); }
.st-uren__as span{ font-size:var(--fs-xxs); color:var(--color-ink-faint); font-variant-numeric:tabular-nums; }

/* Apparaten: per scherm een rij blokjes, zoals de stappen van een sequencer. */
.st-apparaten ul{ list-style:none; display:flex; flex-direction:column; gap:var(--space-4); }
.st-apparaat__kop{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); font-size:var(--fs-sm); margin-bottom:var(--space-2); }
.st-apparaat__kop b{ font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.st-apparaat__kop small{ font-size:var(--fs-xs); color:var(--color-ink-dim); font-variant-numeric:tabular-nums; margin-left:var(--space-1); }
.st-blokjes{ display:grid; grid-template-columns:repeat(20,minmax(0,1fr)); gap:3px; }
.st-blokjes i{ display:block; height:18px; border-radius:3px; background:var(--color-surface-sunk); }
.st-blokjes i.aan{ background:var(--color-ink); }

/* De trechter: per stap een balk ten opzichte van de eerste stap. */
.st-trechter ol{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.st-stap{ display:grid; grid-template-columns:minmax(110px,170px) minmax(0,1fr) 92px; gap:var(--space-3); align-items:center; }
.st-stap__naam{ font-size:var(--fs-sm); line-height:1.3; }
.st-stap__naam em{ display:block; font-style:normal; font-size:var(--fs-xxs); color:var(--color-ink-dim); font-weight:var(--fw-medium); }
.st-stap__balk{ height:14px; border-radius:var(--r-pill); background:var(--color-surface-sunk); overflow:hidden; }
.st-stap__balk i{ display:block; height:100%; width:var(--b); min-width:2px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--color-ink) 70%, var(--color-surface)); }
.st-stap.is-afhaak .st-stap__balk{ box-shadow:inset 0 0 0 1.5px var(--color-ink); }
.st-stap__n{ display:flex; justify-content:flex-end; align-items:baseline; gap:var(--space-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.st-stap__n b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.st-stap__n small{ font-size:var(--fs-xs); color:var(--color-ink-dim); min-width:34px; text-align:right; }

/* Hoe ver komen ze: een kolom per level, het percentage erboven. */
.st-levels__plot{ display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:var(--space-2); height:220px; }
.st-level{ display:flex; flex-direction:column; align-items:stretch; gap:var(--space-1); min-width:0; }
.st-level__pct{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); text-align:center; font-variant-numeric:tabular-nums; }
.st-level__kolom{ flex:1; display:flex; align-items:flex-end; border-bottom:1px solid var(--color-rule); }
.st-level__kolom i{ display:block; width:100%; height:var(--h); border-radius:4px 4px 0 0; background:color-mix(in srgb, var(--color-ink) 70%, var(--color-surface)); }
.st-level__naam{ font-size:var(--fs-xxs); color:var(--color-ink-faint); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Per dag: een dunne lijn met een zacht vlak eronder. */
.st-dagen__plot{ position:relative; height:120px; }
.st-dagen__plot svg{ display:block; width:100%; height:100%; overflow:visible; }
.st-dagen__lijn{ fill:none; stroke:var(--color-ink); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.st-dagen__vlak{ fill:var(--color-surface-sunk); }
.st-dagen__raak{ position:absolute; inset:0; display:flex; }
.st-dagen__raak span{ flex:1; }
.st-dagen__raak span:hover{ background:rgba(26,22,18,.04); }
.st-dagen__as{ display:flex; justify-content:space-between; margin-top:var(--space-2); font-size:var(--fs-xxs); color:var(--color-ink-faint); }

@media (max-width:1100px){
  .st-tegels{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-rij, .st-rij--breed{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .st-periode{ flex-direction:column; align-items:flex-start; gap:var(--space-2); margin-top:0; }
  .st .island{ padding:var(--space-4); }
  .island.st-tegel{ padding:var(--space-3) var(--space-4); }
  .st-tegels{ gap:var(--space-2); }
  .st-tegel__label{ font-size:var(--fs-xs); }
  .st-tegel__waarde{ font-size:var(--fs-xl); }
  .st-rij{ gap:var(--space-2); margin-top:var(--space-2); }
  .st-dagen{ margin-top:var(--space-2); }
  .st-uren__plot{ height:160px; gap:2px; }
  .st-uren__as{ gap:2px; }
  .st-uur i{ border-radius:2px 2px 0 0; }
  .st-uren__as span:nth-child(6n+4){ visibility:hidden; }
  .st-stap{ grid-template-columns:minmax(0,1fr) auto; row-gap:var(--space-1); }
  .st-stap__naam{ grid-column:1; grid-row:1; }
  .st-stap__n{ grid-column:2; grid-row:1; }
  .st-stap__balk{ grid-column:1 / -1; grid-row:2; height:10px; }
  .st-levels__plot{ height:160px; gap:var(--space-1); }
}