/* ============================================================
   OnzeAuto — design system
   Antraciet basis · wit als hoofdkleur · groen/rood als status.
   Volgorde: tokens → basis → header → kaarten → status →
   bestuurder → knoppen → week → verrekening → lijsten →
   formulieren → sheets → keypad → overig → animaties → mobiel.
   ============================================================ */

:root{
  /* kleuren */
  --bg:#0e0f11;
  --card:#191b1e;
  --card2:#232528;
  --cell:#131518;
  --card3:#2b2e33;        /* actieve/opgelichte staat */
  --line:rgba(255,255,255,0.08);
  --text:#f5f6f7;
  --text-inv:#101113;
  --dim:#9ba1a8;
  --dim2:#6b7178;
  --green:#32d74b;
  --green-soft:rgba(50,215,75,0.12);
  --green-text:#8bf0a3;
  --red:#ff453a;
  --red-soft:rgba(255,69,58,0.14);
  --red-text:#ff9a91;
  /* maatvoering */
  --r:24px;      /* grote kaarten */
  --r-m:16px;    /* knoppen, inputs */
  --r-s:12px;    /* chips, cellen */
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

/* ---- basis ---- */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ background:var(--bg); overflow-x:hidden; overflow-x:clip; }
body{
  margin:0; color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-size:16px; line-height:1.45;
  min-height:100vh; display:flex; justify-content:center;
  padding:0 20px calc(48px + env(safe-area-inset-bottom));
}
/* De zachte gloed bovenin als vaste laag, los van het scrollen: zo schuift
   er bij rubber-banden geen grijze gradient over de zwarte inhoud heen. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(1100px 520px at 50% -160px, #1e2126 0%, var(--bg) 62%);
}
.frame{ position:relative; z-index:1; width:100%; max-width:480px; }
button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; touch-action:manipulation; }
input, select, textarea{ touch-action:manipulation; }
:focus-visible{ outline:2px solid rgba(245,246,247,0.55); outline-offset:2px; border-radius:6px; }
.icon{ display:inline-flex; vertical-align:middle; flex-shrink:0; }
.icon svg{ display:block; }

/* Ambient: organische, levende gloed bovenin die meekleurt met de status
   (JS zet --ambient). Drie zachte lagen drijven elk in hun eigen tempo —
   keyframes beginnen en eindigen identiek, dus de lus is naadloos.
   Bewust géén blur-filter: dat gaf renderstrepen op fixed lagen. */
#ambient{
  position:fixed; top:-190px; left:50%; transform:translateX(-50%);
  width:640px; height:560px; pointer-events:none; z-index:0;
}
#ambient::before, #ambient::after, #ambient i{
  content:''; position:absolute; inset:6%;
  border-radius:50%;
  background:radial-gradient(closest-side, var(--ambient, transparent), transparent 70%);
  opacity:.42;
}
#ambient::after{ inset:14% 10% 12% 16%; opacity:.34; }
#ambient i{ inset:20% 16% 18% 12%; opacity:.30; }
@media (prefers-reduced-motion: no-preference){
  #ambient::before{ animation:blobA 21s ease-in-out infinite; }
  #ambient::after{ animation:blobB 29s ease-in-out infinite; }
  #ambient i{ animation:blobC 24s ease-in-out infinite; }
}
@keyframes blobA{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(-52px,24px) scale(1.12); }
  66%{ transform:translate(38px,-16px) scale(.94); }
}
@keyframes blobB{
  0%,100%{ transform:translate(0,0) scale(1); }
  25%{ transform:translate(44px,18px) scale(.9); }
  60%{ transform:translate(-30px,34px) scale(1.16); }
}
@keyframes blobC{
  0%,100%{ transform:translate(0,0) scale(1); }
  40%{ transform:translate(-24px,-26px) scale(1.1); }
  75%{ transform:translate(30px,12px) scale(.92); }
}

/* ---- header ---- */
.top{
  display:grid; grid-template-columns:40px minmax(0,1fr) 40px;
  align-items:center; gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 2px 14px;
}
.top-spacer{ width:40px; height:40px; }
/* Woordmerk: het aangeleverde OmBeurt-logo (PNG, wit met groene stip). */
.brand-logo{
  justify-self:center; display:block; height:34px; width:auto;
  max-width:62vw; object-fit:contain;
  user-select:none; -webkit-user-select:none; pointer-events:none;
}
.iconbtn{
  width:40px; height:40px; border-radius:50%;
  background:var(--card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--dim);
}
.iconbtn:active{ background:var(--card2); }

/* ---- kaarten ---- */
.card{
  background:linear-gradient(180deg, #1d2024 0%, #17191c 100%);
  border:1px solid var(--line); border-top-color:rgba(255,255,255,0.12);
  border-radius:var(--r); padding:22px;
  box-shadow:var(--shadow); margin-bottom:14px;
}
.card-icon{
  width:40px; height:40px; margin:0 auto 12px;
  border-radius:var(--r-s); background:var(--card2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--dim);
}
.card-title{
  font-size:13px; font-weight:600; color:var(--dim);
  text-transform:uppercase; letter-spacing:0.6px; margin:0 0 16px;
  text-align:center;
}
/* Sectiekop: overgang van doen naar inzicht */
.section-head{
  display:flex; align-items:center; gap:14px;
  margin:34px 2px 16px;
}
.section-head::before, .section-head::after{
  content:''; flex:1; height:1px; background:var(--line);
}
.section-head span{
  font-size:13px; font-weight:600; color:var(--dim);
  text-transform:uppercase; letter-spacing:0.8px; white-space:nowrap;
}

/* ---- statuskaart ---- */
/* Ritme van de drie hoofdstukken (auto → acties → ontdekken). Vóór deze
   ronde stond alles onder de statuskaart op 16/12/12/12: gelijke afstanden,
   dus geen hiërarchie en het gevoel van één stapel kaarten. Nu is binnen een
   hoofdstuk klein (10px) en tussen hoofdstukken groot (28 en 32px). */
#actionsSection{ margin-top:28px; }
.status-card{ /* open live-indicator: geen kaart, alleen gloed */
  position:relative; isolation:isolate;
  /* De onderpadding is van 26 naar 0: de pil en het briefje wonen nu bínnen
     de zone, dus de afstand naar hoofdstuk 2 wordt door #actionsSection
     bepaald. Met 26px erbij werd het gat 54px en viel de pagina doormidden. */
  min-height:180px; padding:16px 20px 0; margin-bottom:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.status-card::before{ /* zachte extra kern achter het lampje, zonder blur */
  content:''; position:absolute; inset:-20% -10%; z-index:-1;
  pointer-events:none; opacity:.5;
  background:radial-gradient(closest-side at 50% 34%, var(--status-glow, transparent), transparent 68%);
  transition:opacity .55s ease;
}
.status-card.available{ --status-glow:rgba(50,215,75,.40); }
.status-card.underway{ --status-glow:rgba(255,69,58,.45); }
.status-content{
  position:relative; z-index:1; width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.status-dot{ width:17px; height:17px; border-radius:50%; flex-shrink:0; margin-bottom:14px; }
.status-dot.green{ background:var(--green); box-shadow:0 0 0 5px rgba(50,215,75,.075), 0 0 18px rgba(50,215,75,.85); }
.status-dot.red{ background:var(--red); box-shadow:0 0 0 5px rgba(255,69,58,.075), 0 0 18px rgba(255,69,58,.85); }
.status-title{ /* alleen nog voor foutmeldingen (geen verbinding e.d.) */
  margin:0; font-size:13px; line-height:1.2; font-weight:700;
  text-transform:uppercase; letter-spacing:1.35px; color:rgba(245,246,247,.78);
}
.status-sub{ margin:9px 0 0; font-size:17px; line-height:1.3; color:var(--dim); }
.status-line{
  margin:2px 0 0; max-width:390px;
  font-size:28px; line-height:1.22; font-weight:750; letter-spacing:-0.6px; color:var(--text);
  /* Donkere halo: de tekst komt los van de gloed erachter — zonder halo drukt
     de heldere gloed het waargenomen contrast van precies deze regel. */
  text-shadow:0 1px 16px rgba(8,9,11,.6), 0 0 3px rgba(8,9,11,.35);
}
.status-until{
  margin:14px 0 0; max-width:390px;
  font-size:15px; line-height:1.2; font-weight:500; letter-spacing:-0.2px;
  color:var(--red-text); font-variant-numeric:tabular-nums;
  text-shadow:0 1px 10px rgba(8,9,11,.5);
}
/* Voortgang van de huidige reservering, met meerijdend autootje */
.status-progress{
  position:relative;
  width:min(280px, 72%); height:5px; border-radius:999px;
  background:rgba(255,255,255,0.09); margin:26px auto 6px;
}
.status-progress i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,69,58,.55), var(--red));
  transition:width 1.2s var(--ease-out);
}
.car-marker{
  position:absolute; left:0; top:-27px; transform:translateX(-50%);
  color:var(--red); pointer-events:none;
  transition:left 1.2s var(--ease-out);
  filter:drop-shadow(0 0 6px rgba(255,69,58,.5));
}
/* Hobbelweggetje: onregelmatige mini-schokjes, naadloze lus. */
@keyframes rattle{
  0%,100%{ transform:translateX(-50%) translateY(0) rotate(0deg); }
  9%{ transform:translateX(-50%) translateY(-1.4px) rotate(-1.6deg); }
  16%{ transform:translateX(-50%) translateY(.4px) rotate(1deg); }
  27%{ transform:translateX(-50%) translateY(-.7px) rotate(.6deg); }
  38%{ transform:translateX(-50%) translateY(-1.8px) rotate(-1deg); }
  47%{ transform:translateX(-50%) translateY(.3px) rotate(1.8deg); }
  61%{ transform:translateX(-50%) translateY(-1px) rotate(-.5deg); }
  72%{ transform:translateX(-50%) translateY(-.2px) rotate(1.2deg); }
  84%{ transform:translateX(-50%) translateY(-1.5px) rotate(-1.4deg); }
  93%{ transform:translateX(-50%) translateY(.2px) rotate(.4deg); }
}
/* Beschikbaar: zelfde lijn, autootje staat links klaar voor vertrek. */
.status-progress.idle{ margin-top:26px; }
.status-progress.idle .car-marker{
  left:4%; color:var(--green);
  filter:drop-shadow(0 0 8px rgba(50,215,75,.45));
}
/* De reserveringspil spreekt dezelfde kleurtaal als het weekrooster:
   .status-note = andermans reservering (rood, "hier moet ik rekening mee
   houden"), .status-note.mine = je eigen reservering (groen, "geen aandacht
   nodig"). Vóór deze ronde was de pil altijd rood, ook voor je eigen
   reservering — terwijl diezelfde reservering in de agenda groen stond. */
