* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #05060a;
  font-family: var(--font-body);
  color: var(--fg);
}
::-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; }
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;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 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;
  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;
  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; }