/* /integraties/ en de koppelingspagina's eronder (fase 7.0). Bovenop tokens.css,
   herbouw.css en pagina.css. Waarden uit tokens.css, regels uit
   merk/STYLEGUIDE.md, de vorm uit ux-onderzoek/poort-integraties.md en
   poort-integratie-detail.md: de groepenlijst die meeloopt en de feitenkaart
   rechts van Linear, de kaart met logotegel, de vragen als kop en de drie
   andere koppelingen onderaan van Moneybird. */

/* ---------- hero ---------- */

.zi-hero{position:relative;isolation:isolate;padding-block:var(--ruimte-sectie) calc(var(--ruimte-sectie) * 1.2)}
.zi-hero .zh-vlekken{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.zi-hero__in{grid-template-columns:minmax(0,1fr)}
@media (min-width:861px){.zi-hero__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.zi-hero__tekst{display:grid;gap:var(--ruimte-blok-m);justify-items:start;min-width:0}
body.zh .zi-hero__titel{font-size:var(--type-maat-titel);line-height:var(--type-regel-kop);letter-spacing:var(--type-spatie-kop);max-width:18ch;text-wrap:balance;margin:0}
/* De h1 is de zoekvraag: rol Titel (hooguit drie regels), op de maat van Kop 2 omdat een vraag van vijftig tekens
   langer is dan een gewone titel. Tot 1200 staat het scherm onder de tekst, anders liep hij op vier regels. */
body.zh .zi-hero--detail .zi-hero__titel{font-size:var(--type-maat-kop-2);max-width:24ch}
@media (min-width:861px) and (max-width:1279px){.zi-hero--detail .zi-hero__in{grid-template-columns:minmax(0,1fr)}}
/* Breed krijgt de vraag de ruimste kolom, zodat hij op twee regels past (Kop 2, stijlgids 2). */
@media (min-width:1280px){.zi-hero--detail .zi-hero__in{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.zi-hero__lead{max-width:48ch}
.zi-bijgewerkt{margin:var(--ruimte-blok-s) 0 0;color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui);font-variant-numeric:tabular-nums}

/* Het scherm draagt een pil die zegt dat het de demo is, zoals op /vergelijk/. De
   opname is de app in licht, dus de pil gebruikt de balkkleuren die niet wisselen. */
.zi-venster{position:relative;margin:0}
.zi-venster__pil{
  position:absolute;left:var(--ruimte-blok-s);bottom:var(--ruimte-blok-s);z-index:1;
  padding:.45em 1em;border-radius:var(--radius-pil);
  background:var(--kleur-balk);color:var(--kleur-op-balk);
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-nadruk);line-height:var(--type-regel-ui);
  box-shadow:var(--schaduw-glas);
}

.zi-kruimel{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--ruimte-blok-s) / 2);color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui)}
.zi-kruimel a{display:inline-flex;align-items:center;min-height:var(--ruimte-tikdoel);color:var(--kleur-tekst-2);text-decoration:none;transition:color var(--motion-duur-hover) var(--motion-curve-uit)}
.zi-kruimel a:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}
.zi-kruimel [aria-current]{color:var(--kleur-tekst)}

/* Logotegel en status naast elkaar boven de kop. */
.zi-merk{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-blok-s);margin:0}
.zi-merk__tegels{display:flex}
/* Drie diensten op één pagina (je AI) overlappen een tegelradius, met een ring
   in de grondkleur ertussen, zoals de logo's op /vergelijk/. */
.zi-merk__tegels .zi-tegel + .zi-tegel{margin-left:calc(var(--radius-tegel) * -1);box-shadow:0 0 0 var(--ruimte-focus-breedte) var(--kleur-grond)}

/* ---------- tegel en status, gedeeld ---------- */

/* Een tegel in een kaart (STYLEGUIDE 4): radius-tegel, de merktegelmaat. */
.zi-tegel{
  flex:none;display:grid;place-items:center;width:var(--ruimte-merktegel);height:var(--ruimte-merktegel);
  border-radius:var(--radius-tegel);border:1px solid var(--kleur-rand);background:var(--kleur-vlak);box-sizing:border-box;
}
.zi-tegel img{display:block;width:28px;height:28px;object-fit:contain}
.zi-tegel--icoon{color:var(--kleur-tekst)}
.zi-tegel--icoon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* De pil uit de stijlgids: glas-zacht, groepslabel op nadruk, de tekst blijft
   kleur-tekst. De stip draagt de status ook zonder kleur: vol is werkt nu, open
   is binnenkort. */
