* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #05060a;
  font-family: var(--font-body);
  color: var(--fg);
  /* Drie regels die alleen op een aanraakscherm iets doen, en die het verschil zijn
     tussen "een website in een venster" en "een app".

     `tap-highlight-color` haalt het grijze vlak weg dat iOS over elke knop legt zodra je
     hem aanraakt. Elke knop hier heeft al zijn eigen indrukstand; die grijze laag komt
     daar bovenop en ziet er goedkoop uit.

     `text-size-adjust` houdt tegen dat iOS in liggende stand zelf de letters vergroot.
     Dat breekt elke uitgelijnde rij, en de app heeft zijn eigen maatvoering.

     De selectie zelf staat hieronder aan voor de plekken waar je wél wilt kunnen kopiëren. */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Lang drukken op een knop of een tegel gaf op iOS een vergrootglas met een
   kopieer-menu, en tijdens het slepen door een lijst bleef er tekst blauw geselecteerd
   achter. Dat hoort bij een pagina, niet bij een app. Alles wat je aanraakt om iets te
   dóen is daarom onselecteerbaar; lopende tekst blijft dat expliciet wél, want in de
   blessuregids en de juridische documenten wil je een zin kunnen kopiëren. */
button, .nav-btn, .pill, .tile, .list-row, .badge, .eyebrow, .label,
#statusbar, #bottom-nav, .splash-btn, .rang-rij, .league-naam {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
p, h1, h2, h3, li, td, .doc-body, .markdown, input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Haalt de wachttijd van ongeveer 300 ms weg die een browser aanhoudt om te zien of er
   nog een tweede tik komt (dubbeltikken om in te zoomen). Zonder dit voelt elke knop in
   de app net te traag, en dat is precies het verschil dat mensen "het hapert" noemen. */
button, a, .nav-btn, .pill, .tile, .list-row { touch-action: manipulation; }
::-webkit-scrollbar { width: 0; height: 0; }
a { color: var(--gsoft); text-decoration: none; }
/* `color: inherit` is hier niet cosmetisch maar een bugfix aan de wortel: een <button>
   erft de tekstkleur niet, hij pakt de zwarte standaardkleur van de browser. Op een
   donkere achtergrond levert dat zwart-op-zwart op. Dat ging mis op het taalscherm en
   zou bij elke nieuwe knop opnieuw misgaan. */
button, input, select, textarea { font-family: var(--font-body); color: inherit; }

/* Zestien pixels, en dat is geen smaakkwestie.

   Safari op de iPhone zoomt de hele pagina in zodra je een invoerveld aantikt waarvan de
   letters kleiner zijn dan 16px, en zoomt daarna niet vanzelf terug uit. Elk veld in deze
   app zat daaronder: het e-mailadres bij registreren op 15px, het kcal-veld op 13,3. Je
   tikte dus op "e-mailadres" en het scherm sprong scheef, met de knoppen half buiten beeld.

   De andere uitweg is `user-scalable=no` in de viewport, en die is slechter: dan kan iemand
   die slecht ziet nergens meer inzoomen, en daar kijkt Apple bij de beoordeling naar. Liever
   een veld dat een fractie groter oogt.

   `!important` omdat een paar velden hun maat als inline stijl meekrijgen; die winnen
   anders van deze regel. Het gaat alleen om velden waarin je typt: een keuzerondje,
   aanvinkvak, bestandskiezer of knop laat de zoom met rust. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
  font-size: 16px !important;
}
input::placeholder { color: var(--fg3); }

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  color: var(--fg);
}
.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eb);
}
.label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Mobiel-eerst: op een echt toestel vult de app het hele scherm, randloos, zoals een
   normale (web)app hoort te doen. Pas vanaf tablet/desktop-breedte tonen we hem als
   een telefoonmaquette met marge eromheen, puur omdat er dan simpelweg meer scherm is. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#phone {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: none;
  background: var(--bg);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
/* De laag waar modals en sheets in landen.

   Hij hangt binnen `#phone`, want een overlay hoort over de app te liggen en niet over de
   hele browser. `#phone` is een flexkolom, dus deze laag moet absoluut staan: als gewone
   flexrij zou hij ruimte innemen (en dan is hij nul pixels hoog, waardoor een
   `inset: 0`-backdrop erin niets meer bedekt).

   `pointer-events` staat uit zolang de laag leeg is, anders vangt hij elke tik op de app op.
   De inhoud zet het weer aan. */
#overlay-root {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
#overlay-root > * { pointer-events: auto; }

#phone::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  border-radius: 70px;
  pointer-events: none;
  background: radial-gradient(60% 45% at 50% 15%, rgba(184,144,80,0.20) 0%, rgba(10,11,13,0) 70%);
  animation: glowpulse 9s ease-in-out infinite;
}
@media (min-width: 480px) {
  body { padding: 24px 12px; }
  #phone {
    max-width: 430px;
    height: min(932px, 96dvh);
    max-height: 932px;
    border-radius: 40px;
    box-shadow: 0 40px 90px var(--shadow);
  }
}