.status-note{
  margin:17px 0 0; padding:9px 13px; border-radius:999px;
  background:rgba(255,69,58,.11); border:1px solid rgba(255,69,58,.20);
  color:var(--red-text); font-size:13px; font-weight:500;
}
.status-note b{ color:var(--text); font-weight:650; }
.status-note.mine{
  background:var(--green-soft); border-color:rgba(50,215,75,.24);
  color:var(--green-text);
}
/* Het briefje woont sinds deze ronde binnen de statuszone: het hoort bij de
   auto, niet bij de acties. Blijft informatie, geen knop.
   Verfijning: de regel had dezelfde 13px als de pil erboven en was bijna
   even breed, waardoor hij las als een tweede pil zonder rand. De plek
   blijft op leeshoogte, maar wie-en-wanneer zakt naar voetnootformaat.
   Zo lees je eerst wáár de auto staat en pas daarna van wie dat komt. */
/* Twee regels in plaats van één lange: de plek is het antwoord, wie-en-wanneer
   is de voetnoot. Als één regel was het briefje 247px breed tegen 199px voor
   de pil erboven — het stilste element was het breedste. Gesplitst is de
   eerste regel puur "waar staat hij" en zakt de rest naar voetnootformaat. */
.status-content .autoregel{
  margin:11px 0 0; font-size:12.5px; gap:5px;
  flex-wrap:wrap; row-gap:0; line-height:1.3;
}
.status-content .autoregel .icon{ opacity:.7; }
.status-content .autoregel-wie{ font-size:11.5px; flex-basis:100%; text-align:center; }

/* ---- bestuurder kiezen ---- */
.step-tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.6px;
  text-transform:uppercase; color:var(--dim); margin-bottom:10px;
}
.driver-q{ font-size:22px; font-weight:700; letter-spacing:-0.4px; margin:0 0 16px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  padding:12px 20px; border-radius:999px;
  background:var(--card2); border:1px solid var(--line);
  font-size:15px; font-weight:600; color:var(--text);
  transition:transform 0.06s;
}
.chip:active{ transform:scale(0.96); }
.chip.sel{ background:var(--text); color:var(--text-inv); border-color:var(--text); }
/* Compacte keuzerij: drie keuzes moeten op één regel passen, anders leest de
   rij als een lijstje in plaats van als één schakelaar. */
.chips-compact .chip{ padding:9px 14px; font-size:13.5px; }

/* Welkomstregel: sfeer, geen signaal. De begroeting geeft warmte, de auto
   geeft antwoord. Bewust achromatisch: groen betekent in deze app "geen
   aandacht nodig", en je eigen naam vraagt nooit aandacht — hij mag de enige
   kleuraccent op het scherm dus niet opeisen (en zeker niet groen blijven
   terwijl de auto onderweg is en het scherm rood staat). */
.greet{
  padding:10px 4px 6px; font-size:17px; font-weight:600; letter-spacing:-0.2px;
  text-align:center; color:var(--dim);
}
.greet-name{
  display:inline-flex; align-items:center; gap:7px;
  font-size:inherit; font-weight:inherit; letter-spacing:inherit;
}
.greet-name b{ color:rgba(245,246,247,.82); font-weight:650; }
.greet-name .icon{ color:var(--dim2); transform:translateY(1px); }
.greet-name:active{ opacity:.7; }

/* ---- knoppen ---- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-width:0; padding:17px; border-radius:var(--r-m);
  font-size:17px; font-weight:600; letter-spacing:-0.2px; white-space:nowrap;
  transition:transform 0.06s, opacity 0.15s;
}
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--text); color:var(--text-inv); }
.btn-secondary{ background:var(--card); color:var(--text); border:1px solid var(--line); }
.btn-danger-soft{ background:var(--red-soft); color:var(--red-text); }
.btn.disabled, .btn.saving{ opacity:0.4; pointer-events:none; }
/* "Nog niet aan de beurt": ziet er ingetogen uit, maar blijft aantikbaar,
   zodat een tik nog steeds kan uitleggen wat er eerst moet gebeuren. */
.btn.dimmed{ opacity:0.4; }
.btn-row{ display:flex; gap:10px; margin-top:20px; }
.btn-row .btn{ flex:1 1 0; min-width:0; }
/* Eén doel per knop: de subregel "bekijken of reserveren" is vervallen. */
.btn-reserve{ margin-bottom:10px; }
@media (prefers-reduced-motion: no-preference){
  .btn-reserve{ animation:invite 4.5s ease-in-out infinite; }
}
@keyframes invite{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(245,246,247,0); }
  6%{ transform:scale(1.015); box-shadow:0 0 24px 0 rgba(245,246,247,0.10); }
  12%{ transform:scale(1); box-shadow:0 0 0 0 rgba(245,246,247,0); }
}

/* Hoofdstuk 2 is één blok met ingangen, geen stapel losse kaarten. De drie
   tegels deelden vier eigenschappen die ze elk tot een eigen object maakten:
   een eigen achtergrond, een eigen rand, een grote eigen radius en dezelfde
   slagschaduw als de grote inhoudskaarten. Nu is het één vlak met drie
   vakken, gescheiden door een haarlijn (gap van 1px over de rasterkleur). */