.zi-status{
  display:inline-flex;align-items:center;gap:.5em;padding:.45em 1em;border-radius:var(--radius-pil);
  background:var(--kleur-glas-zacht);color:var(--kleur-tekst);white-space:nowrap;
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-nadruk);line-height:var(--type-regel-ui);
}
.zi-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--kleur-gelukt)}
.zi-status--binnenkort::before{background:transparent;box-shadow:inset 0 0 0 2px var(--kleur-attentie)}

/* ---------- index: de groepen op het lichte vlak ---------- */

.zi-lijst{--zi-boven:calc(var(--ruimte-knop) + var(--ruimte-blok-l) * 2)}
.zi-lijst__in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ruimte-blok-l);align-items:start}

/* Smal: de groepen als pillen die zijwaarts schuiven (Moneybird). */
body.zh .zi-groepen h2.zh-label{margin:0 0 var(--ruimte-blok-s)}
.zi-groepen__lijst{display:flex;gap:calc(var(--ruimte-blok-s) / 2);margin:0;padding:0 0 4px;list-style:none;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.zi-groepen__lijst::-webkit-scrollbar{display:none}
.zi-groepen__link{
  display:inline-flex;align-items:center;gap:.5em;min-height:var(--ruimte-tikdoel);padding-inline:1em;white-space:nowrap;
  border-radius:var(--radius-pil);border:1px solid var(--kleur-rand);background:var(--kleur-vlak);
  color:var(--kleur-tekst);font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);text-decoration:none;
  transition:color var(--motion-duur-hover) var(--motion-curve-uit),border-color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zi-groepen__link:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}
.zi-groepen__aantal{color:var(--kleur-tekst-2);font-variant-numeric:tabular-nums}

.zi-groep + .zi-groep{margin-top:calc(var(--ruimte-blok-l) * 2.5)}
.zi-groep__kop{display:grid;gap:calc(var(--ruimte-blok-s) / 2);margin-bottom:var(--ruimte-blok-m);padding-bottom:var(--ruimte-blok-s);border-bottom:1px solid var(--kleur-rand)}
body.zh .zi-groep__kop h2{font-size:var(--type-maat-inleiding);line-height:var(--type-regel-kop);max-width:none;margin:0;scroll-margin-top:var(--zi-boven)}
.zi-groep__kop p{margin:0;max-width:var(--ruimte-meet);color:var(--kleur-tekst-2);line-height:var(--type-regel-tekst)}

/* ---------- de kaart, op de index en onder elke koppeling ---------- */

.zi-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:var(--ruimte-blok-m);margin:0;padding:0;list-style:none}
/* De standaardkaart uit de stijlgids: glas-vlak, glas-rand, radius-kaart, schaduw-glas. */
.zi-kaart{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--ruimte-blok-s);
  padding:var(--ruimte-blok-m);border-radius:var(--radius-kaart);
  background:var(--kleur-glas-vlak);border:1px solid var(--kleur-glas-rand);box-shadow:var(--schaduw-glas);
  transition:box-shadow var(--motion-duur-kaart) var(--motion-curve-uit),translate var(--motion-duur-kaart) var(--motion-curve-uit);
}
/* De kaart is ook een .rv, en die regel in pagina.css wint: hier staan ze samen. */
html.js .zi-kaart.rv{
  transition:opacity var(--motion-duur-lade) var(--motion-curve-uit),transform var(--motion-duur-lade) var(--motion-curve-uit),
    box-shadow var(--motion-duur-kaart) var(--motion-curve-uit),translate var(--motion-duur-kaart) var(--motion-curve-uit);
}
/* Op het lichte vlak (K42) is een kaart een paneel: een rand en geen schaduw, net als op /prijzen/ en /product/. */
[data-vlak="licht"] .zi-kaart,[data-vlak="licht"] .zi-feit{background:var(--kleur-glas-paneel);border-color:var(--kleur-glas-paneel-rand);box-shadow:none}
.zi-kaart__boven{display:flex;align-items:center;justify-content:space-between;gap:var(--ruimte-blok-s);align-self:stretch}
body.zh .zi-kaart__naam{font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);margin:0}
.zi-kaart__naam a{color:inherit;text-decoration:none}
/* De hele kaart is de link, de naam blijft het ene klikdoel voor schermlezers. */
.zi-kaart__naam a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.zi-kaart__naam a:focus-visible{outline:none}
.zi-kaart:has(a:focus-visible){outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}
.zi-kaart__regel{margin:0;color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui)}
.zi-kaart__lees{
  display:inline-flex;align-items:center;gap:.4em;align-self:stretch;margin-top:auto;padding-top:var(--ruimte-blok-s);
  border-top:1px solid var(--kleur-rand-zacht);color:var(--kleur-link);font-weight:var(--type-gewicht-label);font-size:var(--type-maat-klein);
}

