/* App shell: header, content column, footer, and the space around the notch. */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.header {
  text-align: center;
  padding: var(--sp-7) var(--sp-5) var(--sp-4);
}

.pre-title {
  font-family: var(--font-d);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}

.header h1 {
  font-size: clamp(2rem, 8vw, 3.2rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}

.header h1 em {
  color: var(--terra);
  font-style: italic;
}

.sub-title {
  font-family: var(--font-d);
  font-size: 1rem;
  font-style: italic;
  color: var(--brown-l);
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 200px;
  margin: var(--sp-4) auto;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.divider-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.content {
  flex: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-7);
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
}

.app-foot {
  text-align: center;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  font-size: 0.66rem;
  color: var(--brown-l);
  opacity: 0.75;
}

.screen[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Balkje zolang er een nieuwe versie klaarstaat                        */
/* ------------------------------------------------------------------ */

.updatebar {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  /* Boven de menubalk, en boven de ronding onderaan de iPhone. */
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--brown);
  box-shadow: var(--shadow-md);
  animation: fade-up 0.55s var(--ease) both;
}

.updatebar__text {
  flex: 1;
  color: var(--cream);
  font-size: 0.9rem;
}

.updatebar__btn {
  flex: none;
  min-height: 36px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--brown);
  font: inherit;
  font-size: 0.9rem;
  -webkit-tap-highlight-color: transparent;
}