/* De naad was rgba(255,255,255,0.08) over de paginakleur en kwam daarmee op
   ongeveer #1a1b1d uit: vrijwel gelijk aan de tegels zelf (#191b1e), dus de
   drie vakken liepen in elkaar over. De naad is nu de donkere celkleur, een
   echte groef in plaats van een lijn van dezelfde waarde. */
/* Eén component met drie acties. De icoonvlakken zijn eruit: die maakten er
   drie kaartjes-in-een-kaart van en haalden de aandacht juist weg bij de
   acties. Het probleem zat in de naad, niet in de iconen.
   De oorspronkelijke naad was rgba(255,255,255,0.08) en kwam over de
   paginakleur uit op ongeveer #1a1b1d, praktisch gelijk aan de tegels zelf
   (#191b1e) — vandaar dat de drie vakken in elkaar overliepen. Nu een echte
   lichte haarlijn die duidelijk boven de tegelkleur uitkomt, maar dun genoeg
   blijft om het blok bijeen te houden. */
.tilegrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:rgba(255,255,255,0.17);
  border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden; margin-bottom:0;
}
.tile{
  background:var(--card); border:0; border-radius:0;
  padding:15px 8px 13px; display:flex; flex-direction:column; align-items:center; gap:7px;
  color:var(--text);
}
.tile:active{ background:var(--card2); }
/* De focusring valt binnen het blok, anders knipt overflow:hidden hem af. */
.tile:focus-visible{ outline-offset:-3px; }
.tile .icon{ color:var(--dim); }
.tile-lb{ font-size:13px; font-weight:600; }
.tile.active{ background:var(--red-soft); }
.tile.active .icon, .tile.active .tile-lb{ color:var(--red-text); }

/* ---- weekoverzicht (home + reserveersheet delen dit grid) ---- */
.navbtn{
  width:38px; height:38px; border-radius:50%; justify-self:center;
  background:var(--card2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--text);
}
.navbtn:active{ background:var(--card3); }
.navbtn-sm{ width:32px; height:32px; }
.navbtn-sm:disabled{ opacity:.3; }
.section-head .navbtn-sm{ flex:0 0 auto; }

.week-head{ display:grid; grid-template-columns:64px repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:8px; }
.week-head span{
  font-size:11px; font-weight:600; color:var(--dim2);
  text-transform:uppercase; letter-spacing:0.6px; text-align:center;
}
.week-rows{ display:flex; flex-direction:column; gap:8px; }
.wrow{ display:grid; grid-template-columns:64px repeat(3,minmax(0,1fr)); gap:9px; align-items:center; }
.wday{ font-size:15px; font-weight:650; color:var(--dim); line-height:1.15; }
.wday em{ font-style:normal; display:block; font-size:11px; color:var(--dim2); font-weight:500; }
.wrow.today .wday{ color:var(--text); }
.wcell{
  height:44px; border-radius:var(--r-s);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; position:relative;
  background:var(--cell); border:1px solid rgba(255,255,255,0.04);
  overflow:hidden; white-space:nowrap;
}
.wcell b{
  font-weight:600; font-style:normal; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; padding:0 3px;
}
.wcell.free::after{ /* vrij = duidelijk groen plusje */
  content:'+'; color:var(--green); font-size:20px; font-weight:500; line-height:1;
  transform:translateY(-1px);
}
.wcell.busy{ background:var(--red-soft); border-color:rgba(255,69,58,0.3); color:var(--red-text); padding:0 4px; }
.wcell.mine{ background:var(--green-soft); border-color:rgba(50,215,75,0.35); color:var(--green-text); padding:0 4px; }
.wcell.past{ opacity:0.3; }
.wcell.tappable{ cursor:pointer; }
.wcell.tappable:active{ transform:scale(.95); }
.legend{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; text-align:center; margin-top:14px; }
.legend span{ font-size:12px; color:var(--dim); display:flex; align-items:center; gap:6px; }
.legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.legend .l-free{ background:var(--green); }
.legend .l-busy{ background:var(--red); }

/* ---- inzichten: hero, verrekening ---- */
.hero-card{ text-align:center; padding:26px 22px 22px; }
.hero-value{
  font-size:42px; font-weight:750; letter-spacing:-1.1px; line-height:1.05;
  font-variant-numeric:tabular-nums; margin:6px 0 4px; min-height:46px;
}
.total-bar{
  display:flex; gap:3px; height:14px; margin:14px 2px 0;
  border-radius:999px; overflow:hidden;
}
.total-bar i{ display:block; height:100%; border-radius:3px; min-width:0; }
.total-bar i:first-child{ border-radius:999px 3px 3px 999px; }
.total-bar i:last-child{ border-radius:3px 999px 999px 3px; }
@keyframes barGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero-card .donut-wrap{ width:170px; }
.hero-card .donut{ width:170px; height:170px; }
.hero-card .donut-center b{ font-size:29px; letter-spacing:-0.8px; font-variant-numeric:tabular-nums; }

.settle-row2{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  column-gap:12px; padding:14px 2px;
  border-bottom:1px solid var(--line);
}
.settle-row2:last-of-type{ border-bottom:none; }
.settle-who{ font-size:15px; font-weight:600; color:var(--text); }
.settle-who small{ display:block; margin-top:2px; font-size:12px; font-weight:500; color:var(--dim2); }
.settle-amount{
  grid-row:span 2; align-self:center;
  font-size:24px; font-weight:700; letter-spacing:-0.5px;
  font-variant-numeric:tabular-nums;
}
.settle-amount.get{ color:var(--green-text); }
.settle-amount.pay{ color:var(--red-text); }
.settle-label{ font-size:12px; color:var(--dim2); margin-top:1px; }
.settle-even{
  margin:14px 0 0; text-align:center;
  font-size:13px; color:var(--dim2);
}
.foot-note{ font-size:12px; color:var(--dim2); margin-top:14px; text-align:center; line-height:1.5; }

