/* =========================
   RESET / BASE
   ========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-primary);
  background: var(--color-bg-app);
  color: var(--color-text-primary);
}

/* =========================
   TYPOGRAPHY
   ========================= */
h1 {
  font-family: var(--font-accent);
  font-size: var(--font-size-h1);
  margin: 6px 0 4px 0;
}

.note {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.rating {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--font-size-body);
}

.star {
  color: var(--color-rating-star);
}

.divider {
  height: 1px;
  background: var(--color-divider);
  margin: 18px 0;
}

.hidden { 
  visibility: hidden;
  pointer-events: none; 
}

.nav-back.hidden {
  visibility: hidden;
  pointer-events: none;
}

.flow {
  display: none;
  flex-direction: column;
  height: 100%;

  transition: opacity 0.25s ease, transform 0.25s ease;
}

.flow.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.flow:not(.active) {
  opacity: 0;
  transform: translateY(8px);
}


/* =========================
   This is done for iOS
   ========================= */
input,
select,
button {
  font-size: 16px;
}