/* 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;

  --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); }
@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(3,1fr); gap:var(--space-4); align-items:start; }
.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); }
.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); }
.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); }
.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); }
.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; }
.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 .b p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:2px; }
.reply{ display:flex; gap:var(--space-2); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-rule); }
.reply input{ 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); }

/* ── 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); }

.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; }
  .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; }
.mapshot{
  aspect-ratio:16/10; background:var(--color-surface-sunk);
  display:grid; grid-template-columns:1fr 1fr; gap:1px; place-items:center;
  padding:var(--space-4); color:var(--color-ink-faint);
}
.mapshot span{ display:grid; place-items:center; width:100%; height:100%; }
.mapshot img{ max-width:70%; max-height:70%; object-fit:contain; }
.mapshot > span:only-child{ grid-column: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); }
.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); }

/* ── decks: een verticale tijdlijn, nieuwste boven ──────────
 * Zelfde stip-en-lijn als de voortgang bij een verzoek, maar met een eiland
 * per deck: datum erboven, soort-label, titel, omschrijving en de knop. */
.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 .deck{ padding-bottom:var(--space-5); min-width:0; }
.tijdlijn li:last-child .deck{ 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); }
.tijdlijn .island .btn{ margin-top: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; }
  .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); }
  .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; }
  .section-header{ flex-direction:column; align-items:flex-start; gap:var(--space-3); }
  .board{ padding-bottom:var(--space-8); }

  .detail{ grid-template-columns:1fr; }
  /* Status en voortgang 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 .deck{ 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; }
.mapshot .leeg{ color:var(--color-ink-faint); grid-column:1 / -1; }
.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);
}
.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 ──────────────────────────────────
   Elk scherm is een kaart met de uiting op ware verhouding (9:16), de staat
   eronder en de knop om 'm om te zetten. Geen archief maar bediening. */
.tvgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:var(--space-3); margin-top:var(--space-3); }
/* De kaart ligt op z'n kant: het scherm links op ware verhouding, de bediening
   ernaast. Zo blijft de rij laag en vult hij de breedte. */
.tvkaart{ background:var(--color-surface); border-radius:var(--r-card); overflow:hidden;
          box-shadow:var(--shadow-island); display:grid; grid-template-columns:132px 1fr; }
.tvbeeld{ aspect-ratio:9 / 16; background:#111; }
.tvbeeld img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.tvkaart figcaption{ padding:var(--space-3); display:flex; flex-direction:column; gap:8px; }
.tvkaart figcaption b{ font-size:var(--fs-md, 20px); font-weight:var(--fw-medium); }
.tvkaart .uiting{ font-size:var(--fs-sm); color:var(--color-ink-dim); }
.tvvoet{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:var(--space-2); font-size:var(--fs-xs); flex-wrap:wrap; }
.tvvoet .staat{ display:inline-flex; align-items:center; gap:6px; color:var(--color-ink-dim); }
.tvvoet .staat::before{ content:''; width:7px; height:7px; border-radius:999px; background:var(--color-ink-faint); }
.tvvoet .staat.aan::before{ background:#3f9142; }
.tvvoet .tvlink{ color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:2px; }
.tvvoet .tvlink:hover{ color:var(--color-ink); }
.tvvoet .tvcfg{ margin-left:auto; font-size:var(--fs-xs); padding:6px 14px; }

/* De carrousel per scherm: wat er in welke volgorde langskomt, en hoe lang. */
.tvlijst{ list-style:none; display:grid; gap:6px; margin-top:4px; }
.tvlijst li{ display:flex; align-items:center; gap:10px; font-size:var(--fs-xs); color:var(--color-ink-dim); }
.tvlijst .n{ width:20px; height:20px; flex:none; display:grid; place-items:center; border-radius:6px;
             background:var(--color-chip); color:var(--color-ink); font-weight:var(--fw-medium); font-size:11px; }
.tvlijst .t{ color:var(--color-ink); }
.tvlijst .s{ margin-left:auto; font-variant-numeric:tabular-nums; }