/* ---- feitentegels ---- */
.statgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.stat-tile{
  background:linear-gradient(180deg, #1d2024 0%, #17191c 100%);
  border:1px solid var(--line); border-top-color:rgba(255,255,255,0.12);
  border-radius:var(--r-m); padding:14px 12px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
.stat-tile .icon{ color:var(--dim); margin-bottom:7px; }
.tile-label{ font-size:12px; font-weight:600; color:var(--dim); }
.tile-value{
  font-size:20px; font-weight:700; letter-spacing:-0.4px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tile-sub{ font-size:11px; color:var(--dim2); line-height:1.35; }

/* ---- donut: wie reed het meest ---- */
.donut-wrap{ position:relative; width:150px; margin:6px auto 14px; }
.donut{ display:block; width:150px; height:150px; }
.donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.donut-center b{ font-size:26px; font-weight:700; letter-spacing:-0.5px; }
.donut-center span{ font-size:12px; color:var(--dim); margin-top:-2px; }
.donut-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; }
.donut-key{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--dim); }
.donut-key i{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.donut-key b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---- bevestigingsdialoog (vervangt window.confirm) ---- */
.confirm-overlay{
  position:fixed; inset:0; z-index:130; display:none; /* boven sheets (50) en rondleiding (121) */
  align-items:center; justify-content:center; padding:24px;
  background:rgba(4,5,7,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.confirm-overlay.show{ display:flex; }
.confirm-card{
  width:min(100%, 340px); padding:22px;
  background:linear-gradient(180deg,#202328 0%,#151719 100%);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:confirmIn .2s var(--ease-out);
}
.confirm-card p{ margin:2px 2px 0; font-size:16px; line-height:1.45; text-align:center; }
.confirm-card .btn-row{ margin-top:18px; }
@keyframes confirmIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }

/* ---- lijstitems (instellingen, logs, beheer) ---- */
.lrow{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 2px; border-bottom:1px solid var(--line);
}
.lrow:last-child{ border-bottom:none; }
.lrow .icon{ color:var(--dim); }
.lrow-main{ flex:1; min-width:0; }
.lrow-title{ font-size:15px; font-weight:600; }
.lrow-sub{ font-size:13px; color:var(--dim); margin-top:1px; }
.lrow-chev{ color:var(--dim2); }
.mini{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--card2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--dim);
}
.mini:active{ background:var(--card3); }
.mini.danger{ color:var(--red); }

/* ---- huishoudkiezer (wissel van gezin) ---- */
.hh-row{ display:flex; align-items:center; gap:12px; }
.hh-row .lrow{ flex:1; min-width:0; }
.hh-pick.hh-cur{ cursor:default; }
.hh-check{ display:inline-flex; color:var(--green); flex-shrink:0; }
.hh-check .icon{ color:var(--green); }
.hh-note{ text-align:center; font-size:12px; color:var(--dim2); margin:18px 0 4px; }

/* ---- formulieren ---- */
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:13px; font-weight:600; color:var(--dim);
  margin-bottom:8px; letter-spacing:0.2px;
}
.input{
  width:100%; min-width:0; max-width:100%; padding:15px 16px; border-radius:var(--r-m);
  background:var(--card2); border:1px solid var(--line); color:var(--text);
  font-size:17px; font-family:inherit; font-variant-numeric:tabular-nums;
}
.input:focus{ outline:none; border-color:rgba(255,255,255,0.3); }
textarea.input{ resize:vertical; min-height:240px; font-size:16px; }
.stepper{ display:flex; align-items:center; gap:10px; }
.stepper .input{ text-align:center; }
.stepbtn{
  width:52px; height:52px; flex-shrink:0; border-radius:var(--r-m);
  background:var(--card2); border:1px solid var(--line);
  font-size:24px; font-weight:500; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  user-select:none; -webkit-user-select:none;
}
.stepbtn:active{ background:var(--card3); }
.hint{ font-size:12px; color:var(--dim2); margin-top:8px; }
.datebar{ display:flex; align-items:center; gap:10px; }
.datebar .date-label{
  flex:1; text-align:center; padding:14px; border-radius:var(--r-m);
  background:var(--card2); border:1px solid var(--line);
  font-size:15px; font-weight:600;
}

/* ---- sheets (schermvullend) ---- */
.sheet-overlay{
  position:fixed; inset:0; background:var(--bg); z-index:50;
  display:none; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* Zolang een sheet openstaat, staat de pagina eronder op slot: geen
   meescrollende achtergrond of dubbele scrollbalk meer. */
html.sheet-open, html.sheet-open body{ overflow:hidden; height:100%; }
.sheet-overlay.open{ display:block; animation:sheetIn 0.22s ease-out; }
.sheet{
  max-width:480px; margin:0 auto; min-height:100vh;
  padding:calc(14px + env(safe-area-inset-top)) 20px calc(48px + env(safe-area-inset-bottom));
}
.sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:30px; padding-top:8px;
}
.sheet-title{
  font-size:26px; font-weight:700; letter-spacing:-0.5px; margin:0;
  display:flex; align-items:center; gap:11px;
}
.sheet-icon{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  background:var(--green-soft); border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; color:var(--green-text);
}
.sheet-sub{ font-size:15px; color:var(--dim); margin:-6px 0 28px; }
.sheet-sub.center{ text-align:center; }
/* ---- reserveerscherm ---- */
.reserve-week-nav{
  display:grid; grid-template-columns:38px minmax(0,1fr) 38px;
  align-items:center; gap:10px; margin-bottom:10px;
}
.reserve-week-nav strong{
  text-align:center; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
}
.reserve-week-grid{
  padding:11px; border-radius:var(--r-m);
  background:#141619; border:1px solid var(--line);
}
.reserve-week-grid .wcell{
  appearance:none; -webkit-appearance:none;
  width:100%; padding:0; color:inherit;
}
.reserve-week-grid .wcell.picked{
  background:var(--green-soft); border-color:rgba(50,215,75,.5); color:var(--green-text);
  box-shadow:0 0 18px rgba(50,215,75,.12) inset;
}
.reserve-week-grid .wcell.picked::after{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .reserve-week-grid .wcell.picked{ animation:pop 0.18s ease-out; }
}
.reserve-section-label{
  margin:20px 0 10px; color:var(--dim); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.75px; text-align:center;
}
.reserve-section-label span{
  text-transform:none; letter-spacing:0; font-weight:500; color:var(--dim2);
}
.time-card{
  display:grid; grid-template-columns:1fr; gap:10px;
  margin-top:10px; padding:12px;
  border-radius:var(--r-m); background:#15171a; border:1px solid var(--line);
}
.time-card label{
  min-width:0; display:grid; grid-template-columns:46px minmax(0,1fr);
  align-items:center; gap:10px;
}
.time-card label span{ color:var(--dim); font-size:12px; font-weight:700; padding-left:4px; }
.time-card input{
  display:block; box-sizing:border-box; width:100%; max-width:100%; min-width:0;
  -webkit-appearance:none; appearance:none;
  padding:12px 10px; border:0; border-radius:var(--r-s);
  background:var(--card2); color:var(--text); font:inherit; font-size:17px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.time-card.off{ opacity:.4; }
.time-card input:disabled{ color:var(--dim2); }
.reserve-hint{ margin:9px 2px 0; color:var(--dim2); font-size:12px; line-height:1.4; min-height:17px; text-align:center; }

/* reserveringsdetail (eigen/andermans reservering) */
.reservation-detail{
  text-align:center; padding:16px 12px 22px;
  display:flex; flex-direction:column; align-items:center;
}
.reservation-detail .status-dot{ margin:0 0 13px; }
.reservation-detail p{ margin:0 0 5px; color:var(--dim); font-size:14.5px; }
.reservation-detail strong{ font-size:29px; letter-spacing:-.7px; }
.reservation-detail small{ margin-top:5px; color:var(--dim); font-size:14.5px; }
.busy-detail strong{ color:var(--red-text); }
.action-stack{ border-top:1px solid var(--line); }
.reservation-action{ padding-left:4px; padding-right:4px; }
.danger-row,.danger-row .icon,.danger-row .lrow-title{ color:var(--red); }

/* ---- pincode / gezinscode ---- */
.pin-dots{ display:flex; justify-content:center; gap:16px; margin:34px 0 40px; }
.pin-dots i{
  width:15px; height:15px; border-radius:50%;
  background:var(--card2); border:1px solid var(--line);
}
.pin-dots i.on{ background:var(--text); border-color:var(--text); }
.pin-dots.err i{ border-color:var(--red); }
.pin-dots.err{ animation:shake 0.3s; }
.keypad-center{
  min-height:calc(100vh - 300px); min-height:calc(100dvh - 300px);
  display:flex; flex-direction:column; justify-content:center;
}
/* In de setup-wizard staat er tekst boven en een knop onder het keypad:
   dan niet verticaal centreren maar compact onder de tekst aansluiten. */
.keypad-center.compact{ min-height:0; margin-top:8px; }
.keypad-center.compact .pin-dots{ margin:10px 0 30px; }
.keypad{ display:grid; grid-template-columns:repeat(3,76px); gap:18px; justify-content:center; }
.key{
  width:76px; height:76px; border-radius:50%;
  background:var(--card); border:1px solid var(--line);
  font-size:26px; font-weight:500; color:var(--text);
  display:flex; align-items:center; justify-content:center;
}
.key:active{ background:var(--card2); }
.key.ghost{ background:transparent; border-color:transparent; font-size:15px; color:var(--dim); }

/* ---- agenda-link, info, log ---- */
.linkbox{
  display:flex; align-items:center; gap:10px;
  background:var(--card2); border:1px solid var(--line); border-radius:var(--r-m);
  padding:13px 14px; margin:10px 0 12px;
}
.linkbox code{
  flex:1; font-size:12px; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
}
.steps{ margin:14px 0 0; padding-left:0; list-style:none; counter-reset:s; }
.steps li{
  counter-increment:s; position:relative; padding:7px 0 7px 34px;
  font-size:14.5px; color:var(--dim);
}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:7px;
  width:22px; height:22px; border-radius:50%;
  background:var(--card2); border:1px solid var(--line); color:var(--text);
  font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.steps b{ color:var(--text); font-weight:600; }
.infobox{
  background:var(--card2); border:1px solid var(--line); border-radius:var(--r-m);
  padding:14px 16px; font-size:14.5px; color:var(--dim); margin-top:18px;
}
.log-when{ font-size:12px; color:var(--dim2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.log-diff{ font-size:13px; color:var(--dim); margin-top:3px; word-break:break-word; }
.log-diff b{ color:var(--text); font-weight:600; }
.empty{ font-size:14.5px; color:var(--dim2); padding:8px 0; }

/* ---- het briefje (MVP 1 estafette): rustige informatieregel, geen knop ---- */
.autoregel{ display:flex; align-items:center; justify-content:center; gap:6px;
  color:var(--dim); font-size:13px; margin:0 8px 12px; min-width:0; }
.autoregel .icon{ color:var(--dim2); flex:none; }
.autoregel-tekst{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.autoregel-wie{ color:var(--dim2); white-space:nowrap; flex:none; }

/* ---- zoeken: actuele plek + vaste-plekken-chips ---- */
.plek-actueel{ background:var(--card2); border:1px solid var(--line);
  border-radius:var(--r-m); padding:14px; margin-bottom:18px; }
.plek-actueel-tekst{ display:flex; gap:8px; align-items:center;
  font-size:16.5px; font-weight:600; overflow-wrap:anywhere; }
.plek-actueel-tekst .icon{ color:var(--green); flex:none; }
.plek-actueel-wie{ color:var(--dim); font-size:13px; margin-top:4px; }
.plekchips{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 10px; }
.plekchip{ background:var(--card2); border:1px solid var(--line); color:var(--text);
  border-radius:999px; padding:9px 14px; font-size:14px; font-weight:600;
  transition:transform .06s; }
.plekchip:active{ transform:scale(.96); }
.plekchip:disabled{ opacity:.5; }

/* ---- tanken: stille datumregel ---- */
.fuel-datum{ color:var(--dim); font-size:13.5px; margin:-6px 0 18px; }
.fuel-datum b{ color:var(--text); font-weight:600; }
.linkknop{ color:var(--green-text); font-size:13.5px; font-weight:600;
  padding:2px 6px; margin-left:2px; }

/* ---- beginscherm-stappen ---- */
.hstap{ display:flex; gap:12px; align-items:center; background:var(--card2);
  border:1px solid var(--line); border-radius:var(--r-m); padding:14px;
  margin-bottom:10px; font-size:15px; }
.hstap .icon{ color:var(--green); flex:none; }
.hslot{ color:var(--dim); font-size:14px; margin:16px 0 6px; }
.hvangnet{ color:var(--dim2); font-size:13px; margin:0 0 16px; }

/* ---- inzichten: bewust uitklapbaar (2.6.1) ----
   Dicht = één rustige regel met teaser; open = vloeiende grid-hoogteanimatie,
   zachte cascade van de kaarten en meedraaiende chevron. */
/* De deurkaart was het vlakste vlak van de hele pagina: de zwakste bovenrand,
   de donkerste vulling, het doffe icoon, en dat onderaan. Alles zei "voet".
   Terwijl dit de enige plek is waar élke keer iets nieuws staat.
   Het besluit: niet feller en niet groter, maar een ándere materie. De
   statuszone is de ene lichtbron van het scherm; deze kaart wordt de tweede.
   Het licht is warm en onverzadigd (lamplicht, geen status), zodat het nooit
   met groen of rood verward kan worden en de kleurgrammatica heel blijft. */
.ins-kaart{ width:100%; display:flex; flex-direction:column; align-items:center;
  gap:5px; text-align:center;
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#20232a 0%,#191b1f 100%);
  border:1px solid var(--line); border-top-color:rgba(255,255,255,0.17);
  border-radius:var(--r); padding:14px 22px 11px; margin:26px 0 4px;
  transition:transform .06s; }
.ins-kaart::before{
  content:''; position:absolute; z-index:-1; inset:-60% -14% -30% -18%;
  pointer-events:none;
  background:radial-gradient(closest-side at 24% 46%, rgba(255,246,232,.085), transparent 72%);
}
.ins-kaart:active{ transform:scale(.985); }
/* Drie lagen die samen één kaart maken: het icoon zegt wáárover, het merkje
   zegt wáár je bent, en de observatie is het nieuws. Vandaar de sprong van
   11,5 naar 16px: de observatie moet zonder twijfel de hoofdregel zijn. */
/* Het icoon staat bovenaan en gecentreerd, als kop van de kaart. De chevron
   is naar de hoek verhuisd: als eigen regel onderaan kostte hij 32px hoogte
   zonder iets toe te voegen, en in de hoek blijft de opklap-affordance even
   duidelijk terwijl de kolom icoon → merkje → observatie ononderbroken is. */
.ins-ikoon{
  width:40px; height:40px; border-radius:50%; flex:none; position:relative;
  background:var(--card3); border:1px solid rgba(255,255,255,0.13);
  display:flex; align-items:center; justify-content:center;
  color:rgba(245,246,247,.88); margin-bottom:1px;
  transition:background .35s, border-color .35s, color .35s;
}
.ins-label{ display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:var(--dim2); letter-spacing:0.3px;
  transition:font-size .2s, color .2s; }
.ins-observatie{ font-size:16px; font-weight:620; line-height:1.32;
  letter-spacing:-0.2px; color:var(--text); max-width:278px; }
/* Open is de kaart alleen nog een kop: de observatie is dan overbodig, want
   je kijkt naar de cijfers zelf. */
.ins-kaart.open .ins-observatie{ display:none; }
.ins-kaart.open .ins-ikoon{ display:none; }
.ins-kaart.open .ins-label{ font-size:16px; font-weight:650; color:var(--text);
  letter-spacing:-0.2px; }
/* Het groene signaal. Het icoon kleurt mee en krijgt een trage ring die
   uitdijt en vervaagt: langzaam genoeg om als uitnodiging te lezen en niet
   als melding. Het groen verwijst naar de groene punt in het woordmerk
   (OmBeurt zelf heeft iets), niet naar de status van de auto — daarom staat
   het hier en nooit in de statuszone. */
.ins-kaart.nieuw .ins-ikoon{
  background:var(--green-soft); border-color:rgba(50,215,75,.30);
  color:var(--green-text);
}
.ins-kaart.nieuw .ins-ikoon::after{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(50,215,75,.55); opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .ins-kaart.nieuw .ins-ikoon::after{ animation:insHalo 3.6s ease-out infinite; }
}
@keyframes insHalo{
  0%{ transform:scale(1); opacity:.6; }
  65%{ transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}
/* De observatie komt zacht binnen wanneer hij verandert: de kaart leeft. */
@media (prefers-reduced-motion: no-preference){
  .ins-observatie{ animation:insTekstIn .5s var(--ease-out) both; }
}
@keyframes insTekstIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:none; }
}

.ins-chev{ position:absolute; top:12px; right:12px;
  width:26px; height:26px; border-radius:50%; background:var(--card2);
  border:1px solid var(--line); display:inline-flex; align-items:center;
  justify-content:center; color:var(--dim); flex:none;
  transition:transform .32s var(--ease-out), background .15s; }
.ins-chev .icon{ transform:rotate(90deg); }
.ins-kaart.open .ins-chev{ transform:rotate(180deg); }
.ins-klap{ display:grid; grid-template-rows:0fr; }
.ins-klap.open{ grid-template-rows:1fr; }
.ins-binnen{ overflow:hidden; min-height:0; }
/* Binnen de klapper is de maandregel geen paginascheider: strakker aan de
   deurkaart binden (de 34px uit .section-head hoort bij het oude, open layout). */
.ins-binnen .section-head{ margin-top:10px; }
/* Het levende accent: hetzelfde idioom als de ambient bovenaan, maar dan
   binnen de kaart. Traag, laag contrast, naadloze lus, nooit een signaal en
   nooit een teller — het maakt de kaart levend in plaats van dringend. */
@media (prefers-reduced-motion: no-preference){
  .ins-kaart::before{ animation:insLicht 27s ease-in-out infinite; }
}
@keyframes insLicht{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.85; }
  38%{ transform:translate(26px,5px) scale(1.14); opacity:1; }
  71%{ transform:translate(9px,-7px) scale(.96); opacity:.9; }
}
@media (prefers-reduced-motion: no-preference){
  .ins-klap{ transition:grid-template-rows .5s var(--ease-out); }
  .ins-klap.onthul .ins-binnen > *{ animation:insIn .5s var(--ease-out) both; }
  .ins-klap.onthul .ins-binnen > *:nth-child(2){ animation-delay:.06s; }
  .ins-klap.onthul .ins-binnen > *:nth-child(3){ animation-delay:.12s; }
  .ins-klap.onthul .ins-binnen > *:nth-child(4){ animation-delay:.18s; }
  .ins-klap.onthul .ins-binnen > *:nth-child(5){ animation-delay:.24s; }
  .ins-klap.onthul .ins-binnen > *:nth-child(6){ animation-delay:.3s; }
}
@keyframes insIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
/* De wenk: twee trage ademhalingen van het chevron-cirkeltje, alleen zolang
   de inzichten nog nooit geopend zijn (zie insOntdekt in app.js). */
@media (prefers-reduced-motion: no-preference){
  .ins-chev.wenk{ animation:insAdem 2.2s ease-in-out 1.4s 2; }
}
@keyframes insAdem{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.13); }
}

/* ---- viermoment, toast, footer ---- */
.celebrate{
  position:fixed; inset:0; z-index:95; display:none;
  align-items:center; justify-content:center; pointer-events:none;
}
.celebrate.show{ display:flex; }
.celebrate .ring{
  width:110px; height:110px; border-radius:50%;
  background:linear-gradient(180deg, var(--card2), #17191c);
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,0.5), 0 0 40px rgba(50,215,75,0.18);
  display:flex; align-items:center; justify-content:center;
  animation:celebIn 0.9s var(--ease-out) both;
}
.celebrate svg path{
  stroke:var(--green); stroke-dasharray:32; stroke-dashoffset:32;
  animation:draw 0.5s 0.15s ease-out forwards;
}
.toast{
  position:fixed; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--card3); border:1px solid var(--line);
  color:var(--text); padding:13px 22px; border-radius:999px;
  font-size:14.5px; font-weight:600; z-index:90;
  opacity:0; transition:opacity 0.18s, transform 0.18s; pointer-events:none;
  max-width:86vw; text-align:center; box-shadow:var(--shadow);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
/* .tip-footer verwijderd in 2.6.1: Feedback geven woont in Instellingen. */

/* ---- animaties (alleen als de gebruiker beweging toestaat) ---- */
@keyframes sheetIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
@keyframes celebIn{
  0%{ opacity:0; transform:scale(0.7); }
  18%{ opacity:1; transform:scale(1.04); }
  28%{ transform:scale(1); }
  78%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(0.96); }
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ 0%{ transform:scale(0.88); } 100%{ transform:scale(1); } }
@keyframes statusPulseGreen{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 5px rgba(50,215,75,.075),0 0 15px rgba(50,215,75,.70); }
  50%{ transform:scale(1.13); box-shadow:0 0 0 8px rgba(50,215,75,.035),0 0 23px rgba(50,215,75,.95); }
}
@keyframes statusPulseRed{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 5px rgba(255,69,58,.075),0 0 15px rgba(255,69,58,.70); }
  50%{ transform:scale(1.11); box-shadow:0 0 0 8px rgba(255,69,58,.035),0 0 23px rgba(255,69,58,.92); }
}
@keyframes statusReveal{
  from{ opacity:0; transform:translateY(7px) scale(.985); }
  to{ opacity:1; transform:none; }
}
@keyframes glowReveal{
  from{ opacity:.05; transform:scale(.88); }
  to{ opacity:.32; transform:scale(1); }
}
@keyframes reservationBooked{
  0%{ transform:scale(.78); box-shadow:0 0 0 rgba(255,69,58,0); }
  45%{ transform:scale(1.08); box-shadow:0 0 24px rgba(255,69,58,.55); }
  100%{ transform:scale(1); box-shadow:0 0 0 rgba(255,69,58,0); }
}
@keyframes idleHop{
  0%,86%,100%{ transform:translateX(-50%) translateY(0); }
  89%{ transform:translateX(-50%) translateY(-3px); }
  92%{ transform:translateX(-50%) translateY(0); }
  95%{ transform:translateX(-50%) translateY(-2px); }
  98%{ transform:translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: no-preference){
  .car-marker{ animation:rattle 1.3s linear infinite; }
  .status-progress.idle .car-marker{ animation:idleHop 3.8s ease-in-out infinite; }
  .total-bar{ transform-origin:left; }
  .total-bar.run{ animation:barGrow .9s var(--ease-out) both; }
  .status-dot.green{ animation:statusPulseGreen 3s ease-in-out infinite; }
  .status-dot.red{ animation:statusPulseRed 2.35s ease-in-out infinite; }
  .status-card.status-change .status-content{ animation:statusReveal .42s var(--ease-out) both; }
  .status-card.status-change::before{ animation:glowReveal .65s ease-out both; }
  .chip.sel{ animation:pop 0.18s ease-out; }
  .wcell.just-booked{ animation:reservationBooked 1.05s var(--ease-out); }
  .settle-row{ animation:statusReveal .4s var(--ease-out) both; }
}

/* ---- mobiel (≤390px): alle afwijkingen op één plek ---- */
@media (max-width:390px){
  body{ padding-left:12px; padding-right:12px; }
  .card{ padding-left:16px; padding-right:16px; }
  .week-card{ padding-left:12px; padding-right:12px; }
  .week-head,.wrow{ grid-template-columns:56px repeat(3,minmax(0,1fr)); gap:7px; }
  .wcell{ height:42px; font-size:12px; }
  .legend{ gap:10px 12px; }
}
  

/* ---- setup-wizard & admin: auto & kosten ---- */
.setup-hero{ text-align:center; padding:8px 4px 22px; }
.setup-dot{
  display:inline-block; width:58px; height:58px; border-radius:50%;
  background:var(--green); box-shadow:0 0 44px rgba(50,215,75,0.55);
  margin-bottom:16px;
}
.setup-hero h2{ margin:0 0 10px; font-size:24px; letter-spacing:-0.3px; }
.setup-hero p{ margin:0; color:var(--dim); font-size:15px; line-height:1.55; }
.cost-row{ display:flex; gap:16px; align-items:center; margin-bottom:14px; }
.cost-row .input:first-child{ flex:1; min-width:0; }
.cost-row .input[type="number"]{ width:88px; flex:none; padding:15px 12px; }
.cost-row .mini{ width:46px; height:52px; border-radius:var(--r-m); }
/* Twee velden naast elkaar (aanschaf: bedrag + maand) */
.field-row{ display:flex; gap:12px; }
.field-row .field{ flex:1; min-width:0; }
.input[type="month"]{ -webkit-appearance:none; appearance:none; min-height:52px; text-align:left; }
.label-sub{ font-weight:400; color:var(--dim2); }
.version-note{ text-align:center; font-size:12px; color:var(--dim2); margin:30px 0 0; }

/* ---- gezinscode (multi-tenant) ---- */
.code-big{
  text-align:center; font-size:34px; font-weight:700; letter-spacing:8px;
  padding:16px 0 4px; margin-bottom:16px; font-variant-numeric:tabular-nums;
  text-indent:8px; /* compenseert letter-spacing na het laatste teken */
}
.code-inline{ letter-spacing:3px; font-weight:700; }
.code-input{ text-transform:uppercase; letter-spacing:5px; text-align:center; font-weight:600; }

/* ---- onboarding: rustige lijn met groen autootje, groene blob, deelstap ---- */
/* Zachte groene gloed (blob) achter de onboarding, plus krappere kop zodat
   de lijn met het autootje bovenaan staat. */
.sheet-overlay.onboarding{ background:var(--bg); }
/* Groene blob-gloed bovenin die zachtjes ademt (los van het scrollen). */
.sheet-overlay.onboarding::before{
  content:''; position:fixed; top:0; left:0; right:0; height:58%;
  background:radial-gradient(640px 500px at 50% -3%, rgba(50,215,75,0.26), rgba(50,215,75,0) 62%);
  pointer-events:none; z-index:0;
}
@media (prefers-reduced-motion: no-preference){
  .sheet-overlay.onboarding::before{ animation:onbBlob 5s ease-in-out infinite; }
}
@keyframes onbBlob{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } }
.sheet-overlay.onboarding .sheet{ position:relative; z-index:1; }
.sheet-overlay.onboarding .sheet-head{ margin-bottom:6px; min-height:8px; }

