/* ===========================================================================
   v15.46.0 - JE EIGEN ACCENTKLEUR, APART VOOR LICHT EN DONKER
   Lime is prachtig op een donkere achtergrond en schreeuwt op een lichte. Dus
   zijn het er twee, allebei zelf te kiezen bij Vormgeving. Overal in de css
   staat nu var(--ss-accent, #daea09): kiest de server niets, dan blijft het
   gewoon lime zoals het was.
   =========================================================================== */
:root{--ss-accent:var(--ss-accent-donker,#daea09)}
:root[data-theme="light"]{--ss-accent:var(--ss-accent-licht,#c194d5)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--ss-accent:var(--ss-accent-licht,#c194d5)}
}

/* ============================================================================
   v15.31.0 — DE SIGNALENLADE
   Eén blok onder het werkblad met alles wat het systeem heeft opgemerkt.
   Het moet in één oogopslag te scannen zijn: de soort links als kleurstreep,
   de kop als enige vette regel, de knoppen pas daaronder. Een lade die
   schreeuwt wordt een lade die je wegklikt.
   ========================================================================= */

.ss-lade{
  margin:var(--ruimte-6,32px) 0 var(--ruimte-5,22px);
  display:flex; flex-direction:column; gap:var(--ruimte-3,12px);
}
.ss-lade-kop{display:flex; align-items:center; gap:10px}
.ss-lade-kop h2{
  font:700 var(--tekst-xl,19px)/1.2 var(--heading-font);
  letter-spacing:-.03em; margin:0;
}
.ss-lade-tel{
  background:var(--ss-inkt); color:var(--ss-bureau);
  border-radius:999px; padding:1px 9px;
  font:600 var(--tekst-xs,11.5px)/1.7 var(--body-font);
  font-variant-numeric:tabular-nums;
}
.ss-lade-leeg{
  color:var(--ss-zacht); font-size:var(--tekst-s,12.5px);
  background:var(--ss-kaart); border-radius:var(--ss-r,20px);
  padding:var(--ruimte-4,16px) var(--ruimte-5,22px); margin:0;
}
.ss-lade-lijst{display:flex; flex-direction:column; gap:var(--ruimte-2,8px)}

/* Eén signaal. De streep links is de soort: roze voor een taak, lavendel voor
   een voorstel, stil grijs voor een melding. Bij een signaal dat bij één klant
   hoort kleurt de stip in de klantkleur mee. */
.ss-signaal{
  display:grid; grid-template-columns:4px 1fr; align-items:stretch;
  background:var(--ss-kaart); border-radius:var(--ss-r-klein,14px);
  overflow:hidden; box-shadow:var(--ss-schaduw-klein);
}
.ss-signaal-streep{background:var(--ss-zacht); opacity:.4}
.ss-signaal[data-soort="voorstel"] .ss-signaal-streep{background:#a9a8ef; opacity:1}
.ss-signaal[data-soort="taak"] .ss-signaal-streep{background:var(--ss-letop-kleur,#ea4ca7); opacity:1}
.ss-signaal-inhoud{
  padding:var(--ruimte-3,12px) var(--ruimte-4,16px);
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.ss-signaal-soort{
  font:600 var(--tekst-xxs,10.5px)/1 var(--body-font);
  letter-spacing:.11em; text-transform:uppercase; color:var(--ss-zacht);
}
.ss-signaal-kop{
  font:500 var(--tekst-m,14px)/1.3 var(--heading-font);
  letter-spacing:-.015em; color:var(--ss-inkt); text-decoration:none;
  display:flex; align-items:baseline; gap:8px; min-width:0;
}
a.ss-signaal-kop:hover{text-decoration:underline; text-underline-offset:3px}
.ss-signaal-kop::before{
  content:""; width:8px; height:8px; border-radius:999px; flex:none;
  background:var(--sig-kleur,var(--ss-zacht)); transform:translateY(-1px);
}
.ss-signaal p{
  margin:0; color:var(--ss-zacht);
  font-size:var(--tekst-s,12.5px); line-height:var(--regel-tekst,1.6);
  max-width:72ch;
}
.ss-signaal-knoppen{display:flex; flex-wrap:wrap; gap:7px; margin-top:3px}
.ss-signaal-knoppen .btn.small{
  padding:5px 12px; font-size:var(--tekst-xs,11.5px); height:auto; line-height:1.5;
}

/* Op een smal scherm staan de knoppen onder elkaar te verspringen als ze
   allemaal even breed willen zijn; laat ze gewoon naast elkaar afbreken. */
@media (max-width:560px){
  .ss-signaal-inhoud{padding:var(--ruimte-3,12px)}
  .ss-signaal p{font-size:var(--tekst-xs,11.5px)}
  .ss-signaal-knoppen .btn.small{flex:1 1 auto; justify-content:center}
}

/* ============================================================================
   v15.32.0 — BEELD, BEWEGING EN HET WERKJAAR
   ========================================================================= */

/* --- Het logo van de klant in het tegeltje -------------------------------
   Overal waar eerst twee letters stonden staat nu het logo, als je er een
   hebt gezet. De kleur blijft de achtergrond, zodat een logo met een
   doorzichtige rand nooit in het niets hangt. */
.ss-tegel.heeft-beeld{padding:0; overflow:hidden; background:var(--kleur)}
.ss-tegel.heeft-beeld img{
  width:100%; height:100%; object-fit:contain; display:block;
  padding:11%; border-radius:inherit;
}

/* --- Het werkjaar als beeld --------------------------------------------- */
.ss-werkjaar-inhoud,.ss-criterium-inhoud{
  padding:var(--ruimte-4,16px) var(--ruimte-5,22px) var(--ruimte-5,22px);
  display:flex; flex-direction:column; gap:var(--ruimte-4,16px);
}
.ss-jaarknoppen{display:flex; gap:7px}
.ss-jaarwrap{overflow-x:auto; padding-bottom:5px}
.ss-jaarraster{
  display:grid; grid-template-rows:repeat(7,1fr); grid-auto-flow:column;
  grid-auto-columns:1fr; gap:3px; min-width:680px;
}
.ss-jaardag{
  aspect-ratio:1; border-radius:3px; background:var(--ss-kaart-2);
  display:block;
}
.ss-jaardag.heeft-uren{
  background:color-mix(in srgb,var(--ss-accent,#daea09) var(--vulling,50%),var(--ss-kaart-2));
}
.ss-jaardag.is-later{opacity:.4}
.ss-jaardag.is-buiten{visibility:hidden}

.ss-jaarlegenda{
  display:flex; flex-wrap:wrap; gap:var(--ruimte-4,16px);
  color:var(--ss-zacht); font-size:var(--tekst-s,12.5px);
}
.ss-jaarlegenda span{display:inline-flex; align-items:center; gap:7px}
.ss-vlek{
  width:10px; height:10px; border-radius:3px; flex:none;
  background:color-mix(in srgb,var(--ss-accent,#daea09) var(--vulling,100%),var(--ss-kaart-2));
}
.ss-vlek.is-leeg{background:var(--ss-kaart-2)}
.ss-vlek.is-direct{background:var(--ss-accent,#daea09)}
.ss-vlek.is-indirect{background:#a9a8ef}

/* --- De urencriterium-teller -------------------------------------------- */
.ss-criterium-kop{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--ruimte-4,16px); flex-wrap:wrap;
}
.ss-criterium-kop strong{
  font:700 var(--tekst-xxl,24px)/1.1 var(--heading-font);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.ss-criterium-spoor{
  display:flex; height:10px; border-radius:999px;
  background:var(--ss-kaart-2); overflow:hidden;
}
.ss-criterium-deel{height:100%; display:block; transition:width .6s cubic-bezier(.2,.7,.3,1)}
.ss-criterium-deel.is-direct{background:var(--ss-accent,#daea09)}
.ss-criterium-deel.is-indirect{background:#a9a8ef}
.ss-criterium-uitleg{max-width:78ch; font-size:var(--tekst-s,12.5px)}

/* --- Beweging die iets laat zien ----------------------------------------
   De regel: beweging toont een verandering, nooit meer dan dat. Wie beweging
   uitzet in Vormgeving, of in zijn systeem, krijgt hier niets. */
@media (prefers-reduced-motion:reduce){
  .ss-criterium-deel,.ss-saldo-vulling{transition:none}
}
body[data-beweging="uit"] .ss-criterium-deel,
body[data-beweging="uit"] .ss-saldo-vulling{transition:none}

/* De strippenkaart die leegloopt. Niet een getal dat verspringt, maar een
   balk die zakt - en die kleurt zodra het tijd is om te bellen. */
.ss-saldo{display:flex; flex-direction:column; gap:7px; min-width:160px}
.ss-saldo-kop{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:var(--tekst-s,12.5px); color:var(--ss-zacht);
}
.ss-saldo-kop b{
  font:700 var(--tekst-l,16px)/1.1 var(--heading-font);
  letter-spacing:-.02em; color:var(--ss-inkt); font-variant-numeric:tabular-nums;
}
.ss-saldo-spoor{
  height:12px; border-radius:999px; background:var(--ss-kaart-2); overflow:hidden;
}
.ss-saldo-vulling{
  display:block; height:100%; border-radius:999px; background:var(--ss-accent,#daea09);
  transition:width .6s cubic-bezier(.2,.7,.3,1), background-color .4s ease;
}
.ss-saldo-vulling.is-bijna{background:var(--orange,#f08d0c)}
.ss-saldo-vulling.is-op{background:var(--ss-letop-kleur,#ea4ca7)}

@media (max-width:560px){
  .ss-werkjaar-inhoud,.ss-criterium-inhoud{padding:var(--ruimte-3,12px) var(--ruimte-4,16px) var(--ruimte-4,16px)}
  .ss-criterium-kop strong{font-size:var(--tekst-xl,19px)}
}

/* --- v15.33.0 — Laatst gesproken ----------------------------------------
   Eén regel boven de klantkop. Hij kleurt pas op als het stil is geworden;
   anders is het gewoon een feit dat je graag even ziet. */
.ss-contactregel{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 var(--ruimte-3,12px);
  padding:9px 15px; border-radius:999px;
  background:var(--ss-kaart-2); color:var(--ss-zacht);
  font-size:var(--tekst-s,12.5px);
}
.ss-contactregel b{color:var(--ss-inkt); font-weight:600}
.ss-contactregel-sub{margin-left:auto; font-size:var(--tekst-xs,11.5px); opacity:.85}
.ss-contactregel.is-stil{
  background:color-mix(in srgb,#f08d0c var(--ss-tint,18%),var(--ss-menging));
  color:var(--ss-inkt);
}
@media (max-width:560px){
  .ss-contactregel-sub{margin-left:0; flex-basis:100%}
}

/* ============================================================================
   v15.33.0 — HET INLOGSCHERM
   De voordeur van hetzelfde huis. Eén kaart midden op een rustig vlak, de
   merknaam met het lime stipje dat je overal in het CRM ziet, een groet die
   weet hoe laat het is, en onderaan je eigen palet als handtekening.
   ========================================================================= */

body.ss-authbody{
  margin:0; min-height:100dvh;
  background:var(--ss-bureau,#0d0e0f); color:var(--ss-inkt,#f2f2ef);
  font-family:var(--body-font),ui-sans-serif,system-ui,sans-serif;
  display:flex;
}
.ss-auth{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:40px max(16px,env(safe-area-inset-left,0px)) 40px max(16px,env(safe-area-inset-right,0px));
}
.ss-auth-kaart{
  width:100%; max-width:430px;
  background:var(--ss-kaart,#191b1d);
  border:1px solid var(--ss-lijn,rgba(242,242,239,.11));
  border-radius:var(--ss-r-groot,24px);
  padding:30px 28px 24px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:var(--ss-schaduw,none);
}

/* De merknaam met het stipje dat ook in de timerpil zit: hetzelfde teken op
   dezelfde plek betekent hetzelfde systeem. */
.ss-auth-merk{
  display:flex; align-items:center; gap:9px;
  font-family:var(--heading-font),ui-sans-serif,system-ui,sans-serif;
  font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--ss-zacht,#9aa0a5); text-transform:none;
}
.ss-auth-merk b{color:var(--ss-inkt,#f2f2ef); font-weight:700; letter-spacing:.04em}
.ss-auth-stip{
  width:9px; height:9px; border-radius:999px; background:var(--ss-accent,#daea09); flex:none;
  animation:ss-auth-adem 2.8s ease-in-out infinite;
}
@keyframes ss-auth-adem{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.55; transform:scale(.82)}}

.ss-auth-kaart h1{
  margin:0; font-family:var(--heading-font),ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(27px,6vw,34px); font-weight:700; letter-spacing:-.035em; line-height:1.1;
  color:var(--ss-inkt,#f2f2ef); text-wrap:balance;
}
.ss-auth-regel{
  margin:-8px 0 0; color:var(--ss-zacht,#9aa0a5);
  font-size:13px; line-height:1.55; max-width:36ch;
}
.ss-auth-fout{
  background:color-mix(in srgb,#ea4ca7 18%,var(--ss-kaart,#191b1d));
  border-left:3px solid #ea4ca7; border-radius:var(--ss-r-klein,14px);
  padding:11px 15px; font-size:13px; line-height:1.5; color:var(--ss-inkt,#f2f2ef);
}

.ss-auth-form{display:flex; flex-direction:column; gap:12px; margin-top:4px}
.ss-auth-veld{display:flex; flex-direction:column; gap:6px}
.ss-auth-veld span{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ss-zacht,#9aa0a5);
}
.ss-auth-veld input{
  width:100%; height:46px; padding:0 15px;
  background:var(--ss-kaart-2,#202326); color:var(--ss-inkt,#f2f2ef);
  border:1px solid transparent; border-radius:var(--ss-r-veld,12px);
  font-family:inherit; font-size:15px; outline:none;
  transition:border-color .16s ease, background-color .16s ease;
}
.ss-auth-veld input::placeholder{color:var(--ss-zacht,#9aa0a5); opacity:.6}
.ss-auth-veld input:focus-visible{border-color:var(--ss-accent,#daea09); background:var(--ss-kaart,#191b1d)}
.ss-auth-knop{
  margin-top:4px; height:46px; border:0; border-radius:999px; cursor:pointer;
  background:var(--ss-accent,#daea09); color:#16181a;
  font-family:inherit; font-size:14.5px; font-weight:600;
  transition:filter .16s ease, transform .14s ease;
}
.ss-auth-knop:hover{filter:brightness(1.07)}
.ss-auth-knop:active{transform:translateY(1px)}
.ss-auth-knop:focus-visible{outline:2px solid var(--ss-inkt,#f2f2ef); outline-offset:3px}
.ss-auth-terug{
  text-align:center; font-size:12.5px; color:var(--ss-zacht,#9aa0a5);
  text-decoration:none; padding:6px;
}
.ss-auth-terug:hover{color:var(--ss-inkt,#f2f2ef); text-decoration:underline; text-underline-offset:3px}

/* Je palet als handtekening. Bij het openen van de pagina lopen ze één keer
   binnen, van links naar rechts. Daarna staan ze stil. */
.ss-auth-palet{
  display:grid; grid-template-columns:repeat(12,1fr); gap:4px; margin-top:8px;
  padding-top:18px; border-top:1px solid var(--ss-lijn,rgba(242,242,239,.11));
}
.ss-auth-palet span{
  aspect-ratio:1; border-radius:4px; background:var(--k); min-width:0;
  opacity:0; animation:ss-auth-binnen .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:var(--vertraag,0ms);
}
@keyframes ss-auth-binnen{from{opacity:0; transform:translateY(5px) scale(.7)} to{opacity:.9; transform:none}}

@media (prefers-reduced-motion:reduce){
  .ss-auth-stip{animation:none}
  .ss-auth-palet span{animation:none; opacity:.9}
}
@media (max-width:420px){
  .ss-auth-kaart{padding:24px 20px 20px; border-radius:var(--ss-r,20px)}
}

/* ============================================================================
   v15.34.0 — ALLES WAT VERLOOPT
   Een lijst op datum, met de maand als kopje ertussen. De kleur links is de
   klantkleur; de streep rechts zegt hoe dringend het is. Wat verlopen is,
   staat bovenaan en is het enige dat écht roept.
   ========================================================================= */
.ss-verloopkop{display:flex; align-items:center; justify-content:space-between; gap:var(--ruimte-4,16px); flex-wrap:wrap}
.ss-verloopkop p{margin:0}
.ss-verloopmaand{
  margin:var(--ruimte-5,22px) 0 var(--ruimte-2,8px);
  font:500 var(--tekst-xs,11.5px)/1 var(--heading-font);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ss-zacht);
}
.ss-verloopmaand:first-of-type{margin-top:var(--ruimte-3,12px)}
.ss-verloop{
  display:grid; grid-template-columns:48px 1fr auto;
  align-items:center; gap:var(--ruimte-4,16px);
  background:var(--ss-kaart); border-radius:var(--ss-r-klein,14px);
  padding:11px 16px 11px 11px; margin-bottom:var(--ruimte-2,8px);
  text-decoration:none; color:var(--ss-inkt); min-width:0;
  border-left:4px solid var(--kleur,var(--ss-zacht));
  transition:transform .14s ease;
}
.ss-verloop:hover{transform:translateX(2px)}
.ss-verloop-datum{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--ss-kaart-2); border-radius:var(--ss-r-veld,12px); padding:5px 0; min-width:0;
}
.ss-verloop-datum b{
  font:700 var(--tekst-l,16px)/1 var(--heading-font);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.ss-verloop-datum small{font-size:var(--tekst-xxs,10.5px); color:var(--ss-zacht); text-transform:uppercase; letter-spacing:.06em}
.ss-verloop-tekst{display:flex; flex-direction:column; gap:2px; min-width:0}
.ss-verloop-tekst b{
  font:500 var(--tekst-m,14px)/1.3 var(--heading-font); letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-verloop-tekst small{color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); overflow:hidden; text-overflow:ellipsis}
.ss-verloop-over{
  font-size:var(--tekst-xs,11.5px); font-weight:600; letter-spacing:.03em;
  color:var(--ss-zacht); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.ss-verloop[data-stand="verlopen"]{background:color-mix(in srgb,#ea4ca7 var(--ss-tint,18%),var(--ss-menging))}
.ss-verloop[data-stand="verlopen"] .ss-verloop-over{color:var(--ss-letop-kleur,#ea4ca7)}
.ss-verloop[data-stand="bijna"] .ss-verloop-over{color:var(--orange,#f08d0c)}
@media (max-width:560px){
  .ss-verloop{grid-template-columns:42px 1fr; row-gap:4px; padding:10px 12px 10px 9px}
  .ss-verloop-over{grid-column:2; text-align:left}
}

/* De periodekeuze op het verloopscherm. De gewone weergaveknoppen zijn op een
   icoontje gemaakt; deze dragen een woord en hebben dus eigen ruimte nodig. */
.ss-verloopkop .weergave-tabs{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.ss-periodeknop{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px; border-radius:999px; text-decoration:none;
  font-size:var(--tekst-xs,11.5px); font-weight:500; color:var(--ss-zacht);
  background:transparent; border:1px solid transparent; white-space:nowrap;
}
.ss-periodeknop:hover{background:var(--ss-kaart-2); color:var(--ss-inkt)}
.ss-periodeknop.active{background:var(--ss-kaart); color:var(--ss-inkt); box-shadow:var(--ss-schaduw-klein)}

/* ============================================================================
   v15.34.0 — DRUKWERK BIJ EEN PROJECT
   Per opdracht één regel: wat het is, hoe het ervoor staat, de feiten op één
   lijn en de twee datums die ertoe doen rechts. Bij een website zie je dit
   blok helemaal niet — pas als er echt iets gedrukt wordt.
   ========================================================================= */
.ss-drukwerk-start{margin:0 0 var(--ruimte-4,16px)}
.ss-drukwerk-start a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--tekst-s,12.5px); color:var(--ss-zacht); text-decoration:none;
  padding:7px 14px; border-radius:999px; border:1px dashed var(--ss-lijn);
}
.ss-drukwerk-start a:hover{color:var(--ss-inkt); background:var(--ss-kaart-2); border-style:solid}

.ss-drukwerk-lijst{display:flex; flex-direction:column; gap:var(--ruimte-2,8px); padding:var(--ruimte-4,16px) var(--ruimte-5,22px)}
.ss-drukwerkregel{
  background:var(--ss-kaart-2); border-radius:var(--ss-r-klein,14px);
  border-left:4px solid var(--stand,var(--ss-zacht));
  padding:12px 16px; display:flex; flex-direction:column; gap:5px; min-width:0;
}
.ss-drukwerk-kop{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.ss-drukwerk-kop b{font:500 var(--tekst-m,14px)/1.3 var(--heading-font); letter-spacing:-.015em}
.ss-drukwerk-stand{
  font-size:var(--tekst-xxs,10.5px); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--stand,var(--ss-zacht));
}
.ss-drukwerk-feiten{color:var(--ss-zacht); font-size:var(--tekst-s,12.5px); line-height:1.5}
.ss-drukwerk-datums{display:flex; align-items:center; gap:var(--ruimte-4,16px); flex-wrap:wrap; margin-top:3px}
.ss-drukwerk-datums > span{
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:var(--tekst-s,12.5px); font-variant-numeric:tabular-nums;
}
.ss-drukwerk-datums small{
  font-size:var(--tekst-xxs,10.5px); letter-spacing:.09em; text-transform:uppercase; color:var(--ss-zacht);
}
.ss-drukwerk-acties{margin-left:auto; display:flex; gap:4px}
.ss-drukwerk-notitie{
  margin:4px 0 0; color:var(--ss-zacht);
  font-size:var(--tekst-s,12.5px); line-height:var(--regel-tekst,1.6);
}
.ss-drukwerk-form{padding:0 var(--ruimte-5,22px) var(--ruimte-5,22px)}
@media (max-width:560px){
  .ss-drukwerk-lijst,.ss-drukwerk-form{padding-left:var(--ruimte-4,16px); padding-right:var(--ruimte-4,16px)}
  .ss-drukwerk-acties{margin-left:0; flex-basis:100%}
}

/* v15.34.0 — de uitleg op een btw-kwartaal dat uit de bocht vliegt. */
.vat-quarter-waarschuwing{
  margin:8px 0 0; padding:9px 11px;
  background:color-mix(in srgb,var(--orange,#f08d0c) var(--ss-tint,18%),var(--ss-menging));
  border-radius:var(--ss-r-veld,12px);
  font-size:var(--tekst-xs,11.5px); line-height:1.5; color:var(--ss-inkt);
}
.vat-quarter-waarschuwing strong{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ============================================================================
   v15.35.0 — INZICHTEN
   Drie dingen stonden in de weg: acht bedragen op één rij, een grafiek met
   een getal boven elke staaf, en kaarten met elk hun eigen binnenmaat. Dus:
   groepen met een kop, één maat voor alle kaarten, en grafieken die hun
   getallen spaarzaam tonen.

   De grafiekkleur is per thema gezet. Je lime is prachtig op zwart maar heeft
   op wit een contrast van 1,3 op 1 — dat is geen staaf meer, dat is een
   vermoeden. In het lichte thema staat er daarom een diepere stap uit
   dezelfde kleur. Beide zijn nagerekend: contrast boven 3:1 en ruim boven de
   drempel voor kleurenblindheid.
   ========================================================================= */
:root{
  /* v15.37.0: de staven dragen je eigen lime, met hetzelfde verloop naar lila
     dat het weekrapport bij Tijdregistratie al jaren heeft. Een staaf is een
     vlak, geen tekst - en het getal dat erbij hoort staat in inkt erboven, dus
     de leesbaarheid hangt niet aan de kleur. */
  --grafiek-1:var(--ss-accent,#daea09);
  --grafiek-2:#a9a8ef;
}

/* --- de drie groepen kengetallen ---------------------------------------- */
.iz-groep{margin:0 0 var(--ruimte-5,22px)}
.iz-groepkop{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 var(--ruimte-3,12px);
  font:500 var(--tekst-xs,11.5px)/1 var(--heading-font);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ss-zacht);
}
.iz-groepkop small{
  letter-spacing:0; text-transform:none; font-weight:400;
  font-size:var(--tekst-xs,11.5px); opacity:.8;
}
.iz-cijfers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--ruimte-3,12px);
}
.iz-cijfer{
  background:var(--ss-kaart); border-radius:var(--ss-r,20px);
  padding:var(--ruimte-4,16px) var(--ruimte-5,22px) var(--ruimte-5,22px);
  display:flex; flex-direction:column; gap:3px; min-width:0;
  box-shadow:var(--ss-schaduw-klein);
}
.iz-cijfer small{
  font:600 var(--tekst-xs,11.5px)/1.4 var(--body-font);
  letter-spacing:.07em; text-transform:uppercase; color:var(--ss-zacht);
}
.iz-cijfer strong{
  font:700 clamp(21px,2.3vw,27px)/1.1 var(--heading-font);
  letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--ss-inkt);
}
.iz-cijfer > span{
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  line-height:1.45; margin-top:2px;
}
.iz-cijfer > span b{color:var(--ss-inkt); font-weight:600}
.iz-cijfer.is-hoofd{background:color-mix(in srgb,var(--ss-accent,#daea09) var(--ss-tint,18%),var(--ss-menging))}
.iz-cijfer.let-op{background:color-mix(in srgb,var(--orange,#f08d0c) var(--ss-tint,18%),var(--ss-menging))}

/* --- de omzetgrafiek ----------------------------------------------------- */
.iz-grafiek .card-head{align-items:flex-start}
.iz-gem{
  font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.iz-grafiek-vlak{padding:var(--ruimte-5,22px) var(--ruimte-5,22px) var(--ruimte-3,12px)}
.iz-staven{
  position:relative; display:flex; align-items:flex-end;
  gap:var(--ruimte-2,8px); height:190px; min-width:0;
}
/* de stippellijn van het gemiddelde: recessief, achter de staven */
.iz-gemlijn{
  position:absolute; left:0; right:0; bottom:calc(22px + (var(--gem,0%) * 0.78));
  border-top:1px dashed var(--ss-lijn); pointer-events:none;
}
.iz-staaf{
  flex:1 1 0; min-width:0; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px;
}
.iz-staaflabel{
  font:600 var(--tekst-xxs,10.5px)/1 var(--body-font);
  color:var(--ss-inkt); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.iz-staafspoor{display:flex; align-items:flex-end; width:100%; max-width:46px; flex:1 1 auto; min-height:0}
.iz-staafspoor > span{
  display:block; width:100%; min-height:3px;
  background:linear-gradient(180deg,var(--grafiek-1),color-mix(in srgb,var(--grafiek-2) 70%,var(--grafiek-1)));
  border-radius:4px 4px 2px 2px;
  transition:height .5s cubic-bezier(.2,.7,.3,1);
}
/* de maand waar je nu in zit: andersom, zodat hij opvalt zonder harder te roepen */
.iz-staaf.is-nu .iz-staafspoor > span{
  background:linear-gradient(180deg,var(--grafiek-2),color-mix(in srgb,var(--grafiek-1) 70%,var(--grafiek-2)));
}
.iz-staaf small{
  font-size:var(--tekst-xxs,10.5px); color:var(--ss-zacht);
  height:14px; line-height:14px;
}
.iz-grafiek-voet{
  margin:0; padding:0 var(--ruimte-5,22px) var(--ruimte-5,22px);
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.5;
}
body[data-beweging="uit"] .iz-staafspoor > span{transition:none}
@media (prefers-reduced-motion:reduce){ .iz-staafspoor > span{transition:none} }

@media (max-width:560px){
  .iz-cijfer{padding:var(--ruimte-3,12px) var(--ruimte-4,16px) var(--ruimte-4,16px)}
  .iz-grafiek-vlak{padding:var(--ruimte-4,16px) var(--ruimte-4,16px) var(--ruimte-2,8px)}
  .iz-staven{height:150px; gap:3px}
  .iz-staaflabel{display:none}
}

/* --- v15.35.0 — het gekrompen vergelijkfilter ---------------------------- */
.iz-vergelijk{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 var(--ruimte-5,22px);
  color:var(--ss-zacht); font-size:var(--tekst-s,12.5px);
}
.iz-vergelijk label{white-space:nowrap}
.iz-vergelijk select{
  height:34px; padding:0 30px 0 12px; border-radius:999px;
  background:var(--ss-kaart); color:var(--ss-inkt);
  border:1px solid var(--ss-lijn); font:inherit; font-size:var(--tekst-s,12.5px);
}

/* --- v15.35.0 — de vergelijking met vorig jaar --------------------------- */
.iz-vergelijking .iz-cijfer strong.is-op{color:color-mix(in srgb,#78c7a3 80%,var(--ss-inkt))}
.iz-vergelijking .iz-cijfer strong.is-af{color:var(--ss-letop-kleur,#ea4ca7)}
.iz-vergelijk select{max-width:180px}
/* de kop van de omzetgrafiek: titel links, gemiddelde rechts, nooit op elkaar */
.iz-grafiek .card-head{gap:var(--ruimte-4,16px); flex-wrap:wrap}
.iz-grafiek .head-title{display:flex; flex-direction:column; gap:3px; min-width:0}
.iz-grafiek .head-title small{
  font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht);
  letter-spacing:0; text-transform:none;
}

/* --- v15.35.0 — de verantwoording onderaan Inzichten --------------------- */
.iz-verantwoording{
  margin:var(--ruimte-6,32px) 0 var(--ruimte-4,16px);
  background:var(--ss-kaart); border-radius:var(--ss-r,20px);
  box-shadow:var(--ss-schaduw-klein); overflow:hidden;
}
.iz-verantwoording > summary{
  cursor:pointer; list-style:none; padding:var(--ruimte-4,16px) var(--ruimte-5,22px);
  font:500 var(--tekst-m,14px)/1.3 var(--heading-font); letter-spacing:-.015em;
  display:flex; align-items:center; gap:9px;
}
.iz-verantwoording > summary::-webkit-details-marker{display:none}
.iz-verantwoording > summary::before{
  content:""; width:7px; height:7px; flex:none;
  border-right:2px solid var(--ss-zacht); border-bottom:2px solid var(--ss-zacht);
  transform:rotate(-45deg) translateY(-1px); transition:transform .18s ease;
}
.iz-verantwoording[open] > summary::before{transform:rotate(45deg) translateY(-2px)}
.iz-verantwoording > summary:hover{background:var(--ss-kaart-2)}
.iz-verantwoording-inhoud{padding:0 var(--ruimte-5,22px) var(--ruimte-5,22px)}
.iz-verantwoording dl{margin:0; display:flex; flex-direction:column; gap:var(--ruimte-4,16px)}
.iz-verantwoording dt{
  font:600 var(--tekst-xs,11.5px)/1.3 var(--body-font);
  letter-spacing:.07em; text-transform:uppercase; color:var(--ss-zacht);
  margin-bottom:4px;
}
.iz-verantwoording dd{
  margin:0; max-width:78ch; color:var(--ss-inkt);
  font-size:var(--tekst-s,12.5px); line-height:var(--regel-tekst,1.6);
}
@media (prefers-reduced-motion:reduce){ .iz-verantwoording > summary::before{transition:none} }
@media (max-width:560px){
  .iz-verantwoording > summary,.iz-verantwoording-inhoud{padding-left:var(--ruimte-4,16px); padding-right:var(--ruimte-4,16px)}
}

/* ============================================================================
   v15.37.0 — MERKKLEUREN, MAAR DAN OP JOUW MANIER
   In 15.36.0 stond hier een diep olijfgroen en een indigo: nagerekend op
   contrast, maar niet uit jouw palet. Dat zag je meteen, en terecht.

   Het echte probleem blijft staan: er zit geen kleur in je palet die als
   TEKST werkt op een licht vlak. Lime haalt 1,2 op 1 op wit. Dat is geen
   smaakkwestie, dat is onleesbaar.

   De oplossing is dus niet een andere kleur maar een ander middel - en eentje
   die je zelf al overal gebruikt: het getal in inkt, en de KAART in een
   zachte tint uit je palet. Precies zoals de tegel "Betaald" op Inzichten en
   je taakregels het al doen. Kleur draagt de betekenis, inkt draagt de tekst.
   ========================================================================= */

/* de btw-kwartaalkaarten */
.vat-quarter-card strong{color:var(--ss-inkt)}
.vat-quarter-card{
  background:color-mix(in srgb,var(--ss-accent,#daea09) 10%,var(--ss-menging));
}
.vat-quarter-card.is-open{
  background:color-mix(in srgb,#a9a8ef 16%,var(--ss-menging));
  border-color:color-mix(in srgb,#a9a8ef 55%,var(--ss-lijn));
}
.vat-quarter-top span{
  background:color-mix(in srgb,#a9a8ef 30%,var(--ss-menging));
  color:var(--ss-inkt);
}
/* v15.41.0: het zachte grijs haalde op de lichte limetint net 4,4:1 en dat is
   krap voor een regel die je moet kunnen lezen. Een stapje richting inkt en
   hij zit ruim boven de norm, zonder dat hij gaat schreeuwen. */
.vat-quarter-link{
  color:color-mix(in srgb,var(--ss-inkt) 45%,var(--ss-zacht));
  text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.vat-quarter-card:hover .vat-quarter-link{color:var(--ss-inkt)}
.vat-detail-head b{color:var(--ss-inkt)}

/* dezelfde fout zat op meer plekken: een merkkleur die tekst moest dragen.
   Allemaal terug naar inkt; de kleur zit waar hij hoort, in het vlak. */
.tijd-weekkop a.vandaag strong,
.klant-mail.is-ongelezen .klant-mail-tekst b{color:var(--ss-inkt)}
.tijd-bill.aan{color:var(--ss-inkt)}
.tijd-bewerk-meer > summary::before{color:var(--ss-zacht)}
.mail-uitleg > summary > svg:first-child{color:var(--ss-zacht)}

/* ============================================================================
   v15.36.0 — HET JAAROVERZICHT VOOR DE KLANT
   Een eigen pagina zonder menu, gemaakt om af te drukken of als pdf te
   bewaren. Op papier verdwijnen de knoppen en wordt alles licht, want een
   zwart vlak van A4 is geen cadeau voor je printer.
   ========================================================================= */
.ss-jaarkaart p.muted{
  margin:0 0 12px; font-size:var(--tekst-s,12.5px); line-height:1.5;
}
.ss-jaarkaart-knoppen{display:flex; gap:7px; flex-wrap:wrap}
.ss-jaarkaart-knoppen .btn{flex:1 1 auto; justify-content:center; min-width:72px}

body.ss-jaarbody{
  margin:0; background:var(--ss-bureau,#eeedea); color:var(--ss-inkt,#16181a);
  font-family:var(--body-font),ui-sans-serif,system-ui,sans-serif;
  padding-block:24px 60px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.ss-jaarknoppen-boven{
  max-width:780px; margin:0 auto var(--ruimte-4,16px);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.ss-jaarknoppen-boven span{display:flex; gap:7px; flex-wrap:wrap}

.ss-jaar{
  max-width:780px; margin:0 auto; background:var(--ss-kaart,#fff);
  border-radius:var(--ss-r-groot,24px); overflow:hidden;
  box-shadow:var(--ss-schaduw);
}
.ss-jaar-kop{
  padding:48px 44px 40px; border-bottom:4px solid var(--kleur,var(--ss-accent,#daea09));
  display:flex; flex-direction:column; gap:6px;
}
.ss-jaar-merk{display:block; margin-bottom:18px; max-width:150px}
.ss-jaar-merk img,.ss-jaar-merk svg{max-width:100%; height:auto}
.ss-jaar-jaartal{
  margin:0; font:700 var(--tekst-xs,11.5px)/1 var(--heading-font);
  letter-spacing:.22em; color:var(--ss-zacht);
}
.ss-jaar-kop h1{
  margin:0; font:700 clamp(30px,5vw,44px)/1.08 var(--heading-font);
  letter-spacing:-.04em; text-wrap:balance;
}
.ss-jaar-voor{margin:6px 0 0; color:var(--ss-zacht); font-size:var(--tekst-l,16px)}
.ss-jaar-voor b{color:var(--ss-inkt); font-weight:600}

.ss-jaar-cijfers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:1px; background:var(--ss-lijn); border-bottom:1px solid var(--ss-lijn);
}
.ss-jaar-cijfers > div{
  background:var(--ss-kaart); padding:22px 20px;
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
}
.ss-jaar-cijfers strong{
  font:700 clamp(24px,3vw,32px)/1 var(--heading-font);
  letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.ss-jaar-cijfers small{color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px)}

.ss-jaar-project{
  display:grid; grid-template-columns:150px 1fr; gap:26px;
  padding:34px 44px; border-bottom:1px solid var(--ss-lijn); align-items:start;
}
.ss-jaar-project:has(.ss-jaar-projecttekst:only-child){grid-template-columns:1fr}
.ss-jaar-beeld{border-radius:var(--ss-r-klein,14px); overflow:hidden; background:var(--ss-kaart-2)}
.ss-jaar-beeld img{display:block; width:100%; height:auto}
.ss-jaar-projecttekst h2{
  margin:0 0 4px; font:500 var(--tekst-xl,19px)/1.25 var(--heading-font);
  letter-spacing:-.025em;
}
.ss-jaar-meta{margin:0 0 12px; color:var(--ss-zacht); font-size:var(--tekst-s,12.5px)}
.ss-jaar-mijlpalen{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.ss-jaar-mijlpalen li{
  display:flex; align-items:baseline; gap:12px;
  font-size:var(--tekst-s,12.5px); padding-left:17px; position:relative;
}
.ss-jaar-mijlpalen li::before{
  content:""; position:absolute; left:0; top:7px;
  width:7px; height:7px; border-radius:999px;
  border:1.5px solid var(--kleur,var(--ss-accent,#daea09));
}
.ss-jaar-mijlpalen li.is-af::before{background:var(--kleur,var(--ss-accent,#daea09))}
.ss-jaar-mijlpalen small{margin-left:auto; color:var(--ss-zacht); white-space:nowrap}
.ss-jaar-drukwerk{
  margin:14px 0 0; font-size:var(--tekst-s,12.5px); color:var(--ss-zacht);
  line-height:var(--regel-tekst,1.6);
}
.ss-jaar-drukwerk b{color:var(--ss-inkt); margin-right:6px}
.ss-jaar-leeg{padding:34px 44px; color:var(--ss-zacht)}
.ss-jaar-voet{padding:34px 44px 40px}
.ss-jaar-voet p{margin:0 0 6px; font-size:var(--tekst-l,16px)}
.ss-jaar-onder{color:var(--ss-zacht); font-size:var(--tekst-s,12.5px)}

@media (max-width:620px){
  .ss-jaar-kop,.ss-jaar-project,.ss-jaar-voet,.ss-jaar-leeg{padding-left:22px; padding-right:22px}
  .ss-jaar-project{grid-template-columns:1fr; gap:16px}
  .ss-jaar-beeld{max-width:220px}
}

@media print{
  body.ss-jaarbody{background:#fff; color:#16181a; padding:0}
  .ss-jaarknoppen-boven{display:none}
  .ss-jaar{max-width:none; box-shadow:none; border-radius:0; background:#fff}
  .ss-jaar-project{break-inside:avoid; page-break-inside:avoid}
  .ss-jaar-cijfers{background:#e8e8e6}
  .ss-jaar-cijfers > div{background:#fff}
}

/* ============================================================================
   v15.38.0 — BEWEGING DIE EEN VERANDERING LAAT ZIEN
   Twee dingen die het CRM al wist maar niet liet zien: hoe ver een mijlpaal
   is, en hoe vol je week loopt. Allebei bewegen ze één keer bij het openen
   van de pagina, van leeg naar hun stand. Daarna staan ze stil — een scherm
   dat blijft bewegen gaat afleiden.
   ========================================================================= */

/* --- de ring van een mijlpaal ------------------------------------------- */
.ss-mijlpaalrij{display:flex; align-items:center; gap:11px}
.ss-mijlpaalrij > div{flex:1 1 auto; min-width:0}
/* v15.93.0 - DEZE HEETTE OOK .ss-ring.
   Verderop in dit bestand staat het ringetje met de klantstand, dat óók
   .ss-ring heet. Die won, want hij staat later. Daardoor kreeg elk
   klantringetje de animatie van deze ring mee, en deze ring zelf zijn vulling
   niet meer. Hij wordt nergens meer gebruikt - de mijlpaalrij is in 15.63.0
   vervangen - dus hij heet nu .ss-mijlpaalring en zit niemand meer in de weg. */
.ss-mijlpaalring{
  --dikte:3px;
  position:relative; flex:none; width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background:conic-gradient(var(--ringkleur,var(--ss-accent,#daea09)) calc(var(--ring-nu,0) * 1%), var(--ss-kaart-2) 0);
  animation:ss-ring-vullen .85s cubic-bezier(.2,.7,.3,1) forwards;
}
.ss-mijlpaalring::before{
  content:""; position:absolute; inset:var(--dikte);
  border-radius:999px; background:var(--ss-kaart);
}
.ss-mijlpaalring b{
  position:relative; z-index:1;
  font:600 9.5px/1 var(--body-font); color:var(--ss-zacht);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.ss-mijlpaalring.is-vol b{color:var(--ss-inkt)}
.ss-mijlpaalring.is-leeg{animation:none}
@property --ring-nu{syntax:'<number>'; inherits:false; initial-value:0}
@keyframes ss-ring-vullen{ from{--ring-nu:0} to{--ring-nu:var(--pct,0)} }
/* browsers zonder @property: dan staat de ring meteen op zijn stand */
@supports not (background: conic-gradient(red calc(var(--x,0) * 1%), blue 0)){
  .ss-ring{background:conic-gradient(var(--ringkleur,var(--ss-accent,#daea09)) calc(var(--pct,0) * 1%), var(--ss-kaart-2) 0); animation:none}
}

/* --- de week die vol loopt ----------------------------------------------- */
.ss-weekvol{display:flex; flex-direction:column; gap:7px}
.ss-weekvol-kop{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:var(--tekst-s,12.5px); color:var(--ss-zacht);
}
.ss-weekvol-kop b{
  font:700 var(--tekst-l,16px)/1 var(--heading-font); color:var(--ss-inkt);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.ss-weekvol-spoor{
  position:relative; height:10px; border-radius:999px;
  background:var(--ss-kaart-2); overflow:hidden;
}
.ss-weekvol-vul{
  display:block; height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg,var(--ss-accent,#daea09),color-mix(in srgb,#a9a8ef 70%,var(--ss-accent,#daea09)));
  animation:ss-weekvol .9s cubic-bezier(.2,.7,.3,1) forwards;
}
.ss-weekvol-vul.is-over{background:linear-gradient(90deg,var(--orange,#f08d0c),var(--ss-letop-kleur,#ea4ca7))}
@keyframes ss-weekvol{ from{width:0} to{width:var(--vol,0%)} }
/* de stippellijn van je weekdoel */
.ss-weekvol-doel{
  position:absolute; top:-3px; bottom:-3px; width:0;
  border-left:1px dashed var(--ss-zacht); opacity:.75;
}
.ss-weekvol-voet{font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht)}

@media (prefers-reduced-motion:reduce){
  .ss-ring{animation:none; background:conic-gradient(var(--ringkleur,var(--ss-accent,#daea09)) calc(var(--pct,0) * 1%), var(--ss-kaart-2) 0)}
  .ss-weekvol-vul{animation:none; width:var(--vol,0%)}
}
body[data-beweging="uit"] .ss-ring{animation:none; background:conic-gradient(var(--ringkleur,var(--ss-accent,#daea09)) calc(var(--pct,0) * 1%), var(--ss-kaart-2) 0)}
body[data-beweging="uit"] .ss-weekvol-vul{animation:none; width:var(--vol,0%)}
.ss-weekvol-doelgetal{font-weight:400; color:var(--ss-zacht); font-size:var(--tekst-s,12.5px)}
.ss-getal .ss-weekvol{width:100%}

/* ============================================================================
   v15.38.0 — DE DAGAFSLUITING
   Drie kaarten naast elkaar: wat je deed, wat je afvinkte, en wat er op je
   volgende werkdag klaarstaat. Geen cijferbrij — per regel één zin en één
   getal, in de kleur van de klant.
   ========================================================================= */
.ss-dagafsluiting{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:var(--ruimte-4,16px); align-items:start;
}
.ss-dagkaart-inhoud{
  padding:var(--ruimte-4,16px) var(--ruimte-5,22px) var(--ruimte-5,22px);
  display:flex; flex-direction:column; gap:var(--ruimte-4,16px);
}
.ss-dagkaart-inhoud h4{
  margin:0; font:600 var(--tekst-xs,11.5px)/1 var(--body-font);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ss-zacht);
}
.ss-dagkaart-inhoud h4 + .ss-daglijst{margin-top:-6px}
.ss-dagkaart-inhoud p.muted{margin:0; font-size:var(--tekst-s,12.5px); line-height:1.55}

.ss-daglijst{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.ss-daglijst li{
  display:flex; align-items:center; gap:11px; min-width:0;
  padding:9px 0; border-bottom:1px solid var(--ss-lijn);
}
.ss-daglijst li:last-child{border-bottom:0; padding-bottom:0}
.ss-daglijst li > div{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px}
.ss-daglijst b{
  font:500 var(--tekst-s,12.5px)/1.35 var(--heading-font); letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-daglijst small{
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-dagstip{
  width:8px; height:8px; border-radius:999px; flex:none;
  background:var(--kleur,var(--ss-zacht));
}
.ss-daguur{
  font:600 var(--tekst-s,12.5px)/1 var(--body-font); color:var(--ss-inkt);
  font-variant-numeric:tabular-nums; white-space:nowrap; flex:none;
}
.ss-dagvink{
  width:20px; height:20px; border-radius:6px; flex:none;
  display:grid; place-items:center;
  background:color-mix(in srgb,#78c7a3 var(--ss-vul,22%),var(--ss-menging));
  color:var(--ss-inkt);
}
.ss-dagaf b{color:var(--ss-zacht); text-decoration:line-through; text-decoration-thickness:1px}
.ss-dagtijd{
  font:600 var(--tekst-xs,11.5px)/1 var(--body-font); color:var(--ss-inkt);
  font-variant-numeric:tabular-nums; flex:none; min-width:34px;
}
.ss-dagtelaat{
  font-size:var(--tekst-xxs,10.5px); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ss-letop-kleur,#ea4ca7);
  white-space:nowrap; flex:none;
}
@media (max-width:560px){
  .ss-dagkaart-inhoud{padding:var(--ruimte-3,12px) var(--ruimte-4,16px) var(--ruimte-4,16px)}
}

/* de knop naar de dagafsluiting op het dashboard */
.ss-dagknop{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 17px; border-radius:999px; text-decoration:none;
  background:var(--ss-inkt); color:var(--ss-bureau);
  font-size:var(--tekst-s,12.5px); font-weight:600;
  transition:transform .14s ease;
}
.ss-dagknop:hover{transform:translateY(-1px)}
.ss-dagknoprij{margin:var(--ruimte-5,22px) 0 0}

/* Op een smal scherm mag een kaart nooit breder worden dan zijn kolom. De kop
   van de derde kaart ("Klaar voor vrijdag 23 oktober") duwde hem 28px over de
   rand omdat de titel en het onderschrift op één regel wilden blijven. */
.ss-dagkaart{min-width:0}
.ss-dagkaart .card-head{min-width:0; flex-wrap:wrap; gap:4px var(--ruimte-3,12px)}
.ss-dagkaart .head-title{display:flex; flex-direction:column; gap:2px; min-width:0}
.ss-dagkaart .head-title b{
  font-size:var(--tekst-m,14px); line-height:1.3;
  overflow-wrap:anywhere; white-space:normal;
}
.ss-dagkaart .head-title small{
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  letter-spacing:0; text-transform:none; white-space:normal;
}
/* Een lijstregel is zelf ook een flexdoos; zonder min-width:0 rekt de niet-
   afbrekende titel erin de hele kaart op, ook al staat er een ellipsis op. */
.ss-daglijst{min-width:0}
.ss-daglijst li{min-width:0}
.ss-daglijst li > div{min-width:0; max-width:100%}
.ss-daglijst b,.ss-daglijst small{max-width:100%}
/* De kaarten gingen zich naar hun inhoud voegen in plaats van naar hun kolom:
   245, 267 en 418 pixels breed in een raster met één kolom van 358. Daarmee
   stak de derde over de rand. Expliciet uitrekken lost het op. */
.ss-dagafsluiting{justify-items:stretch}
.ss-dagafsluiting > .ss-dagkaart{justify-self:stretch; width:100%; max-width:100%}

/* ============================================================================
   v15.39.0 — HET KLANTPORTAAL
   Het portaal laadde alleen de oude stylesheet en zag er daardoor uit als een
   ander product. Nu draagt het dezelfde vormtaal als de rest.

   Het belangrijkste nieuwe blok staat bovenaan: WAT WE VAN JE NODIG HEBBEN.
   De helft van je "even een reminder"-mailtjes gaat over teksten, een logo in
   vector of toegang tot de DNS. Dat staat nu in hun eigen lijstje, op hun
   eigen scherm, met de datum erbij.
   ========================================================================= */
body.ss-portaal{
  background:var(--ss-bureau,#eeedea); color:var(--ss-inkt,#16181a);
  font-family:var(--body-font),ui-sans-serif,system-ui,sans-serif;
}
body.ss-portaal .portal-wrap{
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
body.ss-portaal .portal-brand{
  font-family:var(--heading-font),ui-sans-serif,system-ui,sans-serif;
  font-weight:700; letter-spacing:-.02em;
}
body.ss-portaal .portal-card{
  background:var(--ss-kaart,#fff); border-radius:var(--ss-r-groot,24px);
  border:1px solid var(--ss-lijn); box-shadow:var(--ss-schaduw);
  padding:var(--ruimte-5,22px);
}
body.ss-portaal .portal-card h2{
  margin:0 0 var(--ruimte-3,12px);
  font:500 var(--tekst-l,16px)/1.25 var(--heading-font); letter-spacing:-.02em;
}
body.ss-portaal .portal-hero{border-radius:var(--ss-r-groot,24px); overflow:hidden}
body.ss-portaal .portal-hero h1{
  font-family:var(--heading-font),ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.035em;
}

/* --- wat we van je nodig hebben ----------------------------------------- */
.ss-portaal-vraag{
  background:color-mix(in srgb,var(--ss-accent,#daea09) 16%,var(--ss-kaart,#fff)) !important;
  border:0 !important; margin-bottom:var(--ruimte-4,16px);
}
.ss-portaal-vraaguitleg{
  margin:-6px 0 var(--ruimte-4,16px);
  color:var(--ss-zacht); font-size:var(--tekst-s,12.5px); line-height:1.55;
}
.ss-portaal-vraagregel{
  display:flex; align-items:flex-start; gap:12px; min-width:0;
  padding:11px 0; border-bottom:1px solid color-mix(in srgb,var(--ss-inkt) 10%,transparent);
}
.ss-portaal-vraagregel:last-child{border-bottom:0; padding-bottom:0}
.ss-portaal-vraagregel > div{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
.ss-portaal-vraagregel b{
  font:500 var(--tekst-m,14px)/1.35 var(--heading-font); letter-spacing:-.015em;
}
.ss-portaal-vraagregel small{
  color:var(--ss-zacht); font-size:var(--tekst-s,12.5px); line-height:1.5;
}
.ss-portaal-bolletje{
  width:14px; height:14px; border-radius:999px; flex:none; margin-top:3px;
  border:2px solid var(--ss-inkt); opacity:.45;
}
.ss-portaal-wanneer{
  font-size:var(--tekst-xs,11.5px); color:var(--ss-inkt); font-weight:600;
  white-space:nowrap; flex:none; margin-top:3px;
}
@media (max-width:560px){
  /* op een smal scherm zakt de datum onder de regel; zonder max-width telt
     de inspringing bovenop de volle breedte en steekt hij over de rand */
  .ss-portaal-wanneer{flex-basis:100%; max-width:calc(100% - 26px); margin-left:26px; margin-top:0; white-space:normal}
  body.ss-portaal .portal-card{padding:var(--ruimte-4,16px); border-radius:var(--ss-r,20px)}
}

/* ============================================================================
   v15.39.0 — DE BALKJES OP HET DASHBOARD GELIJKGETROKKEN
   Het balkje bij "Deze week" had een verloop van lime naar paars dat nog uit
   een oude versie stamde en vloekte met de lila tegel. En het getal stond er
   klein bovenin, terwijl de twee tegels ernaast een groot getal dragen.

   Nu hebben alle drie de tegels dezelfde vorm: klein kopje, groot getal,
   balkje, en een regel eronder. Het balkje krijgt de kleur die bij de tegel
   hoort - lime bij Vandaag, roze bij Deze week - en loopt bij het openen van
   de pagina één keer naar zijn stand.
   ========================================================================= */
.ss-balkje-vandaag span,
.ss-balkje-week span{
  width:0; animation:ss-balkje-vullen .9s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes ss-balkje-vullen{ from{width:0} to{width:var(--vol,0%)} }
.ss-balkje-vandaag span{background:var(--ss-accent,#daea09)}
.ss-balkje-week span{background:var(--ss-letop-kleur,#ea4ca7)}
.ss-balkje-week.is-over span{background:var(--orange,#f08d0c)}

@media (prefers-reduced-motion:reduce){
  .ss-balkje-vandaag span,.ss-balkje-week span{animation:none; width:var(--vol,0%)}
}
body[data-beweging="uit"] .ss-balkje-vandaag span,
body[data-beweging="uit"] .ss-balkje-week span{animation:none; width:var(--vol,0%)}

/* ============================================================================
   v15.40.0 — HET PROJECTVERHAAL
   Een tijdlijn van het eerste voorstel tot de oplevering. De datum links, een
   lijn ertussen, de stap rechts. De bolletjes op de lijn verschillen per soort
   stap: het voorstel en het akkoord zijn open, een mijlpaal is gevuld, de
   oplevering is groter. Zo leest de vorm mee met het verhaal.
   ========================================================================= */
.ss-verhaal{padding:var(--ruimte-5,22px) 44px var(--ruimte-5,22px)}
.ss-verhaalstap{
  display:grid; grid-template-columns:54px 24px 1fr;
  align-items:stretch; gap:0; min-width:0;
}
.ss-verhaaldatum{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start;
  padding:4px 0 var(--ruimte-5,22px); line-height:1.1; text-align:right;
}
.ss-verhaaldatum b{
  font:700 var(--tekst-l,16px)/1 var(--heading-font);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.ss-verhaaldatum small{
  font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht);
  text-transform:uppercase; letter-spacing:.07em; margin-top:2px;
}
.ss-verhaaldatum i{font-style:normal; font-size:var(--tekst-xxs,10.5px); color:var(--ss-zacht); opacity:.7; margin-top:1px}

.ss-verhaallijn{position:relative; display:flex; justify-content:center}
.ss-verhaallijn::before{
  content:""; position:absolute; top:0; bottom:0; width:1px;
  background:var(--ss-lijn);
}
.ss-verhaalstap:first-child .ss-verhaallijn::before{top:9px}
.ss-verhaalstap:last-child .ss-verhaallijn::before{bottom:calc(100% - 9px)}
.ss-verhaallijn span{
  position:relative; z-index:1; margin-top:5px;
  width:9px; height:9px; border-radius:999px; flex:none;
  background:var(--ss-kaart); border:2px solid var(--kleur,var(--ss-accent,#daea09));
}
.ss-verhaalstap[data-soort="mijlpaal"] .ss-verhaallijn span{background:var(--kleur,var(--ss-accent,#daea09))}
.ss-verhaalstap[data-soort="akkoord"] .ss-verhaallijn span,
.ss-verhaalstap[data-soort="oplevering"] .ss-verhaallijn span{
  width:13px; height:13px; margin-top:3px; background:var(--kleur,var(--ss-accent,#daea09));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--kleur,var(--ss-accent,#daea09)) 28%,transparent);
}
.ss-verhaalstap[data-soort="drukwerk"] .ss-verhaallijn span{border-style:dashed}

.ss-verhaaltekst{
  padding:2px 0 var(--ruimte-5,22px) var(--ruimte-4,16px);
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
.ss-verhaaltekst b{
  font:500 var(--tekst-l,16px)/1.3 var(--heading-font); letter-spacing:-.022em;
}
.ss-verhaaltekst small{
  color:var(--ss-zacht); font-size:var(--tekst-s,12.5px); line-height:1.55;
}
.ss-verhaalstap[data-soort="oplevering"] .ss-verhaaltekst b{font-weight:700}

.ss-verhaal-links{padding:0 44px var(--ruimte-5,22px); display:flex; flex-direction:column; gap:7px}
.ss-verhaal-links h2{
  margin:0 0 6px; font:500 var(--tekst-xs,11.5px)/1 var(--heading-font);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ss-zacht);
}
.ss-verhaal-links a{
  color:var(--ss-inkt); text-decoration:underline; text-underline-offset:3px;
  font-size:var(--tekst-s,12.5px); width:fit-content;
}

/* de knop naar het verhaal, in de zijkolom van een project */
.ss-verhaalkaart p.muted{margin:0 0 12px; font-size:var(--tekst-s,12.5px); line-height:1.5}

@media (max-width:620px){
  .ss-verhaal,.ss-verhaal-links{padding-left:22px; padding-right:22px}
  .ss-verhaalstap{grid-template-columns:44px 20px 1fr}
  .ss-verhaaltekst b{font-size:var(--tekst-m,14px)}
}
@media print{
  .ss-verhaalstap{break-inside:avoid; page-break-inside:avoid}
}

/* v15.41.0 — de voet onder een begrensde lijst */
.ss-lijstvoet{
  margin:var(--ruimte-4,16px) 0 0; padding:12px 16px;
  background:var(--ss-kaart-2); border-radius:var(--ss-r-klein,14px);
  color:var(--ss-zacht); font-size:var(--tekst-s,12.5px); line-height:1.55;
}
.ss-lijstvoet a{color:var(--ss-inkt); text-decoration:underline; text-underline-offset:3px}
.ss-lijstvoet small{opacity:.75}

/* ===========================================================================
   v15.42.0 - DE TIMER OP ELKE PAGINA
   De pil (lopende timer) stond er al; hiernaast staat nu de knop waarmee je
   hem start of overzet naar waar je op dat moment staat. Loopt de timer, dan
   verbergt de css de startknop - ook als de browser de pil er zelf heeft
   ingezet omdat je op je telefoon was begonnen.
   =========================================================================== */
.ss-timerbalk{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0;
}
.ss-timerbalk .timer-houder{min-width:0}
/* Loopt er een timer, dan is "starten" niet aan de orde - wisselen wel. En is
   de timer elders gestopt, dan klopt juist de wisselknop niet meer. */
.ss-timerbalk:has(.timer-pil) .ss-timerstart,
.ss-timerbalk:has(.timer-pil) .ss-timerkies:not(.is-wissel),
body.timer-elders-gestart .ss-timerbalk .ss-timerstart,
body.timer-elders-gestart .ss-timerbalk .ss-timerkies:not(.is-wissel){display:none}
.ss-timerbalk:has(.timer-gestopt) .ss-timerwissel,
.ss-timerbalk:has(.timer-gestopt) .ss-timerkies.is-wissel{display:none}
.ss-timerwissel{display:flex; align-items:center; gap:7px; min-width:0}

.ss-timerknop{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  background:var(--ss-kaart-2); color:var(--ss-inkt);
  border:1px solid var(--ss-lijn);
  font-family:var(--body-font); font-size:var(--tekst-s,12.5px); font-weight:600;
  line-height:1; transition:background .15s ease, border-color .15s ease;
}
.ss-timerknop:hover{ background:color-mix(in srgb,var(--ss-inkt) 8%,var(--ss-kaart-2)); }
.ss-timerknop svg{flex:none}
.ss-timerknop.is-vol{width:100%; justify-content:center; padding:10px 14px}

.ss-timerstart{display:flex; align-items:center; gap:7px; min-width:0}
.ss-timerwat{
  min-width:0; width:clamp(90px,16vw,210px);
  padding:7px 12px; border-radius:999px;
  background:var(--ss-kaart-2); color:var(--ss-inkt);
  border:1px solid var(--ss-lijn);
  font-family:var(--body-font); font-size:var(--tekst-s,12.5px);
}
.ss-timerwat::placeholder{color:var(--ss-zacht)}
.ss-timerwat:focus-visible{outline:2px solid var(--ss-zacht); outline-offset:1px}

/* de keuzelijst, zonder javascript */
.ss-timerkies{position:relative}
.ss-timerkies > summary{list-style:none}
.ss-timerkies > summary::-webkit-details-marker{display:none}
.ss-timerkies[open] > summary{background:color-mix(in srgb,var(--ss-inkt) 8%,var(--ss-kaart-2))}
.ss-timerpaneel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  width:min(330px,calc(100vw - 32px));
  padding:var(--ruimte-4,16px);
  background:var(--ss-kaart); border:1px solid var(--ss-lijn);
  border-radius:var(--ss-r,20px);
  box-shadow:0 18px 44px rgba(0,0,0,.26);
}
.ss-timerpaneel form{display:flex; flex-direction:column; gap:9px}
.ss-timerpaneel select,
.ss-timerpaneel .ss-timerwat{
  width:100%; border-radius:var(--ss-r-veld,12px); padding:10px 12px;
  background:var(--ss-kaart-2); color:var(--ss-inkt); border:1px solid var(--ss-lijn);
  font-family:var(--body-font); font-size:var(--tekst-s,12.5px);
}
.ss-timerpaneel-kop{
  margin:0; color:var(--ss-zacht);
  font-size:var(--tekst-xs,11.5px); line-height:1.5;
}
.ss-timergeen{
  margin:0; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  white-space:nowrap;
}
.ss-timergeen a{color:var(--ss-inkt); text-decoration:underline; text-underline-offset:3px}

/* Op de telefoon is er geen ruimte voor het tekstvak naast de knop; de
   omschrijving vul je daar na het starten in op de pil zelf. */
@media (max-width:760px){
  .ss-timerbalk .ss-timerwat{display:none}
  .ss-timerpaneel .ss-timerwat{display:block}
  .ss-timergeen{white-space:normal}
  .ss-timerpaneel{right:auto; left:0}
}

/* De zwarte balk op het dashboard: Wissel en Stop naast elkaar. */
.ss-nu .ss-nu-knop{display:flex; align-items:center; gap:8px; flex:none}
.ss-nu .ss-timerknop{
  background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.22);
}
.ss-nu .ss-timerknop:hover{background:rgba(255,255,255,.2)}
.ss-nu .ss-timerpaneel{color:var(--ss-inkt)}
@media (max-width:760px){
  .ss-nu .ss-nu-knop{width:100%; justify-content:flex-end}
}

/* ===========================================================================
   v15.43.0 - WACHTPUNTEN, DE NAVRAAG EN DE DATUMKNOP
   =========================================================================== */

/* De ene regel die verschijnt nadat je een taak hebt afgevinkt. */
.ss-navraag{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 var(--ruimte-4,16px);
  padding:12px 16px;
  background:color-mix(in srgb,var(--ss-accent,#daea09) 14%,var(--ss-kaart-2));
  border:1px solid color-mix(in srgb,var(--ss-accent,#daea09) 40%,var(--ss-lijn));
  border-radius:var(--ss-r-klein,14px);
  color:var(--ss-inkt); font-size:var(--tekst-s,12.5px); line-height:1.5;
}
.ss-navraag-tekst{flex:1 1 220px; min-width:0}
.ss-navraag input[name="wacht_op"]{
  flex:0 1 220px; min-width:0;
  padding:8px 12px; border-radius:var(--ss-r-veld,12px);
  background:var(--ss-kaart); color:var(--ss-inkt); border:1px solid var(--ss-lijn);
  font-family:var(--body-font); font-size:var(--tekst-s,12.5px);
}
.ss-navraag .btn{flex:none}
.ss-navraag-weg{
  flex:none; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  text-decoration:underline; text-underline-offset:3px;
}

/* Een taakregel die bij iemand anders ligt: rustiger, met een streepje ervoor. */
.ss-rij.is-wacht{opacity:.92}
.ss-rij.is-wacht .ss-titel{font-weight:600}
.ss-vink-wacht{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ss-zacht);
}
.ss-vink-wacht:hover{color:var(--ss-inkt)}
.ss-wacht-bij{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  flex:none; text-align:right; line-height:1.3;
}
.ss-wacht-bij b{font-size:var(--tekst-s,12.5px); color:var(--ss-inkt); font-weight:600}
.ss-wacht-bij small{font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht)}
.ss-wachtuitleg{
  margin:0 0 var(--ruimte-3,12px);
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.55;
}

/* De kalenderknop in de regel. */
/* v15.44.0 - HET DATUMPANEEL VIEL ACHTER DE VOLGENDE TAKEN.
   Het paneel had wel een z-index, maar de regels eronder komen later in de
   pagina en tekenen dus over hem heen. Een z-index binnen een regel helpt dan
   niet: de hele regel moet omhoog. Vandaar deze twee regels - zolang het
   paneel openstaat ligt die ene taakregel boven alles wat eronder komt. */
.ss-rij:has(.ss-datumkies[open]){position:relative; z-index:70}
.ss-rij:has(.ss-datumkies[open]) + .ss-notitieblok{z-index:1}
.ss-datumkies{position:relative; display:inline-flex}
.ss-datumkies > summary{list-style:none; cursor:pointer}
.ss-datumkies > summary::-webkit-details-marker{display:none}
.ss-datumpaneel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:80;
  width:min(260px,calc(100vw - 32px));
  padding:var(--ruimte-4,16px);
  background:var(--ss-kaart); border:1px solid var(--ss-lijn);
  border-radius:var(--ss-r,20px);
  box-shadow:0 18px 44px rgba(0,0,0,.26);
  text-align:left;
}
.ss-datumpaneel form{display:flex; flex-direction:column; gap:9px}
.ss-datumpaneel-kop{
  margin:0; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
}
.ss-datumpaneel input[type="date"]{
  width:100%; padding:10px 12px; border-radius:var(--ss-r-veld,12px);
  background:var(--ss-kaart-2); color:var(--ss-inkt); border:1px solid var(--ss-lijn);
  font-family:var(--body-font); font-size:var(--tekst-s,12.5px);
}
.ss-datumsnel{display:flex; flex-wrap:wrap; gap:6px}
.ss-datumknop{
  flex:1 1 auto; padding:7px 10px; cursor:pointer;
  border-radius:999px; border:1px solid var(--ss-lijn);
  background:var(--ss-kaart-2); color:var(--ss-inkt);
  font-family:var(--body-font); font-size:var(--tekst-xs,11.5px); font-weight:600;
  white-space:nowrap;
}
.ss-datumknop:hover{background:color-mix(in srgb,var(--ss-inkt) 8%,var(--ss-kaart-2))}
.ss-datumknop.is-stil{color:var(--ss-zacht); font-weight:500}
.ss-datumopslaan{width:100%}

@media (max-width:760px){
  .ss-datumpaneel,.ss-navraag input[name="wacht_op"]{right:auto}
  .ss-datumpaneel{right:0}
  .ss-navraag{flex-direction:column; align-items:stretch}
  .ss-navraag input[name="wacht_op"]{flex:1 1 auto}
  .ss-wacht-bij{align-items:flex-start; text-align:left}
}

/* ===========================================================================
   v15.43.0 - DE DAGWEERGAVE: AANPASSEN ZONDER WEG TE KLIKKEN
   De drie icoontjes op een tijdblok waren dertien pixels en daarmee niet te
   lezen. Ze zijn nu groter en krijgen een echte raakvlak. Het potloodje zet de
   registratie in een kaart bovenaan de dag, waar je de omschrijving en het
   project in één keer rechtzet.
   =========================================================================== */
.tijd-blokknoppen{gap:5px}
.tijd-blokknoppen .tijd-kopie{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; cursor:pointer;
  background:var(--ss-kaart,#fff); color:var(--ss-inkt,#16181a);
  border:1px solid var(--ss-lijn,rgba(0,0,0,.14));
  box-shadow:0 2px 6px rgba(0,0,0,.14);
}
.tijd-blokknoppen .tijd-kopie:hover{background:var(--ss-kaart-2,#f2f2ef)}

.tijd-bewerkkaart{
  margin:0 0 var(--ruimte-4,16px);
  padding:var(--ruimte-4,16px);
  background:var(--ss-kaart); border:1px solid var(--ss-lijn);
  border-radius:var(--ss-r,20px);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.tijd-bewerkkaart form{display:grid; gap:10px; grid-template-columns:1fr 1fr}
.tijd-bewerkkop{grid-column:1 / -1; display:flex; flex-direction:column; gap:2px}
.tijd-bewerkkop b{font-size:var(--tekst-m,14px); color:var(--ss-inkt)}
.tijd-bewerkkop small{font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht)}
.tijd-bewerkkaart label{
  display:flex; flex-direction:column; gap:4px; min-width:0;
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); font-weight:600;
}
.tijd-bewerkkaart input,
.tijd-bewerkkaart select{
  width:100%; padding:10px 12px; border-radius:var(--ss-r-veld,12px);
  background:var(--ss-kaart-2); color:var(--ss-inkt); border:1px solid var(--ss-lijn);
  font-family:var(--body-font); font-size:var(--tekst-s,12.5px); font-weight:500;
}
.tijd-bewerkknoppen{
  grid-column:1 / -1; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.tijd-snelmeer{
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  text-decoration:underline; text-underline-offset:3px;
}
.tijd-snelmeer:hover{color:var(--ss-inkt)}
@media (max-width:760px){
  .tijd-bewerkkaart form{grid-template-columns:1fr}
}

/* De startknop bij een losse taak: begin je eraan, dan loopt de timer. */
.ss-taaktimer{display:inline-flex; flex:none}
.ss-taaktimerknop{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  gap:3px; border-radius:999px; cursor:pointer;
  background:var(--ss-kaart-2); color:var(--ss-zacht);
  border:1px solid var(--ss-lijn);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ss-rij:hover .ss-taaktimerknop{color:var(--ss-inkt)}
/* v15.44.0: het driehoekje zat in een cirkel en werd daarmee een cirkel in een
   cirkel. Nu een kaal icoon met een dikkere lijn, zodat je in één oogopslag
   ziet of er start staat (driehoekje) of wissel (twee pijlen). */
.ss-taaktimerknop svg{width:15px; height:15px}
.ss-taaktimerknop:hover{
  background:color-mix(in srgb,var(--kleur,var(--ss-accent,#daea09)) 28%,var(--ss-kaart-2));
  border-color:color-mix(in srgb,var(--kleur,var(--ss-accent,#daea09)) 55%,var(--ss-lijn));
  color:var(--ss-inkt);
}
.ss-taaktimerknop.is-bezig{
  width:auto; padding:0 11px; color:var(--ss-inkt);
  background:color-mix(in srgb,var(--ss-accent,#daea09) 30%,var(--ss-kaart-2));
  border-color:color-mix(in srgb,var(--ss-accent,#daea09) 55%,var(--ss-lijn));
}
.ss-taaktimerstip{
  width:7px; height:7px; border-radius:50%; background:#ea4ca7; flex:none;
  animation:ss-taaktimerpuls 1.6s ease-in-out infinite;
}
@keyframes ss-taaktimerpuls{0%,100%{opacity:1}50%{opacity:.35}}
body[data-beweging="uit"] .ss-taaktimerstip{animation:none}
@media (prefers-reduced-motion:reduce){.ss-taaktimerstip{animation:none}}
@media (max-width:760px){
  .ss-taaktimerknop{width:28px; height:28px}
}

/* De dag als lijst onder het raster: leesbaar, ook bij korte registraties. */
.tijd-dagrij{align-items:center}
.tijd-dagtijd{
  flex:none; min-width:84px; display:flex; flex-direction:column; line-height:1.25;
  font-size:var(--tekst-s,12.5px); font-weight:600; color:var(--ss-inkt);
  font-variant-numeric:tabular-nums;
}
.tijd-dagtijd i{font-style:normal; font-weight:500; font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht)}
.tijd-dagrij.loopt .tijd-dagtijd{color:var(--ss-inkt)}
.tijd-daglijst-totaal{color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px)}
@media (max-width:760px){
  .tijd-dagtijd{min-width:62px}
}

/* ===========================================================================
   v15.43.0 - DE STOPKNOP BLIJFT RECHTS STAAN
   Bij een lopende timer schoof de stopknop mee naar links, omdat de zwarte
   balk alleen zo breed werd als zijn inhoud. De startknop staat wél altijd
   helemaal rechts. Nu allebei: de tekst links, de klok ernaast, en de knop
   tegen de rechterrand - zodat je hem op dezelfde plek blijft zoeken.
   =========================================================================== */
.time-live{
  width:100%; flex-wrap:nowrap;
  /* dezelfde binnenmarge als de startbalk, anders staat de stopknop zes pixels
     verder naar binnen dan de startknop en zie je dat hij verspringt */
  padding:var(--ruimte-4,16px);
}
.time-live > div:first-child{flex:1 1 auto; min-width:0}
.time-live > div:first-child b,
.time-live > div:first-child small{
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.time-live .running-time-adjust{flex:none; margin-left:auto}
.time-live > form:last-child{flex:none}
.time-live .btn.timer-stop{white-space:nowrap}
@media (max-width:780px){
  .time-live{flex-wrap:wrap; gap:var(--ruimte-3,12px)}
  .time-live .running-time-adjust{margin-left:0}
  .time-live > form:last-child{margin-left:auto}
}

/* ===========================================================================
   v15.44.0 - OPZOEKEN OP HET KLANTFORMULIER
   =========================================================================== */
.ss-opzoekrij{display:flex; gap:8px; align-items:center}
.ss-opzoekrij input{flex:1 1 auto; min-width:0}
.ss-opzoekrij .btn{flex:none; white-space:nowrap}
.ss-opzoekuitkomst{
  display:block; margin-top:6px; min-height:1em;
  font-size:var(--tekst-xs,11.5px); line-height:1.5; color:var(--ss-zacht);
}
.ss-opzoekuitkomst.is-raak{color:var(--ss-inkt); font-weight:600}
.ss-opzoekuitkomst.is-raak::before{content:"✓ "; }
.ss-opzoekuitkomst.is-mis{color:var(--ss-inkt)}
.ss-opzoekuitkomst.is-mis::before{content:"! "; font-weight:700}
.ss-opzoekuitkomst.is-bezig{opacity:.7; font-style:italic}
[data-bezig="1"]{opacity:.6; cursor:progress}

/* ===========================================================================
   v15.45.0 - VIER DINGEN DIE JE OVER JEZELF WIL WETEN
   Alles getekend met css en een streepje svg. Geen grafiekenbibliotheek: die
   zou elke pagina zwaarder maken voor vier plaatjes die je een paar keer per
   jaar bekijkt.
   =========================================================================== */
.iz-ritme,.iz-wolk,.iz-kans,.iz-watals{margin:0 0 var(--ruimte-5,22px)}
.iz-voet{
  margin:var(--ruimte-3,12px) 0 0; color:var(--ss-zacht);
  font-size:var(--tekst-xs,11.5px); line-height:1.6;
}
.iz-waarschuwing{
  margin:0 0 var(--ruimte-3,12px); padding:10px 14px;
  background:color-mix(in srgb,#f08d0c 14%,var(--ss-kaart-2));
  border-radius:var(--ss-r-klein,14px);
  color:var(--ss-inkt); font-size:var(--tekst-xs,11.5px); line-height:1.6;
}

/* --- het werkritme --- */
.iz-ritme-raster{
  display:grid; grid-template-columns:28px repeat(24,1fr); gap:2px;
  align-items:center;
}
.iz-ritme-uur,.iz-ritme-dag{
  font-size:9px; color:var(--ss-zacht); text-align:center; line-height:1;
  font-variant-numeric:tabular-nums;
}
.iz-ritme-dag{text-align:left; font-size:var(--tekst-xs,11.5px); font-weight:600; color:var(--ss-inkt)}
.iz-ritme-vak{
  aspect-ratio:1; border-radius:3px;
  background:color-mix(in srgb,var(--ss-inkt) 5%,var(--ss-kaart-2));
}
.iz-ritme-vak.heeft{
  background:color-mix(in srgb,var(--ss-accent,#daea09) calc(var(--vol) * 85%),color-mix(in srgb,#a9a8ef 40%,var(--ss-kaart-2)));
}

/* --- de puntenwolk --- */
.iz-wolk-vlak{
  position:relative; height:280px; margin-top:var(--ruimte-2,8px);
  background:var(--ss-kaart-2); border-radius:var(--ss-r-klein,14px);
  overflow:hidden;
}
.iz-wolk-vlak svg{position:absolute; inset:0; width:100%; height:100%}
.iz-wolk-doel{stroke:var(--ss-zacht); stroke-width:.4; stroke-dasharray:2 2; vector-effect:non-scaling-stroke}
.iz-wolk-doellabel{
  position:absolute; right:10px; top:8px;
  font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht);
}
.iz-stip{
  position:absolute; width:13px; height:13px; margin:-6px 0 0 -6px;
  border-radius:50%; border:2px solid var(--ss-kaart-2);
  transition:transform .12s ease;
}
.iz-stip:hover{transform:scale(1.6); z-index:3}
.iz-stip.is-boven{background:#78c7a3}
.iz-stip.is-onder{background:#ea4ca7}
.iz-wolk-assen{
  display:flex; justify-content:space-between; margin-top:6px;
  font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht);
}

/* --- de offertekans --- */
.iz-kansbalken{display:flex; flex-direction:column; gap:10px}
.iz-kansrij{
  display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr) 3rem;
  gap:10px; align-items:center;
}
.iz-kansrij small{grid-column:1 / -1; margin-top:-4px; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px)}
.iz-kansrij.is-leeg{opacity:.55}
.iz-kanslabel{font-size:var(--tekst-s,12.5px); color:var(--ss-inkt); font-weight:600}
.iz-kansbalk{
  height:12px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb,var(--ss-inkt) 8%,var(--ss-kaart-2));
}
.iz-kansbalk > span{
  display:block; height:100%; width:var(--vol,0%);
  border-radius:999px; background:#78c7a3;
  transition:width .5s cubic-bezier(.2,.7,.3,1);
}
body[data-beweging="uit"] .iz-kansbalk > span{transition:none}
@media (prefers-reduced-motion:reduce){.iz-kansbalk > span{transition:none}}
.iz-kansgetal{
  text-align:right; font:600 var(--tekst-m,14px)/1 var(--heading-font);
  color:var(--ss-inkt); font-variant-numeric:tabular-nums;
}
.iz-kansuitkomst,.iz-watals-uitkomst{
  display:flex; flex-wrap:wrap; gap:var(--ruimte-4,16px);
  margin-top:var(--ruimte-4,16px); padding-top:var(--ruimte-4,16px);
  border-top:1px solid var(--ss-lijn);
}
.iz-kansuitkomst > div,.iz-watals-uitkomst > div{flex:1 1 9rem; min-width:0}
.iz-kansuitkomst small,.iz-watals-uitkomst small{
  display:block; color:var(--ss-zacht);
  font-size:var(--tekst-xs,11.5px); text-transform:uppercase; letter-spacing:.06em;
}
.iz-kansuitkomst strong,.iz-watals-uitkomst strong{
  display:block; margin-top:3px;
  font:600 var(--tekst-l,16px)/1.2 var(--heading-font); color:var(--ss-inkt);
  font-variant-numeric:tabular-nums;
}
.iz-kansuitkomst .is-hoofd strong,.iz-watals-uitkomst .is-hoofd strong{font-size:var(--tekst-xl,19px)}
[data-watals-verschil].is-meer{color:#2f7d58}
[data-watals-verschil].is-minder{color:#b3356f}
:root[data-theme="dark"] [data-watals-verschil].is-meer{color:#78c7a3}
:root[data-theme="dark"] [data-watals-verschil].is-minder{color:#ea4ca7}

/* --- de wat-als-schuiven --- */
.iz-watals-regels{display:grid; gap:var(--ruimte-4,16px); grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.iz-watals-regels label{display:flex; flex-direction:column; gap:6px; min-width:0}
.iz-watals-regels label > span{
  font-size:var(--tekst-s,12.5px); color:var(--ss-zacht); font-weight:600;
}
.iz-watals-regels label > span b{color:var(--ss-inkt)}
.iz-watals-regels label > small{color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px)}
.iz-watals-regels input[type="range"]{
  width:100%; accent-color:var(--ss-accent,#daea09); height:26px; cursor:pointer;
}
@media (max-width:700px){
  .iz-wolk-vlak{height:220px}
  .iz-ritme-raster{grid-template-columns:24px repeat(24,1fr); gap:1px}
  .iz-kansrij{grid-template-columns:minmax(0,1fr) 3rem}
  .iz-kanslabel{grid-column:1 / -1}
}

/* --- het ringetje met de klantstand --- */
.ss-ring{
  flex:none; position:relative; display:inline-grid; place-items:center;
  border-radius:50%;
  background:conic-gradient(var(--ring) var(--vol,0%), color-mix(in srgb,var(--ss-inkt) 10%,var(--ss-kaart-2)) 0);
}
.ss-ring i{
  display:block; border-radius:50%; background:var(--ss-kaart);
}
.ss-ring-klein{width:22px; height:22px}
.ss-ring-klein i{width:14px; height:14px}
.ss-ring-groot{width:30px; height:30px}
.ss-ring-groot i{width:19px; height:19px}
.ss-ring::after{
  content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--ring);
}
.ss-ring-groot::after{width:9px; height:9px}
.ss-gezondheid b{display:flex; align-items:center; gap:8px}
.ss-gezondheid em{
  display:block; margin-top:2px; font-style:normal;
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.4;
}

/* ===========================================================================
   v15.46.0 - UREN UIT JE AGENDA, EEN KLEIN FEESTJE, EN STIL WERKEN
   =========================================================================== */

/* --- voorstellen uit je agenda --- */
.ss-urenrij{align-items:center}
.ss-urenvoet{color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px)}
.ss-urenknop,.ss-urenweg{flex:none; display:inline-flex}
.ss-urenknop .btn.mini{white-space:nowrap}

/* --- het feestje bij een gehaald dagdoel --- */
.ss-feest{
  position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden;
}
.ss-feest span{
  position:absolute; top:-6vh; left:var(--links);
  width:9px; height:14px; border-radius:2px;
  background:var(--kleurtje); opacity:0;
  animation:ss-feestval var(--traag) cubic-bezier(.3,.6,.6,1) var(--wacht) 1 forwards;
}
@keyframes ss-feestval{
  0%  {opacity:0; transform:translateY(0) rotate(0)}
  10% {opacity:1}
  85% {opacity:1}
  100%{opacity:0; transform:translateY(106vh) rotate(var(--draai))}
}
body[data-beweging="uit"] .ss-feest{display:none}
@media (prefers-reduced-motion:reduce){.ss-feest{display:none}}

/* --- stiltemodus --- */
body.ss-stil .sidebar,
body.ss-stil .topbar,
body.ss-stil .ss-rail,
body.ss-stil .ss-getallen,
body.ss-stil .ss-groet-knoppen,
body.ss-stil .ss-lade,
body.ss-stil .ss-dagknoprij,
body.ss-stil .pagina-header,
body.ss-stil .ss-tabs,
body.ss-stil .ss-sorteer,
body.ss-stil .ss-lijstvoet,
body.ss-stil .ss-rij-acties,
body.ss-stil .ss-datum,
body.ss-stil .ss-dagzin{display:none !important}
body.ss-stil .main{padding-top:var(--ruimte-6,32px)}
body.ss-stil .ss-werkblad{grid-template-columns:minmax(0,1fr) !important}
body.ss-stil .app{display:block}
body.ss-stil .ss-rij{opacity:.45; transition:opacity .2s ease}
body.ss-stil .ss-rij:hover,
body.ss-stil .ss-rij:focus-within,
body.ss-stil .ss-rij.is-nu{opacity:1}
body.ss-stil .ss-nu{position:sticky; top:12px; z-index:40}
.ss-stilknop{
  position:fixed; right:18px; bottom:18px; z-index:210;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  background:var(--ss-inkt); color:var(--ss-bureau);
  border:0; box-shadow:0 10px 26px rgba(0,0,0,.3);
  font-family:var(--body-font); font-size:var(--tekst-s,12.5px); font-weight:600;
}
.ss-stilknop:hover{opacity:.9}
body:not(.ss-stil) .ss-stilknop{display:none}
@media print{.ss-feest,.ss-stilknop{display:none}}

/* ===========================================================================
   v15.46.0 - DE NIEUWE INZICHTEN KREGEN GEEN BINNENMARGE
   Een .card heeft zelf geen padding; elk blok zet zijn eigen binnenruimte. Dat
   wist ik niet toen ik deze vier erbij zette, dus stonden de warmtekaart, de
   puntenwolk, de balken en de schuiven strak tegen de rand van hun vak. Nu
   staan ze net zo ver van de rand als alles eromheen.
   =========================================================================== */
.iz-ritme,.iz-wolk,.iz-kans,.iz-watals{padding-bottom:var(--ruimte-5,22px)}
.iz-ritme > :not(.card-head),
.iz-wolk  > :not(.card-head),
.iz-kans  > :not(.card-head),
.iz-watals> :not(.card-head){
  margin-left:var(--ruimte-5,22px);
  margin-right:var(--ruimte-5,22px);
}
.iz-wolk-vlak{margin-top:var(--ruimte-2,8px)}
@media (max-width:700px){
  .iz-ritme,.iz-wolk,.iz-kans,.iz-watals{padding-bottom:var(--ruimte-4,16px)}
  .iz-ritme > :not(.card-head),
  .iz-wolk  > :not(.card-head),
  .iz-kans  > :not(.card-head),
  .iz-watals> :not(.card-head){
    margin-left:var(--ruimte-4,16px);
    margin-right:var(--ruimte-4,16px);
  }
}

/* ===========================================================================
   v15.46.0 - JOUW JAAR
   Een eigen pagina zonder menu, gemaakt om te lezen en om af te drukken.
   =========================================================================== */
.mj-body{background:var(--ss-bureau); color:var(--ss-inkt); margin:0}
.mj{max-width:60rem; margin:0 auto; padding:var(--ruimte-6,32px) var(--ruimte-5,22px) var(--ruimte-6,32px)}
.mj-kop{margin-bottom:var(--ruimte-6,32px)}
.mj-kop small{
  display:block; color:var(--ss-zacht); letter-spacing:.14em;
  text-transform:uppercase; font-size:var(--tekst-xs,11.5px);
}
.mj-kop h1{
  margin:6px 0 4px; font:700 clamp(2rem,6vw,3.4rem)/1 var(--heading-font);
  letter-spacing:-.03em;
}
.mj-kop h1 span{color:var(--ss-accent,#daea09)}
.mj-kop p{margin:0; color:var(--ss-zacht); font-size:var(--tekst-m,14px)}
.mj-jaren{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--ruimte-4,16px)}
.mj-jaren a{
  padding:6px 13px; border-radius:999px; text-decoration:none;
  background:var(--ss-kaart-2); color:var(--ss-zacht);
  border:1px solid var(--ss-lijn);
  font-size:var(--tekst-xs,11.5px); font-weight:600;
}
.mj-jaren a.is-nu{background:var(--ss-inkt); color:var(--ss-bureau); border-color:var(--ss-inkt)}
.mj-jaren a:hover{color:var(--ss-inkt)}
.mj-jaren a.is-nu:hover{color:var(--ss-bureau)}

.mj-cijfers{
  display:grid; gap:var(--ruimte-3,12px);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin-bottom:var(--ruimte-6,32px);
}
.mj-cijfers > div{
  padding:var(--ruimte-4,16px); border-radius:var(--ss-r,20px);
  background:var(--ss-kaart); border:1px solid var(--ss-lijn);
}
.mj-cijfers small{
  display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  text-transform:uppercase; letter-spacing:.07em;
}
.mj-cijfers strong{
  display:block; margin:4px 0 2px;
  font:700 clamp(1.3rem,3vw,1.9rem)/1.1 var(--heading-font);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.mj-cijfers span{color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.5}

.mj-blok{margin-bottom:var(--ruimte-6,32px)}
.mj-blok h2{
  margin:0 0 var(--ruimte-4,16px);
  font:600 var(--tekst-xl,19px)/1.2 var(--heading-font); letter-spacing:-.02em;
}
.mj-zin{margin:var(--ruimte-3,12px) 0 0; color:var(--ss-zacht); font-size:var(--tekst-s,12.5px)}

.mj-maanden{display:grid; grid-template-columns:repeat(12,1fr); gap:6px; align-items:end; height:170px}
.mj-maand{display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:6px}
.mj-staaf{
  display:block; height:var(--h); border-radius:7px 7px 3px 3px;
  background:color-mix(in srgb,var(--ss-accent,#daea09) 45%,var(--ss-kaart-2));
}
.mj-maand.is-top .mj-staaf{background:var(--ss-accent,#daea09)}
.mj-maand small{text-align:center; color:var(--ss-zacht); font-size:10px}

.mj-klanten{display:flex; flex-direction:column; gap:8px}
.mj-klant{display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr) 4rem; gap:12px; align-items:center}
.mj-klantnaam{font-size:var(--tekst-s,12.5px); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mj-klantbalk{height:12px; border-radius:999px; background:var(--ss-kaart-2); overflow:hidden}
.mj-klantbalk > span{display:block; height:100%; width:var(--vol,0%); border-radius:999px; background:var(--kleur,#daea09)}
.mj-klanturen{text-align:right; color:var(--ss-zacht); font-size:var(--tekst-s,12.5px); font-variant-numeric:tabular-nums}

.mj-soorten{display:grid; gap:var(--ruimte-3,12px); grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
.mj-soorten > div{
  padding:var(--ruimte-3,12px) var(--ruimte-4,16px);
  background:var(--ss-kaart-2); border-radius:var(--ss-r-klein,14px);
}
.mj-soorten strong{display:block; font:700 var(--tekst-l,16px)/1 var(--heading-font); font-variant-numeric:tabular-nums}
.mj-soorten span{display:block; margin-top:3px; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px)}

.mj-lijst{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.mj-lijst li{
  padding:var(--ruimte-3,12px) var(--ruimte-4,16px);
  border-left:4px solid var(--kleur,#daea09);
  background:var(--ss-kaart); border-radius:var(--ss-r-klein,14px);
}
.mj-lijst b{display:block; font-size:var(--tekst-m,14px)}
.mj-lijst small{display:block; margin-top:2px; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px)}

.mj-voet{
  border-top:1px solid var(--ss-lijn); padding-top:var(--ruimte-4,16px);
  color:var(--ss-zacht);
}
.mj-voet p{margin:0 0 4px; font-size:var(--tekst-s,12.5px); font-weight:600; color:var(--ss-inkt)}
.mj-voet small{font-size:var(--tekst-xs,11.5px); line-height:1.6}

@media (max-width:620px){
  .mj-maanden{height:130px; gap:3px}
  .mj-klant{grid-template-columns:minmax(0,1fr) 3.5rem}
  .mj-klantbalk{grid-column:1 / -1}
}
@media print{
  .mj-jaren{display:none}
  .mj{max-width:none; padding:0}
  .mj-body{background:#fff}
}
.iz-mijnjaar{margin:0 0 var(--ruimte-5,22px)}

/* v15.47.0 - welke Google-rechten staan aan, en welke niet. */
.ss-googlerechten{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px}
.ss-googlerechten span{font-size:var(--tekst-xs,11.5px); white-space:nowrap}
.ss-googlerechten .is-aan{color:var(--ss-inkt)}
.ss-googlerechten .is-uit{color:var(--ss-zacht); opacity:.8}

/* v15.48.0 - "ONGEDAAN MAKEN" IN DE MELDING RECHTSONDER.
   Let op de pointer-events: de hele meldingenlaag staat bewust op "none", zodat
   een melding nooit een knop eronder blokkeert. Een knop ín de melding moet dus
   zelf weer op "auto" - anders staat hij er wel, maar kun je er niet op
   klikken. Precies dat ging hier mis en de test ving het.
   En een melding mét knop mag hoger worden dan de vaste pilhoogte. */
.ss-live-melding{display:flex; align-items:center; gap:12px}
.ss-live-melding:has(.ss-live-terug){
  pointer-events:auto; height:auto; padding:7px 7px 7px 16px;
}
.ss-live-terug{
  pointer-events:auto;
  flex:none; cursor:pointer; white-space:nowrap;
  padding:6px 13px; border-radius:999px;
  background:var(--ss-accent,#daea09); color:#16181a; border:0;
  font-family:var(--body-font); font-size:var(--tekst-xs,11.5px); font-weight:700;
}
.ss-live-terug:hover{opacity:.88}
.ss-live-terug:disabled{opacity:.5; cursor:default}

/* Op een smal scherm paste de melding met knop er niet meer naast: een lange
   taaktitel plus "Ongedaan maken" is breder dan je telefoon. Daar mag hij dus
   over twee regels, en nooit breder dan het scherm. */
@media (max-width:560px){
  .ss-live-meldingen{left:clamp(10px,3vw,16px); align-items:stretch}
  .ss-live-melding{max-width:100%; white-space:normal; line-height:1.4}
  .ss-live-melding:has(.ss-live-terug){
    flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:10px 12px;
  }
  .ss-live-melding:has(.ss-live-terug) > span{flex:1 1 100%}
}

/* v15.48.0 — de Drive-backupmap zelf benoemen ------------------------------ */
.ss-drivemap{
  margin:16px 0 0;
  padding:14px 16px 15px;
  border:1px solid var(--ss-lijn);
  border-radius:var(--radius,12px);
  background:var(--ss-kaart-2);
}
.ss-drivemap-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin:0; }
.ss-drivemap-form .field{ margin:0; min-width:220px; flex:1 1 220px; }
.ss-drivemap p{ margin:10px 0 0; max-width:70ch; }
.ss-drivemap-link{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:12px 0 0; }
.ss-drivemap-link form{ margin:0; }
@media (max-width:560px){
  .ss-drivemap{ padding:13px 13px 14px; }
  .ss-drivemap-form .field{ min-width:0; flex:1 1 100%; }
  .ss-drivemap-form > .btn{ width:100%; }
}

/* v15.49.0 — meldingen die je kunt wegklikken --------------------------- */
.ss-melding{ position:relative; padding-right:56px; }
.ss-melding-weg{ position:absolute; top:8px; right:8px; margin:0; }
.ss-melding-kruis{
  width:30px; height:30px; display:grid; place-items:center;
  border:0; background:transparent; border-radius:999px;
  color:var(--ss-zacht); cursor:pointer; opacity:.7;
  transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.ss-melding-kruis:hover,
.ss-melding-kruis:focus-visible{ opacity:1; color:var(--ss-inkt); background:color-mix(in srgb,var(--ss-inkt) 10%,transparent); }
.ss-melding.gaat-weg{ opacity:0; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease; }

.ss-meldingenlijst ul{ list-style:none; margin:0; padding:0; }
.ss-meldingenlijst li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:38px; padding:7px 0; border-bottom:1px solid var(--ss-lijn);
}
.ss-meldingenlijst li:last-child{ border-bottom:0; }
.ss-meldingenlijst li form{ margin:0; flex:none; }
.ss-meldingenlijst > form{ margin:12px 0 0; }
@media (max-width:560px){
  .ss-melding{ padding-right:54px; }
  .ss-meldingenlijst li{ align-items:flex-start; }
  .ss-meldingenlijst li span{ flex:1 1 auto; }
}

/* v15.49.0 — de dagknop staat nu in de groetregel ------------------------ */
.ss-groet-knoppen .ss-dagknop{ flex:0 0 auto; }
@media (max-width:560px){
  .ss-groet-knoppen .ss-dagknop{ flex:1 1 100%; justify-content:center; }
}

/* v15.49.0 — het datumveld liep uit het paneel op tablet ------------------
   Een native date-veld heeft een eigen minimumbreedte: de datumtekst plus de
   44px die we rechts vrijhouden voor het kalendericoon. Op een iPad is die
   tekst breder dan op een laptop, en omdat niets zei dat het veld mocht
   krimpen, duwde het zichzelf het paneel uit. min-width:0 geeft het die
   toestemming; max-width houdt hem binnen de lijn. */
.ss-datumpaneel{ width:min(280px,calc(100vw - 32px)); }
/* op een telefoon hangt het paneel vaak aan een knop die niet rechts in beeld
   staat; wordt het dan breder, dan schuift het de linkerkant uit. Daar blijft
   het op de oude maat. */
@media (max-width:560px){ .ss-datumpaneel{ width:min(260px,calc(100vw - 32px)); } }
.ss-datumpaneel input[type="date"]{
  min-width:0; max-width:100%; display:block;
}
.ss-datumpaneel form{ min-width:0; }
.ss-datumsnel{ min-width:0; }
.ss-datumknop{ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* v15.49.0 — dingen die uit hun vak liepen -------------------------------
   Eén oorzaak, twee plekken. Een vakje in een grid mag standaard niet kleiner
   worden dan zijn langste woord - en bij ons is dat een projectnaam als
   "120101001 · Lavintus Openhaarden · Lavintus Openhaarden Website". Dat vakje
   duwde zichzelf dan dwars door de rand van de kaart heen. min-width:0 geeft
   het toestemming om wél te krimpen; de tekst eindigt netjes met … */
.form-grid > *{ min-width:0; }
.field{ min-width:0; }
.ss-projectkeuze{ min-width:0; max-width:100%; }
.ss-keuze-gekozen{
  min-width:0; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* dezelfde oorzaak in een taakregel op een smalle dashboardkaart */
.tasks li{ min-width:0; }
.tasks li > *{ min-width:0; }
.tasks li time{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inline-status,
.inline-priority{ min-width:0; max-width:100%; }
.inline-status select,
.inline-priority select{ min-width:0; max-width:100%; }

/* v15.49.0 — een smalle kaart op een breed scherm --------------------------
   De taakregel op het dashboard heeft vier kolommen. Op een breed scherm past
   dat; in de smalle middenkaart van een iPad in liggende stand niet, en dan
   liepen de statuspil en de datum dwars door de rand van de kaart.

   Een gewone media query helpt hier niet: het scherm ís breed, de kaart is
   smal. Daarom kijkt deze regel naar de kaart zelf (@container). Kan een
   browser dat niet, dan gebeurt er niets en blijft alles zoals het was. */
.task-widget{ container-type:inline-size; }
@container (max-width:470px){
  .task-widget .tasks li,
  .dashboard-grid .task-widget .tasks li{ grid-template-columns:minmax(0,1fr) auto; }
  .task-widget .tasks li time,
  .dashboard-grid .task-widget .tasks li time{ grid-column:1 / -1; justify-self:start; }
  /* een oudere regel zette hier vaste breedtes (138px, 90px, 96px) voor
     schermen onder 1180px. Precies die maten passen niet in een smalle kaart;
     hier mogen ze weer meebewegen. */
  .dashboard-grid .task-widget .task-inline-status{ width:auto; min-width:0; max-width:100%; }
  .dashboard-grid .task-widget .priority{ width:auto; min-width:0; max-width:100%; }
  .task-widget .tasks li .task-inline-status select{ min-width:0; max-width:100%; }
}

/* Drie keuzevakjes naast elkaar in een kolom van 300px worden drie vakjes
   onder elkaar. Dezelfde regel stond al voor smalle schermen; nu kijkt hij
   naar het vak in plaats van naar het scherm. */
.form-card:has(.auto-artifact-options){ container-type:inline-size; }
@container (max-width:520px){
  .auto-artifact-options{ grid-template-columns:1fr; }
}
.auto-artifact-options{ min-width:0; }
.auto-artifact-options label{ min-width:0; }
.auto-artifact-options label span{ min-width:0; overflow-wrap:anywhere; }

/* v15.49.0 — het vijfde kengetal viel van de rij af ----------------------
   De rij heeft vijf gelijke kolommen, maar een kolom mag standaard niet
   smaller worden dan zijn langste woord ("Projecten lopend"). Samen waren ze
   860 pixels breed in een rij van 729, en omdat de rij zijn randen netjes
   afknipt verdween "Meetings" gewoon uit beeld. De kolommen zelf blijven
   zoals ze waren; ze mogen nu alleen wél krimpen. */
.kpi-row > *{ min-width:0; }
.kpi-row b,
.kpi-row strong,
.kpi-row p,
.kpi-row small{ min-width:0; overflow-wrap:anywhere; }

/* ===========================================================================
   v15.50.0 — DE WEBAPP OP JE BEGINSCHERM
   Als webapp loopt het scherm door tot achter de klok en de batterij van je
   telefoon - dat is precies wat "black-translucent" betekent en daarom ziet
   het er ook zo rustig uit. Alleen stond er nergens dat de pagina onder die
   strook moest beginnen, dus viel de bovenste regel ("Goedenavond, Suzanne",
   "Werk", "Tijdregistratie") er precies achter.

   env(safe-area-inset-top) is de hoogte van die strook: op een iPhone met een
   eilandje zo'n 50 pixels, op een toestel zonder 0. Staat de site gewoon in
   Safari, dan is hij 0 en verandert er dus niets.
   =========================================================================== */
@media (max-width:780px){
  .main{ padding-top:calc(26px + env(safe-area-inset-top,0px)); }
}

/* ---------------------------------------------------------------------------
   v15.50.0 — TAKEN OP MOBIEL: KLEINER LETTERTYPE
   De titel van een taak stond op 17,6px terwijl MOBIEL.txt voor een kaartje
   15px voorschrijft - vandaar dat Taken zoveel groter oogde dan Projecten.
   Nu volgt hij gewoon dat blad: titel 15px, bijregel 11,5px.
   --------------------------------------------------------------------------- */
@media (max-width:780px){
  .ss-rij .ss-titel{ font-size:var(--tekst-m,15px); line-height:1.35; }
  .ss-rij .ss-onder,
  .ss-rij .ss-stille-link{ font-size:var(--tekst-xs,11.5px); line-height:1.4; }
  .ss-rij .ss-wacht-bij{ font-size:var(--tekst-xs,11.5px); }
}

/* v15.50.0 — knoppen die alleen op een groot scherm nut hebben ------------- */
/* display:contents laat de drie knoppen gewoon losse knoppen blijven in de
   knoppenrij; het omhulsel bestaat alleen om ze samen te kunnen verbergen. */
.ss-alleen-breed{ display:contents; }
@media (max-width:780px){
  .ss-alleen-breed{ display:none !important; }
}

/* v15.50.0 — de snelstarter is weg; alleen de focusblokken blijven --------- */
.tijd-alleenfocus{ justify-content:flex-start; }
.tijd-alleenfocus .tijd-focus{ margin-left:0; }

/* ===========================================================================
   v15.50.0 — DE WEEKAFSLUITING EN GEREEDSCHAP
   Allebei leunen ze op de kaarten van de dagafsluiting, zodat er geen derde
   manier bij komt om hetzelfde te tonen. Alleen wat écht nieuw is staat hier.
   =========================================================================== */
.ss-weekstaven{
  list-style:none; margin:0 var(--ruimte-5,22px) var(--ruimte-4,16px);
  padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px;
}
.ss-weekstaven li{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.ss-weekstaaf{
  width:100%; height:52px; display:flex; align-items:flex-end;
  border-radius:7px; background:var(--ss-kaart-2); overflow:hidden;
}
.ss-weekstaaf > span{
  width:100%; height:var(--hoog,0%); border-radius:7px;
  background:var(--ss-accent,#daea09);
}
.ss-weekstaven small{ font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht); }
.ss-weekstaven b{ font-size:var(--tekst-xs,11.5px); font-weight:600; }
.ss-weekstaven li.is-vandaag small{ color:var(--ss-inkt); font-weight:700; }
.ss-weekstaven li.is-vandaag .ss-weekstaaf{ outline:1px solid var(--ss-lijn); }

.ss-weekkopje{
  margin:var(--ruimte-4,16px) var(--ruimte-5,22px) 2px;
  font-size:var(--tekst-xs,11.5px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ss-zacht);
}
.ss-daguur.is-laat{ color:var(--ss-letop-kleur,#ea4ca7); font-weight:600; }
.ss-weekbedrag{
  margin:0 var(--ruimte-5,22px) var(--ruimte-3,12px);
  display:flex; flex-direction:column; gap:2px;
}
.ss-weekbedrag b{ font-size:var(--tekst-l,19px); }
.ss-weekbedrag span{ font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht); }
.ss-weekknop{ margin:var(--ruimte-4,16px) var(--ruimte-5,22px) var(--ruimte-5,22px); }

/* Gereedschap: één soort regel, groot genoeg om met je duim te raken. */
.ss-gereedschap{ display:grid; gap:var(--ruimte-4,16px); }
.ss-gereedlijst{ list-style:none; margin:0; padding:0 var(--ruimte-5,22px) var(--ruimte-4,16px); }
.ss-gereedlijst li + li{ border-top:1px solid var(--ss-lijn); }
.ss-gereedlijst a{
  display:grid; grid-template-columns:38px minmax(0,1fr) 16px;
  align-items:center; gap:13px; min-height:60px; padding:11px 0;
  color:inherit; text-decoration:none;
}
.ss-gereedicoon{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:11px; background:var(--ss-kaart-2); color:var(--ss-inkt);
}
.ss-gereedlijst b{ display:block; font-size:var(--tekst-m,15px); }
.ss-gereedlijst small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.4; }
.ss-gereedlijst a:hover .ss-gereedicoon{ background:color-mix(in srgb,var(--ss-inkt) 10%,var(--ss-kaart-2)); }
.ss-gereedlijst a > svg:last-child{ color:var(--ss-zacht); }

@media (max-width:560px){
  .ss-weekstaven{ margin-inline:var(--ruimte-4,16px); gap:4px; }
  .ss-weekstaaf{ height:44px; }
  .ss-weekkopje,.ss-weekbedrag,.ss-weekknop{ margin-inline:var(--ruimte-4,16px); }
  .ss-gereedlijst{ padding-inline:var(--ruimte-4,16px); }
}

/* ---------------------------------------------------------------------------
   v15.51.0 — DE NOTITIE ONDER EEN TAAK HING LOS OP HET DASHBOARD
   De notitie hoort als een laatje ónder zijn taak te zitten: hij heeft daarom
   alleen onderaan ronde hoeken en een margin-top van -4px, zodat hij tegen de
   taak aan schuift.

   Op het dashboard werkte dat op een telefoon niet. Daar is de lijst een
   flex-kolom met 16px tussenruimte, en die ruimte zet je niet weg met een
   negatieve marge van 4px: tel de 8px onder de taak erbij op en je zit op
   20px. Op een laptop is diezelfde lijst een gewoon blok, en daar klopte het
   wel - vandaar dat je het alleen op je telefoon zag.

   Hier zeggen we het dus in de taal van die flex-kolom: de taak die een
   notitie heeft krijgt geen marge eronder, en de notitie trekt de 16px
   tussenruimte zelf weg. De grens ligt op 1100px, want daar schakelt het
   werkblad van kolommen naar een flex-kolom (zie v1620.css). De onderste hoeken van de taak gaan dicht, zodat het één geheel is
   in plaats van twee kaartjes met een kier.
   --------------------------------------------------------------------------- */
/* v15.52.0: deze regel gold alleen voor het dashboard onder 1100px. Hij is
   vervangen door de regel verderop, die overal geldt - ook op je laptop, waar
   de notitie nog 4px van zijn taak af stond met een ronde hoek ertussen. */

/* v15.51.0 — geen timer omdat het project af is ---------------------------
   Geen weggelaten knop meer, maar een rustig teken op dezelfde plek: zo blijft
   de regel even breed en weet je waaróm je er geen uren op kunt schrijven. */
.ss-taaktimerknop.is-dicht{
  opacity:.4; cursor:pointer;
  border-style:dashed;
}
.ss-taaktimerknop.is-dicht:hover,
.ss-taaktimerknop.is-dicht:focus-visible{ opacity:.85; }

/* ===========================================================================
   v15.52.0 — DE TAAKKAART OP EEN TELEFOON, OPNIEUW INGEDEELD

   Op een breed scherm staat een taakregel op één rij en klopt dat. Op een
   telefoon viel diezelfde rij in stukken uiteen: de datum ergens links, de
   timer ernaast, de status rechts, en de drie knopjes daar weer onder. Veel
   lucht, weinig lijn.

   Nu is het een kaartje met drie rijen:

       datum                      kalender · potlood · prullenbak
       (o)  [tegel]  titel + regel eronder
       (▶ timer)                                   status

   De notitie blijft er gewoon onder hangen, zoals hij deed.
   =========================================================================== */
@media (max-width:780px){
  .ss-rij{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    grid-template-areas:
      "datum  datum  acties"
      "vink   tegel  vak"
      "timer  status status";
    align-items:center;
    column-gap:10px;
    row-gap:10px;
  }
  .ss-rij > .ss-afvink{ grid-area:vink; }
  .ss-rij > .ss-tegel{ grid-area:tegel; }
  .ss-rij > .ss-vak{ grid-area:vak; }
  .ss-rij > .ss-wanneer{ grid-area:datum; justify-self:start; }
  .ss-rij > .ss-rij-acties,
  .ss-rij > .ss-datumkies{ grid-area:acties; justify-self:end; }
  .ss-rij > .ss-taaktimer,
  .ss-rij > .ss-taaktimerknop{ grid-area:timer; justify-self:start; }
  .ss-rij > .inline-status,
  .ss-rij > .ss-wacht-bij{ grid-area:status; justify-self:end; }

  /* Een rij zonder datum of zonder knoppen mag die regel niet als lege
     ruimte laten staan. */
  .ss-rij:not(:has(> .ss-wanneer)):not(:has(> .ss-rij-acties)):not(:has(> .ss-datumkies)){
    grid-template-areas:
      "vink   tegel  vak"
      "timer  status status";
  }

  /* De startknop is het knopje dat je het vaakst raakt; die mag groter. */
  .ss-rij > .ss-taaktimer .ss-taaktimerknop,
  .ss-rij > .ss-taaktimerknop{
    width:40px; height:40px; border-radius:999px;
  }
  .ss-rij > .ss-taaktimer .ss-taaktimerknop svg,
  .ss-rij > .ss-taaktimerknop svg{ width:19px; height:19px; }
}

/* --- de overige punten van deze ronde ------------------------------------ */

/* 1. Een native datumveld dat zich niets aantrok van de breedte van zijn
      paneel. Op een iPhone rekende hij zijn padding bovenóp de 100% in plaats
      van erbinnen, en dan steekt hij er aan de rechterkant uit. Met
      border-box telt die padding weer mee en past hij altijd. */
.ss-datumpaneel input[type="date"]{
  box-sizing:border-box !important;
  display:block; width:100%; min-width:0; max-width:100%;
}

/* 2. De navraag ("ligt er nu nog iets bij iemand anders?") werd op een
      telefoon een halve meter hoog. De tekst had flex:1 1 220px, en in een
      kolom is die 220px een HOOGTE, niet een breedte. */
@media (max-width:760px){
  .ss-navraag-tekst{ flex:0 0 auto; }
  .ss-navraag input[name="wacht_op"]{ flex:0 0 auto; }
  .ss-navraag .btn{ width:100%; }
}

/* 3. De melding rechtsonder botste op de tabbalk en stond krap in zijn jasje. */
@media (max-width:780px){
  .ss-live-meldingen{ bottom:calc(86px + env(safe-area-inset-bottom,0px)); }
  .ss-live-melding{ padding:11px 14px; border-radius:var(--ss-r-klein,14px); }
  .ss-live-melding:has(.ss-live-terug){ padding:11px 11px 11px 14px; }
}

/* 4. Titel en onderschrift van een kaartkop stonden gecentreerd onder elkaar,
      waardoor "Je week" en "11 registraties" niet op één lijn begonnen. */
@media (max-width:780px){
  .card-head .head-title{ align-items:flex-start; text-align:left; }
  .card-head .head-title > *{ text-align:left; }
}

/* 5. Het beveiligingslogboek: kleinere waarden, en de apparaatnaam is nu kort
      (zie ss_apparaat_kort in lib.php) dus hij hoeft niet meer af te kappen. */
@media (max-width:780px){
  .table-wrap tbody td,
  .table-wrap tfoot td{ font-size:var(--tekst-s,12.5px); }
  .ua-cell,
  .table-wrap tbody td.ua-cell{
    max-width:100%; white-space:normal; overflow:visible;
    font-size:var(--tekst-xs,11.5px);
  }
}

/* 6. De focusblokken hoeven op een telefoon niet. */
@media (max-width:780px){
  .tijd-alleenfocus{ display:none; }
}

/* 7. De plusknop hoort rechtsboven naast de titel, niet eronder. Staat er een
      zoekveld in de kop, dan blijft die op zijn eigen regel. */
@media (max-width:780px){
  .ss-kop{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    column-gap:10px; align-items:start;
  }
  .ss-kop-titel{ grid-column:1; grid-row:1; }
  .ss-kop-acties{
    grid-column:2; grid-row:1;
    display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px;
  }
  .ss-kop:has(.ss-zoek){ grid-template-columns:minmax(0,1fr); }
  .ss-kop:has(.ss-zoek) .ss-kop-acties{
    grid-column:1; grid-row:2; justify-content:flex-start;
  }
}

/* 8. De herstelknop in de gewone flash. */
.flash{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.flash > span{ flex:1 1 auto; min-width:0; }
.flash-herstel{ margin:0; flex:none; }
.flash-herstel .btn{ white-space:nowrap; }

/* 9. De notitie hoort óók op Werk strak tegen zijn taak aan, en een taakkaart
      hoort er op Werk en op het dashboard hetzelfde uit te zien. De regel van
      v15.51.0 stond alleen in het werkblad van het dashboard; hier geldt hij
      overal waar een notitie onder een taak hangt. */
.ss-rij:has(+ .ss-notitieblok){
  margin-bottom:0;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.ss-notitieblok{ margin-top:0; }
/* In het werkblad van het dashboard is de lijst onder 1100px een flex-kolom
   met 16px tussenruimte; die moet de notitie zelf wegtrekken. */
@media (max-width:1100px){
  .ss-werkblad .ss-notitieblok{ margin-top:-16px; }
}

/* 10. DE ONDERBALK: HET ACTIEVE ICOONTJE ----------------------------------
   Het actieve tabblad kreeg een verloop van lila naar lime onder zijn
   icoontje - een restje van de oude stijl, en het enige verloop dat er nog
   in het hele CRM zat. Nu is het één vlak in je accentkleur, net als de
   pillen op de rest van de pagina. In het donker is dat lime, in het licht
   lila, want dat volgt vanzelf uit --ss-accent. */
@media (max-width:780px){
  .tabbalk-item:active{
    background:color-mix(in srgb,var(--ss-inkt) 7%,transparent);
  }
  .tabbalk-item.is-actief{ color:var(--ss-inkt); }
  .tabbalk-item.is-actief .tabbalk-icoon{
    background:color-mix(in srgb,var(--ss-accent,#daea09) 22%,transparent);
    color:var(--ss-inkt);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ss-accent,#daea09) 38%,transparent);
  }
  .tabbalk-item.is-actief .tabbalk-tekst{ font-weight:700; }
}

/* 11. De urenlijst op een projectpagina liep uit zijn kaart ----------------
   .tijd-lijst is een grid zonder opgegeven kolom, dus die kolom werd zo breed
   als de langste regel - en de omschrijving onder een registratie brak niet
   af. Bij een lange omschrijving duwde de lijst zich dwars door de kaart.
   Dezelfde oorzaak als bij de projectkiezer en de taakregel: een vakje in een
   raster mag standaard niet krimpen. */
.tijd-lijst{ grid-template-columns:minmax(0,1fr); }
.tijd-regel{ min-width:0; }
.tijd-regel-tekst small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===========================================================================
   v15.53.0 — DE ADVIESBLIK
   Leunt op de kaarten van de dagafsluiting, zodat er geen vierde manier bij
   komt om hetzelfde te tonen. Alleen wat écht nieuw is staat hier.
   =========================================================================== */
.ss-advies{ display:grid; gap:var(--ruimte-4,16px); }
.ss-advies-paar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ruimte-4,16px); }

.ss-advies-groot{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:0 var(--ruimte-5,22px) var(--ruimte-3,12px);
}
.ss-advies-groot b{ font-size:clamp(28px,6vw,40px); line-height:1; font-weight:600; }
.ss-advies-groot span{ font-size:var(--tekst-s,12.5px); line-height:1.5; min-width:0; }
.ss-advies-groot small{ color:var(--ss-zacht); }
.ss-advies-groot.is-letop b{ color:var(--ss-letop-kleur,#ea4ca7); }
.ss-advies-groot.is-kijk  b{ color:var(--ss-inkt); }
.ss-advies-groot.is-goed  b{ color:var(--ss-inkt); }

/* de klantverdeling als één rij blokjes op grootte */
.ss-advies-staaf{
  display:flex; gap:2px; height:12px; margin:0 var(--ruimte-5,22px) var(--ruimte-3,12px);
}
.ss-advies-staaf > span{
  flex:0 0 var(--deel,10%); min-width:3px; border-radius:3px;
  background:var(--kleur,var(--ss-accent,#daea09));
}
.ss-advies-balk{
  height:12px; border-radius:999px; overflow:hidden;
  margin:0 var(--ruimte-5,22px) var(--ruimte-3,12px);
  background:var(--ss-kaart-2);
}
.ss-advies-balk > span{ display:block; height:100%; width:var(--deel,0%); background:var(--ss-accent,#daea09); }

.ss-advies-regel{
  margin:0 var(--ruimte-5,22px) var(--ruimte-4,16px);
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.5; max-width:62ch;
}
.ss-advies-voet{
  margin:var(--ruimte-3,12px) var(--ruimte-5,22px) var(--ruimte-4,16px);
  padding-top:var(--ruimte-3,12px); border-top:1px solid var(--ss-lijn);
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.5; max-width:70ch;
}

/* de observaties */
.ss-obslijst{ list-style:none; margin:0; padding:0 var(--ruimte-5,22px); }
.ss-obslijst li{ padding:11px 0 11px 15px; border-left:3px solid var(--ss-lijn); }
.ss-obslijst li + li{ margin-top:10px; }
.ss-obslijst li.is-letop{ border-left-color:var(--ss-letop-kleur,#ea4ca7); }
.ss-obslijst li.is-kijk { border-left-color:var(--ss-accent,#daea09); }
.ss-obslijst li.is-goed { border-left-color:color-mix(in srgb,var(--ss-inkt) 25%,transparent); }
.ss-obslijst b{ display:block; font-size:var(--tekst-m,15px); line-height:1.35; }
.ss-obslijst p{ margin:3px 0 0; color:var(--ss-zacht); font-size:var(--tekst-s,12.5px); line-height:1.5; max-width:70ch; }

.ss-beweging .ss-daguur.is-op  { color:var(--ss-inkt); font-weight:600; }
.ss-beweging .ss-daguur.is-neer{ color:var(--ss-letop-kleur,#ea4ca7); font-weight:600; }
.ss-beweging .ss-daguur.is-gelijk{ color:var(--ss-zacht); }
.ss-daguur.is-neer{ color:var(--ss-letop-kleur,#ea4ca7); }

.ss-advies-twijfel{ margin:var(--ruimte-3,12px) 0 var(--ruimte-4,16px); }
.ss-advies-twijfel > summary{
  margin:0 var(--ruimte-5,22px); cursor:pointer;
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  text-decoration:underline; text-underline-offset:3px; list-style:none;
}
.ss-advies-twijfel > summary::-webkit-details-marker{ display:none; }
.ss-advies-staven b{ font-size:var(--tekst-xs,11.5px); }

@media (max-width:900px){
  .ss-advies-paar{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .ss-advies-groot,.ss-advies-staaf,.ss-advies-balk,
  .ss-advies-regel,.ss-advies-voet{ margin-inline:var(--ruimte-4,16px); }
  .ss-obslijst{ padding-inline:var(--ruimte-4,16px); }
  .ss-advies-twijfel > summary{ margin-inline:var(--ruimte-4,16px); }
  .ss-advies-staven small{ font-size:10px; }
}

/* ===========================================================================
   v15.54.0 — PUNTEN UIT DE OPTIMALISATIELIJST
   =========================================================================== */

/* 21. DE GRIJZE LIJN DOOR HET MAAN-ICOON.
   .ss-rondeknop zette wel een achtergrond en een ronde vorm, maar nooit een
   rand. Bij de plusknop viel dat niet op - dat is een <a> en die heeft geen
   rand van zichzelf. De licht/donkerknop is een <button>, en een button krijgt
   van de browser "border: 2px outset" mee: een ouderwets 3D-randje, licht aan
   de linkerbovenkant en donker rechtsonder. Op een rond vlak leest dat als één
   grijze streep van linksonder naar rechtsboven. Vandaar dat je het alleen bij
   dat ene icoontje zag. */
.ss-rondeknop{ border:0; padding:0; appearance:none; -webkit-appearance:none; font:inherit; }
.ss-rondeknop:focus-visible{ outline:2px solid var(--ss-accent,#daea09); outline-offset:2px; }

/* 13 + 12: een stil signaal bij de contactgegevens, en uitleg bij de bedragen */
.ss-letop-gegevens{ margin:var(--ruimte-4,16px) 0; }
.ss-letop-gegevens ul{ margin:7px 0 11px; padding-left:18px; }
.ss-letop-gegevens li{ margin:3px 0; line-height:1.5; }
.ss-uitleg-totalen{
  margin:10px 0 0; max-width:72ch;
  font-size:var(--tekst-xs,11.5px); line-height:1.55;
}

/* 3: uit welke agenda's leest het CRM */
.ss-agendakeuze{
  margin:var(--ruimte-4,16px) 0; padding:14px 16px;
  border:1px solid var(--ss-lijn); border-radius:var(--radius,12px);
  background:var(--ss-kaart-2);
}
.ss-agendakeuze ul{ list-style:none; margin:10px 0 12px; padding:0; }
.ss-agendakeuze li{ padding:3px 0; }
.ss-agendakeuze .check{ display:flex; align-items:center; gap:9px; min-height:34px; cursor:pointer; }
.ss-agendakeuze .check input{ margin:0; flex:0 0 auto; }
.ss-agendakeuze p{ margin:8px 0 0; max-width:70ch; font-size:var(--tekst-xs,11.5px); line-height:1.5; }

/* ===========================================================================
   v15.55.0 — DE LAATSTE PUNTEN VAN DE LIJST
   =========================================================================== */

/* 8: wat er bij de klant is opgeschreven, op de projectpagina */
.ss-klantnotities{ margin:var(--ruimte-4,16px) var(--ruimte-5,22px) 0; }
.ss-klantnotities-kop{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 8px; font-size:var(--tekst-xs,11.5px);
}
.ss-klantnotities-kop b{ letter-spacing:.1em; text-transform:uppercase; color:var(--ss-zacht); }
.ss-klantnotities-kop a{ color:var(--ss-zacht); }
.ss-klantnotitie{
  padding:8px 0 8px 13px; border-left:2px solid var(--ss-lijn);
}
.ss-klantnotitie + .ss-klantnotitie{ margin-top:2px; }
.ss-klantnotitie small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); }
.ss-klantnotitie p{ margin:2px 0 0; font-size:var(--tekst-s,12.5px); line-height:1.5; }

/* 19: uit welke e-mail een taak voortkomt */
.ss-uitmail{
  display:flex; align-items:center; gap:11px;
  margin:0 0 var(--ruimte-4,16px); padding:10px 13px;
  border:1px solid var(--ss-lijn); border-radius:var(--ss-r-klein,14px);
  background:var(--ss-kaart-2); color:inherit; text-decoration:none;
}
.ss-uitmail:hover{ border-color:color-mix(in srgb,var(--ss-inkt) 28%,var(--ss-lijn)); }
.ss-uitmail > span{ min-width:0; flex:1 1 auto; }
.ss-uitmail b{ display:block; font-size:var(--tekst-s,12.5px); }
.ss-uitmail small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-uitmail .erbij{ flex:0 0 auto; color:var(--ss-zacht); }

/* 10: het paneeltje om snel een klant toe te voegen */
.ss-snelklant{ margin-top:7px; }
.ss-snelklant > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  text-decoration:underline; text-underline-offset:3px;
}
.ss-snelklant > summary::-webkit-details-marker{ display:none; }
.ss-snelklant > summary:hover{ color:var(--ss-inkt); }
.ss-snelklant-vak{
  display:grid; gap:8px; margin-top:9px; padding:13px;
  border:1px solid var(--ss-lijn); border-radius:var(--ss-r-klein,14px);
  background:var(--ss-kaart-2);
}
.ss-snelklant-vak input{ min-width:0; }
.ss-snelklant-vak small{ color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.5; }
.ss-snelklant-vak a{ color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); text-decoration:underline; text-underline-offset:3px; }

/* 16: tarief en fee door de tijd */
.ss-abotarieven .ss-abotarief-nieuw{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; align-items:end; margin-top:var(--ruimte-4,16px);
}
.ss-abotarieven .ss-abotarief-nieuw .field{ margin:0; min-width:0; }
.ss-abotarieven .ss-abotarief-nieuw button{ align-self:end; }
.ss-abotarieven > p.muted{ margin-top:var(--ruimte-3,12px); max-width:70ch; font-size:var(--tekst-xs,11.5px); line-height:1.5; }

/* ───────────────────────────────────────────────────────────────────────────
   v15.56.0 · 27 oktober 2026 — DE PEILDATUM EN DE GERECONSTRUEERDE UREN

   Eén rustige regel die zegt vanaf wanneer je met de timer schrijft, en het
   paneel waarmee je de periode ervoor aanvult uit je agenda. De tabel in dat paneel is breed, dus
   hij krijgt de behandeling die elke brede tabel hier krijgt: min-width:0 op
   de wrapper, en op een telefoon zijwaarts schuiven in plaats van de kaart
   oprekken.
   ─────────────────────────────────────────────────────────────────────────── */
.ss-peildatum{
  display:flex; align-items:baseline; gap:8px;
  margin:var(--ruimte-3,12px) 0 0; padding:10px 12px;
  background:var(--ss-kaart-2); border-radius:var(--ss-r-klein,10px);
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.55;
  max-width:88ch;
}
.ss-peildatum b{ color:var(--ss-inkt); font-weight:600; }
.ss-peildatum small{ display:block; margin-top:3px; color:var(--ss-zacht); opacity:.85; }
.ss-peilstip{
  flex:0 0 auto; width:7px; height:7px; margin-top:5px; border-radius:999px;
  background:var(--ss-accent,#daea09);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ss-accent,#daea09) 22%,transparent);
}
.mj .ss-peildatum{ margin-bottom:var(--ruimte-4,16px); }

/* het paneel zelf leunt op .project-create-panel; hier alleen wat het extra nodig heeft */
.ss-agenda-uren .form-card{ min-width:0; }
.ss-agenda-uren p{ max-width:80ch; font-size:var(--tekst-s,13px); line-height:1.6; }
.ss-agenda-uren code{
  padding:1px 5px; border-radius:5px; background:var(--ss-kaart-2);
  font-size:.92em; color:var(--ss-inkt);
}
.ss-let-op{
  padding:10px 12px; border-radius:var(--ss-r-klein,10px);
  background:color-mix(in srgb,var(--ss-letop-kleur,#c2410c) 10%,transparent);
  color:var(--ss-inkt);
}
.ss-fijn{
  display:block; margin-top:8px; max-width:80ch;
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.55;
}

.ss-recplan{ min-width:0; }
.ss-recplan > b{ display:block; margin-bottom:var(--ruimte-3,12px); }
.ss-recplan table{ width:100%; min-width:0; border-collapse:collapse; font-size:var(--tekst-xs,11.5px); }
.ss-recplan th,.ss-recplan td{
  padding:6px 8px; text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--ss-lijn);
}
.ss-recplan th:first-child,.ss-recplan td:first-child,
.ss-recplan th:nth-child(2),.ss-recplan td:nth-child(2),
.ss-recplan th:last-child,.ss-recplan td:last-child{ text-align:left; }
.ss-recplan thead th{ color:var(--ss-zacht); font-weight:600; }
.ss-recplan td small{ display:block; color:var(--ss-zacht); }
.ss-recplan tfoot th{ border-top:2px solid var(--ss-lijn); border-bottom:0; color:var(--ss-inkt); }
.ss-recplan tr.rec-niets td{ color:var(--ss-zacht); }
.ss-recplan tr.rec-laag td:nth-last-child(1),
.ss-recplan tr.rec-laag td:nth-last-child(2){
  background:color-mix(in srgb,var(--ss-letop-kleur,#c2410c) 9%,transparent);
}

@media (max-width:780px){
  /* de tabel schuift, de kaart blijft op zijn plek */
  .ss-recplan{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ss-recplan table{ min-width:560px; }
  .ss-peildatum{ font-size:var(--tekst-xs,11.5px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v15.57.0 · 27 oktober 2026 — HET VOORSTEL-SCHERM

   Drie kolommen: pagina's, velden, voorbeeld. Op een telefoon onder elkaar in
   diezelfde leesrichting. Het A4-vel heeft zijn eigen stijl (assets/voorstel.css);
   hier staat alleen het scherm eromheen, in de componenten van het CRM.
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-voorstelwerk{
  display:grid; grid-template-columns:230px minmax(0,1fr) minmax(0,420px);
  gap:var(--ruimte-5,20px); align-items:start; margin-top:var(--ruimte-4,16px);
}
.ss-voorstelwerk > *{ min-width:0; }

/* ---------- links: de pagina's ---------- */
.ss-vpaginas{
  position:sticky; top:var(--ruimte-4,16px);
  background:var(--ss-kaart); border:1px solid var(--ss-lijn);
  border-radius:var(--ss-r,14px); padding:var(--ruimte-4,16px);
}
.ss-vkop b{ display:block; font-family:var(--heading-font); }
.ss-vkop small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); margin-bottom:var(--ruimte-3,12px); }
.ss-vpaginas ol{ list-style:none; margin:0 0 var(--ruimte-4,16px); padding:0; }
.ss-vpaginas li{
  display:flex; align-items:center; gap:6px; border-radius:var(--ss-r-klein,10px);
}
.ss-vpaginas li > a{
  flex:1; min-width:0; display:flex; align-items:baseline; gap:8px;
  padding:7px 8px; border-radius:var(--ss-r-klein,10px);
  color:var(--ss-inkt); text-decoration:none; font-size:var(--tekst-s,13px);
}
.ss-vpaginas li > a:hover{ background:var(--ss-kaart-2); }
.ss-vpaginas li.is-actief > a{
  background:color-mix(in srgb,var(--ss-accent,#daea09) 20%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ss-accent,#daea09) 38%,transparent);
}
.ss-vpaginas li.is-uit > a{ color:var(--ss-zacht); }
.ss-vnr{ font-family:var(--heading-font); font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht); letter-spacing:.04em; }
.ss-vnaam{ flex:1; min-width:0; }
.ss-vnaam small{ color:var(--ss-zacht); }
.ss-vvast{ flex:0 0 auto; color:var(--ss-zacht); padding:0 6px; }

/* de schakelaar: klein, rustig, en groot genoeg om op een telefoon te raken */
.ss-vschakel{ flex:0 0 auto; display:inline-flex; cursor:pointer; padding:6px 4px; }
.ss-vschakel input{ position:absolute; opacity:0; width:1px; height:1px; }
.ss-vschakel span{
  display:block; width:30px; height:18px; border-radius:999px;
  background:var(--ss-lijn); position:relative; transition:background .15s;
}
.ss-vschakel span::after{
  content:""; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:var(--ss-kaart); transition:transform .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.ss-vschakel input:checked + span{ background:var(--ss-accent,#daea09); }
.ss-vschakel input:checked + span::after{ transform:translateX(12px); }
.ss-vschakel input:focus-visible + span{ outline:2px solid var(--ss-inkt); outline-offset:2px; }

.ss-vstatus{ border-top:1px solid var(--ss-lijn); padding-top:var(--ruimte-3,12px); }
.ss-vstatusknoppen{ display:flex; flex-wrap:wrap; gap:6px; }
.ss-vbewaard{
  margin:var(--ruimte-3,12px) 0 0; min-height:1.3em;
  font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht);
}
.ss-vbewaard.is-goed{ color:var(--ss-inkt); }
.ss-vbewaard.is-fout{ color:var(--ss-letop-kleur,#c2410c); }

/* ---------- midden: de velden ---------- */
.ss-vvelden{ display:flex; flex-direction:column; gap:var(--ruimte-4,16px); }
.ss-vvelden .form-card{ min-width:0; }
.ss-vhulp{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:6px; }
.ss-vhulp small{ color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); }
.ss-vhulp code{ background:var(--ss-kaart-2); border-radius:4px; padding:0 4px; }
.ss-vbouw summary{ cursor:pointer; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); }
.ss-vbouw > div{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ss-vfijn{ margin:0; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); line-height:1.55; max-width:76ch; }

.ss-vfeiten{ margin-top:var(--ruimte-4,16px); }
.ss-vfeiten > b{ display:block; font-family:var(--heading-font); }
.ss-vfeiten > small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); margin-bottom:8px; }
.ss-vfeit{ display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:8px; align-items:center; margin-bottom:8px; }
.ss-vfeit > *{ min-width:0; }

.ss-vlijst{ display:flex; flex-direction:column; gap:10px; margin:var(--ruimte-3,12px) 0; }
.ss-vitem{
  background:var(--ss-kaart-2); border-radius:var(--ss-r-klein,10px);
  padding:10px; min-width:0;
}
.ss-vitem.is-sleept{ opacity:.6; outline:2px dashed var(--ss-accent,#daea09); }
.ss-vitemkop{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.ss-vitemkop > input{ flex:1; min-width:0; }
.ss-vitem textarea{ width:100%; box-sizing:border-box; min-width:0; }
.ss-vfase{ display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.6fr) auto; gap:8px; align-items:center; }
.ss-vfase > *{ min-width:0; }
.ss-vgreep{
  border:0; background:transparent; color:var(--ss-zacht); cursor:grab;
  padding:6px; border-radius:6px; touch-action:none;
}
.ss-vgreep:active{ cursor:grabbing; }

.ss-vlabel .ss-vlabelrij{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:6px; }
.ss-vpalet{ display:flex; flex-wrap:wrap; gap:6px; }
.ss-vpalet button{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent;
  padding:0; cursor:pointer;
}
.ss-vpalet button[aria-pressed="true"]{ border-color:var(--ss-inkt); }

/* de prijsopbouw */
.ss-vstap{ border:1px solid var(--ss-lijn); border-radius:var(--ss-r-klein,10px); padding:10px; margin-bottom:10px; min-width:0; }
.ss-vstapkop{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ss-vstapkop > input[type=text]{ flex:1; min-width:120px; }
.ss-vstapkop > strong{ margin-left:auto; font-family:var(--heading-font); }
.ss-vstapkop small{ color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); }
.ss-vstapweg{ float:right; }
.ss-vposten{ width:100%; min-width:0; border-collapse:collapse; margin-top:8px; font-size:var(--tekst-s,13px); }
.ss-vposten td{ padding:7px 6px; border-top:1px solid var(--ss-lijn); vertical-align:top; }
.ss-vposten td small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); }
.ss-vuren,.ss-vbedrag{ text-align:right; white-space:nowrap; }
.ss-vbedrag{ font-family:var(--heading-font); }
.ss-vacties{ text-align:right; white-space:nowrap; }
.ss-vnieuwestap{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:var(--ruimte-4,16px); }
.ss-vnieuwestap input[type=text]{ flex:1; min-width:120px; }
.ss-vtotalen{ display:flex; flex-wrap:wrap; gap:var(--ruimte-4,16px); margin:var(--ruimte-4,16px) 0; }
.ss-vtotalen > div{ min-width:0; }
.ss-vtotalen small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); }
.ss-vtotalen strong{ font-family:var(--heading-font); font-size:var(--tekst-l,18px); }

.ss-vopslaan{ display:flex; flex-wrap:wrap; gap:10px; }
.ss-vverborgen{ display:none; }

/* ---------- rechts: het voorbeeld ---------- */
.ss-vvoorbeeld{ position:sticky; top:var(--ruimte-4,16px); min-width:0; }
.ss-vvkop{
  /* v15.61.0: er staan nu ook zoomknopjes in deze balk. Op een telefoon past
     die rij niet op één regel; zonder wrap duwt hij de hele pagina breder en
     gaat je scherm zijwaarts schuiven. */
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px;
  margin-bottom:8px; font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht);
  min-width:0;
}
.ss-vvkop > span{ min-width:0; }
.ss-vvkop .nav{ display:flex; gap:6px; flex:0 0 auto; }
.ss-vvoorbeeld .vel-wrap{ max-width:none; }
.ss-vvoorbeeld .ss-vfijn{ margin-top:10px; }

/* ---------- smaller: twee kolommen, dan één ---------- */
@media (max-width:1240px){
  .ss-voorstelwerk{ grid-template-columns:200px minmax(0,1fr); }
  .ss-vvoorbeeld{ grid-column:1 / -1; position:static; }
  .ss-vvoorbeeld .vel-wrap{ max-width:560px; margin:0 auto; }
}
@media (max-width:780px){
  .ss-voorstelwerk{ grid-template-columns:minmax(0,1fr); gap:var(--ruimte-4,16px); }
  .ss-vpaginas{ position:static; }
  .ss-vpaginas ol{ margin-bottom:var(--ruimte-3,12px); }
  .ss-vpaginas li > a{ padding:10px 8px; font-size:var(--tekst-m,15px); }
  .ss-vschakel span{ width:36px; height:22px; }
  .ss-vschakel span::after{ width:18px; height:18px; }
  .ss-vschakel input:checked + span::after{ transform:translateX(14px); }
  .ss-vfeit{ grid-template-columns:minmax(0,1fr); }
  .ss-vfase{ grid-template-columns:auto minmax(0,1fr) auto; }
  .ss-vfase > input:nth-of-type(2){ grid-column:1 / -1; }
  .ss-vposten{ display:block; }
  .ss-vposten tbody,.ss-vposten tr{ display:block; }
  .ss-vposten td{ display:block; border-top:0; padding:2px 0; }
  .ss-vposten tr{ border-top:1px solid var(--ss-lijn); padding:8px 0; }
  .ss-vposten .ss-vuren,.ss-vposten .ss-vbedrag,.ss-vposten .ss-vacties{ text-align:left; }
  .ss-vvoorbeeld .vel-wrap{ max-width:none; }
}

/* de rij onder een vast label: knop en vinkje naast elkaar, niet als blok */
.ss-vlabelrij .check-row{ margin:0; padding:0; background:none; border:0; min-height:0; }
.ss-vlabelrij .check-row span{ font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht); text-transform:none; }
.ss-vlabelrij .check-row input{ width:16px; height:16px; }
.ss-vlabel label{ display:block; }

/* de twee knoppen staan op laptop in de kop en op een telefoon onderaan de
   paginalijst - nooit allebei */
.ss-vknoppen{ display:none; }
@media (max-width:780px){
  .ss-vknoppen{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--ruimte-3,12px); }
  .ss-vknoppen .btn{ flex:1; min-width:0; text-align:center; }
}

/* de instellingenpagina voor voorstellen */
.ss-vinst{ display:flex; flex-direction:column; gap:var(--ruimte-4,16px); max-width:900px; }
.ss-vinst .form-card{ min-width:0; }
.ss-vinst textarea{ width:100%; box-sizing:border-box; min-width:0; }
.ss-vportret{ width:120px; margin-bottom:8px; }
.ss-vportret img{ width:100%; height:auto; border-radius:var(--ss-r-klein,10px); display:block; }
.ss-vpaletstil{ margin-bottom:8px; }
.ss-vpaletstil span{ display:block; width:22px; height:22px; border-radius:50%; }

/* de stand van de PDF-dienst in de instellingen */
.ss-vstand{
  margin:0 0 var(--ruimte-3,12px); padding:10px 12px;
  border-radius:var(--ss-r-klein,10px); background:var(--ss-kaart-2);
  font-size:var(--tekst-xs,11.5px); line-height:1.55;
}
.ss-vstand.is-fout{ background:color-mix(in srgb,var(--ss-letop-kleur,#c2410c) 10%,transparent); }

/* v15.58.1 — op de prijsopbouwpagina staat het voorstel bovenaan: daar begin
   je, de prijsregels eronder zijn het gereedschap. De kaart loopt over beide
   kolommen, zodat de prijsopbouw en zijn invulformulier naast elkaar blijven. */
.proposal-layout > .voorstel-kaart{ grid-column:1 / -1; }

/* ───────────────────────────────────────────────────────────────────────────
   v15.58.1 — DE GREEP TUSSEN DE VELDEN EN HET VOORBEELD

   Op een breed scherm wil je het vel groot kunnen trekken om te zien hoe het
   staat; op een laptop wil je juist ruimte voor de velden. Die verhouding leg
   je zelf vast met de greep ertussen. De breedte zit in --vbreed en wordt per
   apparaat bewaard.
   ─────────────────────────────────────────────────────────────────────────── */
.ss-voorstelwerk{ --vbreed:420px; }
@media (min-width:1241px){
  .ss-voorstelwerk{
    grid-template-columns:230px minmax(240px,1fr) 10px minmax(260px,var(--vbreed));
  }
}
.ss-vsplitter{ display:none; }
@media (min-width:1241px){
  .ss-vsplitter{
    display:block; position:sticky; top:var(--ruimte-4,16px);
    align-self:stretch; width:10px; min-height:220px;
    cursor:col-resize; touch-action:none; border:0; background:none; padding:0;
  }
  .ss-vsplitter span{
    display:block; width:2px; height:100%; margin:0 auto; border-radius:2px;
    background:var(--ss-lijn); transition:background .12s;
  }
  .ss-vsplitter:hover span,
  .ss-vsplitter:focus-visible span,
  .ss-vsplitter.is-sleept span{ background:var(--ss-accent,#daea09); width:4px; }
  .ss-vsplitter:focus-visible{ outline:none; }
  /* terwijl je sleept mag de tekst niet oplichten en moet de muis de greep houden */
  body.ss-vsleept{ cursor:col-resize; user-select:none; }
}

/* Trek je het voorbeeld heel breed, dan wordt de middenkolom smal. De twee
   kolommen in een form-grid passen daar niet meer naast elkaar: koppen gingen
   over elkaar heen staan. Dit kijkt naar de breedte van de KOLOM, niet van het
   scherm - precies het geval waarvoor container queries bestaan. */
.ss-vvelden{ container-type:inline-size; }
@container (max-width:470px){
  .ss-vvelden .form-grid{ grid-template-columns:minmax(0,1fr); }
  .ss-vvelden .ss-vfeit{ grid-template-columns:minmax(0,1fr); }
  .ss-vvelden .ss-vfase{ grid-template-columns:auto minmax(0,1fr) auto; }
  .ss-vvelden .ss-vfase > input:nth-of-type(2){ grid-column:1 / -1; }
  .ss-vvelden .ss-vstapkop{ gap:6px; }
  .ss-vvelden .ss-vtotalen{ gap:var(--ruimte-3,12px); }
}

/* ───────────────────────────────────────────────────────────────────────────
   v15.59.0 — SCROLLEN DOOR HET VOORBEELD

   Alle pagina's onder elkaar in één scrollvak, zoals je klant het document
   doorneemt. De pijltjes blijven bestaan en springen naar de vorige of
   volgende pagina; de kop erboven zegt waar je bent.
   ─────────────────────────────────────────────────────────────────────────── */
.ss-vscroll{
  /* position:relative is hier geen opmaak maar noodzaak: zonder dat is
     offsetTop van een vel niet ten opzichte van dit vak, en weet het scherm
     niet welke pagina je leest. */
  position:relative;
  max-height:calc(100vh - 190px); overflow-y:auto; overflow-x:hidden;
  border-radius:var(--ss-r,14px); background:var(--ss-kaart-2);
  padding:8px; overscroll-behavior:contain;
}
.ss-vscroll:focus-visible{ outline:2px solid var(--ss-accent,#daea09); outline-offset:2px; }
.ss-vscroll .vel-wrap{ max-width:none; margin:0 0 10px; }
.ss-vscroll .vel-wrap:last-child{ margin-bottom:0; }
@media (max-width:1240px){
  .ss-vscroll{ max-height:min(78vh,900px); }
  .ss-vscroll .vel-wrap{ max-width:560px; margin-left:auto; margin-right:auto; }
}
@media (max-width:780px){
  .ss-vscroll{ max-height:min(70vh,760px); padding:6px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   v15.61.0 — HET VOORBEELD GROTER OP EEN TELEFOON

   Een A4 op de breedte van een telefoon is ongeveer 330px: de lopende tekst
   wordt dan vijf pixels hoog en dat leest niemand. Met deze knopjes maak je
   het vel anderhalf of twee en een half keer zo groot en schuif je er
   zijwaarts doorheen. De maatvoering klopt nog steeds - het vel is één
   container, alles erin rekent mee.

   Op een breed scherm staan de knopjes er niet: daar heb je de greep tussen
   de kolommen om hetzelfde te doen.
   ─────────────────────────────────────────────────────────────────────────── */
.ss-vzoom{ display:none; gap:4px; }
@media (max-width:1240px){
  .ss-vzoom{ display:flex; flex-wrap:wrap; flex:0 1 auto; min-width:0; }
  .ss-vzoom .btn{ white-space:nowrap; }
  .ss-vzoom .btn.is-aan{ background:var(--ss-accent,#daea09); color:var(--ss-inkt); }
  .ss-vscroll{ --vzoom:1; }
  .ss-vscroll[data-zoom]{ overflow-x:auto; }
  .ss-vscroll .vel-wrap{
    width:calc(100% * var(--vzoom)); max-width:calc(560px * var(--vzoom));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v15.59.0 — DE PORTFOLIOBIBLIOTHEEK
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-pfbalk{
  display:flex; flex-wrap:wrap; gap:var(--ruimte-3,12px);
  align-items:center; justify-content:space-between; margin:var(--ruimte-4,16px) 0;
}
.ss-pffilters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0; }
.ss-pffilters input[type=search]{ min-width:200px; flex:1; }
.ss-pffilters select{ min-width:0; }
.ss-pfbron{ display:flex; flex-wrap:wrap; gap:6px; }

.ss-pfupload{ min-width:0; }
.ss-pfdrop{
  margin-top:var(--ruimte-3,12px); padding:26px 16px; text-align:center; cursor:pointer;
  border:2px dashed var(--ss-lijn); border-radius:var(--ss-r,14px);
  background:var(--ss-kaart-2); transition:border-color .12s, background .12s;
}
.ss-pfdrop:hover,.ss-pfdrop:focus-visible,.ss-pfdrop.is-over{
  border-color:var(--ss-accent,#daea09);
  background:color-mix(in srgb,var(--ss-accent,#daea09) 10%,transparent);
  outline:none;
}
.ss-pfdrop b{ display:block; font-family:var(--heading-font); }
.ss-pfdrop small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); margin-top:4px; }
.ss-pfstand{ margin:10px 0 0; min-height:1.3em; font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht); }
.ss-pfstand.is-goed{ color:var(--ss-inkt); }
.ss-pfstand.is-fout{ color:var(--ss-letop-kleur,#c2410c); }

.ss-pfraster{
  display:grid; gap:var(--ruimte-4,16px); margin-top:var(--ruimte-4,16px);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.ss-pfkaart{
  margin:0; min-width:0; position:relative; display:flex; flex-direction:column;
  background:var(--ss-kaart); border:1px solid var(--ss-lijn);
  border-radius:var(--ss-r,14px); overflow:hidden;
}
.ss-pfkaart > a{ display:block; aspect-ratio:4/3; background:var(--ss-kaart-2); }
.ss-pfkaart img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-pfkaart figcaption{ padding:10px 12px 12px; min-width:0; }
.ss-pfkaart figcaption b{ display:block; font-family:var(--heading-font); font-size:var(--tekst-s,13px); }
.ss-pfkaart figcaption small{
  display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  overflow-wrap:anywhere; margin-top:2px;
}
.ss-pfletop{ color:var(--ss-letop-kleur,#c2410c) !important; }
.ss-pfacties{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:0 12px 12px; margin-top:auto;
}
.ss-pfbewerk{ display:flex; flex-wrap:wrap; gap:var(--ruimte-4,16px); align-items:flex-start; }
.ss-pfbewerk > img{ width:150px; border-radius:var(--ss-r-klein,10px); }
.ss-pfbewerk > form{ flex:1; min-width:260px; }

@media (max-width:780px){
  .ss-pfraster{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--ruimte-3,12px); }
  .ss-pffilters input[type=search]{ min-width:0; width:100%; }
  .ss-pffilters > *{ flex:1; min-width:120px; }
  .ss-pfbewerk > img{ width:100%; max-width:220px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v15.59.0 — DE COLLAGE-EDITOR op "Werk dat past"
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-collage{ min-width:0; }
.ss-colvormen{ display:flex; flex-wrap:wrap; gap:8px; margin:var(--ruimte-3,12px) 0; }
.ss-colvorm{
  border:2px solid transparent; background:var(--ss-kaart-2); cursor:pointer;
  border-radius:var(--ss-r-klein,10px); padding:6px; width:74px;
  display:flex; flex-direction:column; gap:4px; align-items:center;
}
.ss-colvorm[aria-pressed="true"]{ border-color:var(--ss-accent,#daea09); }
.ss-colvorm small{ color:var(--ss-zacht); font-size:10px; line-height:1.2; text-align:center; }
.ss-colmini{ position:relative; display:block; width:100%; aspect-ratio:168/196; }
.ss-colmini i{ position:absolute; background:var(--ss-lijn); border-radius:2px; }
.ss-colvorm[aria-pressed="true"] .ss-colmini i{ background:var(--ss-accent,#daea09); }

.ss-colvel-wrap{ max-width:420px; margin:var(--ruimte-3,12px) 0; }
.ss-colvel{ position:relative; width:100%; aspect-ratio:168/196; }
/* v15.60.0: het beeldvlak bovenaan "Even voorstellen" is lager dan de collage
   bij "Werk dat past" - 112 mm in plaats van 196. Zelfde vormen, andere maat. */
.ss-colvel.is-laag{ aspect-ratio:168/112; }
.ss-colmini.is-laag{ aspect-ratio:168/112; }
.ss-colleeg{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  border:2px dashed var(--ss-lijn); border-radius:var(--ss-r,14px);
  color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); padding:20px; margin:0;
}
.ss-colvak{
  position:absolute; overflow:hidden; border-radius:12px;
  background:var(--ss-kaart-2); cursor:pointer;
}
.ss-colvak img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-colvak.is-leeg{
  display:grid; place-items:center; border:2px dashed var(--ss-lijn);
  color:var(--ss-zacht); font-size:22px;
}
.ss-colvak.is-actief{ outline:3px solid var(--ss-accent,#daea09); outline-offset:-3px; }
.ss-colvak.is-doel{ outline:3px solid var(--ss-inkt); outline-offset:-3px; }
.ss-collabel{
  position:absolute; left:0; bottom:0; background:#fff; color:#191b1d;
  padding:4px 8px 4px 9px; font-size:10px; line-height:1.25;
  border-top-right-radius:10px; max-width:88%;
}
.ss-collabel b{ display:block; font-family:var(--heading-font); overflow-wrap:anywhere; }
.ss-collabel i{ display:block; font-style:normal; opacity:.75; }

.ss-colvakeditor{
  background:var(--ss-kaart-2); border-radius:var(--ss-r-klein,10px);
  padding:12px; margin:var(--ruimte-3,12px) 0; min-width:0;
}
.ss-colvakkop{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.ss-colvakkop b{ margin-right:auto; font-family:var(--heading-font); }
.ss-colvakeditor input[type=range]{ width:100%; }

.ss-colbakkop{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:var(--ruimte-4,16px); }
.ss-colbakkop b{ font-family:var(--heading-font); }
.ss-colbakkop input[type=search]{ flex:1; min-width:140px; }
.ss-colbak{
  display:grid; gap:8px; margin:10px 0 var(--ruimte-3,12px);
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  max-height:300px; overflow-y:auto; overscroll-behavior:contain;
}
.ss-colbeeld{
  position:relative; border:2px solid transparent; background:var(--ss-kaart-2);
  border-radius:var(--ss-r-klein,10px); padding:0; cursor:grab; overflow:hidden;
  display:flex; flex-direction:column; min-width:0; text-align:left;
}
.ss-colbeeld img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.ss-colbeeld > span{
  padding:5px 7px; font-size:10.5px; line-height:1.25; color:var(--ss-inkt);
  overflow-wrap:anywhere;
}
.ss-colbeeld.is-gebruikt{ opacity:.45; }
.ss-colbeeld.is-voorgesteld{ border-color:color-mix(in srgb,var(--ss-accent,#daea09) 60%,transparent); }
.ss-colpast{
  position:absolute; top:5px; left:5px; font-style:normal; font-size:9px;
  background:var(--ss-accent,#daea09); color:#191b1d;
  border-radius:999px; padding:1px 6px;
}
@media (max-width:780px){
  .ss-colvel-wrap{ max-width:none; }
  .ss-colbak{ grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); max-height:240px; }
  .ss-colvorm{ width:62px; }
}

/* verwijderen hoort niet naast opslaan te schreeuwen, maar moet wel te vinden zijn */
.ss-vweggooi{ margin-left:auto; color:var(--ss-letop-kleur,#c2410c); }
@media (max-width:780px){ .ss-vweggooi{ margin-left:0; } }

/* v15.59.1: alle collagevormen staan er nu, met het aantal beelden erbij.
   De vorm die bij je huidige aantal hoort krijgt een rustige markering. */
.ss-colvorm.is-past{ background:color-mix(in srgb,var(--ss-accent,#daea09) 14%,transparent); }
.ss-colmini em{
  position:absolute; right:2px; bottom:2px; font-style:normal; font-size:9px;
  background:var(--ss-kaart); color:var(--ss-zacht);
  border-radius:999px; padding:0 4px; line-height:1.5;
}
.ss-colvorm[aria-pressed="true"] .ss-colmini em{ color:var(--ss-inkt); }
.ss-colvormen{ max-height:220px; overflow-y:auto; overscroll-behavior:contain; }
.ss-colkwijt{ color:var(--ss-letop-kleur,#c2410c); margin-bottom:var(--ruimte-3,12px); }

/* een beeld dat net is toegevoegd licht even op, zodat je ziet waar hij staat */
@keyframes ss-pfnieuw{ from{ box-shadow:0 0 0 3px var(--ss-accent,#daea09); } to{ box-shadow:0 0 0 0 transparent; } }
.ss-pfkaart.is-nieuw{ animation:ss-pfnieuw 1.6s ease-out 1; }
@media (prefers-reduced-motion:reduce){ .ss-pfkaart.is-nieuw{ animation:none; } }

/* v15.60.0: het losse portretblok is vervangen door de collage-editor, die nu
   op twee plekken staat. De opmaak daarvan staat hierboven bij .ss-collage. */

/* ───────────────────────────────────────────────────────────────────────────
   v15.61.0 — DE MOODBOARD-EDITOR
   Links de velden, rechts de opties onder elkaar. Onder 1240px gaat alles
   onder elkaar staan, net als bij het voorstel.
   ─────────────────────────────────────────────────────────────────────────── */
.ss-mbwerk{ display:grid; gap:var(--ruimte-4,16px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1241px){
  .ss-mbwerk{ grid-template-columns:minmax(300px,1fr) minmax(360px,1.15fr); }
  .ss-mbvoorbeeld{ position:sticky; top:var(--ruimte-4,16px); max-height:calc(100vh - 32px); overflow:auto; overscroll-behavior:contain; }
}
.ss-mbvoorbeeld{ min-width:0; }
.ss-mbstapel{ display:flex; flex-direction:column; gap:var(--ruimte-4,16px); }
.ss-mbstapel .mbvel-wrap{
  position:relative; width:100%; overflow:hidden; border-radius:var(--ss-r-klein,10px);
  background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.22);
}
.ss-mbstapel .mbvel-wrap .mbvel{ position:absolute; left:0; top:0; transform-origin:0 0; }

/* de drie beeldvakken */
.ss-mbvakken{ display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:var(--ruimte-3,12px) 0; }
.ss-mbvak{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:12px;
  background:var(--ss-kaart-2); cursor:pointer; border:1px solid var(--ss-lijn);
}
.ss-mbvak img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-mbvak i{
  position:absolute; left:0; right:0; bottom:0; padding:5px 8px; font-style:normal;
  font-size:var(--tekst-xxs,10px); line-height:1.25; background:rgba(0,0,0,.55); color:#fff;
}
.ss-mbvak.is-leeg{ display:grid; place-items:center; border-style:dashed; color:var(--ss-zacht); }
.ss-mbvak.is-leeg span{ font-size:22px; line-height:1; }
.ss-mbvak.is-leeg i{ background:none; color:var(--ss-zacht); }
.ss-mbvak.is-actief{ outline:3px solid var(--ss-accent,#daea09); outline-offset:-3px; }
.ss-mbvak.is-doel{ outline:3px solid var(--ss-inkt); outline-offset:-3px; }

/* de iconenrij */
.ss-mbiconen{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--ruimte-3,12px); }
.ss-mbicoon{
  display:grid; place-items:center; width:42px; height:42px; cursor:pointer;
  border:1px solid var(--ss-lijn); border-radius:10px; color:var(--ss-zacht);
}
.ss-mbicoon input{ position:absolute; opacity:0; width:0; height:0; }
.ss-mbicoon.is-aan{ border-color:var(--ss-accent,#daea09); color:var(--ss-inkt); background:var(--ss-kaart-2); }

/* de opties */
.ss-mboptie{ border:1px solid var(--ss-lijn); border-radius:var(--ss-r-klein,10px); padding:var(--ruimte-3,12px); margin-top:var(--ruimte-3,12px); }
.ss-mboptiekop{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.ss-mboptiekop input{ flex:1; min-width:0; font-family:var(--heading-font); }
.ss-mbpalet{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(86px,1fr)); margin:8px 0; }
.ss-mbkleur{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ss-mbkleur span{ font-size:var(--tekst-xxs,10px); color:var(--ss-zacht); }
.ss-mbkleur input[type=color]{ width:100%; height:34px; padding:0; border:1px solid var(--ss-lijn); border-radius:8px; background:none; cursor:pointer; }
.ss-mboptieknoppen{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:var(--ruimte-3,12px); }
.ss-mbknoppen{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:var(--ruimte-4,16px); }
.ss-mbsamen{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:var(--tekst-xs,11.5px); }
.ss-mbsamen label{ display:flex; gap:6px; align-items:center; color:var(--ss-zacht); }
.ss-mbsamen select{ max-width:160px; }
@media (max-width:560px){
  .ss-mbvakken{ grid-template-columns:minmax(0,1fr); }
  .ss-mbsamen select{ max-width:none; }
  .ss-mbsamen label{ width:100%; }
}

/* ───────────────────────────────────────────────────────────────────────────
   v15.62.0 — FACTUREERBAAR OF NIET, BIJ HET STARTEN

   Standaard is tijd factureerbaar. Het vinkje is er voor de uitzondering: je
   eigen fout herstellen, iets uit coulance, research die je niet doorbelast.
   Het staat op elk startformulier, want je wil er niet over hoeven nadenken
   waar je op dat moment toevallig bent.

   In de balkjes die als raster staan (dashboard, urenpagina, project) gaat het
   over de volle breedte onder de velden staan. Dan hoef ik niet per plek te
   tellen hoeveel kolommen er zijn - dat breekt bij de eerste de beste
   toevoeging.
   ─────────────────────────────────────────────────────────────────────────── */
.ss-timerfact{
  display:inline-flex; align-items:center; gap:6px; min-width:0;
  font-size:var(--tekst-xs,11.5px); line-height:1.2; cursor:pointer;
  color:inherit; opacity:.85;
}
.ss-timerfact input{
  width:15px; height:15px; margin:0; flex:0 0 auto; cursor:pointer;
  accent-color:var(--ss-accent,#daea09);
}
.ss-timerfact:hover{ opacity:1; }
.ss-timerfact span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* in de rasterbalkjes: een eigen regel onder de velden */
.ss-nu .ss-startrij .ss-timerfact,
.time-start .ss-timerfact,
.project-time-start .ss-timerfact{ grid-column:1 / -1; margin-top:2px; }

/* de projectpagina zet dit raster in style.css op twee kolommen; met het
   vinkje erbij moet de knop zijn eigen plek houden */
.project-time-start{ grid-template-columns:minmax(0,1fr) auto; }

/* in de uitklap van de timerbalk staat hij gewoon in de kolom mee */
.ss-timerpaneel .ss-timerfact{ margin:2px 0 4px; }

/* en in de korte rij op een projectpagina mag hij krimpen voor de knop */
.ss-timerstart .ss-timerfact.is-kort,
.ss-timerwissel .ss-timerfact.is-kort{ flex:0 1 auto; min-width:0; }
@media (max-width:900px){
  /* op een smal scherm is het label te lang voor de balk; het vinkje blijft,
     de tekst gaat eruit en staat alleen nog in de tooltip */
  .ss-timerstart .ss-timerfact.is-kort span,
  .ss-timerwissel .ss-timerfact.is-kort span{ display:none; }
}

/* het euroteken naast een lopende timer */
.ss-timerfactloopt{ display:flex; align-items:center; }

/* v15.62.0: de dagbalk ("‹ Vrijdag 23 oktober 2026 › Vandaag") paste op een
   telefoon net niet bij een lange dagnaam, en dan schoof je hele scherm
   zijwaarts. De datum mag nu krimpen en de knop Vandaag mag onder. */
.tijd-nav{ flex-wrap:wrap; min-width:0; }
.tijd-nav .tijd-datum{ min-width:0; flex:1 1 auto; }
@media (max-width:430px){
  .tijd-nav .tijd-datum{ font-size:var(--tekst-s,12.5px); }
}

/* ───────────────────────────────────────────────────────────────────────────
   v15.63.0 — DE PROJECTPAGINA OPNIEUW INGEDEELD

   De kop zette vijf regels boven elkaar voordat er inhoud kwam, en alles was
   een witte kaart op een bijna-witte ondergrond. Nu krijgt de status de volle
   breedte en zijn eigen kleur: je ziet van een afstand waar het project staat.
   ─────────────────────────────────────────────────────────────────────────── */
.ss-statusbalk{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--ruimte-4,16px);
  background:var(--vlak,var(--ss-accent,#daea09)); color:var(--vlak-tekst,#16181a);
  border-radius:var(--ss-r,20px); padding:var(--ruimte-4,16px) var(--ruimte-5,20px);
  margin-bottom:var(--ruimte-4,16px); min-width:0;
}
.ss-statusbalk-wie{ flex:1 1 240px; min-width:0; }
.ss-statusbalk-wie small{ display:block; font-size:var(--tekst-xs,11.5px); font-weight:600; opacity:.8; }
.ss-statusbalk-wie small a{ color:inherit; }
.ss-statusbalk-wie h1{
  margin:2px 0 0; font-family:var(--heading-font); font-weight:700;
  font-size:clamp(19px,2.3vw,27px); line-height:1.12; letter-spacing:-.015em;
  overflow-wrap:anywhere;
}
.ss-statusbalk-cijfers{ display:flex; flex-wrap:wrap; gap:var(--ruimte-5,20px); }
.ss-statusbalk-cijfers div{ min-width:0; }
.ss-statusbalk-cijfers small{
  display:block; font-size:var(--tekst-xxs,10px); letter-spacing:.11em; text-transform:uppercase;
  font-family:var(--heading-font); font-weight:600; opacity:.78;
}
.ss-statusbalk-cijfers b{
  display:block; font-family:var(--heading-font); font-weight:700;
  font-size:var(--tekst-l,17px); line-height:1.15; font-variant-numeric:tabular-nums;
}
.ss-statusbalk-knoppen{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
/* de knoppen staan op een gekleurd vlak: geen eigen vulling, alleen een randje
   in de tekstkleur van dat vlak, anders wordt het een zwarte vlek */
.ss-statusbalk-knoppen .icon-btn{
  color:var(--vlak-tekst,#16181a); background:transparent;
  border:1px solid color-mix(in srgb,currentColor 35%,transparent);
}
.ss-statusbalk-knoppen .icon-btn:hover{ background:color-mix(in srgb,currentColor 12%,transparent); }
.ss-statusbalk-knoppen select,
.ss-statusbalk-knoppen .ss-inline-status select{
  color:var(--vlak-tekst,#16181a); background:color-mix(in srgb,currentColor 12%,transparent);
  border:1px solid color-mix(in srgb,currentColor 30%,transparent);
}
@media (max-width:640px){
  .ss-statusbalk{ padding:var(--ruimte-3,12px) var(--ruimte-4,16px); gap:var(--ruimte-3,12px); }
  .ss-statusbalk-cijfers{ gap:var(--ruimte-4,16px); width:100%; }
  .ss-statusbalk-knoppen{ width:100%; }
}

/* de rij knoppen eronder: altijd dezelfde volgorde, altijd op dezelfde plek */
.ss-projectacties{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ss-projectacties form.inline{ display:inline-flex; margin:0; }
.ss-projectacties .btn.dark{ background:var(--ss-inkt); color:var(--ss-bureau); border-color:transparent; }

/* taken op de projectpagina: dezelfde regel als op het dashboard */
.ss-taaklijst{ display:flex; flex-direction:column; gap:5px; padding:var(--ruimte-3,12px) 0 2px; }
.ss-taakleeg{ margin:0; padding:4px 0 8px; font-size:var(--tekst-s,12.5px); }

/* het blokje voorstellen, op een project én bij een klant */
.ss-voorstelblok .ss-vgroep{
  margin:var(--ruimte-3,12px) 0 2px; font-family:var(--heading-font); font-weight:600;
  font-size:var(--tekst-xxs,10px); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ss-zacht); display:flex; align-items:center; gap:7px;
}
.ss-voorstelblok .ss-vgroep::after{ content:""; flex:1; height:1px; background:var(--ss-lijn); }
.ss-vregel{
  display:flex; align-items:center; gap:8px; padding:6px 0; min-width:0;
  color:inherit; text-decoration:none; border-radius:8px;
}
.ss-vregel:hover{ background:var(--ss-kaart-2); padding-inline:6px; margin-inline:-6px; }
.ss-vvlag{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--ss-zacht); }
.ss-vvlag.is-akkoord{ background:var(--ss-accent,#daea09); }
.ss-vvlag.is-verstuurd{ background:var(--ss-accent-licht,#c194d5); }
.ss-vvlag.is-concept{ background:var(--ss-zacht); opacity:.45; }
.ss-vvlag.is-vervallen{ background:var(--ss-zacht); opacity:.25; }
.ss-vtekst{ flex:1; min-width:0; }
.ss-vtekst b{ display:block; font-weight:500; font-size:var(--tekst-s,12.5px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-vtekst small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xxs,10px); }
.ss-vmeer,.ss-vleeg{ margin:4px 0 0; font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht); }
.ss-vnieuw{ margin-top:var(--ruimte-3,12px); }
.ss-vnieuw .btn{ width:100%; justify-content:center; }
.ss-prijsblok .btn{ margin-top:8px; }
.ss-prijsblok p{ font-size:var(--tekst-xs,11.5px); margin:0; }

/* en onderaan wat je minder vaak nodig hebt */
.ss-verderbij{ margin-top:var(--ruimte-4,16px); }
.ss-verderrij{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:var(--ruimte-3,12px) 0 2px; }
.ss-verderrij form.inline{ display:inline-flex; margin:0; }
.ss-verderrij .btn b{ font-weight:700; opacity:.55; margin-left:3px; }

/* v15.63.0: het soort voorstel kies je op de cover, niet meer op een
   tussenpagina. Vijf knopjes naast elkaar; de gekozen is ingevuld. */
.ss-vsoortrij{ display:flex; flex-wrap:wrap; gap:7px; margin:var(--ruimte-3,12px) 0 8px; }
.ss-vsoortrij form.inline{ display:inline-flex; margin:0; }
.ss-vsoortknop{
  font:inherit; font-size:var(--tekst-xs,11.5px); cursor:pointer; white-space:nowrap;
  border:1px solid var(--ss-lijn); border-radius:999px; padding:6px 13px;
  background:var(--ss-kaart); color:var(--ss-zacht);
}
.ss-vsoortknop:hover{ color:var(--ss-inkt); border-color:var(--ss-zacht); }
.ss-vsoortknop.is-aan{ background:var(--ss-inkt); color:var(--ss-bureau); border-color:transparent; font-weight:600; }
.ss-vsoortknop:focus-visible{ outline:2px solid var(--ss-accent,#daea09); outline-offset:2px; }

/* =========================================================================
   v15.64.0
   ========================================================================= */

/* 1. HET GAATJE TUSSEN EEN TAAK EN ZIJN NOTITIE -------------------------
   De notitie hoort strak onder zijn taak te zitten; dat regelt v1700.css al
   met `.ss-rij:has(+ .ss-notitieblok){margin-bottom:0}`. Maar op de
   projectpagina stond de lijst in een flex-kolom met `gap:5px`, en een flex-gap
   trekt zich niets aan van die marges: die vijf pixels bleven staan, precies
   het witte streepje dat je zag. Geen flex dus - de regels houden hun eigen
   onderlinge afstand, en een notitie plakt weer aan zijn taak vast. */
.ss-taaklijst{ display:block; padding:var(--ruimte-3,12px) 0 2px; }

/* 2. DE WERKBALK ---------------------------------------------------------
   Zelfde vorm als de statusbalk op een projectpagina, zodat Werk en een
   project zich hetzelfde aandienen. */
.ss-werkbalk{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--ruimte-4,16px);
  background:var(--vlak,var(--ss-accent,#daea09)); color:var(--vlak-tekst,#16181a);
  border-radius:var(--ss-r,20px); padding:var(--ruimte-4,16px) var(--ruimte-5,20px);
  margin-bottom:var(--ruimte-3,12px); min-width:0;
}
.ss-werkbalk-wie{ flex:1 1 220px; min-width:0; }
.ss-werkbalk-wie small{
  display:block; font-size:var(--tekst-xxs,10px); letter-spacing:.11em; text-transform:uppercase;
  font-family:var(--heading-font); font-weight:600; opacity:.78;
}
.ss-werkbalk-wie h1{
  margin:2px 0 0; font-family:var(--heading-font); font-weight:700;
  font-size:clamp(19px,2.3vw,27px); line-height:1.12; letter-spacing:-.015em;
  overflow-wrap:anywhere;
}
.ss-werkbalk-cijfers{ display:flex; flex-wrap:wrap; gap:var(--ruimte-5,20px); }
.ss-werkbalk-cijfers div{ min-width:0; }
.ss-werkbalk-cijfers small{
  display:block; font-size:var(--tekst-xxs,10px); letter-spacing:.11em; text-transform:uppercase;
  font-family:var(--heading-font); font-weight:600; opacity:.78;
}
.ss-werkbalk-cijfers b{
  display:block; font-family:var(--heading-font); font-weight:700;
  font-size:var(--tekst-l,17px); line-height:1.15; font-variant-numeric:tabular-nums;
}
.ss-werkbalk-acties{ display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0; }
/* Het zoekveld staat op een gekleurd vlak: geen witte kaart maar een randje in
   de tekstkleur van dat vlak, anders wordt het een gat in de balk. */
.ss-werkbalk .ss-zoek{
  margin:0; background:color-mix(in srgb,currentColor 10%,transparent);
  border:1px solid color-mix(in srgb,currentColor 28%,transparent);
  color:inherit; min-width:0;
}
.ss-werkbalk .ss-zoek input,
.ss-werkbalk .ss-zoek input::placeholder{ color:inherit; }
.ss-werkbalk .ss-zoek input::placeholder{ opacity:.6; }
.ss-werkbalk .ss-zoek-icoon,
.ss-werkbalk .ss-zoek-wis{ color:inherit; opacity:.7; }
.ss-werkbalk .ss-rondeknop{
  background:var(--vlak-tekst,#16181a); color:var(--vlak,var(--ss-accent,#daea09));
  border-color:transparent;
}

/* één bedieningsrij in plaats van drie */
.ss-werkfilters{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--ruimte-3,12px);
  margin-bottom:var(--ruimte-4,16px); min-width:0;
}
.ss-werkfilters .ss-tabs{ margin:0; min-width:0; }
.ss-werkfilters-rechts{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto; }
@media (max-width:900px){
  .ss-werkbalk{ padding:var(--ruimte-3,12px) var(--ruimte-4,16px); gap:var(--ruimte-3,12px); }
  .ss-werkbalk-cijfers{ gap:var(--ruimte-4,16px); width:100%; }
  .ss-werkbalk-acties{ width:100%; }
  .ss-werkbalk .ss-zoek{ flex:1 1 auto; }
  .ss-werkfilters-rechts{ margin-left:0; width:100%; }
}

/* 3. DE PROJECTENTABEL ---------------------------------------------------- */
.ss-tabelrij > td:first-child{
  box-shadow:inset 3px 0 0 var(--kleur,var(--ss-lijn));
  padding-left:11px;
}
.cel-uren{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.ss-urenbalk{
  display:block; width:62px; height:4px; margin-top:4px; border-radius:3px;
  background:color-mix(in srgb,var(--ss-inkt) 12%,transparent); overflow:hidden;
}
.ss-urenbalk i{ display:block; height:100%; background:color-mix(in srgb,var(--ss-inkt) 55%,transparent); }
.ss-urenbalk.is-vol i{ background:var(--ss-letop-kleur,#ea4ca7); }
.cel-deadline{ white-space:nowrap; font-variant-numeric:tabular-nums; }

/* 4. HET VENSTER OM EEN TIJDREGISTRATIE RECHT TE ZETTEN ------------------- */
.ss-tijdpop{
  border:0; padding:0; max-width:min(440px,calc(100vw - 32px)); width:100%;
  border-radius:var(--ss-r,20px); background:var(--ss-kaart); color:var(--ss-inkt);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.ss-tijdpop::backdrop{ background:rgba(10,10,10,.45); }
.ss-tijdpop form{ padding:var(--ruimte-4,16px) var(--ruimte-4,16px) var(--ruimte-3,12px); margin:0; }
.ss-tijdpop-kop{ display:flex; align-items:center; gap:10px; margin-bottom:var(--ruimte-3,12px); }
.ss-tijdpop-kop b{ flex:1; font-family:var(--heading-font); font-size:var(--tekst-l,17px); font-weight:700; }
.ss-tijdpop-veld{ display:block; margin-bottom:10px; min-width:0; }
.ss-tijdpop-veld > span{
  display:block; margin-bottom:4px;
  font-size:var(--tekst-xxs,10px); letter-spacing:.1em; text-transform:uppercase;
  font-family:var(--heading-font); font-weight:600; color:var(--ss-zacht);
}
.ss-tijdpop-veld input,
.ss-tijdpop-veld select{ width:100%; min-width:0; }
.ss-tijdpop-rij{ display:flex; gap:8px; }
.ss-tijdpop-rij .ss-tijdpop-veld{ flex:1 1 0; min-width:0; }
.ss-tijdpop-duur{
  margin:0 0 10px; font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht);
  font-variant-numeric:tabular-nums; min-height:1.2em;
}
.ss-tijdpop-vink{ display:flex; align-items:center; gap:8px; font-size:var(--tekst-s,12.5px); margin-bottom:var(--ruimte-3,12px); }
.ss-tijdpop-vink input{ width:16px; height:16px; flex:0 0 auto; }
.ss-tijdpop-voet{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ss-tijdpop-meer{ margin-left:auto; font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht); }
.ss-tijdpop-meer:hover{ color:var(--ss-inkt); }
@media (max-width:420px){
  .ss-tijdpop-rij{ flex-wrap:wrap; }
  .ss-tijdpop-rij .ss-tijdpop-veld{ flex:1 1 44%; }
  .ss-tijdpop-meer{ margin-left:0; width:100%; }
}

/* =========================================================================
   v15.64.2 — de knoppen op een project zijn pillen
   .btn is overal al rond; .btn.mini kreeg uit de oude style.css nog
   border-radius:8px mee. Op de projectpagina hoort hij rond te zijn, precies
   zoals in het ontwerpvoorstel.
   ========================================================================= */
.ss-projectacties .btn,
.ss-projectacties .btn.mini,
.ss-verderrij .btn,
.ss-verderrij .btn.mini{ border-radius:999px; }

/* =========================================================================
   v15.66.0 — de Claude-connector op de Integraties-pagina
   ========================================================================= */
.api-connector{
  border:1px solid var(--ss-lijn); border-radius:var(--ss-r-klein,12px);
  padding:var(--ruimte-4,16px); margin:var(--ruimte-4,16px) 0; background:var(--ss-kaart-2,transparent);
}
.api-connector > b{ display:block; font-family:var(--heading-font); font-size:var(--tekst-l,17px); }
.api-connector > p{ margin:4px 0 var(--ruimte-3,12px); }
.api-connector .api-adres{ margin-bottom:var(--ruimte-3,12px); }
.api-stappen{ margin:0 0 var(--ruimte-3,12px); padding-left:20px; font-size:var(--tekst-s,12.5px); }
.api-stappen li{ margin:5px 0; }
.api-stappen code{ font-size:.92em; }
/* waar een logregel vandaan kwam */
.api-bron{
  display:inline-block; margin-right:8px; padding:1px 7px; border-radius:999px;
  font-style:normal; font-size:var(--tekst-xxs,10px); font-weight:600; letter-spacing:.04em;
  border:1px solid var(--ss-lijn); color:var(--ss-zacht);
}
.api-bron.is-connector{ background:var(--ss-accent,#daea09); color:#16181a; border-color:transparent; }

/* de droogloop van de Drive-mappen */
.drive-loop{ margin-top:var(--ruimte-4,16px); }
.drive-loop-kop{ display:flex; flex-wrap:wrap; gap:var(--ruimte-5,20px); margin-bottom:var(--ruimte-3,12px); }
.drive-loop-kop small{ display:block; font-size:var(--tekst-xxs,10px); letter-spacing:.11em; text-transform:uppercase;
  font-family:var(--heading-font); font-weight:600; color:var(--ss-zacht); }
.drive-loop-kop b{ display:block; font-family:var(--heading-font); font-weight:700; font-size:var(--tekst-l,17px); font-variant-numeric:tabular-nums; }
.drive-rij.is-verhuizen > td:first-child{ box-shadow:inset 3px 0 0 var(--ss-accent-licht,#c194d5); padding-left:11px; }
.drive-rij.is-geen_map > td:first-child{ box-shadow:inset 3px 0 0 var(--ss-lijn); padding-left:11px; }
.drive-kies{ display:block; margin-top:5px; max-width:360px; font-size:var(--tekst-xs,11.5px); }
.drive-vast{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xxs,10px); }
.drive-vastleggen{ margin-top:var(--ruimte-3,12px); }
.drive-rij.is-onzeker > td:first-child{ box-shadow:inset 3px 0 0 var(--ss-letop-kleur,#ea4ca7); padding-left:11px; }

/* =========================================================================
   v15.67.0 — de integratiepagina klapt open en dicht
   ========================================================================= */
.ss-vouw > .ss-vouw-kop{
  display:flex; align-items:center; gap:10px; cursor:pointer; margin:0;
  padding-right:28px; position:relative;
}
.ss-vouw > .ss-vouw-kop:focus-visible{ outline:2px solid var(--ss-accent,#daea09); outline-offset:3px; border-radius:6px; }
.ss-vouw-pijl{
  position:absolute; right:0; top:50%; width:9px; height:9px; margin-top:-6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); opacity:.5; transition:transform .15s ease;
}
.ss-vouw.is-dicht .ss-vouw-pijl{ transform:rotate(-45deg); margin-top:-2px; }
.ss-vouw.is-dicht .ss-vouw-vak{ display:none; }
/* Een dichtgeklapt blok mag niet meegroeien met de kolom ernaast: in een
   raster rekt een kaart zich anders uit tot de hoogte van zijn buur, en dan
   staat er een halve meter leegte onder een enkele kopregel. */
.ss-vouw.is-dicht{ padding-bottom:var(--ruimte-4,16px); align-self:start; }
.ss-vouw.is-dicht > .ss-vouw-kop{ margin-bottom:0; }
/* de twee blokken met een eigen kopbalk (Google, e-Boekhouden) */
.ss-vouw > .integration-head.ss-vouw-kop{ padding-right:28px; }
@media (prefers-reduced-motion:reduce){ .ss-vouw-pijl{ transition:none; } }

/* =========================================================================
   v15.68.0 — Social media, fase 1: de ideeënbank
   ========================================================================= */
/* De invoerregel. Eén rij, want een idee opschrijven mag geen formulier zijn. */
.ss-contentsnel{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:0 0 var(--ruimte-4,16px);
}
.ss-contentsnel input[name="titel"]{ flex:1 1 280px; min-width:0; }
/* De keuzelijsten in het CRM staan standaard op volle breedte; in een rij als
   deze duwt dat elke lijst naar een eigen regel. Hier dus op hun eigen maat. */
.ss-contentsnel select{ flex:0 1 auto; width:auto; min-width:0; max-width:230px; }
.ss-contentsnel .btn{ white-space:nowrap; }
@media (max-width:620px){
  .ss-contentsnel select{ flex:1 1 44%; max-width:none; }
  .ss-contentsnel .btn{ width:100%; justify-content:center; }
}

.ss-contentblad{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--ruimte-4,16px); align-items:start; }
.ss-contentlijst{ min-width:0; }
.ss-contentzij{ display:flex; flex-direction:column; gap:var(--ruimte-3,12px); min-width:0; }
@media (max-width:1100px){
  .ss-contentblad{ grid-template-columns:minmax(0,1fr); }
  .ss-contentzij{ order:-1; }
}

.ss-contentrij{ gap:10px; }
.ss-contentvlag{ width:9px; height:9px; border-radius:50%; background:var(--kleur,var(--ss-lijn)); flex:0 0 auto; }
.ss-contentstatus{ margin:0; flex:0 0 auto; }
.ss-contentstatus select{ font-size:var(--tekst-xs,11.5px); }
.ss-contentleeg{ padding:var(--ruimte-4,16px) 0; }
.ss-contentfilters{ display:flex; flex-wrap:wrap; gap:6px; margin:0; justify-content:flex-end; }
.ss-contentfilters select{ font-size:var(--tekst-xs,11.5px); width:auto; max-width:190px; flex:0 1 auto; }
@media (max-width:620px){ .ss-contentfilters select{ flex:1 1 30%; max-width:none; } }
.ss-contentvoet{ margin-top:var(--ruimte-3,12px); font-size:var(--tekst-xs,11.5px); }

/* het weekdoel per kanaal */
.ss-weekdoelen{ display:flex; flex-direction:column; gap:10px; padding:var(--ruimte-3,12px) 0 2px; }
.ss-weekdoel{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; font-size:var(--tekst-s,12.5px); }
.ss-weekdoel b{ font-variant-numeric:tabular-nums; font-weight:600; }
.ss-weekbalk{ grid-column:1 / -1; height:4px; border-radius:3px; background:color-mix(in srgb,var(--ss-inkt) 12%,transparent); overflow:hidden; }
.ss-weekbalk i{ display:block; height:100%; background:var(--kleur,var(--ss-accent,#daea09)); }

/* voorraad per pijler */
.ss-pijlerlijst{ display:flex; flex-direction:column; padding:var(--ruimte-3,12px) 0 2px; }
.ss-pijlerregel{
  display:flex; align-items:center; gap:9px; padding:7px 6px; margin-inline:-6px;
  border-radius:8px; color:inherit; text-decoration:none; font-size:var(--tekst-s,12.5px);
}
.ss-pijlerregel:hover{ background:var(--ss-kaart-2,color-mix(in srgb,var(--ss-inkt) 5%,transparent)); }
.ss-pijlerregel span:nth-child(2){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-pijlerregel b{ font-variant-numeric:tabular-nums; font-weight:700; }
.ss-pijlerregel.is-leeg b{ color:var(--ss-letop-kleur,#ea4ca7); }
.ss-pijleruitleg{ margin:var(--ruimte-3,12px) 0 var(--ruimte-2,8px); font-size:var(--tekst-xs,11.5px); line-height:1.5; }
.ss-contentzij .card-head .head-title{ min-width:0; }
.ss-contentweg{ display:flex; align-items:center; gap:9px; margin-top:var(--ruimte-3,12px); font-size:var(--tekst-xs,11.5px); }
.ss-contentweg form{ margin:0; }

/* =========================================================================
   v15.69.0 — de contentkalender
   ========================================================================= */
.ss-kalkop{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:var(--ruimte-3,12px); }
.ss-kalkop > b{ font-family:var(--heading-font); font-size:var(--tekst-l,17px); font-weight:700; min-width:0; }
.ss-kalkop-uitleg{ margin-left:auto; font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht); }
.ss-kalverborgen{ display:none; }

/* v15.90.0 - DEZE HEETTE .ss-kalender EN DAT WAS AL BEZET.
   De minikalender op je dashboard heet in v1640.css ook .ss-kalender, en
   omdat dit bestand later wordt ingeladen won deze regel. Je dashboardmaand
   werd daardoor een kolom van 42 vierkanten van 270 pixels. Deze kalender
   heet nu .ss-contentkalender; de dashboardkalender houdt de oude naam. */
.ss-contentkalender{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--ruimte-4,16px); }
.ss-kalweek{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.ss-kaldag{
  min-height:118px; min-width:0; padding:8px; border-radius:var(--ss-r-klein,12px);
  background:var(--ss-kaart); border:1px solid var(--ss-lijn);
  display:flex; flex-direction:column; gap:5px;
}
.ss-kaldag.is-vandaag{ border-color:var(--ss-accent,#daea09); box-shadow:inset 0 0 0 1px var(--ss-accent,#daea09); }
.ss-kaldag.is-buiten{ opacity:.45; }
.ss-kaldag.is-doel{ background:color-mix(in srgb,var(--ss-accent,#daea09) 18%,var(--ss-kaart)); }
.ss-kaldagkop{ display:flex; align-items:baseline; gap:5px; color:var(--ss-zacht); }
.ss-kaldagkop span{ font-size:var(--tekst-xxs,10px); text-transform:uppercase; letter-spacing:.09em; font-weight:600; }
.ss-kaldagkop b{ font-size:var(--tekst-s,12.5px); color:var(--ss-inkt); font-variant-numeric:tabular-nums; }

.ss-kalkaart{
  position:relative; border-radius:9px; padding:6px 7px; min-width:0; cursor:grab;
  background:color-mix(in srgb,var(--kleur,#c194d5) var(--ss-vul,18%),var(--ss-menging,transparent));
  box-shadow:var(--ss-schaduw-klein);
}
.ss-kalkaart.is-sleep{ opacity:.45; }
.ss-kalkaart a{ display:block; color:inherit; text-decoration:none; min-width:0; }
.ss-kalkaart b{ display:block; font-weight:600; font-size:var(--tekst-xs,11.5px); line-height:1.25;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.ss-kalkaart small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xxs,10px); margin-top:2px; }
.ss-kalkaart .ss-contentvlag{ display:inline-block; margin-right:5px; vertical-align:middle; }
/* Het datumknopje: klein, en op een telefoon de enige manier om te verzetten. */
.ss-kaldatum{ margin:0; position:absolute; top:4px; right:4px; }
.ss-kaldatum input{
  width:22px; height:22px; padding:0; border:0; background:transparent; color:inherit;
  opacity:.45; cursor:pointer; min-height:0;
}
.ss-kaldatum input::-webkit-calendar-picker-indicator{ opacity:.9; cursor:pointer; }
.ss-kalkaart:hover .ss-kaldatum input{ opacity:.9; }
.ss-kalleeg{
  margin-top:auto; font:inherit; font-size:var(--tekst-xxs,10px); cursor:pointer;
  border:1px dashed var(--ss-lijn); border-radius:8px; padding:5px 6px;
  background:transparent; color:var(--ss-zacht); text-align:left;
}
.ss-kalleeg:hover{ color:var(--ss-inkt); border-color:var(--ss-zacht); }

/* de lade met ideeën onder de kalender */
.ss-kallade{ border:1px solid var(--ss-lijn); border-radius:var(--ss-r-klein,12px); padding:var(--ruimte-4,16px); margin-bottom:var(--ruimte-4,16px); }
.ss-kalladekop{ display:flex; align-items:center; gap:10px; margin-bottom:var(--ruimte-3,12px); }
.ss-kalladekop b{ flex:1; font-family:var(--heading-font); }
.ss-kalladelijst{ display:flex; flex-direction:column; gap:5px; max-height:320px; overflow-y:auto; }
.ss-kalladeregel{
  display:flex; align-items:center; gap:9px; margin:0; padding:7px 9px; border-radius:9px; min-width:0;
  background:color-mix(in srgb,var(--kleur,#c194d5) var(--ss-vul,18%),var(--ss-menging,transparent));
}
.ss-kalladetekst{ flex:1; min-width:0; }
.ss-kalladetekst b{ display:block; font-weight:600; font-size:var(--tekst-s,12.5px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-kalladetekst small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xxs,10px); }

/* het weekdoel instellen */
.ss-weekdoelinst{ margin-top:var(--ruimte-3,12px); font-size:var(--tekst-xs,11.5px); }
.ss-weekdoelinst > summary{ cursor:pointer; color:var(--ss-zacht); }
.ss-weekdoelinst > summary:hover{ color:var(--ss-inkt); }
.ss-weekdoelinst form{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.ss-weekdoelinst label{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.ss-weekdoelinst input{ width:62px; min-width:0; }

/* Op een smal scherm worden de zeven kolommen zeven rijen. Een week in een
   kolom van 50 pixels is geen kalender meer. */
@media (max-width:900px){
  .ss-kalweek{ grid-template-columns:minmax(0,1fr); }
  .ss-kaldag{ min-height:0; flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .ss-kaldagkop{ flex:0 0 58px; }
  .ss-kalkaart{ flex:1 1 180px; }
  .ss-kalleeg{ flex:1 1 100%; margin-top:0; }
  .ss-kaldag.is-buiten{ display:none; }
  .ss-kalkop-uitleg{ flex:1 1 100%; margin-left:0; }
}
/* Op de kalendertab staat het rooster al over de volle breedte. De twee
   blokjes eronder gaan dan naast elkaar in plaats van in een smalle kolom met
   een half scherm leegte ernaast. */
.ss-contentblad.is-kalender{ grid-template-columns:minmax(0,1fr); }
.ss-contentblad.is-kalender .ss-contentzij{ flex-direction:row; flex-wrap:wrap; order:0; }
.ss-contentblad.is-kalender .ss-contentzij > .card{ flex:1 1 320px; min-width:0; }

/* =========================================================================
   v15.70.0 — SOCIAL OP HET IDEE-EN-POSTMODEL, HET NF-SCHUIFJE
   EN DE PROJECTNAAM IN DE TABEL
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. De projectnaam in de projectentabel.
   In v1590/v1600 staat de "niveau 3"-regel: het onderwerp van een regel is
   overal dezelfde letter op dezelfde grootte - een taaktitel, een klantnaam,
   een contactpersoon. De projectentabel ontbrak in dat rijtje en zette de
   naam als gewone vette tabeltekst. Nu loopt hij mee.
   ------------------------------------------------------------------------- */
.table-wrap table .ss-tabelrij td:nth-child(2) a.table-link b{
  font:500 var(--tekst-l,16px)/1.3 var(--body-font);
  letter-spacing:-.005em;
}

/* -------------------------------------------------------------------------
   2. Het NF-schuifje in de timerregel.
   Twee letters en een schuifje, op dezelfde lijn als de omschrijving en het
   project. In het paneel (waar de regels onder elkaar staan) komt het woord
   "niet factureerbaar" erbij; op de smalle regel van een projectpagina
   verdwijnt dat en blijft NF over.
   ------------------------------------------------------------------------- */
.ss-nf{
  position:relative;
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  cursor:pointer; user-select:none; min-width:0;
  font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht);
}
.ss-nf input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.ss-nf-vorm{
  position:relative; flex:0 0 auto; width:30px; height:17px; border-radius:999px;
  background:color-mix(in srgb,var(--ss-inkt) 12%,transparent);
  border:1px solid var(--ss-lijn); transition:background .14s ease,border-color .14s ease;
}
.ss-nf-vorm i{
  position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%;
  background:var(--ss-zacht); transition:transform .14s ease,background .14s ease;
}
.ss-nf input:checked + .ss-nf-vorm{
  background:color-mix(in srgb,var(--ss-waarschuwing,#e4a11b) 55%,transparent);
  border-color:color-mix(in srgb,var(--ss-waarschuwing,#e4a11b) 70%,transparent);
}
.ss-nf input:checked + .ss-nf-vorm i{ transform:translateX(13px); background:var(--ss-kaart,#fff); }
.ss-nf input:focus-visible + .ss-nf-vorm{ outline:2px solid var(--ss-accent,#daea09); outline-offset:2px; }
.ss-nf-letters{
  font-weight:700; letter-spacing:.06em; font-size:var(--tekst-xxs,10px);
  padding:2px 5px; border-radius:6px; border:1px solid var(--ss-lijn); line-height:1;
}
.ss-nf input:checked ~ .ss-nf-letters{
  color:var(--ss-inkt); border-color:color-mix(in srgb,var(--ss-waarschuwing,#e4a11b) 60%,transparent);
  background:color-mix(in srgb,var(--ss-waarschuwing,#e4a11b) 16%,transparent);
}
.ss-nf-uitleg{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ss-nf.is-kort .ss-nf-uitleg{ display:none; }
@media (max-width:760px){ .ss-nf-uitleg{ display:none; } }
/* In de timerregel en het paneel netjes meelopen met de rest. */
.ss-timerstart,.ss-timerwissel{ flex-wrap:nowrap; }
.ss-timerstart .ss-nf,.ss-timerwissel .ss-nf{ margin:0; }
.ss-timerpaneel .ss-nf{ width:100%; justify-content:flex-start; margin:2px 0 4px; }

/* -------------------------------------------------------------------------
   3. Het kanaalicoon. Staat overal waar een kanaal genoemd wordt, in de
   huidige tekstkleur zodat hij in beide thema's klopt.
   ------------------------------------------------------------------------- */
.ss-kanaalicoon{
  flex:0 0 auto; vertical-align:-.12em; margin-right:4px;
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.ss-postformaat{ opacity:.7; }

/* -------------------------------------------------------------------------
   4. De ideeënbank: beeld, uittreksel en de versies als bulletjes.
   ------------------------------------------------------------------------- */
.ss-contentrij{ align-items:flex-start; }
.ss-contentrij .ss-vak{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
/* De titel is met opzet een blok en geen flexregel. Als flexregel wordt het
   bolletje één vak en de titel een tweede, en zo'n tekstvak krimpt niet onder
   zijn langste woord - daarmee duwde een titel van 133 pixels op een telefoon
   de hele regel buiten het scherm. Als blok met een inline bolletje ervoor
   breekt de tekst gewoon af, zoals overal elders in het CRM. */
.ss-contentrij .ss-titel{ display:block; min-width:0; }
.ss-contentrij .ss-titel .ss-contentvlag{
  display:inline-block; margin-right:7px; vertical-align:middle;
}

.ss-contentbeeld{
  position:relative; flex:0 0 auto; width:44px; aspect-ratio:4/5; border-radius:8px;
  overflow:hidden; background:color-mix(in srgb,var(--ss-inkt) 7%,transparent);
  border:1px solid var(--ss-lijn); display:block;
}
.ss-contentbeeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-contentbeeldleeg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ss-zacht); opacity:.5;
}
.ss-contentbeeldtel{
  position:absolute; right:3px; bottom:3px; min-width:15px; padding:0 3px; border-radius:5px;
  background:color-mix(in srgb,#000 62%,transparent); color:#fff; text-align:center;
  font-size:var(--tekst-xxs,10px); font-weight:600; line-height:15px;
}
.ss-contentuittreksel{
  display:block; min-width:0; color:var(--ss-zacht);
  font-size:var(--tekst-s,12.5px); line-height:1.4;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ss-contentuittreksel i{ opacity:.8; }

.ss-postbullets{ display:flex; flex-wrap:wrap; gap:5px; margin-top:1px; min-width:0; }
.ss-postbullet{
  display:inline-flex; align-items:center; gap:0; padding:2px 8px; border-radius:999px;
  font-size:var(--tekst-xxs,10px); line-height:1.5; white-space:nowrap;
  background:color-mix(in srgb,var(--kleur,var(--ss-lijn)) var(--ss-vul,18%),var(--ss-menging,transparent));
  border:1px solid color-mix(in srgb,var(--kleur,var(--ss-lijn)) 34%,transparent);
}
.ss-postbullet i{ font-style:normal; opacity:.7; margin-left:4px; }
.ss-postbullet.is-leeg{
  background:transparent; border-style:dashed; border-color:var(--ss-lijn); color:var(--ss-zacht);
  white-space:normal;
}
.ss-statuspil{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  padding:4px 10px; border-radius:999px; border:1px solid var(--ss-lijn); color:var(--ss-zacht);
  font-size:var(--tekst-xs,11.5px);
}
.ss-statuspil:hover{ color:var(--ss-inkt); border-color:var(--ss-zacht); }
.ss-statuspil i{
  font-style:normal; font-weight:700; font-size:var(--tekst-xxs,10px);
  padding:1px 5px; border-radius:999px; background:color-mix(in srgb,var(--ss-inkt) 11%,transparent);
}
.ss-weekstories{
  margin:6px 0 0; font-size:var(--tekst-xs,11.5px); color:var(--ss-zacht); line-height:1.4;
}
.ss-weekdoel > span{ display:inline-flex; align-items:center; min-width:0; }
.ss-pijlerregel .naam{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:620px){
  .ss-contentbeeld{ width:38px; }
  .ss-contentrij .ss-titel .ss-contentvlag{ margin-right:6px; }
  /* op een telefoon mag de statusknop onder de tekst: naast een titel van
     twee regels is er geen plek voor een keuzelijst */
  .ss-contentrij{ flex-wrap:wrap; }
  .ss-contentrij .ss-contentstatus,.ss-contentrij .ss-statuspil{ margin-left:auto; }
}

/* -------------------------------------------------------------------------
   5. De kalender: een minibeeld op het kaartje.
   Het kaartje wordt daarmee hoger, dus de dagen mogen langer worden - dat is
   precies wat een week met beeld nodig heeft om te kloppen.
   ------------------------------------------------------------------------- */
.ss-kaldag{ min-height:150px; }
.ss-kalkaart a{ display:block; }
/* v15.94.0 - BEELD BOVEN DE TEKST, EN GROOT GENOEG OM IETS TE ZIEN.
   Het stond als duimnagel van 34 pixels naast de titel. Daar zie je niets
   aan, terwijl je bij social juist op het beeld plant. Nu over de volle
   breedte van het kaartje, met de verhouding van het kanaal, en een plafond
   zodat een staande story de dag niet helemaal vult. */
.ss-kalbeeld{
  /* Het is een <span> in een link: zonder display:block blijft hij inline en
     doet breedte noch verhouding iets. */
  display:block;
  position:relative; flex:0 0 auto; width:100%; aspect-ratio:var(--ratio,0.8);
  max-height:150px; margin-bottom:6px;
  border-radius:8px; overflow:hidden; border:1px solid var(--ss-lijn);
  background:color-mix(in srgb,var(--ss-inkt) 7%,transparent);
}
.ss-kalbeeld img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ss-kalbeeldleeg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ss-zacht); opacity:.45;
}
.ss-kaltekst{ min-width:0; display:block; padding-right:18px; }
.ss-kalkaart small .ss-kanaalicoon{ vertical-align:-.1em; }
@media (max-width:860px){ .ss-kaldag{ min-height:0; } }

/* -------------------------------------------------------------------------
   6. Eén idee open: links tekst en beeld, rechts klaarzetten en voorbeeld.
   ------------------------------------------------------------------------- */
.ss-ideekaart{ margin-bottom:var(--ruimte-4,16px); }

.ss-versiebalk{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:var(--ruimte-3,12px);
}
.ss-versietabs{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.ss-versietab{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  text-decoration:none; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px);
  border:1px solid var(--ss-lijn); background:transparent; white-space:nowrap;
}
.ss-versietab:hover{ color:var(--ss-inkt); border-color:var(--ss-zacht); }
.ss-versietab.is-actief{
  color:var(--ss-inkt); font-weight:600;
  background:color-mix(in srgb,var(--kleur,var(--ss-accent,#daea09)) var(--ss-vul,18%),var(--ss-menging,transparent));
  border-color:color-mix(in srgb,var(--kleur,var(--ss-accent,#daea09)) 46%,transparent);
}
.ss-versietab i{ font-style:normal; opacity:.65; }
.ss-versienieuw{ margin-left:auto; position:relative; }
.ss-versienieuw > summary{ list-style:none; cursor:pointer; }
.ss-versienieuw > summary::-webkit-details-marker{ display:none; }
.ss-versienieuw[open] > summary{ border-color:var(--ss-zacht); }
.ss-versienieuw form{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 0;
  padding:var(--ruimte-3,12px); border-radius:var(--ss-r-klein,12px);
  background:var(--ss-kaart); border:1px solid var(--ss-lijn);
  box-shadow:var(--ss-schaduw-klein);
}
.ss-versienieuw form select{ flex:1 1 150px; min-width:0; font-size:var(--tekst-xs,11.5px); }
.ss-versienieuw > p{
  margin:7px 0 0; max-width:40ch; font-size:var(--tekst-xs,11.5px); line-height:1.45;
}
@media (min-width:900px){
  .ss-versienieuw{ position:relative; }
  .ss-versienieuw[open] form,.ss-versienieuw[open] > p{
    position:absolute; right:0; top:calc(100% + 6px); z-index:30; width:330px;
  }
  .ss-versienieuw[open] > p{
    top:calc(100% + 6px); padding:0 var(--ruimte-3,12px); transform:translateY(96px);
    background:transparent; max-width:330px;
  }
}
.ss-eerstepost{ margin-bottom:var(--ruimte-4,16px); }
.ss-eerstepostrij{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0; }
.ss-eerstepostrij select{ flex:1 1 170px; min-width:0; }

/* v15.70.1: links wat je maakt, rechts wat eruit komt.
   Links van boven naar beneden: het idee, welke versie, en de tekst en het
   beeld van die versie. Rechts eerst het voorbeeld en daaronder het formulier
   waarmee je hem klaarzet - dat formulier heeft tien velden en hoort niet
   tussen jou en het resultaat in te staan. */
.ss-socialblad{
  display:grid; grid-template-columns:minmax(0,1fr) 380px;
  gap:var(--ruimte-4,16px); align-items:start;
}
.ss-socialblad.is-enkel{ grid-template-columns:minmax(0,1fr); }
.ss-soclinks{ display:flex; flex-direction:column; gap:var(--ruimte-3,12px); min-width:0; }
.ss-posthoofd{ margin:0; min-width:0; }
.ss-postvelden{ display:flex; flex-direction:column; gap:var(--ruimte-3,12px); min-width:0; }
.ss-postzij{ display:flex; flex-direction:column; gap:var(--ruimte-3,12px); min-width:0; }
.ss-soclinks > .ss-ideekaart{ margin-bottom:0; }
@media (max-width:1100px){
  .ss-socialblad{ grid-template-columns:minmax(0,1fr); }
  /* op een smal scherm komt het voorbeeld onder de tekst te staan: daar lees
     je eerst wat je schrijft en kijk je daarna wat ervan wordt */
  .ss-postzij{ order:1; }
}

/* het schuifje bij "eigen tekst" en "eigen beeld" */
.ss-schuifje{
  position:relative;
  display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none;
  font-size:var(--tekst-s,12.5px); margin-bottom:var(--ruimte-3,12px);
}
.ss-schuifje input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.ss-schuifjevorm{
  position:relative; flex:0 0 auto; width:34px; height:19px; border-radius:999px;
  background:color-mix(in srgb,var(--ss-inkt) 12%,transparent);
  border:1px solid var(--ss-lijn); transition:background .14s ease,border-color .14s ease;
}
.ss-schuifjevorm::after{
  content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:var(--ss-zacht); transition:transform .14s ease,background .14s ease;
}
.ss-schuifje input:checked + .ss-schuifjevorm{
  background:color-mix(in srgb,var(--ss-accent,#daea09) 60%,transparent);
  border-color:color-mix(in srgb,var(--ss-accent,#daea09) 70%,transparent);
}
.ss-schuifje input:checked + .ss-schuifjevorm::after{ transform:translateX(15px); background:var(--ss-kaart,#fff); }
.ss-schuifje input:focus-visible + .ss-schuifjevorm{ outline:2px solid var(--ss-accent,#daea09); outline-offset:2px; }
.ss-schuifjelabel{ min-width:0; }

.ss-eigentekstvak textarea{ width:100%; }
.ss-tekenteller{
  margin:5px 0 0; font-size:var(--tekst-xxs,10px); color:var(--ss-zacht); line-height:1.4;
}
.ss-tekenteller.is-lang{ color:var(--ss-waarschuwing,#e4a11b); }
.ss-tekstvolgt{
  margin:0; padding:var(--ruimte-3,12px); border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--ss-inkt) 5%,transparent);
  font-size:var(--tekst-s,12.5px); line-height:1.5;
}

.ss-beeldstrook{ display:flex; flex-wrap:wrap; gap:8px; }
.ss-beeldtegel{
  position:relative; flex:0 0 auto; width:78px; aspect-ratio:var(--ratio,0.8);
  border-radius:9px; overflow:hidden; border:1px solid var(--ss-lijn);
  background:color-mix(in srgb,var(--ss-inkt) 7%,transparent);
}
.ss-beeldtegel.is-leeg{ border-style:dashed; }
.ss-beeldtegel img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-beeldleeg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ss-zacht); opacity:.45;
}

/* klaarzetten.
   v15.70.1: één kolom. In twee kolommen van 170 pixels werd "Merkregie in de
   praktijk" afgekapt tot "Merkregie in de prakti" en "Staand 4:5 · 1080 × 1350"
   tot "1080 × 13". Een keuzelijst die je niet kunt uitlezen is geen keuzelijst.
   Alleen de datum en de tijd blijven naast elkaar, want die horen bij elkaar. */
.ss-kzvelden{ display:grid; grid-template-columns:1fr; gap:var(--ruimte-3,12px); }
.ss-kzvelden > label{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ss-kzvelden > label > span:first-child{
  font-size:var(--tekst-xxs,10px); text-transform:uppercase; letter-spacing:.05em;
  color:var(--ss-zacht); font-weight:600;
}
.ss-kzvelden select,.ss-kzvelden input{ width:100%; min-width:0; font-size:var(--tekst-xs,11.5px); }
.ss-kzvelden > label:last-child,.ss-kzvelden .ss-kzwanneer{ grid-column:1 / -1; }
.ss-kzwanneer > span:last-child{ display:flex; gap:7px; }
.ss-kzwanneer input[type=date]{ flex:1 1 60%; }
.ss-kzwanneer input[type=time]{ flex:1 1 40%; }
.ss-kzacties{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:var(--ruimte-3,12px); padding-top:var(--ruimte-3,12px);
  border-top:1px solid var(--ss-lijn);
}
@media (max-width:420px){ .ss-kzvelden{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   7. Het voorbeeld. Geen namaak-app, maar genoeg vorm om te zien waar je
   tekst afbreekt en hoe hoog je beeld wordt. De grijze band bij "meer" komt
   uit de javascript: die weet pas na het typen waar de knip valt.
   ------------------------------------------------------------------------- */
.ss-voorbeeldkaart .card-head{ align-items:center; }
.ss-voorbeeldpijlen{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.ss-voorbeeldpijlen small{ color:var(--ss-zacht); font-size:var(--tekst-xxs,10px); min-width:30px; text-align:center; }
.icon-btn.is-uit{ opacity:.3; cursor:default; }

/* v15.73.0 — HET VOORBEELD, OPNIEUW.
   Geen namaak van de app, maar wel met de vorm die je nodig hebt om te zien
   hoe je bericht valt: de kop, het beeld in de juiste verhouding, de knip in
   je tekst, en bij een carrousel de puntjes eronder. */
.ss-voorbeeld{
  border-radius:var(--ss-r-klein,12px); overflow:hidden;
  border:1px solid var(--ss-lijn); background:var(--ss-kaart);
}
.ss-vbkop{ display:flex; align-items:center; gap:10px; padding:11px 12px; }
.ss-vbavatar{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:color-mix(in srgb,var(--ss-lila,#c194d5) 42%,var(--ss-kaart));
  color:var(--ss-inkt);
}
.ss-vbavatar b{ font-size:var(--tekst-s,12.5px); font-weight:700; line-height:1; }
/* Instagram zet een ringetje om je foto; dat is het enige wat die kop
   herkenbaar maakt zonder dat je een logo nabouwt. */
.ss-vbavatar.is-ring{
  box-shadow:0 0 0 2px var(--ss-kaart),0 0 0 3.5px color-mix(in srgb,var(--ss-roze,#ea4ca7) 70%,transparent);
}
.ss-vbwie{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.ss-vbwie b{
  font-size:var(--tekst-s,12.5px); font-weight:600; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-vbwie small{
  font-size:var(--tekst-xxs,10px); color:var(--ss-zacht); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-vbmeer{ margin-left:auto; color:var(--ss-zacht); display:flex; flex:0 0 auto; }
.ss-vbicoon{ flex:0 0 auto; }

.ss-vbtijd{
  padding:0 12px 9px; margin-top:-4px;
  display:flex; align-items:center; gap:5px;
  font-size:var(--tekst-xxs,10px); color:var(--ss-zacht);
}
.ss-vbtijd.is-onder{ padding:0 12px 11px; margin-top:0; }

.ss-vbbeeld{
  position:relative; width:100%; aspect-ratio:var(--ratio,0.8); max-width:100%;
  background:color-mix(in srgb,var(--ss-inkt) 8%,transparent);
}
.ss-vbbeeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-vbbeeldleeg{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:7px; color:var(--ss-zacht); opacity:.55;
}
.ss-vbbeeldleeg small{
  font-size:var(--tekst-xxs,10px); font-weight:600; letter-spacing:.04em;
  padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb,var(--ss-kaart) 86%,transparent);
  border:1px solid var(--ss-lijn); opacity:1;
}
/* Bij een carrousel: hoeveel beelden er in zitten, en puntjes eronder. */
.ss-vbteller{
  position:absolute; top:9px; right:9px;
  font-size:var(--tekst-xxs,10px); font-weight:600; line-height:1;
  padding:5px 9px; border-radius:999px;
  background:color-mix(in srgb,#000 58%,transparent); color:#fff;
}
.ss-vbpunten{ display:flex; justify-content:center; gap:4px; padding:9px 0 2px; }
.ss-vbpunten i{
  width:5px; height:5px; border-radius:50%;
  background:color-mix(in srgb,var(--ss-inkt) 22%,transparent);
}
.ss-vbpunten i.is-nu{ background:color-mix(in srgb,var(--ss-inkt) 62%,transparent); }

.ss-vbacties{
  display:flex; align-items:center; gap:14px; padding:9px 12px;
  color:var(--ss-inkt);
}
.ss-vbknoppen{ display:flex; align-items:center; gap:14px; }
.ss-vbbewaar{ margin-left:auto; display:flex; }
.ss-vbacties.is-linkedin{
  gap:0; justify-content:space-between; padding:7px 6px;
  border-top:1px solid var(--ss-lijn); color:var(--ss-zacht);
}
.ss-vbacties.is-linkedin span{
  display:inline-flex; align-items:center; gap:6px; min-width:0;
  font-size:var(--tekst-xxs,10px); font-weight:600;
  padding:5px 7px; border-radius:7px;
}
.ss-vbreacties{
  display:flex; align-items:center; gap:6px; padding:9px 12px 7px;
  font-size:var(--tekst-xxs,10px); color:var(--ss-zacht);
}
.ss-vbduim{
  display:grid; place-items:center; width:16px; height:16px; border-radius:50%;
  background:color-mix(in srgb,var(--ss-lila,#c194d5) 55%,transparent);
  color:var(--ss-inkt);
}
.ss-vbtekst{
  padding:2px 12px 11px; font-size:var(--tekst-s,12.5px); line-height:1.5;
  white-space:pre-wrap; overflow-wrap:break-word;
}
.ss-voorbeeld.is-linkedin .ss-vbtekst{ padding-bottom:10px; }
.ss-vbtekst b{ font-weight:600; }
/* alles voorbij de knip staat gedempt: dat is wat achter "meer" verdwijnt */
.ss-vbtekst .ss-vbrest{ color:var(--ss-zacht); }
.ss-vbtekst .ss-vbmeerknip{ color:var(--ss-zacht); font-weight:600; }
.ss-voorbeeld.is-linkedin .ss-vbbeeld{ border-top:1px solid var(--ss-lijn); }

/* Een story heeft geen kop- en voetregels; wel een balkje bovenin, want dat
   is het enige dat een story een story maakt. */
.ss-voorbeeld.is-story{ max-width:260px; margin-inline:auto; background:#121212; border-color:#2a2a2a; }
.ss-voorbeeld.is-story .ss-vbkop{ position:relative; color:#fff; }
.ss-voorbeeld.is-story .ss-vbwie small{ color:rgba(255,255,255,.7); }
.ss-voorbeeld.is-story .ss-vbbeeld{ background:#1c1c1c; }
.ss-vbstorybalk{ display:flex; gap:3px; padding:9px 10px 0; }
.ss-vbstorybalk i{
  flex:1 1 auto; height:2px; border-radius:2px; background:rgba(255,255,255,.3);
  position:relative; overflow:hidden;
}
.ss-vbstorybalk i::after{
  content:''; position:absolute; inset:0 62% 0 0; background:#fff; border-radius:2px;
}
.ss-vbuitleg{ margin:9px 0 0; font-size:var(--tekst-xs,11.5px); line-height:1.45; }

/* -------------------------------------------------------------------------
   8. Pijlers en highlights beheren.
   ------------------------------------------------------------------------- */
.ss-pijlerblad{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:var(--ruimte-4,16px); align-items:start;
}
@media (max-width:1000px){ .ss-pijlerblad{ grid-template-columns:minmax(0,1fr); } }

.ss-pijlerbeheer{ display:flex; flex-direction:column; gap:7px; }
.ss-pijlerbeheerrij{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0;
  padding:9px 12px; border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--kleur,var(--ss-lijn)) var(--ss-vul,18%),var(--ss-menging,transparent));
  border:1px solid color-mix(in srgb,var(--kleur,var(--ss-lijn)) 30%,transparent);
}
.ss-pijlerbeheerrij.is-uit{ opacity:.55; }
.ss-pijlerbeheerrij input[type=color]{
  flex:0 0 auto; width:28px; height:28px; padding:0; border-radius:50%;
  border:1px solid var(--ss-lijn); background:transparent; cursor:pointer; min-height:0;
}
.ss-pijlerbeheerrij input[name=name]{
  flex:1 1 150px; min-width:0; font-size:var(--tekst-s,12.5px);
}
.ss-pijlertel{ flex:0 0 auto; font-size:var(--tekst-xxs,10px); color:var(--ss-zacht); white-space:nowrap; }
.ss-pijlernieuw{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:var(--ruimte-3,12px) 0 0; padding-top:var(--ruimte-3,12px);
  border-top:1px solid var(--ss-lijn);
}
.ss-pijlernieuw input[type=color]{
  flex:0 0 auto; width:28px; height:28px; padding:0; border-radius:50%;
  border:1px solid var(--ss-lijn); background:transparent; cursor:pointer; min-height:0;
}
.ss-pijlernieuw input[name=name]{ flex:1 1 180px; min-width:0; }

.ss-highlightlijst{ display:flex; flex-direction:column; gap:7px; }
.ss-highlightrij{
  display:flex; align-items:center; gap:9px; margin:0;
  padding:8px 11px; border-radius:var(--ss-r-klein,12px);
  background:var(--ss-kaart); border:1px solid var(--ss-lijn);
}
.ss-highlightrij.is-uit{ opacity:.55; }
.ss-highlightring{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ss-zacht);
  border:2px solid color-mix(in srgb,var(--ss-accent,#daea09) 55%,transparent);
}
.ss-highlightnaam{ flex:1 1 auto; min-width:0; font-size:var(--tekst-s,12.5px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:520px){
  .ss-pijlerbeheerrij .btn.mini{ flex:1 1 auto; }
  .ss-pijlertel{ flex:1 1 100%; }
}

/* -------------------------------------------------------------------------
   9. Twee dingen rechtzetten die bij deze ronde boven kwamen.

   a. Het timerpaneel liep op een telefoon 173 pixels buiten het scherm. In de
      regel voor smalle schermen stond "right:auto; left:0", en die nul is de
      linkerkant van het knopje - en dat knopje staat rechtsboven. Een paneel
      van 330 breed begint daar dus op 233 en eindigt op 563.
      Nu hangt het paneel aan de rechterkant van de timerbalk in plaats van aan
      het knopje: die balk loopt wel tot de rand van het scherm, dus het paneel
      valt binnen het scherm. Het knopje zelf mag daarvoor even niet het
      ankerpunt zijn (position:static).

   b. Een versie-bulletje stond op nowrap. "LinkedIn persoonlijk carrousel ·
      wo 4 nov" is op 390 pixels breder dan het scherm, en dan schuift de hele
      pagina. Op een smal scherm mag zo'n bulletje afbreken; het icoon en het
      kanaal blijven bij elkaar.
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  .ss-timerkies{ position:static; }
  .ss-timerbalk{ position:relative; }
  .ss-timerpaneel{
    left:auto; right:0; top:calc(100% + 8px);
    width:min(330px,calc(100vw - 24px));
  }
}
@media (max-width:620px){
  .ss-postbullets{ gap:4px; }
  .ss-postbullet{
    white-space:normal; overflow-wrap:anywhere;
    max-width:100%; min-width:0; padding:2px 7px;
  }
  .ss-postbullet .ss-kanaalicoon{ margin-right:3px; }
  .ss-statuspil{ padding:3px 8px; }
}

/* -------------------------------------------------------------------------
   10. De ideeënregel op een telefoon.
   Vanaf 780 pixels wordt .ss-rij een rooster van drie kolommen, gemaakt voor
   een taakregel: datum, vinkje, tegel, titel, timer, status. Een ideeënregel
   heeft die onderdelen niet, dus belandden het beeld, de titel en de status in
   willekeurige vakjes en bleef er voor de titel 76 pixels over.
   Een ideeënregel blijft daarom ook op een telefoon een flexregel: beeld,
   tekst, en de status die eronder valt als er geen plek meer is.
   ------------------------------------------------------------------------- */
@media (max-width:780px){
  .ss-rij.ss-contentrij{
    display:flex; flex-wrap:wrap; align-items:flex-start;
    column-gap:10px; row-gap:8px;
  }
  .ss-contentrij > .ss-contentbeeld{ order:0; }
  .ss-contentrij > .ss-vak{ order:1; flex:1 1 0; min-width:0; }
  .ss-contentrij > .ss-contentstatus,
  .ss-contentrij > .ss-statuspil{ order:2; margin-left:auto; }
}
/* De voorraadlijst mocht zelf ook nog zes pixels inleveren. */
.ss-pijlerlijst{ min-width:0; }
.ss-pijlerregel{ min-width:0; gap:8px; }
.ss-pijlerregel > b{ flex:0 0 auto; }

/* =========================================================================
   v15.70.1 — DE PADDING IN DE SOCIALBLOKKEN

   In dit CRM heeft .card zelf padding:0; de kop brengt zijn eigen marge mee
   (13px 16px 12px) en elk blok eronder hoort dat ook te doen. De blokken die
   ik in 15.70.0 toevoegde deden dat niet, en dus stonden de weekdoelen, de
   pijlers, de velden van Klaarzetten en alles op de pijlerpagina strak tegen
   de rand van hun kaartje - de kop netjes ingesprongen, de inhoud niet.

   Eén regel zet dat voor de hele module recht: elk direct kind van zo'n kaart
   dat niet de kop is, krijgt dezelfde 16 pixels links en rechts, en de kaart
   krijgt onderaan lucht. Een streep die over de volle breedte hoort te lopen
   (zoals boven de knoppenrij) trekt zichzelf met een negatieve marge weer naar
   de rand, zodat de lijn doorloopt maar de tekst binnen de kolom blijft.
   ========================================================================= */
.ss-contentzij > .card,
.ss-pijlerblad > .card,
.ss-posthoofd > .card,
.ss-postzij > .card,
.ss-eerstepost{
  padding-bottom:var(--ruimte-4,16px);
}
.ss-contentzij > .card > *:not(.card-head),
.ss-pijlerblad > .card > *:not(.card-head),
.ss-posthoofd > .card > *:not(.card-head),
.ss-postzij > .card > *:not(.card-head),
.ss-eerstepost > *:not(.card-head){
  padding-inline:var(--ruimte-4,16px);
}
/* Een blok dat zijn eigen volle-breedte streep heeft, houdt die streep. */
.ss-postzij > .card > .ss-kzacties,
.ss-pijlerblad > .card > .ss-pijlernieuw{
  margin-inline:0;
  padding-inline:var(--ruimte-4,16px);
}
/* De pijlerregels in de zijkolom trokken zichzelf zes pixels naar buiten om
   hun hoverblokje over de rand te laten lopen. Binnen een ingesprongen kolom
   is dat precies zes pixels te ver. */
.ss-contentzij .ss-pijlerlijst{ padding-inline:calc(var(--ruimte-4,16px) - 6px); }
.ss-contentzij .ss-pijlerregel{ margin-inline:0; }

/* De kop van een kaartje in de zijkolom: de knop rechts had geen ruimte naast
   de titel, en bij "Voorraad per pijler" werd zowel de titel als het knopje in
   drie regels geperst. Nu mag de titel afbreken en houdt de knop zijn maat. */
.ss-contentzij .card-head,
.ss-pijlerblad .card-head{ gap:10px; align-items:center; }
.ss-contentzij .card-head .head-title,
.ss-pijlerblad .card-head .head-title{ flex:1 1 auto; min-width:0; }
.ss-contentzij .card-head > .btn,
.ss-pijlerblad .card-head > .btn{ flex:0 0 auto; }

/* Een keuzelijst zette zijn pijltje strak tegen de rand. Het pijltje is van de
   browser zelf en gaat achter de tekst staan, dus het volgt de padding rechts:
   met wat meer ruimte daar komt het weer los van de rand te staan. */
.ss-contentfilters select,
.ss-contentsnel select,
.ss-kzvelden select,
.ss-versienieuw select,
.ss-eerstepostrij select{
  padding-right:9px;
}
.ss-contentfilters select{ padding-block:8px; }

/* De invoerregel zelf: op de kalendertab staat hij nu ook, en dan mag hij niet
   tegen het rooster eronder aan plakken. */
.ss-contentsnel{ margin-bottom:var(--ruimte-4,16px); }

/* De nieuwe indeling erft de padding-regels van hierboven: die gingen uit van
   .ss-posthoofd als directe ouder van de kaarten, en dat is nu .ss-postvelden. */
.ss-postvelden > .card{ padding-bottom:var(--ruimte-4,16px); }
.ss-postvelden > .card > *:not(.card-head){ padding-inline:var(--ruimte-4,16px); }
.ss-kzvelden > label:last-child,.ss-kzvelden .ss-kzwanneer{ grid-column:auto; }

/* Het kalenderkaartje stond gecentreerd. Dat erft het ergens van boven, en met
   alleen een titel viel het niet op; met een minibeeld ernaast wel, want dan
   zweeft de tekst in het midden van wat er overblijft. Overal in dit CRM staat
   de tekst van een regel links, dus hier ook. */
.ss-kalkaart,.ss-kalkaart a,.ss-kaltekst,.ss-kalkaart b,.ss-kalkaart small{ text-align:left; }
.ss-kaltekst{ flex:1 1 auto; min-width:0; }

/* Een kleurkiezer wordt pas rond als je ook het vlakje erbinnen rond maakt:
   de browser tekent dat als een eigen laagje met zijn eigen rand, en daar
   loopt een border-radius op de buitenkant niet overheen. */
.ss-pijlerbeheerrij input[type=color],
.ss-pijlernieuw input[type=color]{ overflow:hidden; }
.ss-pijlerbeheerrij input[type=color]::-webkit-color-swatch-wrapper,
.ss-pijlernieuw input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
.ss-pijlerbeheerrij input[type=color]::-webkit-color-swatch,
.ss-pijlernieuw input[type=color]::-webkit-color-swatch{ border:0; border-radius:50%; }
.ss-pijlerbeheerrij input[type=color]::-moz-color-swatch,
.ss-pijlernieuw input[type=color]::-moz-color-swatch{ border:0; border-radius:50%; }

/* =========================================================================
   v15.70.2 — HET PIJLTJE, HET ZOEKVAK EN TWEE VLAKKEN TEGEN DE RAND
   ========================================================================= */

/* 1. HET PIJLTJE VAN EEN KEUZELIJST.
   Meer padding rechts helpt niet: het pijltje dat de browser zelf tekent
   staat vast tegen de binnenrand, wat je de padding ook geeft. Ik heb het
   nagemeten met 9, 14, 22 en 30 pixels - alle vier precies hetzelfde.
   De enige manier is het pijltje zelf tekenen. Dat doet dit CRM al op twee
   plekken (de statuskeuze en de prioriteitskeuze), met twee schuine
   verlopen die samen een driehoekje vormen in de huidige tekstkleur. Dus
   hier hetzelfde, nu overal.

   Met background-image en niet met background: zo blijft de achtergrondkleur
   staan die het veld al had, in beide thema's. */
.main select:not([multiple]):not([size]):not(.priority-select):not(.inline-status select),
.ss-werkbalk select:not([multiple]):not([size]){
  -webkit-appearance:none; appearance:none;
  padding-right:30px;
  /* gedempt, niet pikzwart: dit is een aanwijzing dat je kunt kiezen, geen
     element dat je aandacht moet trekken. */
  background-image:
    linear-gradient(45deg,transparent 50%,color-mix(in srgb,currentColor 52%,transparent) 50%),
    linear-gradient(135deg,color-mix(in srgb,currentColor 52%,transparent) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:4px 4px,4px 4px;
  background-repeat:no-repeat;
}
.inline-status select,.priority-select{ background-image:none; }
.inline-status select{
  -webkit-appearance:none; appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--status-color) 50%),
    linear-gradient(135deg,var(--status-color) 50%,transparent 50%);
  background-position:calc(100% - 11px) 50%,calc(100% - 7px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.priority-select{
  background-image:
    linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) 12px,calc(100% - 8px) 12px;
  background-size:4px 4px,4px 4px; background-repeat:no-repeat;
}

/* 2. HET ZOEKVAK.
   In style.css staat een regel op het kale woord "input": achtergrond, rand,
   ronde hoeken en 10px padding boven en onder. Die gold ook voor het
   zoekveld binnen de zoekpil. Gevolg: een veld van 42 pixels hoog in een pil
   van 38, met zijn eigen afgeronde vlak erin - dat tweede randje dat je zag.
   Het veld is nu wat het hoort te zijn: alleen tekst binnen de pil. */
.ss-zoek input[type="search"]{
  padding:0; border-radius:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:transparent; border:0;
  /* er staat elders een min-height van 42 op invoervelden, voor een
     aanraakvlak op een telefoon. Binnen een pil van 38 steekt dat er aan
     twee kanten uit; de pil zelf is al groot genoeg om op te tikken. */
  min-height:0; height:calc(var(--ss-knop,38px) - 4px);
}
.ss-zoek input[type="search"]::-webkit-search-decoration,
.ss-zoek input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* 3. TWEE VLAKKEN DIE TEGEN DE RAND STONDEN.
   Een blok met een eigen achtergrond moet je naar binnen schuiven met een
   marge, niet met padding: padding zet alleen de tekst naar binnen en laat
   het gekleurde vlak gewoon tegen de rand van de kaart staan. */
.ss-postvelden > .card > .ss-tekstvolgt,
.ss-posthoofd > .card > .ss-tekstvolgt{
  padding-inline:var(--ruimte-3,12px);
  margin-inline:var(--ruimte-4,16px);
}
.ss-postzij > .card > .ss-voorbeeld{
  padding-inline:0;
  margin-inline:var(--ruimte-4,16px);
}

/* 4. DE KNOP ONDER HET IDEE stond strak tegen het tekstvak. */
.ss-ideekaart .page-actions{ margin-top:var(--ruimte-4,16px); }

/* =========================================================================
   v15.70.2 — DE VERHOUDING IN DE VOORBEELDEN

   Dit stond fout en het stond overal fout. In content_verhoudingen() is
   "ratio" de breedte gedeeld door de hoogte: 4:5 is 0,8 en een story 0,5625.
   In de css stond aspect-ratio:1/var(--ratio) - en 1/0,8 is 1,25, dus bréder
   dan hoog. Precies andersom. Een staande Instagram-foto werd een liggend
   vlak en een story van 1080 × 1920 werd een breed strookje.
   Het is nu aspect-ratio:var(--ratio): de verhouding zelf.

   En het lege vak is nu een echte proeflap in plaats van een grijze vlek:
   met een fijne streeparcering en het formaat erin, zodat je aan de vorm
   ziet wat je krijgt ook als er nog geen beeld aan hangt.
   ========================================================================= */
.ss-vbbeeld,.ss-beeldtegel,.ss-kalbeeld,.ss-contentbeeld{
  max-width:100%;
}
.ss-vbbeeld:has(.ss-vbbeeldleeg),
.ss-beeldtegel.is-leeg,
.ss-beeldtegel:has(.ss-beeldleeg){
  background-color:color-mix(in srgb,var(--ss-inkt) 6%,transparent);
  background-image:repeating-linear-gradient(135deg,
    color-mix(in srgb,var(--ss-inkt) 7%,transparent) 0 1px,
    transparent 1px 9px);
}
.ss-vbbeeldleeg{ gap:7px; }
.ss-vbbeeldleeg small{
  font-size:var(--tekst-xxs,10px); font-weight:600; letter-spacing:.04em;
  padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb,var(--ss-kaart) 86%,transparent);
  border:1px solid var(--ss-lijn); color:var(--ss-zacht); opacity:1;
}
/* Een story is smal en hoog; over de volle breedte van de kolom wordt dat een
   kaart van bijna duizend pixels hoog. Die geven we een bovengrens en zetten
   hem in het midden, zoals Instagram hem zelf ook toont. */
.ss-voorbeeld.is-story .ss-vbbeeld{ max-width:260px; margin-inline:auto; }
.ss-voorbeeld.is-story{ max-width:none; }
.ss-voorbeeld.is-story .ss-vbkop{ max-width:260px; margin-inline:auto; }
.ss-voorbeeld.is-story .ss-vbacties{ display:none; }

/* v15.70.3: de ideekaart begon 24 pixels lager dan het voorbeeld ernaast.
   Dat komt van .form-card, die overal in het CRM margin:24px 0 meekrijgt om
   los te staan van wat erboven staat. Binnen deze twee kolommen doet de gap
   van het rooster dat al, en die 24 pixels zorgden er alleen voor dat de twee
   kolommen niet op dezelfde hoogte begonnen. */
.ss-soclinks > .ss-ideekaart{ margin-top:0; }

/* =========================================================================
   v15.71.0 — DE KOPPELING MET JE GOOGLE-BEDRIJFSPROFIEL
   ========================================================================= */
.ss-gbp-let{
  display:flex; gap:11px; margin:var(--ruimte-3,12px) 0 0;
  padding:12px 14px; border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--ss-waarschuwing,#f08d0c) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--ss-waarschuwing,#f08d0c) 34%,transparent);
  font-size:var(--tekst-s,12.5px); line-height:1.5;
}
.ss-gbp-let.is-wacht{
  background:color-mix(in srgb,var(--ss-lila,#c194d5) 13%,transparent);
  border-color:color-mix(in srgb,var(--ss-lila,#c194d5) 34%,transparent);
}
.ss-gbp-let b{ display:block; margin-bottom:3px; }
.ss-gbp-let p{ margin:0 0 9px; }
.ss-gbp-let p:last-child{ margin-bottom:0; }
.ss-gbp-let code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  padding:1px 5px; border-radius:5px;
  background:color-mix(in srgb,var(--ss-inkt) 10%,transparent);
}

.ss-gbp-kop{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:var(--ruimte-4,16px) 0 var(--ruimte-3,12px);
}
.ss-gbp-kop > b{ font-size:var(--tekst-m,14px); }
.ss-gbp-kop > .muted{ font-size:var(--tekst-xs,11.5px); }
.ss-gbp-kop form{ margin:0 0 0 auto; }

.ss-gbp-lijst{ display:flex; flex-direction:column; gap:7px; }
.ss-gbp-regel{
  display:flex; align-items:center; gap:10px; min-width:0;
  padding:9px 12px; border-radius:var(--ss-r-klein,12px);
  background:var(--ss-kaart-2); border:1px solid var(--ss-lijn);
}
.ss-gbp-regel:not(.is-aan){ opacity:.62; }
.ss-gbp-stip{
  flex:0 0 auto; width:9px; height:9px; border-radius:50%;
  background:var(--ss-lijn);
}
.ss-gbp-regel.is-aan .ss-gbp-stip{ background:var(--ss-goed,#8fd37a); }
.ss-gbp-wie{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ss-gbp-wie b{ font-size:var(--tekst-s,12.5px); }
.ss-gbp-wie small{
  color:var(--ss-zacht); font-size:var(--tekst-xxs,10px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-gbp-klant{ margin:0; flex:0 1 230px; min-width:0; }
.ss-gbp-klant select{ width:100%; min-width:0; font-size:var(--tekst-xs,11.5px); }
.ss-gbp-regel form.inline{ flex:0 0 auto; }
.ss-gbp-voet{ margin:var(--ruimte-3,12px) 0 0; font-size:var(--tekst-xs,11.5px); line-height:1.5; }

@media (max-width:720px){
  .ss-gbp-regel{ flex-wrap:wrap; }
  .ss-gbp-wie{ flex:1 1 100%; order:0; }
  .ss-gbp-stip{ order:-1; }
  .ss-gbp-klant{ flex:1 1 auto; }
  .ss-gbp-kop form{ margin-left:0; }
}

/* De twee keuzes onderaan een idee: archiveren is de rustige, verwijderen de
   definitieve. Ze staan op één regel zodat je ziet dat het een keuze is en
   niet twee losse knoppen. */
.ss-ideeslot{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-top:var(--ruimte-4,16px); padding-top:var(--ruimte-3,12px);
  border-top:1px solid var(--ss-lijn); font-size:var(--tekst-xs,11.5px);
}
.ss-ideeslot form{ margin:0; }
.ss-ideeslot .ss-ideeweg{ margin-left:auto; }
@media (max-width:620px){ .ss-ideeslot .ss-ideeweg{ margin-left:0; } }

/* =========================================================================
   v15.72.0 — DE BEELDVOORRAAD EN DE STIJLGIDS
   ========================================================================= */
.ss-beeldmapkeuze{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px;
  margin:var(--ruimte-3,12px) 0;
}
.ss-beeldmapkeuze .veld{ flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:5px; }
.ss-beeldmapkeuze .veld > span:first-child{
  font-size:var(--tekst-xxs,10px); text-transform:uppercase; letter-spacing:.05em;
  color:var(--ss-zacht); font-weight:600;
}

/* het beeld dat aan een idee of versie hangt */
.ss-beeldstrook{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.ss-beeldvak{ display:flex; flex-direction:column; gap:3px; width:110px; min-width:0; }
.ss-beeldvak .ss-beeldtegel{ width:110px; }
.ss-beeldtegel{ position:relative; }
.ss-beeldnr{
  position:absolute; left:4px; top:4px; min-width:16px; padding:0 4px; border-radius:5px;
  background:color-mix(in srgb,#000 62%,transparent); color:#fff;
  font-size:var(--tekst-xxs,10px); font-weight:700; line-height:16px; text-align:center;
}
.ss-beeldnaam{
  font-size:var(--tekst-xxs,10px); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-beeldmaat{ font-size:var(--tekst-xxs,10px); color:var(--ss-zacht); font-variant-numeric:tabular-nums; }
.ss-beeldknoppen{ display:flex; gap:2px; margin-top:3px; }
.ss-beeldknoppen .icon-btn.mini{ width:24px; min-width:24px; height:24px; margin:0; font-size:12px; }
.ss-beeldvak.is-let .ss-beeldtegel{
  border-color:color-mix(in srgb,var(--ss-waarschuwing,#f08d0c) 55%,transparent);
}
.ss-beeldletlijst{
  margin:var(--ruimte-3,12px) 0 0; padding:10px 13px; list-style:none;
  border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--ss-waarschuwing,#f08d0c) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--ss-waarschuwing,#f08d0c) 30%,transparent);
  font-size:var(--tekst-xs,11.5px); line-height:1.5;
}
.ss-beeldletlijst li + li{ margin-top:5px; }
.ss-beeldletlijst b{ font-weight:600; }
.ss-beelduitleg{ margin-top:var(--ruimte-3,12px); }

/* de lade met je voorraad */
.ss-beeldlade{ margin-top:var(--ruimte-3,12px); }
.ss-beeldlade > summary{ list-style:none; cursor:pointer; display:inline-flex; }
.ss-beeldlade > summary::-webkit-details-marker{ display:none; }
.ss-beeldladelijf{
  margin-top:10px; padding:var(--ruimte-4,16px);
  border-radius:var(--ss-r,20px); background:var(--ss-kaart);
  border:1px solid var(--ss-lijn); box-shadow:var(--ss-schaduw-klein);
}
.ss-beeldladekop{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:var(--ruimte-3,12px); }
.ss-beeldzoek,.ss-beeldupload{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0; }
.ss-beeldzoek input[type=search]{ flex:1 1 180px; min-width:0; }
.ss-beeldupload{ margin-left:auto; }
.ss-beeldupload input[type=file]{
  flex:1 1 200px; min-width:0; font-size:var(--tekst-xs,11.5px);
  padding:6px 9px; border-radius:var(--ss-r-veld,12px);
  background:var(--ss-kaart-2); border:1px solid var(--ss-lijn);
}
@media (max-width:760px){ .ss-beeldupload{ margin-left:0; width:100%; } }

.ss-beeldraster{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:10px; margin-bottom:var(--ruimte-3,12px);
}
.ss-beeldkeus{ margin:0; min-width:0; }
.ss-beeldkeus button{
  display:flex; flex-direction:column; gap:3px; width:100%; padding:0;
  border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.ss-beeldkeus button:disabled{ cursor:default; opacity:.55; }
.ss-beeldknip{
  position:relative; display:block; width:100%; aspect-ratio:1;
  border-radius:9px; overflow:hidden; border:1px solid var(--ss-lijn);
  background:color-mix(in srgb,var(--ss-inkt) 7%,transparent);
}
.ss-beeldknip img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-beeldkeus button:not(:disabled):hover .ss-beeldknip{
  border-color:var(--ss-accent,#daea09);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ss-accent,#daea09) 45%,transparent);
}
.ss-beeldkeus button:focus-visible .ss-beeldknip{ outline:2px solid var(--ss-accent,#daea09); outline-offset:2px; }
.ss-beeldal{
  position:absolute; inset:auto 4px 4px 4px; text-align:center;
  font-size:var(--tekst-xxs,10px); font-weight:600; line-height:17px; border-radius:5px;
  background:color-mix(in srgb,#000 62%,transparent); color:#fff;
}
.ss-beeldknipnaam{
  font-size:var(--tekst-xxs,10px); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-beeldknipmaat{ font-size:var(--tekst-xxs,10px); color:var(--ss-zacht); font-variant-numeric:tabular-nums; }

/* -------------------------------------------------------------------------
   De stijlgids. Eén kolom op leesbreedte: dit is een document en geen
   dashboard, dus het leest van boven naar beneden en niet van links naar
   rechts. Regels van 90 tekens lezen slecht; die van 65 tot 75 niet.
   ------------------------------------------------------------------------- */
.ss-stijlblad{ max-width:760px; }
.ss-stijlintro{ margin:0 0 var(--ruimte-4,16px); line-height:1.6; }
.ss-stijlblok{ margin-bottom:var(--ruimte-3,12px); padding-bottom:var(--ruimte-4,16px); }
.ss-stijlblok > *:not(.card-head){ padding-inline:var(--ruimte-4,16px); }
.ss-stijltekst{ font-size:var(--tekst-m,14px); line-height:1.65; }
.ss-stijltekst p{ margin:0 0 11px; }
.ss-stijltekst p:last-child{ margin-bottom:0; }
.ss-stijltekst ul,.ss-stijltekst ol{ margin:0 0 11px; padding-left:21px; }
.ss-stijltekst li{ margin-bottom:6px; }
.ss-stijltekst li:last-child{ margin-bottom:0; }

/* "Zo wel" is je voorbeeldpost, geen uitleg. Die moet eruit springen als
   iets om naar te kijken: een citaat met een streep ernaast. */
.ss-stijlblok.is-voorbeeld .ss-stijltekst{
  border-left:3px solid var(--ss-accent,#daea09);
  padding-left:15px; margin-left:1px;
  font-size:var(--tekst-l,16px); line-height:1.6;
}
.ss-stijlblok.is-voorbeeld .ss-stijltekst p{ margin-bottom:14px; }

.ss-stijlform{ margin:0; }
.ss-stijlform textarea{
  width:100%; font-family:var(--body-font); font-size:var(--tekst-s,12.5px);
  line-height:1.6; resize:vertical;
}
.ss-stijlacties{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-top:var(--ruimte-3,12px); font-size:var(--tekst-xs,11.5px);
}
.ss-stijlvoet{ margin-top:var(--ruimte-4,16px); font-size:var(--tekst-xs,11.5px); line-height:1.5; }
/* De kop van een stijlblok krijgt zijn padding en zijn flexrij expliciet mee.
   Elders in het CRM komt dat van regels die van de omgeving afhangen - op
   deze pagina stond de kop daardoor op een brede monitor strak tegen de rand
   terwijl de tekst eronder keurig insprong. */
.ss-stijlblok > .card-head{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px var(--ruimte-4,16px) 12px;
}
.ss-stijlblok > .card-head .head-title{ flex:1 1 auto; min-width:0; }
.ss-stijlblok > .card-head .head-title b{
  display:block; font-family:var(--heading-font); font-weight:500;
  font-size:var(--tekst-l,16px); letter-spacing:-.01em; text-transform:none;
}
.ss-stijlblok > .card-head .head-title small{
  display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); text-transform:none;
}
.ss-stijlblok > .card-head > .btn{ flex:0 0 auto; }

/* De bestandskiezer: het echte veld uit het zicht, de label is de knop. */
.ss-beeldupload input[type=file]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
  padding:0; border:0; background:none;
}
.ss-beeldkies{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  min-width:0; cursor:pointer;
}
.ss-beeldkiesknop{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:30px; padding:0 13px; border-radius:999px;
  border:1px solid var(--ss-lijn); background:var(--ss-kaart-2);
  font-size:var(--tekst-xs,11.5px); font-weight:500;
}
.ss-beeldkies:hover .ss-beeldkiesknop{ border-color:var(--ss-zacht); }
.ss-beeldkies input:focus-visible + .ss-beeldkiesknop{
  outline:2px solid var(--ss-accent,#daea09); outline-offset:2px;
}
.ss-beeldkiesnaam{
  font-size:var(--tekst-xxs,10px); color:var(--ss-zacht); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-beeldkiesnaam.is-gekozen{ color:var(--ss-inkt); }

/* De lade hoort bij "Het beeld" en dus bij de linkerkolom. Hij staat alleen
   buiten het rooster omdat een formulier niet in een ander formulier kan;
   daarom krijgt hij hier dezelfde breedte als die kolom, zodat hij er ook
   bij lijkt te horen in plaats van onder het hele scherm door te lopen. */
@media (min-width:1101px){
  .ss-beeldlade{ max-width:calc(100% - 396px); }
}

/* De rij rechts van de tabs liep op een telefoon 23 pixels buiten het scherm.
   Hij krijgt daar de volle breedte maar mocht niet afbreken, dus de knoppen
   Stijlgids en Pijlers werden achter de filters aan geschoven in plaats van
   eronder. */
.ss-werkfilters-rechts{ flex-wrap:wrap; min-width:0; }
@media (max-width:900px){
  .ss-werkfilters-rechts{ row-gap:8px; }
  .ss-werkfilters-rechts > .btn{ flex:0 0 auto; }
  .ss-contentfilters{ flex:1 1 100%; justify-content:flex-start; }
}

/* =========================================================================
   v15.73.0 — HET PROFIELRASTER
   ========================================================================= */
.ss-rasterkop{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px;
  margin-bottom:var(--ruimte-3,12px);
}
.ss-rasterkop .head-title{ flex:1 1 auto; min-width:0; }
.ss-rasterkop .head-title b{
  display:block; font-family:var(--heading-font); font-weight:500;
  font-size:var(--tekst-l,16px); letter-spacing:-.01em;
}
.ss-rasterkop .head-title small{ display:block; color:var(--ss-zacht); font-size:var(--tekst-xs,11.5px); }
.ss-rasterkeuze{ display:flex; gap:6px; flex:0 0 auto; }

/* Instagram zet geen ruimte tussen de tegels; dat is juist wat een raster een
   raster maakt. Hier een haarlijn ertussen, zodat twee lichte beelden naast
   elkaar nog uit elkaar te houden zijn. */
.ss-raster{
  display:grid; grid-template-columns:repeat(var(--kolommen,3),minmax(0,1fr));
  gap:2px; max-width:calc(var(--kolommen,3) * 220px);
  border-radius:var(--ss-r-klein,12px); overflow:hidden;
  /* v15.74.0: geen achtergrond op het raster zelf. Die was er om de voegen
     van twee pixels een lijntje te laten lijken, maar in de laatste rij
     kleurde hij ook de lege plekken - en dan lijkt het of er tegels missen.
     De voeg laat nu gewoon de pagina zien, net als op Instagram. */
}
.ss-rastertegel{
  position:relative; display:block; aspect-ratio:3/4; min-width:0;
  background:color-mix(in srgb,var(--ss-inkt) 7%,transparent);
  color:inherit; text-decoration:none; overflow:hidden;
}
.ss-rastertegel img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-rasterleeg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  color:var(--ss-zacht); opacity:.6; font-size:var(--tekst-xxs,10px); text-align:center;
}
.ss-rastermerk{
  position:absolute; top:7px; right:7px; width:20px; height:20px; border-radius:5px;
  display:grid; place-items:center; font-size:10px; line-height:1;
  background:color-mix(in srgb,#000 50%,transparent); color:#fff;
}
/* een ingepland bericht staat er nog niet echt: een stipje in de hoek */
.ss-rasterstip{
  position:absolute; left:7px; top:7px; width:8px; height:8px; border-radius:50%;
  background:var(--ss-accent,#daea09); box-shadow:0 0 0 2px color-mix(in srgb,#000 35%,transparent);
}
.ss-rastertegel.is-gepland img{ opacity:.82; }
.ss-rasterover{
  position:absolute; inset:auto 0 0 0; padding:22px 9px 8px;
  display:flex; flex-direction:column; gap:1px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  color:#fff; opacity:0; transition:opacity .14s ease;
}
.ss-rastertegel:hover .ss-rasterover,
.ss-rastertegel:focus-visible .ss-rasterover{ opacity:1; }
.ss-rasterover b{
  font-size:var(--tekst-xxs,10px); font-weight:600; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ss-rasterover small{ font-size:9px; opacity:.8; }
.ss-rastertegel:focus-visible{ outline:2px solid var(--ss-accent,#daea09); outline-offset:-2px; }
.ss-rasteruitleg{ margin-top:var(--ruimte-3,12px); max-width:62ch; line-height:1.5; }

@media (max-width:620px){
  .ss-raster{ max-width:none; }
  .ss-rasterkeuze{ width:100%; }
}

/* =========================================================================
   v15.74.0 — HET GOOGLE-BERICHT
   De velden, het voorbeeld en de plaatsknoppen. Alles wat hier binnen een
   .card staat brengt zijn eigen padding mee (13px 16px), want .card heeft
   padding:0 in dit CRM — een blok dat dat vergeet staat tegen de rand.
   Een blok met een eigen achtergrond wordt met margin-inline ingelaten en
   niet met padding-inline, anders loopt die achtergrond tot de kaartrand.
   ========================================================================= */

/* de drie soorten als één rij knopjes */
.ss-gbpsoort{
  display:flex; gap:6px; padding:0 var(--ruimte-4,16px) var(--ruimte-3,12px);
}
.ss-gbpsoortje{
  flex:1 1 0; min-width:0; position:relative; cursor:pointer;
}
.ss-gbpsoortje input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.ss-gbpsoortje > span{
  display:block; text-align:center; padding:8px 6px;
  font-size:var(--tekst-xs,11.5px); font-weight:600; line-height:1.2;
  border:1px solid var(--ss-lijn); border-radius:var(--ss-r-veld,10px);
  background:var(--ss-veld,var(--ss-kaart)); color:var(--ss-zacht);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:border-color .12s ease,color .12s ease,background .12s ease;
}
.ss-gbpsoortje:hover > span{ color:var(--ss-inkt); border-color:var(--ss-zacht); }
.ss-gbpsoortje.is-nu > span{
  color:var(--ss-inkt);
  border-color:color-mix(in srgb,var(--ss-accent,#daea09) 72%,var(--ss-lijn));
  background:color-mix(in srgb,var(--ss-accent,#daea09) 16%,var(--ss-kaart));
}
.ss-gbpsoortje input:focus-visible + span{ outline:2px solid var(--ss-accent,#daea09); outline-offset:1px; }

/* de velden zelf, dezelfde opmaak als Klaarzetten zodat het één geheel blijft */
.ss-gbpvelden{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ruimte-3,12px); padding:0 var(--ruimte-4,16px);
}
.ss-gbpvelden label{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ss-gbpvelden label > span:first-child{
  font-size:var(--tekst-xxs,10px); text-transform:uppercase; letter-spacing:.05em;
  color:var(--ss-zacht); font-weight:600;
  display:flex; flex-wrap:wrap; gap:5px; align-items:baseline;
}
.ss-gbpvelden label > span:first-child small{
  text-transform:none; letter-spacing:0; font-weight:400; opacity:.8;
}
.ss-gbpvelden input,.ss-gbpvelden select,.ss-gbpvelden textarea{
  width:100%; min-width:0; font-size:var(--tekst-xs,11.5px);
}
.ss-gbpvelden .ss-gbpbreed{ grid-column:1 / -1; }
/* een groep die bij één soort hoort loopt over de volle breedte en houdt
   binnenin dezelfde twee kolommen aan */
.ss-gbpwel{
  grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ruimte-3,12px);
}
.ss-gbpwel[hidden]{ display:none; }
.ss-gbpwel > label:first-child{ grid-column:1 / -1; }
.ss-gbpwel .ss-gbpbreed{ grid-column:1 / -1; }

/* wat er mis is, en wat er alleen aan opvalt */
.ss-gbpcheck{
  margin:var(--ruimte-3,12px) var(--ruimte-4,16px) 0; padding:10px 13px; list-style:none;
  border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--ss-waarschuwing,#e4a11b) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--ss-waarschuwing,#e4a11b) 30%,transparent);
  font-size:var(--tekst-xs,11.5px); line-height:1.5;
}
.ss-gbpcheck li + li{ margin-top:5px; }
.ss-gbpcheck li.is-fout{
  display:flex; gap:6px; align-items:flex-start; font-weight:600;
  color:var(--ss-inkt);
}
.ss-gbpcheck li.is-fout svg{ flex:0 0 auto; margin-top:2px; color:var(--ss-letop-kleur,#ea4ca7); }
.ss-gbpfout{
  margin:var(--ruimte-3,12px) var(--ruimte-4,16px) 0; padding:10px 13px;
  display:flex; gap:7px; align-items:flex-start;
  border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--ss-letop-kleur,#ea4ca7) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ss-letop-kleur,#ea4ca7) 28%,transparent);
  font-size:var(--tekst-xs,11.5px); line-height:1.5;
}
.ss-gbpfout svg{ flex:0 0 auto; margin-top:2px; color:var(--ss-letop-kleur,#ea4ca7); }
.ss-gbpkaart{ padding-bottom:var(--ruimte-4,16px); }

/* naar Google: apart, met een lijn erboven, want dit is het enige knopje dat
   iets de deur uit doet */
.ss-gbpnaar{
  margin-top:var(--ruimte-3,12px); padding-top:var(--ruimte-3,12px);
  border-top:1px solid var(--ss-lijn);
}
.ss-gbpnaarkop{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-bottom:9px;
}
.ss-gbpnaarkop b{ font-size:var(--tekst-s,12.5px); font-weight:600; }
.ss-gbpknoppen{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.ss-gbpknoppen .btn{ font-size:var(--tekst-xs,11.5px); }
.ss-gbpnaar > p{ margin:9px 0 0; line-height:1.5; font-size:var(--tekst-xs,11.5px); }
.ss-statuspil.is-geplaatst{
  border-color:color-mix(in srgb,var(--ss-accent,#daea09) 60%,var(--ss-lijn));
  color:var(--ss-inkt);
}
.ss-statuspil.is-ingepland{
  border-color:color-mix(in srgb,var(--ss-waarschuwing,#e4a11b) 55%,var(--ss-lijn));
  color:var(--ss-inkt);
}
.ss-statuspil.is-mislukt,.ss-statuspil.is-teruggetrokken{
  border-color:color-mix(in srgb,var(--ss-letop-kleur,#ea4ca7) 45%,var(--ss-lijn));
  color:var(--ss-inkt);
}

/* het voorbeeld van een bedrijfspost. Google zet het beeld bovenaan, dan de
   titel, dan de tekst, en de knop als een lijn onderaan de kaart. */
.ss-voorbeeld.is-google{ background:var(--ss-kaart); }
.ss-vbkop.is-google{ padding:11px 12px 9px; }
.ss-vbavatar.is-vierkant{
  border-radius:9px;
  background:color-mix(in srgb,#f3c26b 50%,var(--ss-kaart));
}
.ss-vbgtitel{
  padding:11px 12px 0; font-size:var(--tekst-s,12.5px); font-weight:600; line-height:1.3;
}
.ss-vbgwanneer{
  padding:5px 12px 0; display:flex; align-items:center; gap:5px;
  font-size:var(--tekst-xxs,10px); color:var(--ss-zacht);
}
.ss-vbgcoupon{
  margin:10px 12px 0; padding:8px 11px;
  display:flex; flex-direction:column; gap:2px;
  border-radius:var(--ss-r-klein,12px);
  border:1px dashed color-mix(in srgb,var(--ss-inkt) 28%,transparent);
  background:color-mix(in srgb,#f3c26b 13%,transparent);
}
.ss-vbgcoupon small{
  font-size:9px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ss-zacht); font-weight:600;
}
.ss-vbgcoupon b{ font-size:var(--tekst-s,12.5px); font-weight:700; letter-spacing:.04em; }
.ss-vbgknop{
  margin-top:11px; padding:11px 12px 0;
  border-top:1px solid var(--ss-lijn);
}
.ss-vbgknop span{
  display:inline-block; padding-bottom:11px;
  font-size:var(--tekst-xs,11.5px); font-weight:600;
  color:color-mix(in srgb,var(--ss-inkt) 72%,var(--ss-accent,#daea09));
}
.ss-voorbeeld.is-google .ss-vbtekst{ padding-top:8px; }

@media (max-width:520px){
  .ss-gbpvelden,.ss-gbpwel{ grid-template-columns:1fr; }
  .ss-gbpsoort{ flex-wrap:wrap; }
  .ss-gbpsoortje{ flex:1 1 30%; }
}
.ss-gbpuitleg{
  margin:var(--ruimte-3,12px) var(--ruimte-4,16px) 0; line-height:1.5;
  font-size:var(--tekst-xs,11.5px); max-width:62ch;
}

/* v15.74.0 — DE INSTAGRAM-KOPPELING ----------------------------------------
   Dezelfde vorm als het blok voor je bedrijfsprofielen, zodat Integraties
   één pagina blijft en niet een stapel losse schermen wordt. */
.ss-ig-let{
  display:flex; gap:12px; margin:var(--ruimte-3,12px) 0;
  padding:13px 15px; border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--ss-waarschuwing,#e4a11b) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ss-waarschuwing,#e4a11b) 28%,transparent);
}
.ss-ig-let b{ display:block; font-size:var(--tekst-s,12.5px); font-weight:600; margin-bottom:4px; }
.ss-ig-let p{ margin:0; font-size:var(--tekst-xs,11.5px); line-height:1.55; max-width:68ch; }
.ss-ig-kop{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:var(--ruimte-3,12px) 0 0;
}
.ss-ig-kop > b{ font-size:var(--tekst-s,12.5px); font-weight:600; }
.ss-ig-kop > .muted{ font-size:var(--tekst-xs,11.5px); }
.ss-ig-kop form{ margin:0; }
.ss-ig-geldig{ margin:9px 0 0; font-size:var(--tekst-xs,11.5px); line-height:1.5; max-width:68ch; }
.ss-ig-fout{
  margin:var(--ruimte-3,12px) 0 0; padding:10px 13px;
  display:flex; gap:7px; align-items:flex-start;
  border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--ss-letop-kleur,#ea4ca7) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ss-letop-kleur,#ea4ca7) 28%,transparent);
  font-size:var(--tekst-xs,11.5px); line-height:1.5;
}
.ss-ig-fout svg{ flex:0 0 auto; margin-top:2px; color:var(--ss-letop-kleur,#ea4ca7); }
.ss-ig-hoe{ margin-top:var(--ruimte-3,12px); }
.ss-ig-hoe > summary{ list-style:none; cursor:pointer; display:inline-flex; }
.ss-ig-hoe > summary::-webkit-details-marker{ display:none; }
.ss-ig-stappen{
  margin:11px 0 0; padding:0 0 0 20px;
  font-size:var(--tekst-xs,11.5px); line-height:1.6; max-width:72ch;
}
.ss-ig-stappen li + li{ margin-top:5px; }
.ss-ig-hoe > p{ margin:9px 0 0; font-size:var(--tekst-xs,11.5px); line-height:1.5; max-width:72ch; }

/* een tegel die van Instagram zelf komt krijgt geen stip, en een heel licht
   randje zodat je ziet dat hij naar buiten gaat */
.ss-rastertegel.is-echt::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ss-inkt) 9%,transparent);
}
/* lucht tussen de knoppenrij en het tokenveld; zonder dit plakt het label
   op 390 pixels tegen de knop "Feed ophalen" aan */
#instagram-feed form.form-grid{ margin-top:var(--ruimte-4,16px); }

/* =========================================================================
   v15.75.0 — SOCIAL BIJ EEN PROJECT EN BIJ EEN KLANT
   Een kort blok, geen tweede ideeenbank. Het staat in een .card en die heeft
   padding:0 in dit CRM, dus elk onderdeel brengt zijn eigen 16px mee.
   ========================================================================= */
.ss-contentblok{ padding-bottom:var(--ruimte-4,16px); }
.ss-blokrijen{ display:flex; flex-direction:column; }
.ss-blokrij{
  display:flex; align-items:center; gap:11px;
  padding:9px var(--ruimte-4,16px);
  color:inherit; text-decoration:none; min-width:0;
  border-top:1px solid var(--ss-lijn);
  transition:background .12s ease;
}
.ss-blokrij:hover{ background:color-mix(in srgb,var(--ss-inkt) 4%,transparent); }
.ss-blokbeeld{
  flex:0 0 auto; width:38px; height:48px; border-radius:8px; overflow:hidden;
  position:relative; background:color-mix(in srgb,var(--ss-inkt) 7%,transparent);
  display:grid; place-items:center; color:var(--ss-zacht);
}
.ss-blokbeeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-blokbeeld i{ opacity:.5; display:flex; }
.ss-blokvak{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.ss-blokvak b{
  font-size:var(--tekst-s,12.5px); font-weight:600; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-blokvak small{
  font-size:var(--tekst-xxs,10px); color:var(--ss-zacht); line-height:1.4;
  display:flex; flex-wrap:wrap; align-items:center; gap:3px;
  overflow:hidden;
}
.ss-blokvak small svg{ flex:0 0 auto; }
.ss-blokrij .ss-statuspil{ flex:0 0 auto; }
.ss-blokleeg{
  margin:0; padding:2px var(--ruimte-4,16px) 0; line-height:1.55; max-width:62ch;
}
.ss-blokregel{
  display:flex; flex-wrap:wrap; gap:7px; align-items:center;
  margin-top:var(--ruimte-3,12px); padding:var(--ruimte-3,12px) var(--ruimte-4,16px) 0;
  border-top:1px solid var(--ss-lijn);
}
.ss-blokregel input[name=titel]{ flex:1 1 220px; min-width:0; font-size:var(--tekst-xs,11.5px); }
.ss-blokregel select{ flex:0 1 150px; min-width:0; font-size:var(--tekst-xs,11.5px); }
.ss-blokregel button{ flex:0 0 auto; }

/* de regel die zegt dat je naar één project of één klant kijkt */
.ss-contentfilterregel{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  margin:0 0 var(--ruimte-3,12px); padding:9px 13px;
  border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--ss-accent,#daea09) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--ss-accent,#daea09) 34%,var(--ss-lijn));
  font-size:var(--tekst-xs,11.5px); line-height:1.5;
}
.ss-contentfilterregel > svg{ flex:0 0 auto; color:var(--ss-zacht); }
.ss-contentfilterregel > span{ flex:1 1 auto; min-width:0; }
.ss-contentfilterregel a{ color:inherit; }
.ss-contentfilterregel b{ font-weight:600; }
.ss-contentfilterregel > .btn{ flex:0 0 auto; }

@media (max-width:560px){
  .ss-blokregel input[name=titel]{ flex:1 1 100%; }
  .ss-blokregel select{ flex:1 1 60%; }
}

/* v15.76.0 — de twee wegen naar je feed */
.ss-ig-weg{
  font-size:var(--tekst-xxs,10px); font-weight:600; line-height:1;
  padding:4px 9px; border-radius:999px;
  border:1px solid var(--ss-lijn); color:var(--ss-zacht);
}
.ss-ig-keuze{
  margin:var(--ruimte-3,12px) 0 0; padding:13px 15px;
  border-radius:var(--ss-r-klein,12px);
  border:1px solid color-mix(in srgb,var(--ss-accent,#daea09) 34%,var(--ss-lijn));
  background:color-mix(in srgb,var(--ss-accent,#daea09) 10%,transparent);
}
.ss-ig-keuze > b{ font-size:var(--tekst-s,12.5px); font-weight:600; }
.ss-ig-keuze > p{ margin:4px 0 10px; font-size:var(--tekst-xs,11.5px); line-height:1.5; }
.ss-ig-keuzerij{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:8px 0; border-top:1px solid var(--ss-lijn); margin:0;
}
.ss-ig-keuzerij > span{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ss-ig-keuzerij b{ font-size:var(--tekst-s,12.5px); font-weight:600; }
.ss-ig-keuzerij small{ font-size:var(--tekst-xxs,10px); color:var(--ss-zacht); }

/* v15.78.0 — de Kolommen-knop hoort bij de bedieningsrij, niet boven de tabel.
   Hij stond op een eigen regel eronder; dan lijkt hij bij de tabel te horen
   terwijl hij over je weergave gaat. Nu staat hij naast Weergave, op dezelfde
   regel als de tabs — dezelfde ordening als op Werk. */
.ss-werkfilters-rechts .kolomkiezer.is-inderij{
  margin:0; display:inline-flex; align-items:center;
}
.ss-werkfilters-rechts .kolomkiezer.is-inderij .kolomkiezer-knop{
  height:34px; white-space:nowrap;
}
/* Het paneel klapt naar links open, anders loopt het aan de rechterkant van
   het scherm af. */
.ss-werkfilters-rechts .kolomkiezer.is-inderij .kolomkiezer-paneel{
  right:0; left:auto;
}
@media (max-width:620px){
  .ss-werkfilters-rechts .kolomkiezer.is-inderij .kolomkiezer-knop{ height:32px; }
  /* Op een telefoon staat de knop links in de rij. Een paneel dat dan naar
     links openklapt staat half buiten het scherm - dus daar klapt hij naar
     rechts open en nooit breder dan het scherm. */
  .ss-werkfilters-rechts .kolomkiezer.is-inderij .kolomkiezer-paneel{
    left:0; right:auto; max-width:calc(100vw - 32px);
  }
}

/* =========================================================================
   v15.78.0 — DRIVE STAP 2: HET ECHT DOEN
   De droogloop zei al wat er zou gebeuren; hier zet je er een vinkje bij en
   een knop onder. Alles wat met je eigen bestanden te maken heeft krijgt
   ruimte en uitleg — dit is niet het soort knop waar je overheen moet vliegen.
   ========================================================================= */
.drive-doen{ width:34px; }
.drive-vink{ display:inline-flex; align-items:center; cursor:pointer; margin:0; }
.drive-vink input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.drive-vink > span{
  width:18px; height:18px; border-radius:5px; display:block; position:relative;
  border:1.5px solid color-mix(in srgb,var(--ss-inkt) 28%,transparent);
  background:var(--ss-veld,transparent);
  transition:background .12s ease,border-color .12s ease;
}
.drive-vink > span::after{
  content:''; position:absolute; left:5px; top:1.5px; width:5px; height:10px;
  border:solid var(--ss-inkt); border-width:0 2px 2px 0; transform:rotate(42deg);
  opacity:0; transition:opacity .12s ease;
}
.drive-vink input:checked + span{
  background:var(--ss-accent,#daea09);
  border-color:color-mix(in srgb,var(--ss-accent,#daea09) 70%,var(--ss-inkt));
}
.drive-vink input:checked + span::after{ opacity:1; border-color:#1b1b16; }
.drive-vink:hover > span{ border-color:var(--ss-zacht); }
.drive-vink input:focus-visible + span{ outline:2px solid var(--ss-accent,#daea09); outline-offset:2px; }

.drive-uitvoeren{
  margin-top:var(--ruimte-4,16px); padding-top:var(--ruimte-4,16px);
  border-top:1px solid var(--ss-lijn);
}
.drive-uitvoerkop{
  display:flex; flex-wrap:wrap; gap:9px; align-items:baseline; margin-bottom:10px;
}
.drive-uitvoerkop b{ font-size:var(--tekst-s,12.5px); font-weight:600; }
.drive-uitvoerkop .muted{ font-size:var(--tekst-xs,11.5px); }
.drive-uitvoeren > p{ margin:10px 0 0; line-height:1.55; font-size:var(--tekst-xs,11.5px); max-width:72ch; }
.drive-uitvoeren .btn[disabled]{ opacity:.45; cursor:default; }

.drive-uitslag{
  margin:var(--ruimte-3,12px) 0; padding:13px 15px;
  border-radius:var(--ss-r-klein,12px);
  border:1px solid var(--ss-lijn); background:var(--ss-kaart);
}
.drive-uitslagkop{ display:flex; flex-wrap:wrap; gap:9px; align-items:baseline; margin-bottom:9px; }
.drive-uitslagkop b{ font-size:var(--tekst-s,12.5px); font-weight:600; }
.drive-uitslagkop .muted{ font-size:var(--tekst-xs,11.5px); }
.drive-uitslag ul{ list-style:none; margin:0; padding:0; font-size:var(--tekst-xs,11.5px); }
.drive-uitslag li{
  display:flex; flex-wrap:wrap; gap:7px; align-items:baseline;
  padding:6px 0 6px 11px; border-top:1px solid var(--ss-lijn); position:relative; line-height:1.5;
}
.drive-uitslag li::before{
  content:''; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%;
  background:var(--ss-zacht);
}
.drive-uitslag li.is-aangemaakt::before,
.drive-uitslag li.is-verhuisd::before{ background:var(--ss-accent,#daea09); }
.drive-uitslag li.is-mislukt::before{ background:var(--ss-letop-kleur,#ea4ca7); }
.drive-uitslag li b{ font-weight:600; }
.drive-uitslag li span{ color:var(--ss-zacht); }

/* v15.78.0 — het kruisje bij "Uren bijna op".
   De waarschuwing en het kruisje staan samen in één vakje, zodat het kruisje
   meeschuift met de kaart waar hij bij hoort en niet aan het eind van de rij
   belandt. Het kruisje is rustig tot je er met de muis overheen gaat: hij
   hoort er te zijn als je hem zoekt, niet om aandacht te vragen. */
.hours-alert{
  position:relative; display:inline-flex; align-items:stretch;
}
.hours-alert > a{ padding-right:36px !important; }
.hours-weg{ position:absolute; right:5px; top:5px; margin:0; display:flex; }
.hours-wegknop{
  width:22px; height:22px; padding:0; border:0; border-radius:7px; cursor:pointer;
  display:grid; place-items:center; line-height:1;
  background:transparent; color:var(--ss-zacht,var(--muted));
  opacity:.5; transition:opacity .12s ease,background .12s ease,color .12s ease;
}
.hours-alert:hover .hours-wegknop{ opacity:1; }
.hours-wegknop:hover{
  background:color-mix(in srgb,var(--ss-inkt,#000) 10%,transparent);
  color:var(--ss-inkt,inherit);
}
.hours-wegknop:focus-visible{ opacity:1; outline:2px solid var(--ss-accent,#daea09); outline-offset:1px; }

/* =========================================================================
   v15.79.0 — DE WEKKER
   Een stand die je in één blik leest, en de cronregel klaar om te kopiëren.
   ========================================================================= */
.ss-wekker-sleutel{
  margin:var(--ruimte-3,12px) 0; padding:13px 15px;
  border-radius:var(--ss-r-klein,12px);
  border:1px solid color-mix(in srgb,var(--ss-accent,#daea09) 40%,var(--ss-lijn));
  background:color-mix(in srgb,var(--ss-accent,#daea09) 11%,transparent);
}
.ss-wekker-sleutel > b{ display:block; font-size:var(--tekst-s,12.5px); font-weight:600; }
.ss-wekker-sleutel > p{ margin:4px 0 10px; font-size:var(--tekst-xs,11.5px); line-height:1.5; max-width:70ch; }
.ss-wekker-sleutel .copy-field input{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }
.ss-wekker-sleutel > p:last-child{ margin:10px 0 0; }

.ss-wekker-stand{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  margin:var(--ruimte-3,12px) 0 0;
}
.ss-wekker-stand b{ font-size:var(--tekst-s,12.5px); font-weight:600; }
.ss-wekker-stand .muted{ font-size:var(--tekst-xs,11.5px); }
.ss-wekker-stip{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--ss-zacht); opacity:.45;
}
.ss-wekker-stip.is-aan{
  background:var(--ss-accent,#daea09); opacity:1;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ss-accent,#daea09) 24%,transparent);
}
.ss-wekker-regels{
  margin:10px 0 0; padding:0 0 0 18px;
  font-size:var(--tekst-xs,11.5px); line-height:1.6; color:var(--ss-zacht); max-width:70ch;
}
.ss-wekker-knoppen{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--ruimte-3,12px); }
.ss-wekker-hoe{ margin-top:var(--ruimte-3,12px); }
.ss-wekker-hoe > summary{ list-style:none; cursor:pointer; display:inline-flex; }
.ss-wekker-hoe > summary::-webkit-details-marker{ display:none; }
.ss-wekker-lijst{
  margin:11px 0 0; padding:0 0 0 20px;
  font-size:var(--tekst-xs,11.5px); line-height:1.6; max-width:72ch;
}
.ss-wekker-lijst li + li{ margin-top:5px; }
.ss-wekker-hoe > p{ margin:9px 0 0; font-size:var(--tekst-xs,11.5px); line-height:1.5; max-width:72ch; }

/* --------------------------------------------------------------------------
   v15.81.0 - PLAATSRUIMTE BIJ INSTAGRAM
   Eén regel onder de koppeling: mag dit CRM plaatsen, en hoeveel van je
   etmaal is er over.

   Gaat alles goed, dan is dat een gewone grijze regel zoals de regel over je
   token erboven - geen kader, want een bevestiging hoeft niet om aandacht te
   vragen. Alleen als er iets niet kan krijgt hij het kader en de kleur. Zo
   blijft het overzicht rustig en springt het enige dat telt er wel uit.
   -------------------------------------------------------------------------- */
.ss-ig-ruimte{
  margin:9px 0 0;
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  font-size:var(--tekst-xs,11.5px); line-height:1.5;
  /* Geen leesbreedte op de rustige regel: het is één zin, en de knop hoort
     ernaast te staan en niet eronder. Het kader hieronder krijgt hem wel. */
}
.ss-ig-ruimte > span{ color:var(--ss-tekst-zacht,inherit); }
.ss-ig-ruimte.ja > span, .ss-ig-ruimte.onbekend > span{ opacity:.78; }
.ss-ig-ruimte form{ margin:0; }
.ss-ig-ruimte svg{ flex:0 0 auto; vertical-align:-2px; color:var(--ss-letop-kleur,#ea4ca7); }
.ss-ig-ruimte.nee{
  padding:10px 13px; align-items:flex-start; max-width:72ch;
  border-radius:var(--ss-r-klein,12px);
  background:color-mix(in srgb,var(--ss-letop-kleur,#ea4ca7) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ss-letop-kleur,#ea4ca7) 28%,transparent);
}
.ss-ig-ruimte.nee > span{ flex:1 1 32ch; opacity:1; }

/* ==========================================================================
   v15.83.0 - HET REVIEWFORMULIER (de pagina die je klant ziet)
   --------------------------------------------------------------------------
   Plakboek: grijs papier met een fijn puntraster, de vraag op een kaart die
   een slagje gedraaid staat met een gekleurde slagschaduw, een markeerstift
   achter het kernwoord. Dezelfde lettertypes en accentkleuren als het CRM,
   maar ruimer en zonder panelen - je klant kent het CRM niet.

   De kaart staat verticaal in het midden, ook op een telefoon. De knoppen
   staan in het midden onderaan en verspringen nooit: de overslaan-knop houdt
   zijn plek vast, ook als hij bij die vraag niet mag.
   ========================================================================== */
.ss-rv-body{
  margin:0; background:#eeeef0; color:#1a1c1e;
  font-family:var(--body-font),sans-serif;
  -webkit-font-smoothing:antialiased;
}
.ss-rv{
  --acc:var(--lime,#daea09);
  min-height:100svh; display:flex; flex-direction:column; position:relative; isolation:isolate;
}
.ss-rv::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.07;
  background-image:radial-gradient(#1a1c1e .7px, transparent .8px); background-size:17px 17px;
}
.ss-rv > *{position:relative; z-index:1}

/* Het logo in het midden, ook op een breed scherm. Er staat hier geen menu
   omheen, dus links uitgelijnd hangt het er verloren bij. Drie kolommen met
   een lege eerste houden het echt in het midden, ongeacht hoe breed het
   "Bewaard"-regeltje rechts is. */
.ss-rv-kop{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:20px max(20px, env(safe-area-inset-right,0px)) 16px max(20px, env(safe-area-inset-left,0px));
}
.ss-rv-logo{grid-column:2; justify-self:center}
.ss-rv-bewaard{grid-column:3; justify-self:end}
/* Let op de volgorde en het gewicht hier. logo_html() zet ALLEBEI de logo's
   in de pagina - die voor een donkere en die voor een lichte achtergrond -
   en style.css verbergt er normaal één met .logo-on-light{display:none}.
   Mijn eigen regel zette display:block op "elke img hierbinnen" en woog
   zwaarder, dus stonden ze allebei in beeld, de witte over de zwarte heen.
   Nu regelt de maat alleen de maat, en kiezen de twee regels eronder welke
   er staat: deze pagina is altijd licht, dus het zwarte logo. */
.ss-rv-logo .brand-images img, .ss-rv-logo img{height:34px; width:auto; max-width:190px; object-fit:contain}
.ss-rv-logo .logo-on-dark{display:none !important}
.ss-rv-logo .logo-on-light{display:block}
.ss-rv-logo .brand-fallback{font-family:var(--heading-font),sans-serif; font-size:17px; line-height:1.05}
.ss-rv-bewaard{display:flex; align-items:center; gap:7px; font-size:12px; color:#6e7276; transition:opacity .3s}
.ss-rv-bewaard i{width:6px; height:6px; border-radius:50%; background:var(--lime,#daea09); display:block}
.ss-rv-bewaard.is-nieuw{opacity:1}

.ss-rv-balk{height:3px; background:rgba(26,28,30,.1); position:relative}
.ss-rv-balk i{position:absolute; inset:0 auto 0 0; background:var(--acc); border-radius:0 3px 3px 0; transition:width .4s cubic-bezier(.22,1,.36,1)}

/* Het hart: de kaart staat verticaal in het midden, op elk scherm.
   overflow-x:clip is geen opsmuk: de kaart komt van 42px rechts invliegen en
   duwde daarmee de pagina breder, waardoor je op een telefoon heen en weer
   kon schuiven. Verticaal blijft alles zichtbaar, dus de sticker met het
   vraagnummer steekt gewoon boven de kaart uit. */
.ss-rv-veld{
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow-x:clip;
  padding:30px max(16px, env(safe-area-inset-right,0px)) 24px max(16px, env(safe-area-inset-left,0px));
  min-width:0;
}
.ss-rv-veld > *{width:100%; max-width:660px}

.ss-rv-kaart{
  background:#fff; border:1px solid rgba(26,28,30,.12); border-radius:18px;
  padding:34px 36px 32px; position:relative;
  box-shadow:9px 11px 0 color-mix(in srgb, var(--acc) 85%, transparent);
  transform:rotate(-.7deg);
}
.ss-rv-kaart.dank{margin-bottom:18px}
.ss-rv-plakker{
  position:absolute; z-index:2; top:-13px; left:24px; transform:rotate(-5deg);
  font-family:var(--heading-font),sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  background:var(--acc); color:#191b1d; padding:6px 12px; border-radius:99px;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.ss-rv-vraag{
  font-family:var(--heading-font),sans-serif; font-weight:500; letter-spacing:-.022em;
  font-size:clamp(23px,2.6vw,33px); line-height:1.22; margin:4px 0 8px; text-wrap:balance;
}
.ss-rv-stift{
  background:linear-gradient(104deg, transparent 1%, var(--acc) 1%, var(--acc) 99%, transparent 99%);
  padding:.06em .2em; margin:0 -.06em; border-radius:3px; color:#191b1d;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.ss-rv-hulp{color:#6e7276; font-size:14.5px; margin:0 0 20px; max-width:54ch}
.ss-rv-lees{font-size:17px; line-height:1.68; margin:0 0 6px; max-width:52ch}
.ss-rv-onder{font-family:var(--heading-font),sans-serif; font-size:15px; margin-top:14px}
.ss-rv-duur{display:flex; align-items:flex-start; gap:9px; color:#6e7276; font-size:14px; margin-top:20px}
.ss-rv-duur i{width:5px; height:5px; border-radius:50%; background:var(--lilac,#c194d5); display:block; flex:0 0 auto; margin-top:8px}
.ss-rv-eerlijk{margin-top:22px; border-left:3px solid var(--lilac,#c194d5); padding:2px 0 2px 16px}
.ss-rv-eerlijk p{margin:0; font-size:16px; line-height:1.6; max-width:50ch}

.ss-rv-invoer{
  width:100%; background:transparent; border:0; border-bottom:2px solid rgba(26,28,30,.16);
  color:inherit; font:400 20px/1.5 var(--body-font),sans-serif; padding:10px 2px; outline:none;
}
.ss-rv-invoer::placeholder{color:rgba(26,28,30,.32)}
.ss-rv-invoer:focus{border-bottom-color:var(--acc)}
textarea.ss-rv-invoer{min-height:118px; resize:vertical; font-size:18px; line-height:1.55}

.ss-rv-schaal{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:7px; margin:6px 0 10px}
.ss-rv-schaal button{
  aspect-ratio:1; border:2px solid rgba(26,28,30,.18); background:#fff; color:inherit; border-radius:50%;
  font-family:var(--heading-font),sans-serif; font-weight:600; font-size:17px; font-variant-numeric:tabular-nums;
  cursor:pointer; transition:transform .16s, background .16s, border-color .16s;
}
.ss-rv-schaal button:hover{border-color:var(--lilac,#c194d5)}
.ss-rv-schaal button[aria-pressed="true"]{background:var(--acc); border-color:var(--acc); color:#191b1d; transform:scale(1.08)}
.ss-rv-schaal button:focus-visible{outline:2px solid var(--lilac,#c194d5); outline-offset:3px}
.ss-rv-uiteinden{display:flex; justify-content:space-between; font-size:13.5px; font-weight:500; margin-bottom:6px}
.ss-rv-uiteinden b{font-family:var(--heading-font),sans-serif}

.ss-rv-schuif{margin:6px 0 4px}
.ss-rv-getal{display:block; text-align:center; font-family:var(--heading-font),sans-serif; font-weight:700;
  font-size:46px; line-height:1; font-variant-numeric:tabular-nums; margin-bottom:12px}
.ss-rv-getal.leeg{opacity:.22}
.ss-rv-schuifhint{text-align:center; font-size:12.5px; color:#6e7276; margin:-6px 0 10px}
.ss-rv-schuif input[type="range"]{-webkit-appearance:none; appearance:none; width:100%; height:38px; background:transparent; outline:none}
.ss-rv-schuif input[type="range"]::-webkit-slider-runnable-track{height:10px; border-radius:99px; background:rgba(26,28,30,.14)}
.ss-rv-schuif input[type="range"]::-moz-range-track{height:10px; border-radius:99px; background:rgba(26,28,30,.14)}
.ss-rv-schuif input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:34px; height:34px; border-radius:50%;
  background:var(--acc); border:3px solid #fff; margin-top:-12px; box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:grab;
}
.ss-rv-schuif input[type="range"]::-moz-range-thumb{
  width:34px; height:34px; border-radius:50%; background:var(--acc); border:3px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:grab;
}
.ss-rv-schuif input[type="range"]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--lilac,#c194d5); outline-offset:2px}

.ss-rv-keuzes{display:flex; flex-direction:column; gap:10px; max-width:420px; margin:4px 0 8px}
.ss-rv-keuzes button{
  display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  border:1.5px solid rgba(26,28,30,.16); background:#fff; color:inherit; border-radius:14px;
  padding:15px 17px; font:400 16px var(--body-font),sans-serif; transition:border-color .16s, background .16s;
}
.ss-rv-keuzes button .bol{width:19px; height:19px; border-radius:50%; border:2px solid rgba(26,28,30,.3); flex:0 0 auto; display:grid; place-items:center}
.ss-rv-keuzes button[aria-pressed="true"]{border-color:var(--acc); background:color-mix(in srgb, var(--acc) 12%, #fff)}
.ss-rv-keuzes button[aria-pressed="true"] .bol{border-color:#191b1d; background:var(--acc)}
.ss-rv-keuzes button[aria-pressed="true"] .bol::after{content:""; width:7px; height:7px; border-radius:50%; background:#191b1d}
.ss-rv-keuzes button:focus-visible{outline:2px solid var(--lilac,#c194d5); outline-offset:3px}

/* ---- de voetbalk: knoppen in het midden, overslaan houdt zijn plek ---- */
.ss-rv-voet{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:14px max(16px, env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
}
.ss-rv-voet:empty{display:none}
.ss-rv-knoppen{display:flex; gap:10px; justify-content:center; grid-column:2}
.ss-rv-tip{grid-column:1; justify-self:start; font-size:12px; color:#6e7276}
.ss-rv-sla{grid-column:3; justify-self:end}
.ss-rv-sla.leeg{visibility:hidden; pointer-events:none}
.ss-rv-knop{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer;
  border:1.5px solid rgba(26,28,30,.18); background:#fff; color:#1a1c1e; border-radius:13px;
  padding:12px 18px; font-family:var(--heading-font),sans-serif; font-weight:500; font-size:15px;
}
.ss-rv-knop.hoofd{background:var(--acc); border-color:var(--acc); color:#191b1d; font-weight:700}
.ss-rv-knop.kaal{border-color:transparent; background:transparent; color:#6e7276}
.ss-rv-knop:focus-visible{outline:2px solid var(--lilac,#c194d5); outline-offset:2px}
.ss-rv-knop[disabled]{opacity:.4; cursor:not-allowed}

/* ---- het bedankscherm met de Google-stap ---- */
.ss-rv-vink{width:62px; height:62px; border-radius:50%; background:var(--acc); color:#191b1d;
  display:grid; place-items:center; margin-bottom:18px; animation:ssRvPop .5s cubic-bezier(.3,1.45,.5,1) both}
@keyframes ssRvPop{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}
.ss-rv-google{
  background:#fff; border:1px solid rgba(26,28,30,.12); border-radius:18px; padding:24px;
  box-shadow:9px 11px 0 color-mix(in srgb, var(--acc) 85%, transparent); transform:rotate(.5deg);
  animation:ssRvIn .55s .16s cubic-bezier(.22,1,.36,1) both;
}
.ss-rv-google.klein{box-shadow:none; transform:none; background:transparent; border-color:transparent; padding:16px 0}
.ss-rv-google h2{font-family:var(--heading-font),sans-serif; font-size:18px; font-weight:600; margin:0 0 5px}
.ss-rv-google > p{margin:0 0 16px; color:#6e7276; font-size:14px; max-width:52ch}
.ss-rv-gkaart{border:1px solid rgba(26,28,30,.12); border-radius:14px; background:#f7f7f6; padding:16px;
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:13px}
.ss-rv-pop{width:40px; height:40px; border-radius:50%; background:var(--acc); color:#191b1d;
  display:grid; place-items:center; font-family:var(--heading-font),sans-serif; font-weight:700}
.ss-rv-gkaart b{font-size:14.5px; display:block}
.ss-rv-sterren{display:flex; gap:3px; margin:4px 0 9px; color:var(--orange,#f08d0c)}
.ss-rv-sterren svg{width:16px; height:16px}
.ss-rv-gkaart textarea{width:100%; background:#fff; border:1px solid rgba(26,28,30,.14); border-radius:10px;
  padding:11px 12px; font:400 14.5px/1.6 var(--body-font),sans-serif; min-height:104px; resize:vertical; outline:none; color:inherit}
.ss-rv-gkaart textarea:focus{border-color:var(--lilac,#c194d5)}
.ss-rv-gvoet{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px}
.ss-rv-hint{font-size:13px; color:#6e7276}
.ss-rv-verborgen{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ss-rv-terug{display:grid; gap:14px; margin-top:18px; border-top:1px solid rgba(26,28,30,.12); padding-top:16px}
.ss-rv-terug h3{font-family:var(--heading-font),sans-serif; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#6e7276; margin:0 0 4px; font-weight:500}
.ss-rv-terug p{margin:0; font-size:15px; line-height:1.6}

@keyframes ssRvIn{from{transform:translateY(16px); opacity:0} to{transform:none; opacity:1}}
@keyframes ssRvKaartIn{from{opacity:0; transform:translateX(42px) rotate(3deg)} to{opacity:1; transform:translateX(0) rotate(-.7deg)}}
@keyframes ssRvKaartUit{from{opacity:1; transform:translateX(0) rotate(-.7deg)} to{opacity:0; transform:translateX(-46px) rotate(-5deg)}}
@keyframes ssRvKaartInT{from{opacity:0; transform:translateX(-42px) rotate(-5deg)} to{opacity:1; transform:translateX(0) rotate(-.7deg)}}
@keyframes ssRvKaartUitT{from{opacity:1; transform:translateX(0) rotate(-.7deg)} to{opacity:0; transform:translateX(46px) rotate(3deg)}}
.ss-rv-kaart.in{animation:ssRvKaartIn .34s cubic-bezier(.22,1,.36,1) both}
.ss-rv-kaart.uit{animation:ssRvKaartUit .2s ease-in both}
.ss-rv-kaart.in-t{animation:ssRvKaartInT .34s cubic-bezier(.22,1,.36,1) both}
.ss-rv-kaart.uit-t{animation:ssRvKaartUitT .2s ease-in both}

/* ---- zonder javascript: alles onder elkaar ---- */
.ss-rv-zonderjs{padding:24px max(16px,env(safe-area-inset-left,0px))}
.ss-rv-zonderjs .ss-rv-kaart{max-width:660px; margin:0 auto; transform:none; display:grid; gap:14px}

@media (max-width:620px){
  .ss-rv-kop{padding-top:16px; padding-bottom:12px}
  /* Het logo krimpt hier bewust niet mee: op een telefoon is het het enige
     merkteken dat je klant ziet. */
  .ss-rv-logo .brand-images img, .ss-rv-logo img{height:32px; max-width:150px}
  .ss-rv-bewaard span{display:none}
  .ss-rv-veld{padding-top:18px; padding-bottom:14px}
  .ss-rv-kaart{padding:24px 20px 22px; box-shadow:6px 8px 0 color-mix(in srgb, var(--acc) 85%, transparent)}
  .ss-rv-vraag{font-size:25px}
  .ss-rv-invoer{font-size:17px}
  textarea.ss-rv-invoer{font-size:16px; min-height:104px}
  .ss-rv-voet{
    grid-template-columns:1fr; justify-items:center; gap:10px;
    position:sticky; bottom:0; background:#eeeef0;
    box-shadow:0 -10px 18px -12px rgba(26,28,30,.25);
  }
  .ss-rv-tip{display:none}
  .ss-rv-knoppen{grid-column:1; width:100%}
  .ss-rv-knoppen .ss-rv-knop{flex:1; padding:15px}
  .ss-rv-sla{grid-column:1; justify-self:center}
  .ss-rv-google{padding:18px}
}

@media (prefers-reduced-motion: reduce){
  .ss-rv-kaart.in, .ss-rv-kaart.uit, .ss-rv-kaart.in-t, .ss-rv-kaart.uit-t,
  .ss-rv-vink, .ss-rv-google{animation:none !important}
  .ss-rv-kaart{transform:rotate(-.7deg)}
  .ss-rv-balk i{transition:none}
}

/* ==========================================================================
   v15.83.0 - REVIEWS IN HET CRM
   Dezelfde taal als de rest van het CRM: panelen, randen, de accentkleuren.
   Het plakboek is voor je klant; hier hoort het gewoon bij je werkscherm.
   ========================================================================== */
.ss-rvattentie{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding:16px 18px; margin:0 0 14px; border-radius:var(--radius,18px);
  background:color-mix(in srgb,var(--lime) 10%,var(--panel));
  border:1px solid color-mix(in srgb,var(--lime) 44%,var(--line));
}
.ss-rvattentie-tekst{flex:1 1 320px; min-width:0}
.ss-rvattentie-tekst b{display:block; font-family:var(--heading-font),sans-serif; font-size:15px; margin-bottom:3px}
.ss-rvattentie-tekst small{display:block; color:var(--muted); font-size:12.5px; line-height:1.55}
.ss-rvattentie-knoppen{display:flex; gap:8px; flex-wrap:wrap}
.ss-rvattentie-knoppen form{margin:0}

.ss-rvcijfers{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){ .ss-rvcijfers{grid-template-columns:repeat(2,minmax(0,1fr))} }

.ss-rvblok{margin:0 0 14px}
.ss-rvblok .card-head{text-transform:none; font-size:13px}
.ss-rvblok .head-title{gap:9px; align-items:baseline; min-width:0}
.ss-rvblok .head-title b{font-family:var(--heading-font),sans-serif; font-size:14.5px}
.ss-rvblok .head-title small{color:var(--muted); font-size:12px}
.ss-rvpil{
  display:inline-flex; align-items:center; border-radius:999px; padding:4px 10px;
  font-family:var(--heading-font),sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.04em;
  border:1px solid color-mix(in srgb,var(--pilkleur) 42%,transparent);
  background:color-mix(in srgb,var(--pilkleur) 15%,transparent); color:var(--pilkleur);
}
.ss-rvpil.ja{--pilkleur:#6fae4e}
.ss-rvpil.nee{--pilkleur:var(--pink)}
.ss-rvpil.vast{--pilkleur:var(--lilac)}
.ss-rvscore{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px;
  font-family:var(--heading-font),sans-serif; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--lime) 22%,transparent); color:var(--text);
  border:1px solid color-mix(in srgb,var(--lime) 45%,transparent);
}
.ss-rvscore.laag{background:color-mix(in srgb,var(--pink) 16%,transparent); border-color:color-mix(in srgb,var(--pink) 42%,transparent)}
.ss-rvmeta{display:flex; flex-wrap:wrap; gap:6px 14px; padding:11px 16px; color:var(--muted); font-size:12px; border-bottom:1px solid var(--line)}
.ss-rvmeta .zacht{opacity:.7}
.ss-rvkop{
  display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; padding:12px 16px 8px;
  font-family:var(--heading-font),sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.ss-rvkop small{text-transform:none; letter-spacing:0; font-size:11.5px}
.ss-rvregel{display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-top:1px solid var(--line)}
.ss-rvregel.gekozen{background:color-mix(in srgb,var(--lime) 8%,transparent)}
.ss-rvregel form{margin:0}
.ss-rvtekst{flex:1; min-width:0}
.ss-rvtekst small{display:block; color:var(--muted); font-size:11px; margin-bottom:3px}
.ss-rvtekst p{margin:0; font-size:14.5px; line-height:1.6}
.ss-rvvink{
  width:21px; height:21px; border-radius:7px; border:1.5px solid var(--line);
  background:var(--panel2); color:var(--inkt,#191b1d); display:grid; place-items:center;
  flex:0 0 auto; margin-top:2px; padding:0; cursor:pointer;
}
.ss-rvvink[aria-pressed="true"]{background:var(--lime); border-color:var(--lime)}
.ss-rvvink.op-slot{opacity:.3; cursor:not-allowed}
.ss-rvvink:focus-visible{outline:2px solid var(--lilac); outline-offset:2px}
.ss-rvwaarschuwing{
  display:flex; gap:10px; align-items:flex-start; margin:0; padding:13px 16px;
  border-top:1px solid var(--line); font-size:13px; line-height:1.55; color:var(--muted);
}
.ss-rvwaarschuwing svg{flex:0 0 auto; margin-top:2px; color:var(--pink)}

.ss-rvvraagkaart{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding:16px 18px; border-radius:var(--radius,18px); margin-bottom:14px;
  background:var(--panel); border:1px dashed color-mix(in srgb,var(--lilac) 55%,var(--line));
}
.ss-rvvraagkaart b{display:block; font-family:var(--heading-font),sans-serif; font-size:15px}
.ss-rvvraagkaart small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.ss-rvvraagknoppen{display:flex; gap:8px; flex-wrap:wrap; margin:0}
.ss-rvstand{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; font-size:13px}
.ss-rvstand form{margin:0}

.ss-rvhandmatig{margin-top:18px}
.ss-rvhandmatig > summary{list-style:none; cursor:pointer; display:inline-flex}
.ss-rvhandmatig > summary::-webkit-details-marker{display:none}
.ss-rvhandmatig .form-grid{margin-top:16px}

.ss-rvvraagregel{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto auto;
  gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); margin:0;
}
.ss-rvvraagregel.nieuw{border-top-width:2px; padding-top:16px}
.ss-rvvraagregel input, .ss-rvvraagregel select{margin:0}
.ss-rvsoort{font-family:var(--heading-font),sans-serif; font-size:11px; color:var(--muted); white-space:nowrap}
@media (max-width:860px){
  .ss-rvvraagregel{grid-template-columns:1fr; gap:8px}
  .ss-rvattentie-knoppen{width:100%}
  .ss-rvattentie-knoppen .btn{flex:1}
}

/* --------------------------------------------------------------------------
   v15.84.1 - HET REVIEWFORMULIER BLIJFT LICHT
   --------------------------------------------------------------------------
   Hier stond een donkere variant die meeliep met de telefoon van je klant.
   Eruit gehaald: dit is jouw merkpagina en die hoort er bij iedereen hetzelfde
   uit te zien, net als een drukwerkje. Staat de telefoon van je klant in
   donker, dan krijgt hij nu toch het lichte formulier.

   color-scheme:light staat er niet voor de sier: zonder die regel maakt de
   browser de invoervelden, de schuif en de schuifbalken alsnog donker, en dan
   heb je zwarte velden op grijs papier.

   Wil je de donkere variant ooit terug, dan is dat dit blok vervangen door
   het oude - het staat in de volledige zip van 15.84.0.
   -------------------------------------------------------------------------- */
.ss-rv-body{color-scheme:light}

/* v15.84.0 - DE PROEFRIT bij Reviews → Instellingen */
.ss-rvstappen{list-style:none; counter-reset:stap; margin:18px 0 0; padding:0; display:grid; gap:12px}
.ss-rvstappen li{
  counter-increment:stap; position:relative; padding:14px 16px 14px 52px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel2);
  display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
}
.ss-rvstappen li::before{
  content:counter(stap); position:absolute; left:14px; top:14px;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel); border:1px solid var(--line);
  font-family:var(--heading-font),sans-serif; font-size:12px; font-weight:700;
}
.ss-rvstappen li.gedaan::before{background:var(--lime); border-color:var(--lime); color:#191b1d}
.ss-rvstappen li b{width:100%; font-family:var(--heading-font),sans-serif; font-size:14.5px}
.ss-rvstappen li small{width:100%; color:var(--muted); font-size:12.5px; line-height:1.55; margin-top:-4px}
.ss-rvstappen li form{margin:0}
.ss-rvlink{
  flex:1 1 260px; min-width:0; font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:9px 11px; border-radius:10px; background:var(--panel); border:1px solid var(--line); color:var(--muted);
}
@media (max-width:620px){ .ss-rvstappen li{padding-left:16px; padding-top:44px} .ss-rvstappen li::before{top:12px} }

/* v15.84.1 - het bedankscherm is twee blokken onder elkaar, niet naast elkaar. */
.ss-rv-dank{display:grid; gap:18px; width:100%; min-width:0}
.ss-rv-kaart.dank{margin-bottom:0}

/* v15.84.1 - het persoonlijke zinnetje onder de Google-vraag */
.ss-rv-pers{display:flex; gap:16px; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid rgba(26,28,30,.12)}
.ss-rv-portret{width:76px; height:76px; border-radius:50%; flex:0 0 auto; object-fit:cover; object-position:50% 22%;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--acc) 70%, transparent)}
.ss-rv-portret.leeg{display:grid; place-items:center; background:var(--acc); color:#191b1d;
  font-family:var(--heading-font),sans-serif; font-weight:700; font-size:26px}
.ss-rv-pers p{margin:0; font-size:15.5px; line-height:1.6; max-width:40ch}
@media (max-width:620px){ .ss-rv-portret{width:62px; height:62px} .ss-rv-pers{gap:13px} }

/* v15.84.2 - het zetje als er weinig staat om te plakken */
.ss-rv-zetje{width:100%; margin:10px 0 0; font-size:13px; line-height:1.55; color:#6e7276}

/* v15.84.2 — een tweede kop binnen hetzelfde formulier.
   .form-card h2 heeft margin-top:0 (klopt voor de eerste kop), maar een
   tweede kop plakte daardoor tegen het veld erboven. */
.form-card .form-grid + h2{margin-top:28px; padding-top:22px; border-top:1px solid var(--line)}
.form-card h2 + .form-grid{margin-top:12px}
.form-card .form-grid small a{color:var(--lilac); text-decoration:underline; text-underline-offset:2px}

/* v15.84.3 — de samenvatting zoals je klant hem kreeg, in je eigen CRM,
   met erbij of Claude of het CRM hem schreef. */
.ss-rvsamen{margin:14px 16px 4px; padding:13px 15px; border-radius:12px;
  background:color-mix(in srgb,var(--lilac) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--lilac) 26%,transparent)}
.ss-rvsamen .ss-rvkop{margin:0 0 7px}
.ss-rvsamen p{margin:0; line-height:1.6}
.ss-rvbron{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb,var(--text) 9%,transparent); color:var(--muted); font-size:10px; text-transform:none}
.ss-rvbron.ai{background:color-mix(in srgb,var(--lime) 24%,transparent); color:var(--text)}

/* ==========================================================================
   v15.85.0 — EEN AFGEROND PROJECT WORDT EEN CASE
   ========================================================================== */

/* --- het blok Na afronding op de projectpagina --- */
.ss-naafloop{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:8px}
@media (max-width:820px){ .ss-naafloop{grid-template-columns:1fr} }
/* v15.93.0 - DEZE HEETTE .ss-navraag EN DAT WAS AL BEZET.
   De regel die verschijnt nadat je een taak afvinkt ("ligt er nu nog iets bij
   iemand anders?") heet in dit bestand al .ss-navraag, zo'n 4400 regels
   hierboven. Omdat deze later staat, won hij: die ene regel werd een kolom
   van een halve meter hoog met een reusachtig invoerveld. Deze kaart heet nu
   .ss-nakaart; de navraagregel houdt zijn oude naam. */
.ss-nakaart{
  border:1px solid color-mix(in srgb,var(--lilac) 40%,var(--line));
  background:color-mix(in srgb,var(--lilac) 9%,var(--panel));
  border-radius:var(--radius); padding:16px 17px; display:flex; flex-direction:column; gap:13px;
}
.ss-nakaart.gedaan{border-color:var(--line); background:var(--panel)}
.ss-nakaart b{display:block; font-family:var(--heading-font),sans-serif; font-size:14px; margin-bottom:3px}
.ss-nakaart small{display:block; color:var(--muted); font-size:12.5px; line-height:1.55}
.ss-nakaartknoppen{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}

/* --- herkomst-label bij een veld --- */
.ss-csbron{
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb,var(--text) 9%,transparent); color:var(--muted);
  font-size:10px; font-weight:500; text-transform:none; letter-spacing:0; margin-left:6px;
}
.ss-csbron.ai{background:color-mix(in srgb,var(--lime) 24%,transparent); color:var(--text)}

/* --- de statuspil --- */
.ss-cspil{
  display:inline-flex; align-items:center; border-radius:999px; padding:4px 10px;
  font-family:var(--heading-font),sans-serif; font-size:10.5px; font-weight:600;
  border:1px solid color-mix(in srgb,var(--pilkleur) 42%,transparent);
  background:color-mix(in srgb,var(--pilkleur) 15%,transparent); color:var(--pilkleur);
  white-space:nowrap; --pilkleur:var(--muted);
}
.ss-cspil.idee{--pilkleur:var(--lilac)}
.ss-cspil.concept{--pilkleur:var(--orange)}
.ss-cspil.klaar{--pilkleur:var(--lime)}
.ss-cspil.gepubliceerd{--pilkleur:#78c7a3}
.ss-cspil.nee{--pilkleur:var(--pink)}
html[data-theme="light"] .ss-cspil.klaar{--pilkleur:#8a9606}

/* --- het overzicht --- */
.ss-cstel b{display:block}
.ss-csfilters{display:flex; gap:7px; flex-wrap:wrap; margin:16px 0 14px}
.ss-csfilter{
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:999px; padding:7px 13px; font-family:var(--heading-font),sans-serif;
  font-size:12px; font-weight:500; text-decoration:none; display:inline-flex; gap:6px;
}
.ss-csfilter span{opacity:.6; font-variant-numeric:tabular-nums}
.ss-csfilter.aan{background:var(--text); border-color:var(--text); color:var(--bg)}
.ss-csfilter.aan span{opacity:.7}

.ss-cslijst{overflow:hidden}
.ss-csrij{
  display:grid; grid-template-columns:62px minmax(0,1fr) auto auto; gap:14px; align-items:center;
  padding:13px 16px; border-top:1px solid var(--line); color:inherit; text-decoration:none;
}
.ss-csrij:first-child{border-top:0}
.ss-csrij:hover{background:color-mix(in srgb,var(--lilac) 8%,transparent)}
.ss-csvoor{
  width:62px; height:46px; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:var(--panel2); display:grid; place-items:center;
}
.ss-csvoor img{width:100%; height:100%; object-fit:cover; display:block}
.ss-csvoor .leeg{color:var(--muted); font-size:17px}
.ss-cstekst{min-width:0}
.ss-cstekst b{display:block; font-size:14px}
.ss-cstekst small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ss-csrechts{color:var(--muted); font-size:12.5px; white-space:nowrap; text-align:right}
@media (max-width:700px){
  .ss-csrij{grid-template-columns:48px minmax(0,1fr); row-gap:9px}
  .ss-csvoor{width:48px; height:38px}
  .ss-csrij .ss-cspil{grid-column:2; justify-self:start}
  .ss-csrechts{grid-column:1/-1; text-align:left}
}

/* --- het beeldenrek --- */
.ss-csrek{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:12px}
@media (max-width:700px){ .ss-csrek{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ss-csbeeld{margin:0; position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel2)}
.ss-csbeeld img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.ss-csbeeld .nr{
  position:absolute; top:7px; left:7px; width:20px; height:20px; border-radius:6px;
  background:var(--inkt,#191b1d); color:#fff; font:600 10px/20px var(--heading-font),sans-serif; text-align:center;
}
.ss-csbeeld figcaption{display:flex; gap:5px; justify-content:center; padding:8px}

/* --- toestemming --- */
.ss-cstoestemming{
  display:flex; gap:12px; align-items:flex-start; padding:15px 16px; border-radius:14px;
  border:1px solid var(--line); background:var(--panel2); font-size:13.5px; line-height:1.55;
}
.ss-cstoestemming.ja{
  border-color:color-mix(in srgb,var(--lime) 50%,transparent);
  background:color-mix(in srgb,var(--lime) 12%,transparent);
}
.ss-cstoestemming b{display:block; font-family:var(--heading-font),sans-serif; font-size:14px; margin-bottom:3px}
.ss-cstoestemming small{display:block; color:var(--muted); font-size:12.5px}
.ss-csvink{
  width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line);
  background:var(--panel); display:grid; place-items:center; padding:0; margin-top:2px; color:var(--inkt,#191b1d);
}
.ss-csvink[aria-pressed="true"]{background:var(--lime); border-color:var(--lime)}

/* --- export en status --- */
.ss-csexport{
  width:100%; font:400 12.5px/1.7 ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:13px 14px;
  color:var(--text); resize:vertical;
}
.ss-csstatus{display:flex; gap:8px; flex-wrap:wrap}

/* --- de quotes uit de review --- */
.ss-csquotes{
  margin-top:10px; padding:13px 15px; border-radius:12px;
  background:color-mix(in srgb,var(--lime) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--lime) 30%,transparent);
}
.ss-csquotes b{display:block; font-family:var(--heading-font),sans-serif; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; font-weight:500}
.ss-csquotes p{margin:0 0 10px; font-size:14px; line-height:1.6}
.ss-csquotes p small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.ss-csquotes p:last-of-type{margin-bottom:8px}

/* v15.85.0 — een lange regel zonder spaties (een url bijvoorbeeld) mocht de
   tijdlijn op een telefoon breder maken dan het scherm. Afbreken dus. */
.activity-list b,.activity-list p,.activity-mini span{overflow-wrap:anywhere}

/* ==========================================================================
   v15.86.0 — DE MERKKIT PER KLANT
   ========================================================================== */

/* --- logo's --- */
.ss-mklogorek{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:6px}
@media (max-width:900px){ .ss-mklogorek{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .ss-mklogorek{grid-template-columns:1fr} }
.ss-mklogo{margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel)}
.ss-mkproef{display:grid; grid-template-columns:1fr 1fr; min-height:94px}
.ss-mkproef.alleen-drive{grid-template-columns:1fr}
.ss-mkproef > div{display:grid; place-items:center; padding:16px}
.ss-mkproef .licht{background:#f6f6f6; color:#191b1d}
.ss-mkproef .donker{background:#191b1d; color:#fff}
.ss-mkproef img{max-width:100%; max-height:62px; object-fit:contain; display:block}
.ss-mkproef .licht span{font-size:12px; color:#6e7276}
.ss-mklogo figcaption{display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  padding:11px 13px; border-top:1px solid var(--line)}
.ss-mklogo figcaption b{font-family:var(--heading-font),sans-serif; font-size:13px}
.ss-mksoort{
  font-size:10px; font-family:var(--heading-font),sans-serif; color:var(--muted);
  background:var(--panel2); border:1px solid var(--line); border-radius:999px;
  padding:2px 8px; text-transform:uppercase; letter-spacing:.06em;
}
.ss-mkduw{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.ss-mkdrive{margin-top:14px}

/* --- kleuren --- */
.ss-mkkleuren{overflow:hidden}
.ss-mkkleur{
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center;
  padding:13px 16px; border-top:1px solid var(--line);
}
.ss-mkkleur:first-child{border-top:0}
.ss-mkvlak{width:72px; height:54px; border-radius:11px; border:1px solid var(--line); flex:0 0 auto}
.ss-mknaam{flex:1 1 140px; min-width:0}
.ss-mknaam b{display:block; font-size:14px}
.ss-mknaam small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
/* De vier codes staan in een eigen rij die omslaat als het niet past. Eerst
   stond hier een vast raster van zeven kolommen; dat werkte op een breed
   scherm en liep daaronder in elkaar. */
.ss-mkcodes{display:flex; flex-wrap:wrap; gap:10px 18px; flex:1 1 320px; min-width:0}
.ss-mkcode{min-width:84px}
.ss-mkcode small{display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-family:var(--heading-font),sans-serif; margin-bottom:3px}
/* Een getallenreeks als "200 101 31" mag nooit middenin een getal afbreken -
   dan staat er ineens 3 / 1 onder elkaar. */
.ss-mkcode > span{display:block; font:400 13px/1.4 ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  white-space:nowrap}
.ss-mkcode.leeg > span{color:var(--muted)}
.ss-mkknoppen{display:flex; gap:5px; flex-wrap:wrap; margin-left:auto; flex:0 0 auto}
@media (max-width:620px){
  .ss-mkvlak{width:54px; height:44px}
  .ss-mkknoppen{margin-left:0}
}
.ss-mkkleurform .field input:disabled{opacity:.65}

/* --- fonts --- */
.ss-mkfonts{overflow:hidden}
.ss-mkfont{padding:15px 16px; border-top:1px solid var(--line)}
.ss-mkfont:first-child{border-top:0}
.ss-mkfontkop{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:9px}
.ss-mkfontkop b{font-size:15px; font-family:var(--heading-font),sans-serif}
.ss-mkbron{
  font-size:10px; font-family:var(--heading-font),sans-serif; color:var(--muted);
  background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:2px 8px; margin-left:auto;
}
.ss-mkproefregel{
  background:var(--panel2); border:1px solid var(--line); border-radius:11px;
  padding:14px 16px; margin:0 0 10px; line-height:1.45; overflow-wrap:anywhere;
}
.ss-mkfontknoppen{display:flex; gap:7px; flex-wrap:wrap}
.ss-mkletop{margin-top:10px; font-size:12.5px; line-height:1.6}

/* --- handboek --- */
.ss-mkhandboek{
  display:flex; gap:12px; align-items:center; padding:13px 15px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel2); margin-bottom:14px; flex-wrap:wrap;
}
.ss-mkhandboek b{display:block; font-size:13.5px; font-family:var(--heading-font),sans-serif}
.ss-mkhandboek small{display:block; color:var(--muted); font-size:12px}
.ss-mkpdf{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background:color-mix(in srgb,var(--pink) 16%,transparent); color:var(--pink);
  font:700 10px var(--heading-font),sans-serif;
}

/* --- de strook bij een project --- */
.ss-mkstrook{
  display:flex; gap:13px; align-items:center; flex-wrap:wrap;
  padding:11px 15px; margin:0 0 14px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--panel);
}
.ss-mkstrooklogo{display:grid; place-items:center; flex:0 0 auto}
.ss-mkstrooklogo img{max-width:92px; max-height:30px; object-fit:contain; display:block}
.ss-mkstrookvlakken{display:flex; gap:5px}
.ss-mkstrookvlakken span{width:22px; height:22px; border-radius:7px; border:1px solid var(--line)}
.ss-mkstrookfonts{font-size:12.5px; color:var(--muted)}
.ss-mkstrookduw{margin-left:auto}

/* --- het voorbeeld in Social --- */
.ss-mkvoorbeeld{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel)}
.ss-mkdoek{aspect-ratio:1; display:grid; place-items:center; align-content:center; gap:12px;
  padding:24px; text-align:center}
.ss-mkdoek b{font-family:var(--heading-font),sans-serif; font-size:23px; line-height:1.25; display:block;
  overflow-wrap:anywhere}
.ss-mkstreep{display:block; width:46px; height:3px; border-radius:2px; margin:0 auto}
.ss-mkdoekvoet{display:flex; gap:10px; align-items:center; padding:11px 13px; border-top:1px solid var(--line)}
.ss-mkdoekvoet small{color:var(--muted); font-size:11.5px; line-height:1.4}
.ss-mkdoekvoet .ss-mkstrooklogo img{max-width:66px; max-height:24px}

/* v15.86.0 — DE TIMERBALK BLIJFT ÉÉN REGEL.
   Het NF-schuifje stond onder de balk en maakte hem twee regels hoog. Hij
   staat nu tussen de projectkeuze en Start; de kolom erbij, en de woorden
   "niet factureerbaar" vallen weg zodra het krap wordt — NF blijft staan. */
.ss-nu .ss-startrij{grid-template-columns:minmax(0,1fr) minmax(0,220px) auto auto}
.ss-nu .ss-startrij .ss-nf{color:color-mix(in srgb,var(--ss-bureau) 70%,transparent); padding:0 2px}
.ss-nu .ss-startrij .ss-nf-letters{border-color:color-mix(in srgb,var(--ss-bureau) 28%,transparent)}
.ss-nu .ss-startrij .ss-nf-vorm{
  background:color-mix(in srgb,var(--ss-bureau) 16%,transparent);
  border-color:color-mix(in srgb,var(--ss-bureau) 26%,transparent);
}
.ss-nu .ss-startrij .ss-nf-vorm i{background:color-mix(in srgb,var(--ss-bureau) 62%,transparent)}
@media (max-width:1180px){ .ss-nu .ss-startrij .ss-nf-uitleg{display:none} }
@media (max-width:860px){
  .ss-nu .ss-startrij{grid-template-columns:minmax(0,1fr)}
  .ss-nu .ss-startrij .ss-nf{justify-content:flex-start}
}

/* ==========================================================================
   v15.87.0 — ÉÉN OPBOUW VOOR ELKE PAGINA
   Drie lagen: de gekleurde balk, één rij tabbladen met rechts de filters,
   en dan de inhoud. Elke pagina begint daardoor op dezelfde hoogte.
   ========================================================================== */
.ss-paginakop{margin:0 0 18px}
.ss-paginakop .ss-werkbalk{margin-bottom:12px}

/* ÉÉN REGEL. Tabbladen links, filters en weergave rechts - en die blijven
   op dezelfde regel staan, ook als het krap wordt. De tabbladen mogen
   inschuiven en desnoods zijwaarts scrollen; de knoppen rechts wijken nooit
   naar een tweede regel. Pas op een telefoon breekt hij bewust af.
   De vaste minimumhoogte zorgt dat de inhoud op elke pagina op dezelfde
   hoogte begint, ook op een pagina die geen tabbladen heeft. */
.ss-koprij{
  display:flex; gap:10px 14px; align-items:center; flex-wrap:nowrap;
  min-height:38px;
}
.ss-koprij .ss-tabs{
  margin:0; min-width:0; flex:0 1 auto; flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.ss-koprij .ss-tabs::-webkit-scrollbar{display:none}
.ss-koprij .ss-tab{flex:0 0 auto}
.ss-koprij-rechts{display:flex; gap:8px; align-items:center; margin-left:auto; flex:0 0 auto; flex-wrap:nowrap}
.ss-koprij-rechts .ss-filterkies select{max-width:190px}
@media (max-width:860px){
  .ss-koprij{flex-wrap:wrap; min-height:0}
  .ss-koprij .ss-tabs{flex:1 1 100%}
  .ss-koprij-rechts{margin-left:0; width:100%; flex-wrap:wrap}
  .ss-koprij-rechts .ss-filterkies{flex:1 1 auto}
  .ss-koprij-rechts .ss-filterkies select{max-width:none; width:100%}
}

/* De filters: een keuzelijst, want een keuzelijst leest als "kies er één" en
   een pil leest als "ga hierheen". Dat verschil was weg toen er twee rijen
   pillen onder elkaar stonden. */
.ss-filterkies{display:inline-flex; align-items:center; gap:7px; margin:0}
.ss-filterkies select{
  appearance:none; -webkit-appearance:none;
  background:var(--panel) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--line); border-radius:10px; color:var(--text);
  padding:8px 32px 8px 13px; font:500 12.5px var(--heading-font),sans-serif; cursor:pointer;
  max-width:100%; text-overflow:ellipsis;
}
.ss-filterkies select:focus-visible{outline:2px solid var(--lilac); outline-offset:1px}

.ss-weergavekies{display:inline-flex; gap:3px; border:1px solid var(--line); border-radius:10px;
  padding:3px; background:var(--panel)}
.ss-weergaveknop{
  width:30px; height:28px; border-radius:8px; display:grid; place-items:center;
  color:var(--muted); text-decoration:none;
}
.ss-weergaveknop.is-actief{background:var(--panel2); color:var(--text)}

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

/* De sorteer- en keuzeformuliertjes die al bestonden horen nu in de rechterkant
   van de kopregel thuis, dus ze krijgen dezelfde vorm als de filterkeuzelijst. */
.ss-koprij-rechts .ss-sorteer{display:inline-flex; gap:6px; margin:0}
.ss-koprij-rechts .ss-sorteer select{
  appearance:none; -webkit-appearance:none;
  background:var(--panel) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--line); border-radius:10px; color:var(--text);
  padding:8px 32px 8px 13px; font:500 12.5px var(--heading-font),sans-serif; cursor:pointer;
  max-width:170px; text-overflow:ellipsis;
}
.ss-koprij-rechts .weergave-tabs{margin:0}
.ss-koprij-rechts .weergave-label{display:none}

/* Alles rechts in de kopregel even hoog, zodat de regel op elke pagina
   precies dezelfde hoogte heeft en de inhoud overal op dezelfde lijn begint. */
.ss-koprij-rechts > *{height:34px}
.ss-koprij-rechts .ss-filterkies select,
.ss-koprij-rechts .ss-sorteer select{height:34px; padding-block:0}
.ss-koprij-rechts .weergave-tabs,
.ss-koprij-rechts .ss-weergavekies{height:34px; align-items:center; padding:0 3px}
.ss-koprij-rechts .weergave-knop,
.ss-koprij-rechts .ss-weergaveknop{height:28px; width:30px}
.ss-koprij-rechts .btn,.ss-koprij-rechts button{height:34px}

/* Wat er direct na de kop komt krijgt geen eigen marge meer. Anders begint de
   inhoud alsnog op een andere hoogte, puur omdat de ene pagina met een kaart
   begint en de andere met een tussenkop. */
.ss-paginakop + *{margin-top:0 !important}

/* ==========================================================================
   v15.87.0 — EEN REVIEW IS EEN UITKLAPPER
   Eén regel per reactie; klap hem open voor de antwoorden. Zo houd je het
   overzicht ook als er twintig staan.
   ========================================================================== */
details.ss-rvblok{padding:0; overflow:hidden}
.ss-rvsamenvouw{
  display:flex; gap:12px; align-items:center; padding:14px 16px; cursor:pointer;
  list-style:none; user-select:none;
}
.ss-rvsamenvouw::-webkit-details-marker{display:none}
.ss-rvsamenvouw:hover{background:color-mix(in srgb,var(--lilac) 7%,transparent)}
.ss-rvvouwpijl{display:grid; place-items:center; color:var(--muted); flex:0 0 auto; transition:transform .16s}
details.ss-rvblok[open] .ss-rvvouwpijl{transform:rotate(90deg)}
.ss-rvwie{min-width:0; flex:1 1 auto; display:flex; gap:9px; align-items:baseline; flex-wrap:wrap}
.ss-rvwie b{font-size:14.5px}
.ss-rvwie small{color:var(--muted); font-size:12.5px}
.ss-rvwanneer{color:var(--muted); font-size:12.5px; white-space:nowrap}
.ss-rvmerken{display:flex; gap:7px; align-items:center; flex:0 0 auto}
.ss-rvlijf{padding:0 0 4px; border-top:1px solid var(--line)}
.ss-rvlijf .ss-rvkop{padding:14px 16px 8px}
.ss-rvvoet{display:flex; gap:14px; flex-wrap:wrap; padding:12px 16px;
  border-top:1px solid var(--line); color:var(--muted); font-size:12px}
.ss-rvvoet .zacht{opacity:.7}
@media (max-width:640px){
  .ss-rvsamenvouw{flex-wrap:wrap}
  .ss-rvwanneer{order:3; width:100%}
  .ss-rvmerken{margin-left:auto}
}

/* De quote die jij kunt gebruiken. */
.ss-rvquote{
  margin:0 16px 14px; padding:14px 15px; border-radius:12px;
  border:1px dashed var(--line); background:var(--panel2);
}
.ss-rvquote.is-gevuld{
  border-style:solid;
  border-color:color-mix(in srgb,var(--lime) 40%,transparent);
  background:color-mix(in srgb,var(--lime) 10%,transparent);
}
.ss-rvquote .ss-rvkop{padding:0 0 8px}
.ss-rvquote p{margin:0 0 12px; font-size:15px; line-height:1.6}
.ss-rvquote p.leeg{color:var(--muted); font-size:13px; line-height:1.55}
.ss-rvquoteknoppen{display:flex; gap:7px; flex-wrap:wrap}

/* v15.87.0 — de timerbalk op Tijdregistratie, net als op het dashboard:
   één regel, met het NF-schuifje tussen de projectkeuze en Start. */
.time-start{grid-template-columns:minmax(0,1fr) minmax(0,260px) auto auto}
.time-start .ss-nf{color:color-mix(in srgb,var(--ss-bureau) 70%,transparent); padding:0 2px}
.time-start .ss-nf-letters{border-color:color-mix(in srgb,var(--ss-bureau) 28%,transparent)}
.time-start .ss-nf-vorm{
  background:color-mix(in srgb,var(--ss-bureau) 16%,transparent);
  border-color:color-mix(in srgb,var(--ss-bureau) 26%,transparent);
}
.time-start .ss-nf-vorm i{background:color-mix(in srgb,var(--ss-bureau) 62%,transparent)}
@media (max-width:980px){
  .time-start{grid-template-columns:minmax(0,1fr)}
  .time-start .ss-nf{justify-content:flex-start}
}

/* Vier gekleurde gebieden — Werk, Klanten, Geld en Portfolio — en de rest
   neutraal. Neutraal pakt je gewone paneelkleur, zodat hij meeloopt met licht
   en donker in plaats van een wit blok te zijn. */
/* Een rand zou de balk 2 pixels hoger maken dan de gekleurde balken, en dan
   begint de inhoud op die pagina's net niet op dezelfde hoogte. Dus een
   inzetschaduw in plaats van een rand. */
.ss-werkbalk.is-neutraal{--vlak:var(--panel); --vlak-tekst:var(--text);
  box-shadow:inset 0 0 0 1px var(--line)}
/* Het kopje boven de titel was op een lichte kleur als lila nauwelijks te
   lezen. Iets meer dekking, en op een donkere kleur iets minder. */
/* small erft normaal de grijze tekstkleur uit style.css. Op een gekleurde
   balk klopt dat niet: op lila werd "KLANTEN" daardoor onleesbaar. Hij volgt
   nu de tekstkleur van de balk zelf. */
.ss-werkbalk .ss-werkbalk-wie small,
.ss-werkbalk .ss-werkbalk-cijfers small{color:var(--vlak-tekst,var(--text)); opacity:.72}
.ss-werkbalk.is-neutraal .ss-werkbalk-wie small,
.ss-werkbalk.is-neutraal .ss-werkbalk-cijfers small{color:var(--muted); opacity:1}

/* ==========================================================================
   v15.88.0 - ZACHTE TINTEN EN EEN LEGE BOVENBALK
   ========================================================================== */

/* 1. DE PAGINABALK IN EEN ZACHTE TINT -------------------------------------
   De volle merkkleur over de hele breedte was te hard - roze schreeuwt, en de
   tekst erop wordt dan een kwestie van wit of zwart kiezen. Php geeft nu
   alleen de kleur door (--kleur); hier mengen we hem met je paneelkleur. In
   licht geeft dat een pastel, in donker een gedempte tint, en in allebei
   blijft de tekst je gewone tekstkleur. Dat leest altijd.
   De tweede background-regel is de echte; browsers die color-mix niet kennen
   negeren hem en houden het nette paneel over. */
.ss-werkbalk.is-zacht{
  --vlak-tekst:var(--text);
  color:var(--text);
  background:var(--panel);
  background:color-mix(in srgb,var(--kleur,transparent) 16%,var(--panel));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kleur,transparent) 34%,var(--line));
}
/* In donker heeft 16% te weinig kracht om nog kleur te zijn; daar mag hij
   iets meer hebben zonder dat de tekst eronder lijdt. */
html[data-theme="dark"] .ss-werkbalk.is-zacht{
  background:color-mix(in srgb,var(--kleur,transparent) 24%,var(--panel));
}
/* Het kopje boven de titel en de labels bij de getallen: rustig grijs, net
   als op een neutrale pagina. Ze hoeven niet mee te schreeuwen. */
.ss-werkbalk.is-zacht .ss-werkbalk-wie small,
.ss-werkbalk.is-zacht .ss-werkbalk-cijfers small{
  color:color-mix(in srgb,var(--text) 68%,transparent); opacity:1;
}
/* De plusknop houdt wél de volle kleur: één vlakje per gebied dat je zo ziet
   staan. Alle vier de kleuren uit het palet zijn licht genoeg voor inkt. */
.ss-werkbalk.is-zacht .ss-rondeknop{
  background:var(--kleur,var(--ss-accent,#daea09)); color:#191b1d; border-color:transparent;
}
/* Het zoekveld is op een zachte tint geen gat meer maar gewoon een veld. */
.ss-werkbalk.is-zacht .ss-zoek{
  background:var(--panel); border-color:var(--line);
}

/* 2. DE BOVENBALK IS LEEG GEWORDEN ----------------------------------------
   Daar stond alleen de timerknop in, en die staat nu waar je werk zit. Een
   lege balk van 42 pixels plus 10 marge duwde elke pagina ruim vijftig pixels
   naar beneden. Hij krimpt mee: staat er niets in, dan is hij er niet; loopt
   er een timer, dan groeit hij vanzelf. Op een telefoon blijft de knop Menu
   erin staan, dus daar houdt hij zijn hoogte. */
/* Hij regelt zichzelf: staat er niets in dat ruimte inneemt, dan is hij er
   niet. Komt de knop Menu of een lopende timer er wel in, dan groeit hij
   vanzelf mee - ook op een telefoon. */
.main>.topbar{height:auto; min-height:0; margin:0; padding:0}
.main>.topbar>*{margin-bottom:10px}

/* ==========================================================================
   v15.89.0 - PROEVEN: FEEDBACK EN AKKOORD
   ========================================================================== */

/* 1. IN HET CRM, BIJ HET PROJECT ------------------------------------------ */
.ss-pvform .form-grid{margin-bottom:14px}
.ss-pv{margin-top:16px}
.ss-pvstand{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font:600 10px/1 var(--heading-font); letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  background:color-mix(in srgb,var(--text) 8%,transparent); color:var(--text);
}
.ss-pvstand.is-akkoord{background:color-mix(in srgb,var(--lime) 30%,var(--panel)); color:var(--text)}
.ss-pvstand.is-opmerkingen{background:color-mix(in srgb,var(--orange) 26%,var(--panel)); color:var(--text)}
.ss-pvstand.is-bekeken{background:color-mix(in srgb,var(--lilac) 26%,var(--panel)); color:var(--text)}
.ss-pvlink{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line)}
.ss-pvlink input{flex:1 1 320px; min-width:0; font-size:12px}
.ss-pvdicht{margin:0; color:var(--muted)}
.ss-pvknoppen{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line)}
.ss-pvverval{display:flex; gap:6px; align-items:center}
.ss-pvverval input{width:150px}
.ss-pvupload{border-bottom:1px solid var(--line)}
.ss-pvupload>summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; padding:12px 16px;
  font-family:var(--heading-font); font-weight:600;
}
.ss-pvupload>form{padding:0 16px 16px; display:grid; gap:12px; max-width:560px}
.ss-pvversie{padding:14px 16px; border-bottom:1px solid var(--line)}
.ss-pvversie:last-child{border-bottom:0}
.ss-pvversie.is-nieuwste{background:color-mix(in srgb,var(--text) 3%,transparent)}
.ss-pvversiekop{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.ss-pvversiekop b{font-family:var(--heading-font); font-size:15px}
.ss-pvversiekop small{color:var(--muted); overflow-wrap:anywhere}
.ss-pvversieknoppen{margin-left:auto; display:flex; gap:6px; align-items:center}
.ss-pvakkoord{
  font:600 10px/1 var(--heading-font); letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px;
  background:color-mix(in srgb,var(--lime) 32%,var(--panel)); color:var(--text);
}
.ss-pvoud{font-size:11px; color:var(--muted)}
.ss-pvbewijs{margin:8px 0 0; font-size:12px; color:var(--muted); line-height:1.6}
.ss-pvhash code{font-size:10px; overflow-wrap:anywhere}
.ss-pvveranderd{margin:8px 0 0; font-size:13px}
.ss-pvleeg{margin:8px 0 0; font-size:12px}
.ss-pvopm{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line)}
.ss-pvopm.is-verwerkt{opacity:.6}
.ss-pvopmlijf{flex:1 1 auto; min-width:0}
.ss-pvopmlijf p{margin:3px 0 0; overflow-wrap:anywhere}
.ss-pvopmknoppen{flex:0 0 auto}
.ss-pvnummer{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font:700 11px var(--heading-font);
  background:var(--orange); color:#191b1d;
}
.ss-pvopm.is-verwerkt .ss-pvnummer{background:color-mix(in srgb,var(--lime) 70%,var(--panel))}
.ss-pvreactie{margin:6px 0 0; font-size:13px; color:var(--muted)}
.ss-pvreageer>summary{cursor:pointer; font-size:12px; color:var(--muted); margin-top:6px}
.ss-pvreageer textarea{margin:6px 0}

/* 2. DE PAGINA VAN JE KLANT ----------------------------------------------- */
.ss-proefpagina{background:var(--bg); color:var(--text)}
.ss-prkop{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px; border-bottom:1px solid var(--line);
}
.ss-prmerk{font:700 17px/1 var(--heading-font); letter-spacing:-.01em}
.ss-prklantlogo{max-height:26px; max-width:120px; object-fit:contain; margin-left:auto; opacity:.9}
.ss-prwrap{max-width:1280px; margin:0 auto; padding:22px 22px 60px}
.ss-prtitel h1{margin:0; font-size:clamp(21px,2.6vw,30px); line-height:1.15}
.ss-prtitel p{margin:4px 0 0; color:var(--muted)}
.ss-prversies{display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 0}
.ss-prversies a{
  padding:7px 13px; border-radius:999px; border:1px solid var(--line);
  font:600 12px var(--heading-font); background:var(--panel);
}
.ss-prversies a.is-nu{background:var(--inkt,#191b1d); color:#fff; border-color:transparent}
.ss-prmelding{
  margin:16px 0 0; padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb,var(--lilac) 18%,var(--panel)); border:1px solid var(--line);
}
.ss-prmelding.is-akkoord{background:color-mix(in srgb,var(--lime) 22%,var(--panel))}
.ss-prmelding.is-fout{background:color-mix(in srgb,var(--pink) 18%,var(--panel))}
.ss-prveranderd{margin:16px 0 0; padding:12px 14px; border-radius:12px; background:var(--panel); border:1px solid var(--line)}
.ss-prveranderd p{margin:4px 0 0}
.ss-prblad{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; margin-top:18px; align-items:start}
.ss-prproef{min-width:0; display:grid; gap:14px}
.ss-prpagina{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.ss-prcanvas,.ss-prbeeld{display:block; width:100%; height:auto}
.ss-prpinlaag{position:absolute; inset:0}
.ss-prpinlaag.kan-klikken{cursor:crosshair}
.ss-prpin{
  position:absolute; transform:translate(-50%,-50%);
  width:26px; height:26px; border-radius:50%; border:2px solid #fff;
  background:var(--orange); color:#191b1d;
  font:700 12px var(--heading-font); display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.28); cursor:pointer; padding:0;
}
.ss-prpin.is-verwerkt{background:color-mix(in srgb,var(--lime) 80%,#fff)}
.ss-prpin.is-nieuw{background:var(--inkt,#191b1d); color:#fff}
.ss-prnieuw{
  position:absolute; width:min(260px,70%); transform:translateY(10px);
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:10px; display:grid; gap:8px; box-shadow:0 12px 30px rgba(0,0,0,.18); z-index:3;
}
.ss-prnieuwknoppen{display:flex; gap:6px}
.ss-prfout{margin:4px 0 0; font-size:12px; color:var(--pink)}
.ss-przij{
  position:sticky; top:16px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:14px; display:grid; gap:10px; max-height:calc(100vh - 32px); overflow:auto;
}
.ss-przijkop{display:flex; align-items:center; justify-content:space-between}
.ss-przijkop b{font-family:var(--heading-font)}
.ss-przijkop small{
  background:color-mix(in srgb,var(--text) 10%,transparent); border-radius:999px;
  padding:3px 9px; font:600 11px var(--heading-font);
}
.ss-pruitleg{margin:0; font-size:12px; color:var(--muted)}
.ss-prlijst{display:grid; gap:8px}
.ss-propm{display:flex; gap:9px; align-items:flex-start; padding:9px; border-radius:10px; background:var(--panel2); cursor:pointer}
.ss-propm.is-verwerkt{opacity:.6}
.ss-propm.is-aan{outline:2px solid var(--orange)}
.ss-propm p{margin:2px 0 0; font-size:13px; overflow-wrap:anywhere}
.ss-propm small{color:var(--muted); font-size:11px}
.ss-prnr{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--orange); color:#191b1d; font:700 11px var(--heading-font);
}
.ss-prantwoord{color:var(--muted); font-size:12px !important}
.ss-pralgemeen{display:grid; gap:6px; border-top:1px solid var(--line); padding-top:10px}
.ss-pralgemeen label{font:600 11px var(--heading-font); color:var(--muted)}
.ss-prakkoord{
  margin-top:22px; padding:20px; border-radius:16px;
  background:color-mix(in srgb,var(--lime) 16%,var(--panel)); border:1px solid var(--line);
}
.ss-prakkoord h2{margin:0 0 4px; font-size:19px}
.ss-prakkoord p{margin:0 0 12px; color:var(--muted)}
.ss-prakkoordform{display:grid; gap:10px; max-width:420px}
.ss-prakkoordform label{font:600 11px var(--heading-font); color:var(--muted)}
.ss-prvink{display:flex; gap:9px; align-items:flex-start; font:400 13px var(--body-font); color:var(--text)}
.ss-prvink input{width:auto; margin-top:2px}
.ss-prakkoordknop{justify-self:start}
.ss-prterugval{padding:20px; text-align:center}

@media (max-width:900px){
  .ss-prblad{grid-template-columns:1fr}
  .ss-przij{position:static; max-height:none}
  .ss-prwrap{padding:16px 16px 50px}
  .ss-prnieuw{width:min(240px,86%)}
}

/* v15.90.0 - ONDERHOUD & CONTRACTEN BIJ DE KLANT -------------------------- */
.ss-ondstrook{margin-bottom:14px}
.ss-ondregel{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:12px 16px; border-top:1px solid var(--line);
}
.ss-ondwat{flex:1 1 220px; min-width:0}
.ss-ondwat b{display:block; font-family:var(--heading-font)}
.ss-ondwat small{display:block; color:var(--muted)}
.ss-ondstand{color:var(--muted); font-size:12px}
.ss-ondgeld{font-family:var(--heading-font); font-variant-numeric:tabular-nums; white-space:nowrap}
.ss-ondweg{margin-top:16px}
.ss-ondweg h2{margin:0 0 6px; font-size:17px}
.btn.danger{
  border-color:color-mix(in srgb,var(--pink) 50%,var(--line));
  color:var(--pink); background:color-mix(in srgb,var(--pink) 10%,transparent);
}
@media (max-width:700px){
  .ss-ondregel{gap:8px}
  .ss-ondgeld{margin-left:auto}
}

/* ==========================================================================
   v15.91.0 - VAN AKKOORD NAAR PLANNING
   ========================================================================== */

/* 1. HET VENSTER INPLANNEN ------------------------------------------------ */
.ss-plmelding{
  border-radius:12px; padding:11px 14px; margin-bottom:14px; font-size:13.5px;
  background:color-mix(in srgb,var(--lilac) 16%,var(--panel)); border:1px solid var(--line);
}
.ss-plniet{
  border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:13.5px;
  background:color-mix(in srgb,var(--orange) 18%,var(--panel));
  border:1px solid color-mix(in srgb,var(--orange) 36%,var(--line));
}
.ss-plkiezer{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:16px;
}
.ss-plkiezer .field{flex:0 1 180px; min-width:0}
.ss-plkiezer .field label{display:block; font:600 11px var(--heading-font); color:var(--muted); margin-bottom:5px}
.ss-plblad{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; align-items:start}
.ss-plrij{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  padding:11px 16px; border-top:1px solid var(--line); min-width:0;
}
.ss-plrij:first-of-type{border-top:0}
.ss-plvink input{width:18px; height:18px}
.ss-plwat{flex:1 1 180px; min-width:0}
.ss-plwat b{display:block; font-family:var(--heading-font); font-size:14px; font-variant-numeric:tabular-nums}
.ss-plwat small{display:block; color:var(--muted); font-size:12px}
.ss-plklein{width:auto; min-width:98px; padding:6px 8px; font-size:12px}
.ss-plknoppen{padding:12px 16px 16px; display:flex; flex-wrap:wrap; gap:8px}
.ss-plverzet{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0}
.ss-plpil{
  display:inline-block; border-radius:999px; padding:2px 8px; font:600 10px var(--heading-font);
  letter-spacing:.06em; text-transform:uppercase;
  background:color-mix(in srgb,var(--mint,#78c7a3) 32%,var(--panel)); color:var(--text);
}
.ss-plpil.is-let{background:color-mix(in srgb,var(--orange) 30%,var(--panel))}

/* wat er in de weg staat */
.ss-plstaat{padding:4px 16px 16px}
.ss-pldag{padding:12px 0; border-top:1px solid var(--line)}
.ss-pldag:first-child{border-top:0}
.ss-pldag>b{font-family:var(--heading-font); font-size:13px}
.ss-pldag>small{display:block; color:var(--muted); font-size:11px; margin-bottom:7px}
.ss-plbez{
  display:flex; gap:9px; align-items:center; padding:5px 0; font-size:12px; min-width:0;
}
.ss-plbez>span:first-child{flex:0 0 86px; color:var(--muted); font-variant-numeric:tabular-nums}
.ss-plbez>span:nth-child(2){flex:1 1 auto; min-width:0; overflow-wrap:anywhere}
.ss-plbez em{font-style:normal; color:var(--muted); font-size:11px}
.ss-plbez.is-vast{opacity:.65}
.ss-plbez.is-vrij{opacity:.6; text-decoration:line-through}
.ss-plbez.is-vrij form{text-decoration:none}

.ss-plstaat-blokken{margin-top:16px}
.ss-plmail{margin-top:16px}
.ss-plinput{padding:14px 16px; display:grid; gap:12px; max-width:620px; border-bottom:1px solid var(--line)}
.ss-plinput label{display:block; font:600 11px var(--heading-font); color:var(--muted); margin-bottom:5px}
.ss-plmomenten{padding:14px 16px}
.ss-plmomenten h3{margin:0 0 4px; font-size:15px}
.ss-plmomenten .muted{font-size:12.5px; margin:0 0 10px}
.ss-plmoment{
  display:flex; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line);
  font-size:13.5px;
}
.ss-plmoment input{width:18px; height:18px}
.ss-plmoment b{font-family:var(--heading-font)}
.ss-plmoment span{color:var(--muted); font-variant-numeric:tabular-nums}
.ss-plvoorbeeld{border-top:1px solid var(--line); padding:12px 16px}
.ss-plvoorbeeld>summary{cursor:pointer; font-size:13px; color:var(--muted)}
.ss-plvoorbeeld pre{
  white-space:pre-wrap; font:13px/1.65 var(--body-font); margin:10px 0 0;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:14px;
  overflow-wrap:anywhere;
}

/* 2. DE ZONDAGCHECK ------------------------------------------------------- */
.ss-wkproject{margin-bottom:12px}
.ss-wkkop{display:flex; flex-wrap:wrap; gap:9px; align-items:center; padding:14px 16px}
.ss-wkwie{flex:1 1 220px; min-width:0}
.ss-wkwie b{display:block; font-family:var(--heading-font); font-size:15px; overflow-wrap:anywhere}
.ss-wkwie small{display:block; color:var(--muted); font-size:12px}
.ss-wkpil{
  border-radius:999px; padding:5px 11px; font:600 10px var(--heading-font);
  letter-spacing:.07em; text-transform:uppercase;
}
.ss-wkpil.is-door{background:color-mix(in srgb,var(--mint,#78c7a3) 34%,var(--panel)); color:var(--text)}
.ss-wkpil.is-wacht{background:color-mix(in srgb,var(--orange) 30%,var(--panel)); color:var(--text)}
.ss-wkblokken{display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px}
.ss-wkblok{
  background:var(--panel2); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; font-size:12px; font-variant-numeric:tabular-nums;
}
.ss-wkwacht{border-top:1px solid var(--line); padding:6px 16px 12px}
.ss-wkregel{display:flex; gap:10px; align-items:flex-start; padding:9px 0; color:inherit}
.ss-wkregel b{display:block; font-family:var(--heading-font); font-size:13.5px}
.ss-wkregel small{display:block; color:var(--muted); font-size:11.5px}
.ss-wkbolletje{
  flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:6px;
  background:var(--orange);
}

/* 3. DE CAPACITEITSSTROOK ------------------------------------------------- */
.ss-capstrook{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--ss-r,20px);
  margin-bottom:12px; overflow:hidden;
}
.ss-capstrook>summary{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; cursor:pointer;
  padding:12px 16px; list-style:none;
}
.ss-capstrook>summary::-webkit-details-marker{display:none}
.ss-captitel{font:600 10px var(--heading-font); letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.ss-capbalkjes{display:flex; gap:9px; flex:1 1 200px; min-width:0}
.ss-capbalkje{flex:1 1 0; min-width:0}
.ss-capspoor{display:block; height:7px; border-radius:999px; background:var(--panel2); overflow:hidden}
.ss-capvul{display:block; height:100%; border-radius:999px; background:var(--mint,#78c7a3)}
.ss-capbalkje.is-bijna .ss-capvul{background:var(--lime)}
.ss-capbalkje.is-vol .ss-capvul{background:var(--pink)}
.ss-capbalkje small{display:block; font-size:10px; color:var(--muted); margin-top:4px; font-variant-numeric:tabular-nums}
.ss-cappijl{color:var(--muted); transition:transform .15s ease}
.ss-capstrook[open] .ss-cappijl{transform:rotate(90deg)}
.ss-caplijf{border-top:1px solid var(--line); padding:4px 16px 14px}
.ss-caprij{display:flex; flex-wrap:wrap; gap:9px; align-items:center; padding:10px 0; border-top:1px solid var(--line)}
.ss-caprij:first-child{border-top:0}
.ss-caprij.is-nu{font-weight:600}
.ss-caprij>b{font-family:var(--heading-font); flex:0 0 46px}
.ss-caprij>small{color:var(--muted); font-size:11.5px; flex:1 1 130px; min-width:0}
.ss-capgetal{font-variant-numeric:tabular-nums; font-size:13px}
.ss-capuit{color:var(--muted); font-size:11.5px; flex:1 1 150px; min-width:0}
.ss-cappil{
  border-radius:999px; padding:3px 9px; font:600 10px var(--heading-font);
  letter-spacing:.06em; text-transform:uppercase;
  background:color-mix(in srgb,var(--mint,#78c7a3) 30%,var(--panel)); color:var(--text);
}
.ss-cappil.is-bijna{background:color-mix(in srgb,var(--lime) 36%,var(--panel))}
.ss-cappil.is-vol{background:color-mix(in srgb,var(--pink) 26%,var(--panel))}
.ss-capuitleg{margin:10px 0 0; font-size:12px; color:var(--muted)}

/* 4. DE PLANREGELS BIJ INSTELLINGEN --------------------------------------- */
.ss-planregels{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius,20px);
  padding:22px; margin:24px 0; box-shadow:var(--shadow);
}
.ss-plandagen{display:flex; flex-wrap:wrap; gap:7px}
.ss-plandag{display:inline-flex; align-items:center; gap:6px; background:var(--panel2);
  border:1px solid var(--line); border-radius:999px; padding:7px 12px; font-size:13px}
.ss-plandag input{width:16px; height:16px}

/* 5. OP HET KLANTPORTAAL -------------------------------------------------- */
.ss-portaalplanning p{margin:4px 0 0}
.ss-portaalinput{color:var(--muted); font-size:13.5px}

@media (max-width:900px){
  .ss-plblad{grid-template-columns:1fr}
  .ss-plkiezer .field{flex:1 1 140px}
  .ss-capbalkjes{width:100%; flex:1 1 100%}
}

/* v15.93.0 - DE AGENDA IN DE ZONDAGCHECK --------------------------------- */
.ss-wkagenda{margin-bottom:12px}
.ss-wkdag{padding:11px 16px; border-top:1px solid var(--line)}
.ss-wkdag:first-of-type{border-top:0}
.ss-wkdag>b{display:block; font-family:var(--heading-font); font-size:13px; margin-bottom:5px}
.ss-wkdag.is-geenwerkdag{background:color-mix(in srgb,var(--text) 3%,transparent)}
.ss-wkdag.is-geenwerkdag>b{color:var(--muted)}
.ss-wkafspraak{display:flex; flex-wrap:wrap; gap:9px; align-items:baseline; padding:4px 0; font-size:13px; min-width:0}
.ss-wktijd{flex:0 0 86px; color:var(--muted); font-variant-numeric:tabular-nums; font-size:12px}
.ss-wkwat{flex:1 1 180px; min-width:0; overflow-wrap:anywhere}
.ss-wkwat small{color:var(--muted)}
.ss-wktelt{
  flex:0 0 auto; font:600 10px var(--heading-font); letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:3px 9px; color:var(--muted);
  background:color-mix(in srgb,var(--text) 7%,transparent);
}
.ss-wkafspraak.is-telt .ss-wktelt{
  background:color-mix(in srgb,var(--lilac) 28%,var(--panel)); color:var(--text);
}
.ss-wkuitleg{margin:0; padding:10px 16px 14px; font-size:12px; color:var(--muted); border-top:1px solid var(--line)}

/* v15.94.0 - je werkweek als geheel, boven de uitleg in de strook */
.ss-capweek{
  margin:10px 0 0; font-size:13px; line-height:1.6;
  font-variant-numeric:tabular-nums;
}
.ss-capweek b{font-family:var(--heading-font)}

/* v15.94.0 - het datumknopje staat nu op het beeld; geef het een vlakje mee
   zodat het op een lichte foto niet verdwijnt. */
.ss-kaldatum input{
  background:color-mix(in srgb,var(--panel) 80%,transparent);
  border-radius:7px; opacity:.8;
}
.ss-kalkaart:hover .ss-kaldatum input{opacity:1}
/* In de maandweergave staan zeven dagen naast elkaar én vijf onder elkaar.
   Daar mag het beeld kleiner: anders wordt één maand een meter lang. */
.ss-contentkalender.is-maand .ss-kalbeeld{max-height:64px}

/* ==========================================================================
   v15.95.0 - SITES EN HET TABBLAD TECHNIEK
   --------------------------------------------------------------------------
   Twee bronnen die in beeld gescheiden moeten blijven: wat de site zelf
   laat zien (de kaart bovenaan) en wat jij er zelf over weet (het formulier
   eronder). De kaart heeft daarom een eigen rand en een zachte vulling, het
   formulier blijft het gewone formulier dat overal in het CRM staat.
   ========================================================================== */
.ss-tkkaart{
  border:1px solid color-mix(in srgb,var(--lucht,#8fb8e8) 38%,var(--line));
  background:color-mix(in srgb,var(--lucht,#8fb8e8) 8%,var(--panel));
  border-radius:var(--radius); padding:15px 17px 13px;
  display:flex; flex-direction:column; gap:12px; margin-bottom:22px;
}
.ss-tkkaart>p{margin:0}
.ss-tkrij{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px 18px}
.ss-tkrij>div{min-width:0}
.ss-tkrij small{display:block; font:600 10.5px var(--heading-font),sans-serif;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:3px}
.ss-tkrij b{display:block; font-family:var(--heading-font),sans-serif; font-size:14px;
  overflow-wrap:anywhere}
.ss-tkplugins{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.ss-tkplugins li{
  display:inline-flex; align-items:baseline; gap:5px; min-width:0;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); font-size:12px;
}
.ss-tkplugins li span{overflow-wrap:anywhere}
.ss-tkplugins li em{font-style:normal; color:var(--muted); font-size:11px}
.ss-tkklein{font-size:12px; line-height:1.55}
.ss-tkonder{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  padding-top:11px; border-top:1px solid var(--line); font-size:12.5px;
}
.ss-tkonder>span:first-child{flex:1 1 180px; min-width:0}
.ss-tkfout{display:flex; flex-direction:column; gap:3px; font-size:13px}
.ss-tkfout b{font-family:var(--heading-font),sans-serif; overflow-wrap:anywhere}
.ss-tkfout span{color:var(--muted); font-size:12.5px}

/* --- het overzicht --- */
.ss-sitezoek{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin:0 0 14px; font-size:13px; color:var(--muted);
}
.ss-sitezoek b{color:var(--text)}
.ss-sitetabel td small{display:block; color:var(--muted); font-size:11.5px; margin-top:2px}
.ss-sitetabel td{vertical-align:top}
.ss-sitetabel tr.is-stuk td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--rood,#c0493f) 70%,transparent)}
.ss-sitepil{
  display:inline-block; margin-top:4px; margin-right:4px; padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb,var(--mint,#78c7a3) 26%,transparent); color:var(--text);
  font-size:10.5px; font-weight:500; white-space:nowrap;
}
.ss-siteveranderd{color:var(--orange,#f08d0c)!important; font-weight:600}
.ss-siteuitleg{margin:14px 0 0; font-size:12.5px; line-height:1.6; max-width:78ch}

@media(max-width:700px){
  .ss-tkkaart{padding:13px 14px 11px}
  .ss-tkrij{grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px 14px}
  .ss-tkonder{font-size:12px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v15.98.0 · DE SCHEIDSLIJN IN DE PRIJSOPBOUW

   Tussen twee stappen een streepje waarmee je de investering over twee
   pagina's zet. Uit is hij stil: een dunne stippellijn met een rustig
   knopje. Aan licht hij op in lime, zodat je in één oogopslag ziet waar de
   pagina breekt - ook als je vier stappen hebt.
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-vbreek{ display:flex; align-items:center; gap:12px; margin:14px 2px; }
.ss-vbreek .lijn{ flex:1; border-top:1px dashed var(--line); }
.ss-vbreekknop{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  background:var(--panel); color:var(--muted);
  font-size:12.5px; line-height:1.3; white-space:nowrap; cursor:pointer;
}
.ss-vbreekknop svg{ flex:none; opacity:.8 }
.ss-vbreekknop:hover{ color:var(--text); border-color:color-mix(in srgb,var(--lime) 45%,var(--line)) }
.ss-vbreekknop:focus-visible{ outline:2px solid var(--lime); outline-offset:2px }
.ss-vbreek.aan .lijn{ border-top:1px solid color-mix(in srgb,var(--lime) 55%,var(--line)) }
.ss-vbreek.aan .ss-vbreekknop{
  background:color-mix(in srgb,var(--lime) 20%,var(--panel));
  border-color:color-mix(in srgb,var(--lime) 45%,var(--line));
  color:var(--text); font-weight:500;
}
html[data-theme="dark"] .ss-vbreek.aan .ss-vbreekknop{
  background:color-mix(in srgb,var(--lime) 26%,var(--panel));
}
.ss-vbreek.aan .ss-vbreekknop svg{ opacity:1 }
/* op een telefoon mag hij de volle breedte pakken, anders is hij te klein
   om met een duim te raken */
@media (max-width:640px){
  .ss-vbreek{ gap:8px }
  .ss-vbreekknop{ padding:8px 12px; font-size:12px }
  .ss-vbreek .lijn{ flex:0 0 10px }
  .ss-vbreekknop{ flex:1; justify-content:center }
}
/* PM in de postenlijst: schuin, zodat het niet voor een bedrag wordt aangezien */
.ss-vbedrag em{ font-style:italic; color:var(--muted) }

/* v15.98.1 · dezelfde scheidslijn, maar dan tussen twee posten binnen een
   stap. Hij staat in een eigen tabelrij, dus de cel moet zijn eigen
   celopmaak loslaten - anders springt hij uit de lijn met de posten. */
.ss-vposten tr.ss-vbreekrij > td{ padding:0 14px; border:0; background:transparent }
.ss-vposten tr.ss-vbreekrij .ss-vbreek{ margin:8px 0 }
.ss-vposten tr.ss-vbreekrij .ss-vbreekknop{ padding:4px 11px; font-size:12px }