/* ---------- index: de laatste stap ---------- */

.zi-slot{padding-block:calc(var(--ruimte-sectie) * 1.5) calc(var(--ruimte-sectie) * 1.6)}
.zi-slot__in{display:grid;justify-items:center;text-align:center;gap:var(--ruimte-blok-l)}
body.zh .zi-slot h2{font-size:var(--type-maat-titel);max-width:18ch;margin:0;text-wrap:balance}
.zi-slot .zh-inleiding{max-width:48ch}
.zi-slot .zh-knoppen{justify-content:center}

/* ---------- koppeling: het werk op het lichte vlak ---------- */

.zi-doc{--zi-boven:calc(var(--ruimte-knop) + var(--ruimte-blok-l) * 2)}
.zi-doc__in{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--ruimte-blok-l) * 2);align-items:start}
.zi-doc__kolom{display:grid;gap:calc(var(--ruimte-blok-l) * 3);min-width:0}
body.zh .zi-doc h2{font-size:var(--type-maat-inleiding);line-height:var(--type-regel-kop);max-width:none;margin:0}

/* Twee lijsten van gelijk gewicht: dezelfde kop, dezelfde lijn erboven, dezelfde
   maat. Alleen het punt verschilt, en dat verschil is vorm en kleur samen. */
.zi-wel-niet{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--ruimte-blok-l) * 2) var(--ruimte-goot)}
.zi-wel-niet__kant{padding-top:var(--ruimte-blok-m);border-top:2px solid var(--kleur-tekst)}
body.zh .zi-wel-niet__kant h2{margin-bottom:var(--ruimte-blok-s)}
.zi-wel-niet ul{margin:0;padding:0;list-style:none}
.zi-wel-niet li{
  position:relative;padding:.85rem 0 .85rem 1.6rem;border-top:1px solid var(--kleur-rand-zacht);
  line-height:var(--type-regel-tekst);
}
.zi-wel-niet li::before{content:"";position:absolute;left:0;top:calc(.85rem + .6em);width:9px;height:9px;border-radius:50%;background:var(--kleur-gelukt)}
.zi-wel-niet__kant--niet li::before{top:calc(.85rem + .75em);width:10px;height:2px;border-radius:1px;background:var(--kleur-tekst-2)}

/* Drie stappen met de tijd erbij (Linear, Setup instructions). */
.zi-stappen{display:grid;gap:var(--ruimte-blok-s)}
.zi-stappen__lijst{margin:0;padding:0;list-style:none}
.zi-stap{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--ruimte-blok-s) var(--ruimte-blok-m);align-items:start;
  padding-block:var(--ruimte-blok-m);border-top:1px solid var(--kleur-rand);
}
.zi-stap:last-child{border-bottom:1px solid var(--kleur-rand)}
.zi-stap__nr{
  display:grid;place-items:center;width:var(--ruimte-merktegel);height:var(--ruimte-merktegel);
  border-radius:var(--radius-tegel);border:1px solid var(--kleur-rand);background:var(--kleur-vlak);
  font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);font-variant-numeric:tabular-nums;
}
.zi-stap__tekst{display:grid;gap:4px;padding-top:4px}
body.zh .zi-stap h3{font-size:var(--type-maat-tekst);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);margin:0}
.zi-stap p{margin:0;color:var(--kleur-tekst-2);line-height:var(--type-regel-tekst);max-width:var(--ruimte-meet)}
.zi-stap__tijd{padding-top:10px;color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui);white-space:nowrap}

/* Wat hij leest en schrijft: rijen met de vraag links en het antwoord rechts. */
.zi-gegevens{display:grid;gap:var(--ruimte-blok-s)}
.zi-gegevens__lijst{margin:0}
.zi-gegevens__lijst > div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--ruimte-blok-s);padding-block:var(--ruimte-blok-s);border-top:1px solid var(--kleur-rand)}
.zi-gegevens__lijst > div:last-child{border-bottom:1px solid var(--kleur-rand)}
.zi-gegevens dt{font-weight:var(--type-gewicht-label);line-height:var(--type-regel-tekst)}
.zi-gegevens dd{margin:0;color:var(--kleur-tekst-2);line-height:var(--type-regel-tekst);max-width:var(--ruimte-meet)}
.zi-scopes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.zi-scopes code{
  padding:.1em .5em;border-radius:var(--radius-tip);background:var(--kleur-rij);color:var(--kleur-tekst);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
}

