:root {
  /* --- migrated colour tokens (value-preserving, approach A') --- */
  --amber-76: #cfc7b7;
  --black-a28: rgba(0, 0, 0, 0.28);
  /* Neutraal grijs, geen merk: dit blad laadt op ELKE pagina als eerste, ook
     op een kale doos. Hier stond de petrol uit het theme van de eerste
     praktijk; de praktijk kleurt het nu via haar eigen theme, dat er als
     laatste overheen komt. */
  --petrol: #454545;
  --teal-10-a74: rgba(15, 32, 37, 0.74);
  --teal-12-a28: rgba(15, 40, 46, 0.28);
  --teal-16: #14343f;
  --white: #ffffff;
}
/* ============================================================================
   SYSTEM-FIRST UX KIT — the SHARED control library (the mechanism's teeth).
   Imported by BOTH site.css (member) and admin.css (beheer) so the two sides use
   ONE definition and never drift. Self-contained (neutral tokens, no
   per-side CSS vars; the practice theme paints them). Pure CSS so it renders identically in any browser's
   installed web-app (browser-agnostic — see system-first-ux-standard.md).
   ============================================================================ */

/* --- iOS-style toggle switch -------------------------------------------------
   Use on a native <input type="checkbox" switch class="ui-switch">. The `switch`
   attribute lets iOS 17.4+ render the real native control (+ haptic) where it
   can; this CSS gives the identical iOS-style look everywhere else so the app
   works + looks the same in any browser/engine. Brand petrol var(--petrol). */
/* structural props use !important so the switch renders correctly even when a
   host stylesheet has a generic `input`/`checkbox` rule (the kit must be robust
   wherever it's dropped in). */
.ui-switch {
  -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent;
  position: relative; flex: 0 0 auto; box-sizing: border-box;
  width: 3.1rem !important; height: 1.85rem !important; min-width: 3.1rem; margin: 0; border: none !important; border-radius: 999px !important;
  background: var(--amber-76); cursor: pointer; vertical-align: middle;
  transition: background 0.22s ease;
}
.ui-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(1.85rem - 4px); height: calc(1.85rem - 4px); border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 3px var(--black-a28);
  transition: transform 0.22s ease;
}
.ui-switch:checked { background: var(--petrol); }
.ui-switch:checked::after { transform: translateX(calc(3.1rem - 1.85rem)); }
.ui-switch:disabled { opacity: 0.5; cursor: default; }
.ui-switch:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }

/* --- De uitnodiging om te installeren (install-gate.js) -------------------------
   Een kaart OVER de app, onderin, met een kruisje (9 okt 2026). Hij lag in
   de pagina onder de inhoud (en op de telefoon als muur ervoor); nu zweeft hij,
   duidelijk in beeld, en wie hem niet wil klikt hem weg. Kleur valt terug door het
   merk van elke kant (lid --petrol, beheer --a-brand). */
.install-gate {
  position: fixed; z-index: 2147483000;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 26rem; margin: 0 auto;
}
@media (min-width: 760px) { .install-gate { left: auto; right: 20px; bottom: 20px; margin: 0; } }
/* Op een deurpagina in de pagina, onder het formulier: niet over de knop heen. */
.install-gate.install-gate--in-pagina { position: static; margin: 2rem auto 1rem; padding: 0 4px; }
.install-gate__card {
  position: relative;
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: var(--petrol, var(--a-brand, var(--petrol))); color: var(--white);
  border-radius: 20px; padding: 1rem 2.6rem 1rem 1.1rem;
  box-shadow: 0 14px 44px var(--teal-12-a28);
}
.install-gate__icon { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.install-gate__body strong { display: block; margin-bottom: 0.2rem; font-size: 1rem; }
.install-gate__body p { margin: 0 0 0.45rem; font-size: 0.88rem; line-height: 1.42; opacity: 0.95; }
.install-gate__body p:last-of-type { margin-bottom: 0; }
.install-gate__action:empty { display: none; }
.install-gate__action { margin-top: 0.6rem; }
.install-gate__btn {
  background: var(--white); color: var(--petrol-deep, var(--a-brand-deep, var(--teal-16)));
  border: 0; border-radius: 999px; padding: 0.5rem 1.15rem;
  font: inherit; font-weight: 700; cursor: pointer;
}
.install-gate__dicht {
  position: absolute; top: 6px; right: 6px;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; opacity: 0.85;
}
.install-gate__dicht:active { opacity: 0.5; }