/* Eén lijn met het groene autootje erboven, zoals de statusbalk van de app */
.onb-track{
  position:relative; height:5px; border-radius:999px;
  background:rgba(255,255,255,0.09); margin:34px 12px 40px;
}
.onb-track i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, rgba(50,215,75,.55), var(--green));
  transition:width 1s var(--ease-out);
}
.onb-car{
  position:absolute; left:0; top:-29px; transform:translateX(-50%);
  color:var(--green); pointer-events:none; transition:left 1s var(--ease-out);
  filter:drop-shadow(0 0 10px rgba(50,215,75,.75));
}
@media (prefers-reduced-motion: no-preference){
  .onb-car{ animation:onbHop 1.25s ease-in-out infinite; }
}
/* Duidelijk hobbelweggetje voor het onboarding-autootje. */
@keyframes onbHop{
  0%,100%{ transform:translateX(-50%) translateY(0) rotate(0deg); }
  20%{ transform:translateX(-50%) translateY(-3px) rotate(-2.4deg); }
  45%{ transform:translateX(-50%) translateY(1px) rotate(1.8deg); }
  70%{ transform:translateX(-50%) translateY(-2px) rotate(-1deg); }
}

.welcome{ text-align:center; padding:6px 4px 26px; }
.welcome-title{ font-size:25px; font-weight:700; letter-spacing:-0.4px; margin:8px 0 12px; }
.welcome-sub{ font-size:15.5px; color:var(--dim); line-height:1.55; margin:0 auto; max-width:340px; }