/* De feitenkaart: de standaardkaart, met de ene gouden knop (STYLEGUIDE 1). */
.zi-feit{
  display:grid;gap:var(--ruimte-blok-m);padding:var(--ruimte-blok-l);border-radius:var(--radius-kaart);
  background:var(--kleur-glas-vlak);border:1px solid var(--kleur-glas-rand);box-shadow:var(--schaduw-glas);
}
.zi-feit__kop{display:flex;align-items:center;gap:var(--ruimte-blok-s)}
body.zh .zi-feit__kop h2{font-size:var(--type-maat-inleiding);line-height:var(--type-regel-ui)}
.zi-feit__lijst{margin:0}
.zi-feit__lijst > div{display:grid;gap:4px;padding-block:var(--ruimte-blok-s);border-top:1px solid var(--kleur-rand-zacht)}
.zi-feit dt{color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui)}
.zi-feit dd{margin:0;line-height:var(--type-regel-ui);justify-self:start}
.zi-feit__acties{display:grid;gap:calc(var(--ruimte-blok-s) / 2);justify-items:start}
.zi-feit__acties .knop{justify-self:stretch;justify-content:center;white-space:normal;text-align:center;padding-block:.55em}
.zi-feit__klein{margin-bottom:calc(var(--ruimte-blok-s) / 2);color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui)}

/* ---------- koppeling: andere koppelingen ---------- */

.zi-verder{padding-bottom:calc(var(--ruimte-sectie) * 1.6)}
.zi-verder__kop .zh-label{max-width:none;white-space:nowrap}
.zi-verder__kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ruimte-blok-s);margin-bottom:var(--ruimte-blok-m)}
body.zh .zi-verder__kop h2{margin:0}

/* ---------- breed ---------- */

@media (min-width:700px){
  .zi-wel-niet{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:861px){
  .zi-kaarten--drie{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .zi-lijst__in{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:calc(var(--ruimte-goot) * 1.5)}
  /* De groepenlijst loopt mee en kleurt bij de groep in beeld (Linear), met de
     lijn per item van de inhoudsopgave in de leeslaag. */
  .zi-groepen{position:sticky;top:var(--zi-boven)}
  .zi-groepen__lijst{display:block;overflow:visible;padding:0}
  .zi-groepen__link{
    display:flex;justify-content:space-between;min-height:0;padding:calc(var(--ruimte-blok-s) / 2) 0 calc(var(--ruimte-blok-s) / 2) var(--ruimte-blok-s);
    border:0;border-left:1px solid var(--kleur-rand);border-radius:0;background:none;color:var(--kleur-tekst-2);font-weight:var(--type-gewicht-tekst);
  }
  .zi-groepen__link[aria-current="true"]{color:var(--kleur-link);border-left-color:var(--kleur-link);font-weight:var(--type-gewicht-label)}
  .zi-groepen__link:focus-visible{outline-offset:calc(var(--ruimte-focus-afstand) * -1)}
  /* De feitenkaart krijgt een vaste breedte, zodat de knop op één regel past. */
  .zi-doc__in{grid-template-columns:minmax(0,1fr) minmax(19.5rem,23rem);gap:calc(var(--ruimte-goot) * 1.5)}
  .zi-feit{position:sticky;top:var(--zi-boven)}
}

/* ---------- smal ---------- */

@media (max-width:560px){
  .zi-stap{grid-template-columns:auto minmax(0,1fr)}
  .zi-stap__tijd{grid-column:2;padding-top:0}
  .zi-gegevens__lijst > div{grid-template-columns:1fr;gap:4px}
}

/* ---------- hover, alleen met een muis ---------- */

@media (hover:hover) and (pointer:fine){
  .zi-kaart--link:hover{box-shadow:var(--schaduw-op);translate:0 calc(var(--motion-verplaatsing-kaart) * -1)}
  .zi-kaart--link:hover .zi-kaart__lees .zh-link__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
  .zi-kruimel a:hover{color:var(--kleur-tekst)}
  .zi-groepen__link:hover{color:var(--kleur-tekst);border-color:var(--kleur-tekst-2)}
}

/* ---------- minder beweging: alles stil, alles zichtbaar ---------- */

@media (prefers-reduced-motion:reduce){
  .zi-kaart,html.js .zi-kaart.rv,.zi-kruimel a,.zi-groepen__link{transition:none}
  .zi-kaart--link:hover{translate:none}
}