/* Ailex — Profiel en Instellingen strak (02-11-2026, klus "Ailex profiel, instellingen en donker thema", Gustavo; instellingen.js).
   Rijen in een kaart zoals een volwassen app: kleine groepskop, rij minstens 52 px hoog, tikvlakken minstens 48 px, één dunne lijn
   ertussen, geen verlopen of confetti. Kleuren uit de --ax-tokens (kleur.css), dus licht en donker (donker.css) lopen vanzelf mee.
   Contrast licht: tekst #262A4D op wit 14:1, zacht #5A5F8C op wit 6,4:1, wit op --ax-accent #5B4BDB 6,3:1. */
:root { --ax-accent: #5B4BDB; --ax-op-accent: #FFFFFF; --ax-rood: #C62828; }
html #sheet[data-blad="profiel"] .sheet-body { display: flex; flex-direction: column; gap: 20px; }
/* 02-11-2026 (klus "Ailex vorige instellingen terug"): Instellingen houdt de vorige opzet en stijl (rust.js, schermen.js); hier alleen het
   naamveld van de assistent naast zijn Bewaar-knop */
html .ax-naaminst { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
html .ax-naaminst .pl-inv { flex: 1 1 160px; min-width: 0; min-height: 48px; box-sizing: border-box; }
html .ax-naaminst .m3d-a-k { min-height: 48px; margin: 0; }
html .ax-naaminst .ax-meld { flex: 1 1 100%; margin: 0; }
html .ax-groep { margin: 0; font-family: var(--ax-letter); }
html .ax-groep-kop { margin: 0 4px 8px; padding: 0; font: 700 13px/1.3 var(--ax-letter); letter-spacing: .02em; color: var(--ax-tekst-zacht); text-transform: none; background: none; }
html .ax-kaart { background: var(--ax-oppervlak); border: 1px solid var(--ax-lijn); border-radius: 16px; overflow: hidden; box-shadow: var(--ax-schaduw-vast); }
html .ax-rij { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; box-sizing: border-box; width: 100%; margin: 0;
  color: var(--ax-tekst); text-align: left; background: transparent; border: 0; border-radius: 0; box-shadow: none; font: inherit; transform: none; }
html .ax-rij + .ax-rij { border-top: 1px solid var(--ax-lijn); }
html .ax-rij[data-ax-stapel] { flex-wrap: wrap; row-gap: 10px; }
html .ax-rij-t { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html .ax-rij-t b { font: 600 15px/1.3 var(--ax-letter); color: var(--ax-tekst); }
html .ax-rij-t small { font: 400 13px/1.4 var(--ax-letter); color: var(--ax-tekst-zacht); }
html .ax-rij-r { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
html .ax-waarde { color: var(--ax-tekst-zacht); font: 400 15px/1.3 var(--ax-letter); overflow-wrap: anywhere; text-align: right; }
html .ax-rij-knop { cursor: pointer; }
html .ax-rij-knop:active, html .ax-rij-knop:hover { background: var(--ax-oppervlak-2); }
html .ax-rij-knop:focus-visible, html .ax-seg button:focus-visible, html .ax-knop:focus-visible, html .ax-uitloggen:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }
html .ax-pijl { width: 8px; height: 8px; margin-right: 4px; flex: 0 0 auto; border-right: 2px solid var(--ax-tekst-zacht); border-top: 2px solid var(--ax-tekst-zacht); transform: rotate(45deg); }
html .ax-seg { display: inline-flex; flex-wrap: nowrap; max-width: 100%; padding: 3px; gap: 2px; border-radius: 13px; background: var(--ax-oppervlak-2); border: 1px solid var(--ax-lijn); }
html .ax-seg button { min-height: 48px; min-width: 60px; padding: 0 12px; margin: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ax-tekst);
  font: 600 14px/1 var(--ax-letter); box-shadow: none; transform: none; cursor: pointer; white-space: nowrap; }
html .ax-seg button[aria-pressed="true"] { background: var(--ax-accent); color: var(--ax-op-accent); }
html .ax-veld { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; margin: 0; border: 1px solid var(--ax-lijn); border-radius: 12px;
  background: var(--ax-oppervlak-2); color: var(--ax-tekst); font: 400 16px/1.4 var(--ax-letter); box-shadow: none; }
html .ax-veld::placeholder { color: var(--ax-tekst-zacht); opacity: 1; }
html textarea.ax-veld { resize: vertical; min-height: 84px; }
html .ax-veldlabel { font: 600 14px/1.3 var(--ax-letter); color: var(--ax-tekst); }
html .ax-knop { min-height: 48px; padding: 0 18px; margin: 0; border: 1px solid var(--ax-lijn); border-radius: 12px; background: var(--ax-oppervlak); color: var(--ax-tekst);
  font: 600 15px/1 var(--ax-letter); box-shadow: none; transform: none; cursor: pointer; white-space: nowrap; }
html .ax-knop.hoofd { background: var(--ax-accent); color: var(--ax-op-accent); border-color: transparent; }
html .ax-knoppen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; width: 100%; }
html .ax-meld { flex: 1 1 100%; font: 400 13px/1.4 var(--ax-letter); color: var(--ax-tekst-zacht); }
html .ax-meld:empty { display: none; }
html .ax-naamveld { flex: 1 1 220px; }
html .ax-naamveld .ax-veld { flex: 1 1 auto; min-width: 0; }
html .ax-wwform { flex-direction: column; align-items: stretch; }
html .ax-wwform .ax-rij-t { flex: 0 0 auto; }
html .ax-overjou { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
html .ax-rij-onder { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
html .ax-rij-onder small { color: var(--ax-tekst-zacht); font: 400 13px/1.4 var(--ax-letter); }
html .ax-profiel { display: flex; flex-direction: column; gap: 20px; }
html .ax-pkop { display: flex; align-items: center; gap: 14px; padding: 4px 4px 0; color: var(--ax-tekst); }
html .ax-ava { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ax-accent); color: var(--ax-op-accent);
  font: 700 24px/1 var(--ax-letter); letter-spacing: .02em; }
html .ax-pkop-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html .ax-pkop-t b { font: 700 20px/1.25 var(--ax-letter); overflow-wrap: anywhere; }
html .ax-pkop-t small { font: 400 14px/1.3 var(--ax-letter); color: var(--ax-tekst-zacht); overflow-wrap: anywhere; }
html .ax-uitloggen { min-height: 52px; width: 100%; margin: 0; border: 1px solid var(--ax-lijn); border-radius: 16px; background: var(--ax-oppervlak); color: var(--ax-rood);
  font: 600 15px/1 var(--ax-letter); box-shadow: var(--ax-schaduw-vast); transform: none; cursor: pointer; }
html .ax-naamlaag { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12, 14, 34, .5); }
html .ax-naamkaart { box-sizing: border-box; width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px;
  background: var(--ax-oppervlak); color: var(--ax-tekst); border: 1px solid var(--ax-lijn); box-shadow: 0 20px 50px rgba(10, 12, 40, .35); font-family: var(--ax-letter); }
html .ax-naamkaart h2 { margin: 0; font: 700 20px/1.3 var(--ax-letter); color: var(--ax-tekst); }
html .ax-naamkaart p { margin: 0; font: 400 14px/1.45 var(--ax-letter); color: var(--ax-tekst-zacht); }
html .ax-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html .ax-chip { min-height: 48px; padding: 0 16px; border: 1px solid var(--ax-lijn); border-radius: 999px; background: var(--ax-oppervlak-2); color: var(--ax-tekst); font: 600 14px/1 var(--ax-letter); box-shadow: none; }
html .ax-logblok { margin-top: 20px; }
html .ax-logrij .ax-waarde { font-size: 13px; flex: 0 0 auto; }

/* 05-11-2026 (klus "Ailex echte appfouten", Gustavo; tikdoelen_alle_proef): de snelheidsschuif was 16 px hoog. Het tikvlak is nu
   44 px hoog; de baan zelf blijft even dun (Chromium tekent die in het midden van het vak). */
.ax-tempo-schuif { min-height: 44px; margin-top: 0; margin-bottom: 0; }