.wiz-head{ text-align:center; padding:2px 2px 4px; margin-bottom:20px; }
.wiz-title{ font-size:22px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.wiz-sub{ font-size:14.5px; color:var(--dim); line-height:1.5; margin:11px auto 0; max-width:330px; }

/* Gezinscode als ruime voucher-kaart met stippellijn en grote letters */
.code-card{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:24px 18px 20px; border-radius:18px;
  background:var(--card2); border:2px dashed rgba(255,255,255,0.22);
  text-align:center;
}
.code-card-label{ font-size:12px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:0.9px; }
.code-card-val{
  font-family:ui-monospace,'SF Mono','Menlo',monospace; font-size:44px; font-weight:600;
  letter-spacing:13px; text-indent:13px; color:var(--text); line-height:1.05;
}
.code-card-copy{
  display:inline-flex; align-items:center; gap:7px; margin-top:2px;
  font-size:14px; font-weight:600; color:var(--green-text);
  padding:9px 16px; border-radius:999px; background:var(--green-soft);
}
/* Toelichting onder de gezinscode: rustig, gecentreerd, om de code los te
   koppelen van de eenmalige uitnodigingslink. */
.code-note{ margin:12px 4px 0; font-size:13px; line-height:1.5; color:var(--dim); text-align:center; }
.code-card-copy:active{ opacity:.7; }

.lrow-ic{ display:inline-flex; color:var(--green); flex-shrink:0; }
.setup-summary{ margin-top:22px; }
.settings-foot{ margin-top:24px; }
/* Instellingen in twee werelden: kopjes maken de lijst scanbaar zonder dat
   er een rij bij komt. De adminmodus-schakelaar woont in de kop van de
   groep die hij aanstuurt, niet als rode rij middenin de lijst. */
.set-groep{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:26px 2px 10px; font-size:12px; font-weight:700; letter-spacing:0.6px;
  text-transform:uppercase; color:var(--dim2);
}
.set-groep:first-child{ margin-top:2px; }
.set-groep-actie{
  font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--dim); padding:2px 4px;
}
.set-groep-actie:active{ opacity:.55; }
/* Onomkeerbare acties staan afgezonderd, nooit tussen de gewone rijen in. */
.set-gevaar{ margin-top:24px; }

