/* ============================================================
   Soluna — Reset, typografie, app-shell, iOS-gedrag
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-sunken);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* iOS: geen pull-to-refresh-bounce die de app-illusie breekt */
  overscroll-behavior-y: none;
  /* Geen tekstselectie bij tappen op UI-chrome; content mag wel */
  -webkit-tap-highlight-color: transparent;
  /* Dubbeltik-zoom uit, pinch-zoom blijft.
     Dit stond eerder in JavaScript, als een luisteraar die bij elke tweede tik
     binnen 300 ms `preventDefault()` deed. Die maakte geen onderscheid tussen
     twee keer op hetzelfde en één keer op twee dingen: tikte je snel twee chips
     aan, dan kwam de tweede niet aan. Hier doet één regel hetzelfde werk, per
     element, zonder een luisteraar bij elke aanraking. */
  touch-action: manipulation;
}

/* Geen horizontale scroll, ooit */
body, .app-shell { overflow-x: hidden; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- Typografische klassen ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--text);
}
.display--xl { font-size: var(--fs-display-xl); }
.display--lg { font-size: var(--fs-display-lg); }
.display--md { font-size: var(--fs-display-md); }
.display--sm { font-size: var(--fs-display-sm); line-height: var(--lh-snug); }

.label {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.lede {
  font-size: var(--fs-body-lg);
  line-height: 1.68;
  color: var(--text-secondary);
  font-weight: 300;
}

.body-sm { font-size: var(--fs-sm); color: var(--text-secondary); }
.muted { color: var(--text-tertiary); }
.italic-serif { font-family: var(--font-display); font-style: italic; font-weight: 300; }

/* Wordmark */
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-word);
  text-transform: uppercase;
  /* optisch compenseren voor de tracking rechts */
  text-indent: var(--tracking-word);
  color: var(--text);
}

/* ============================================================
   App-shell — telefoonkolom, gecentreerd op desktop
   ============================================================ */
.app-shell {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

@media (min-width: 620px) {
  body {
    background:
      radial-gradient(1200px 700px at 50% -10%, var(--sand-150), transparent 60%),
      var(--bg-sunken);
  }
  .app-shell {
    min-height: 100dvh;
    box-shadow: var(--sh-lg);
  }
}
/* De uitlijning van de vaste balken op brede schermen staat in screens.css:
   die stylesheet wordt als laatste geladen en overschrijft components.css. */
@media (min-width: 620px) and (prefers-color-scheme: dark) {
  body { background: radial-gradient(1200px 700px at 50% -10%, #221E1A, transparent 60%), var(--bg-sunken); }
}

/* Scrollgebied van de actieve pagina */
.screen {
  flex: 1 1 auto;
  padding-bottom: var(--content-bottom);
  animation: screen-in var(--dur) var(--ease-out) both;
}
.screen--flush { padding-top: 0; }

/* Bewust alléén opacity: een transform (ook een identity-matrix die na de
   animatie blijft staan) maakt van .screen een containing block, waardoor
   `position: fixed` erbinnen — zoals de actiebalk — niet meer aan de viewport
   hangt. Een rustige fade past bovendien beter bij de toon. */
@keyframes screen-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gutter { padding-inline: var(--gutter); }

/* Sectie-ritme */
.section { margin-top: var(--sp-8); }
.section--tight { margin-top: var(--sp-6); }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.section__link {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 500;
  flex: none;
  padding: var(--sp-1) 0;
}

.stack { display: flex; flex-direction: column; }
.stack--2 { gap: var(--sp-2); }
.stack--3 { gap: var(--sp-3); }
.stack--4 { gap: var(--sp-4); }
.stack--5 { gap: var(--sp-5); }
.stack--6 { gap: var(--sp-6); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

.hairline { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ---------- Toegankelijkheid ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -200%;
  z-index: 100; background: var(--surface); color: var(--text);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  box-shadow: var(--sh-md); font-size: var(--fs-sm); font-weight: 500;
  transition: translate var(--dur) var(--ease-out);
}
.skip-link:focus-visible { translate: -50% calc(var(--safe-top) + 12px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Bootscherm ---------- */
.boot {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-5);
  min-height: 100dvh;
}
.boot__mark {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(145deg, var(--clay-300), var(--terra-400));
  -webkit-mask-image: radial-gradient(circle at 76% 24%, transparent 0 58%, #000 59%);
  mask-image: radial-gradient(circle at 76% 24%, transparent 0 58%, #000 59%);
  animation: boot-breathe 3.4s var(--ease-soft) infinite;
}
.boot__word {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: var(--tracking-word);
  text-indent: var(--tracking-word);
  color: var(--text-tertiary);
}
@keyframes boot-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* ============================================================
   Laden — een dunne lijn, en alleen als het echt duurt

   Sinds WP7 komt content van een server. Tussen 'tik' en 'pagina' zit dus
   wachttijd, en zonder signaal lijkt de app niets te doen.

   De router zet `.is-loading` pas na 220 ms. Bij een snel antwoord ziet niemand
   iets; duurt het echt, dan schuift er een lijn over de bovenrand. Geen spinner
   en geen overlay: dat zou een app die om vertragen gaat gehaast maken.
   ============================================================ */

.is-loading::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 40%,
    var(--accent-soft) 60%,
    transparent 100%);
  background-size: 240% 100%;
  animation: laadlijn 1.1s linear infinite;
  /* Boven de veilige zone: op een iPhone met notch hoort de lijn onder de
     statusbalk te lopen, niet erachter. */
  transform: translateY(var(--safe-top));
}

@keyframes laadlijn {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* Wie beweging heeft uitgezet, krijgt een stille lijn in plaats van geen
   signaal: de mededeling blijft, de beweging verdwijnt. */
@media (prefers-reduced-motion: reduce) {
  .is-loading::before {
    animation: none;
    background: var(--accent-soft);
    opacity: 0.7;
  }
}