#statusbar {
  flex: none;
  /* De hoogte telt de veilige zone erbij op in plaats van hem te negeren.

     Waarom dat moet. `viewport-fit=cover` plus `apple-mobile-web-app-capable` laat de
     webview van boven tot onder doorlopen, dus ook achter de notch of de Dynamic Island.
     Zonder deze regel staat deze balk van 44px precies daarachter, en op een iPhone 14 Pro
     (inset 59px) is hij dan volledig onzichtbaar. In een browser is de inset 0, dus daar
     verandert er niets; het is puur de standalone- en de latere Xcode-stand die dit nodig
     heeft. De navigatiebalk onderaan deed dit al voor de thuisknopbalk. */
  height: calc(44px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 22px;
  padding-right: 22px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  z-index: 6;
}
#statusbar-mark { width: 18px; height: 15px; opacity: .9; object-fit: contain; }
#statusbar-batt { color: var(--fg2); }

#app-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Houdt de doorgeschoten scroll binnen dit vlak. Zonder dit veert op iOS de hele
     webview mee zodra je aan het einde van een lijst doorschuift, en dan schuift de app
     als geheel op en neer alsof de pagina losraakt. In een browser valt dat weg tegen de
     adresbalk; in een app zonder browserchroom leest het als een storing. */
  overscroll-behavior-y: contain;
  padding: 0 18px 24px;
}

#bottom-nav {
  flex: none;
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--line);
  background: rgba(10, 11, 13, 0.92);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 2px 8px;
  /* Apple houdt 44 punten aan als kleinste tikvlak, en dit is de knop die het vaakst
     wordt aangeraakt. Hij was 38 hoog: net genoeg om te werken, net te weinig om
     betrouwbaar te raken met een duim terwijl je staat te trainen. De inhoud blijft
     gecentreerd, dus zichtbaar verandert er alleen een paar pixels lucht. */
  min-height: 44px;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--fg3);
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-btn.active { color: var(--gsoft); }
.nav-btn .nav-dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.nav-btn.active .nav-dot { background: var(--gold); }

.screen { animation: fadeup .35s ease; padding-top: 8px; }

.btn-primary {
  width: 100%;
  border: 0;
  border-radius: 3px;
  padding: 14px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0C1829;
  background: linear-gradient(115deg, var(--gold) 0%, var(--gsoft) 50%, var(--gold) 100%);
  background-size: 220% 220%;
  animation: gflow 8s linear infinite;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(184,144,80,0.28);
}
.btn-primary:disabled { opacity: .4; cursor: not-allowed; animation: none; }

.btn-ghost {
  width: 100%;
  border: 1px solid rgba(184,144,80,0.35);
  border-radius: 3px;
  padding: 14px;
  background: transparent;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gsoft);
  cursor: pointer;
}

/* De derde trap: geen knop maar een zinnetje. Voor keuzes die er wél moeten staan maar
   niet even zwaar wegen als de hoofdactie, zoals "wachtwoord vergeten?".

   Deze klasse werd op twee schermen gebruikt en bestond niet. Zonder regel valt een
   `<button>` terug op de standaard van het besturingssysteem: een lichtgrijs blokje met
   een randje. Op een donker scherm leest dat als een uitgeschakeld invoerveld, precies
   waar iemand met een vergeten wachtwoord op moet klikken. */
.btn-tekst {
  width: 100%;
  border: 0;
  padding: 8px 4px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--fg2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-tekst:hover { color: var(--gsoft); }

.btn-back {
  border: 0; background: transparent; color: var(--fg2);
  font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  padding: 8px 0; display: flex; align-items: center; gap: 6px;
}

/* ---------------------------------------------------------------------------
   Rechts-naar-links (Arabisch).

   Het meeste werkt vanzelf omdat de layout op flexbox draait en `dir` op #phone
   staat. Wat hier staat is precies wat NIET vanzelf spiegelt: dingen die met
   links/rechts, translate of een vaste richting werken.
   --------------------------------------------------------------------------- */

/* Terugpijlen wijzen de andere kant op. De pijl zit in de tekst, dus spiegelen
   we het teken zelf in plaats van de knop. */
[dir="rtl"] .btn-back { flex-direction: row-reverse; }

/* De voortgangsbalk vult van rechts naar links, anders loopt hij tegen de
   leesrichting in. */
[dir="rtl"] .progress-bar .fill { margin-inline-start: auto; }

/* Before/after-slider in Profiel: de clip-path snijdt vanaf links, dat moet
   gespiegeld. */
[dir="rtl"] #ba-clip { transform: scaleX(-1); }
[dir="rtl"] #ba-clip img { transform: scaleX(-1); }

/* Chevrons en pijltekens in lijstrijen. */
[dir="rtl"] .list-row > span:last-child { transform: scaleX(-1); }

/* De spierkaart zelf niet spiegelen: links en rechts op een lichaam zijn geen
   leesrichting maar anatomie. */
[dir="rtl"] #muscle-card img { transform: none; }

/* De BMI-balk blijft links-naar-rechts, net als de spierkaart. Het is een getallenlijn van
   15 naar 40 en geen tekst. Zou hij meespiegelen, dan draait `display: flex` de vakken om
   terwijl de streep met `left` op zijn plek blijft, en staat je waarde boven het verkeerde
   vak. */
[dir="rtl"] .bmi-balk, [dir="rtl"] .bmi-schaal { direction: ltr; }

/* Een tekstknop die náást iets anders staat in plaats van eronder.

   `.btn-tekst` is `width: 100%`, wat klopt voor een knop op een eigen regel ("wachtwoord
   vergeten"). Als flexkind in een rij neemt hij daarmee de hele breedte en knijpt hij de
   tekst ernaast tot één woord per regel; dat gebeurde bij de wisknoppen in de
   voedingsassistent. */
.btn-tekst--inline { width: auto; flex: none; }