/* Deelstappen als luchtige tijdlijn, laatste stip groen */
.invite-card{ background:var(--cell); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-top:20px; }
.invite-title{ font-size:15px; font-weight:600; color:var(--text); margin:0 0 16px; }
.invite-timeline{ list-style:none; margin:0; padding:0; }
.invite-timeline li{ position:relative; display:flex; gap:15px; align-items:flex-start; padding-bottom:20px; }
.invite-timeline li:last-child{ padding-bottom:0; }
.invite-timeline li:not(:last-child)::before{
  content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--line);
}
.invite-timeline .node{
  position:relative; flex-shrink:0; width:14px; height:14px; border-radius:50%;
  background:#2b2f34; margin-top:3px; z-index:1;
}
.invite-timeline .node.green{ background:var(--green); box-shadow:0 0 10px rgba(50,215,75,0.6); }
.invite-timeline li > div{ font-size:15px; line-height:1.4; padding-top:1px; }
.invite-timeline b{ color:var(--text); font-weight:600; }

/* ---- pilot: uitleg, akkoord, intake ---- */
.pilot-card{
  background:var(--cell); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin:4px 0 20px; text-align:left;
}
.pilot-title{ font-size:15px; font-weight:600; color:var(--text); margin:0 0 12px; }
.pilot-list{ list-style:none; margin:0; padding:0; }
.pilot-list li{
  position:relative; padding-left:24px; margin-bottom:11px;
  font-size:14.5px; line-height:1.45; color:var(--dim);
}
.pilot-list li:last-child{ margin-bottom:0; }
.pilot-list li::before{
  content:''; position:absolute; left:2px; top:8px;
  width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px rgba(50,215,75,.5);
}
.pilot-links{ margin:16px 0 0; font-size:13px; color:var(--dim2); }
.pilot-links a{ color:var(--green-text); }
.pilot-note{ text-align:center; font-size:13px; color:var(--dim2); margin:18px 0 0; }
.pilot-note.vervolg{ margin-top:8px; }
.pilot-note a{ color:var(--green-text); }
/* Pilotregel op het welkomstscherm: informatie ná de belofte, rustig gedimd. */
.welcome-pilot{ margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--dim2); }
.check-row{
  display:flex; align-items:flex-start; gap:12px; margin:4px 2px 6px;
  font-size:14.5px; line-height:1.45; color:var(--dim); cursor:pointer;
}
.check-row input[type=checkbox]{
  flex-shrink:0; width:22px; height:22px; margin:1px 0 0;
  accent-color:var(--green); cursor:pointer;
}

/* ---- rondleiding (coachmarks + begeleide eerste reservering) ----
   Visuele dim = één laag met grote box-shadow rond het "gat" (vloeiend).
   Vier onzichtbare blokken vangen tikken buiten het gat, zodat de gebruiker
   binnen het gat het echte element kan aantikken (leren door te doen). */
.tour-root{ position:fixed; inset:0; z-index:120; pointer-events:none; }
.tour-dim{
  position:fixed; border-radius:18px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,9,11,0.80);
  transition:top .34s var(--ease-out), left .34s var(--ease-out),
             width .34s var(--ease-out), height .34s var(--ease-out);
}
.tour-block{ position:fixed; background:transparent; pointer-events:auto; }
/* De ring vangt zelf tikken op (kijk-rondleiding: elke tik = volgende stap),
   zodat een tik in de spotlight nooit per ongeluk de app bedient. */
.tour-ring{
  position:fixed; border-radius:20px; pointer-events:auto;
  border:2px solid rgba(50,215,75,0.9); box-shadow:0 0 0 4px rgba(50,215,75,0.18);
  transition:top .34s var(--ease-out), left .34s var(--ease-out),
             width .34s var(--ease-out), height .34s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference){
  .tour-ring{ animation:tourPulse 1.8s ease-in-out infinite; }
}
@keyframes tourPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(50,215,75,0.16); }
  50%{ box-shadow:0 0 0 9px rgba(50,215,75,0.05); }
}
.tour-tip{
  position:fixed; left:50%; transform:translateX(-50%);
  width:min(340px, calc(100vw - 32px));
  background:linear-gradient(180deg,#1d2024 0%,#17191c 100%);
  border:1px solid var(--line); border-top-color:rgba(255,255,255,0.14);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:20px; text-align:center; z-index:121; pointer-events:auto;
  transition:top .3s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference){
  .tour-tip{ animation:tourTipIn .32s var(--ease-out); }
}
@keyframes tourTipIn{ from{ opacity:0; transform:translateX(-50%) translateY(8px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
.tour-ic{
  width:52px; height:52px; margin:0 auto 12px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(50,215,75,0.32), rgba(50,215,75,0.06) 72%);
  display:flex; align-items:center; justify-content:center; color:var(--green);
}
.tour-ic .icon{ color:var(--green); }
.tour-tx{ font-size:19px; line-height:1.32; font-weight:650; letter-spacing:-0.3px; color:var(--text); }
.tour-tx small{ display:block; margin-top:7px; font-size:14px; font-weight:500; color:var(--dim); letter-spacing:0; }
.tour-dots{ display:flex; gap:6px; justify-content:center; margin:16px 0 4px; }
.tour-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.22); transition:all .25s; }
.tour-dots i.on{ background:var(--green); width:18px; border-radius:3px; }
/* Zelfde knopverhouding als de rest van de app (Terug/Verder): even groot,
   Volgende gevuld en dominant (de logische actie), Overslaan rustig ernaast. */
.tour-row{ display:flex; gap:10px; margin-top:18px; }
.tour-row button{
  flex:1 1 0; min-width:0; padding:15px; border-radius:var(--r-m);
  font-size:16px; font-weight:600; letter-spacing:-0.2px;
  transition:transform 0.06s, opacity 0.15s;
}
.tour-row button:active{ transform:scale(0.98); }
.tour-row .tour-next{ background:var(--text); color:var(--text-inv); border:0; }
.tour-row .tour-skip{ background:var(--card2); color:var(--dim); border:1px solid var(--line); }
/* Groot doel (bv. het weekoverzicht): kaart onderaan vastgezet, compact,
   zodat de spotlight erboven maximale ruimte houdt en nooit bedekt wordt. */
.tour-tip.pinned{ top:auto; bottom:calc(14px + env(safe-area-inset-bottom)); }
.tour-tip.compact{ padding:16px; }
.tour-tip.compact .tour-tx{ font-size:17px; }
.tour-tip.compact .tour-dots{ margin:12px 0 2px; }
.tour-tip.compact .tour-row{ margin-top:12px; }
/* Slotstap: titel in OmBeurt-groen en een zachte wiebel bij binnenkomst.
   Feestelijk zonder confetti; met verminderde beweging gewoon stil. */
.tour-tip.slot .tour-tx{ color:var(--green); }
.tour-tip.slot .tour-tx small{ color:var(--dim); }
@media (prefers-reduced-motion: no-preference){
  .tour-tip.slot{ animation:tourSlotIn .6s var(--ease-out); }
}
@keyframes tourSlotIn{
  0%{ opacity:0; transform:translateX(-50%) translateY(10px) scale(.94) rotate(-1.2deg); }
  55%{ opacity:1; transform:translateX(-50%) translateY(-2px) scale(1.02) rotate(.6deg); }
  100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1) rotate(0deg); }
}
/* Afsluiting: het autootje van de statuskaart rijdt één keer rustig weg.
   Zonder beweging (reduced motion) staat het stil aan het einde van de rit. */
.tour-fin{ display:none; position:relative; width:220px; height:30px; margin:2px auto 14px; }
.tour-fin::before{
  content:''; position:absolute; left:0; right:0; bottom:3px; height:2px; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 14%, rgba(255,255,255,0.14) 86%, transparent);
}
.tour-fin .tf-car{
  position:absolute; left:0; bottom:5px; color:var(--green);
  filter:drop-shadow(0 0 8px rgba(50,215,75,.45));
  transform:translateX(200px);
}
@media (prefers-reduced-motion: no-preference){
  .tour-fin .tf-car{ animation:tourDrive 1.6s .4s cubic-bezier(.5,.05,.6,.95) both; }
}
@keyframes tourDrive{
  0%{ transform:translateX(0); opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translateX(200px); opacity:0; }
}

/* ---- momentvraag (2.7.0): de vraagsheet en het bedankmoment ---- */
.vraagsub{ margin:-6px 0 14px; font-size:13px; color:var(--dim2); }
.vraagtekst{ margin:0 0 4px; font-size:19px; font-weight:750; letter-spacing:-0.4px;
  line-height:1.3; color:var(--text); }
.vraagchips{ display:flex; flex-direction:column; gap:9px; margin:16px 0 4px; }
.vraagchip{ background:var(--card2); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; text-align:left; font-size:15.5px;
  color:var(--text); width:100%; transition:transform .06s; }
.vraagchip:active{ transform:scale(0.98); }
.vraagchip.sel{ background:var(--text); color:var(--text-inv); border-color:var(--text); }
.vraagveldwrap{ margin-top:12px; }
.vraagveldlabel{ display:block; font-size:13px; color:var(--dim); margin-bottom:6px; }
.vraagveldwrap input{ width:100%; margin-bottom:12px; background:var(--card2);
  border:1px solid var(--line); border-radius:var(--r-m); color:var(--text);
  padding:13px 14px; font:inherit; }
.vraagveldwrap input::placeholder{ color:var(--dim2); }
.vraagveldwrap .btn{ width:100%; }
.vraaguitweg{ display:flex; justify-content:space-between; align-items:center;
  margin-top:16px; }
.vraaguitweg button{ background:none; border:none; color:var(--dim);
  font-size:13px; font-weight:500; min-height:0; padding:6px 0; }
.vraaguitweg #vraagStil{ color:var(--dim2); }
.vraagdank{ text-align:center; padding:20px 0 10px; }
.vraagvink{ width:54px; height:54px; border-radius:50%; margin:0 auto 14px;
  background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; }
@media (prefers-reduced-motion: no-preference){
  .vraagdank{ animation:vraagdankin .3s var(--ease-out); }
  @keyframes vraagdankin{ from{ transform:scale(.92); opacity:0; } to{ transform:scale(1); opacity:1; } }
}
.vraagdanktitel{ margin:0 0 6px; font-size:18px; font-weight:750; letter-spacing:-0.3px; }
.vraagdanksub{ margin:0; font-size:14px; color:var(--dim); line-height:1.5; }
.vraagdankvoet{ margin:12px 0 0; font-size:12.5px; color:var(--dim2); }