/* ============================================================
   BASE — reset, tipografia, shell do app
   ============================================================ */

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

html, body {
  height: 100%;
  background: var(--bg-root);
}

/* Em celular a barra de URL some e aparece, mudando a altura visivel.
   `dvh` acompanha isso; `100%` fica preso ao valor inicial e deixa um
   naco de tela sobrando ou faltando conforme a rolagem. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

body {
  /* COLUNA FLEX. E isto que faz `.stage { flex: 1 1 auto }` significar
     alguma coisa.

     Sem esta declaracao o body era `display: block`, o `flex` do stage
     era inerte e a tela crescia com o conteudo: 986px de altura dentro
     de uma viewport de 809. O rodape ficava cortado E inalcancavel,
     porque quem rola e o `.screen__body` e ele so rola quando tem
     altura MENOR que o conteudo - o que nunca acontecia, ja que
     ninguem o estava limitando.

     O `.statusbar` removido tinha `flex: 0 0 auto`, e `.stage` tem
     `flex: 1 1 auto`: as duas regras foram escritas para uma coluna
     flex que nunca chegou a existir. */
  display: flex;
  flex-direction: column;

  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: var(--gold-300); text-decoration: none; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---------- Shell: moldura de telefone no desktop, fullbleed no celular ---------- */
#app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin-inline: auto;
  background: var(--bg-canvas);
  overflow: hidden;
  isolation: isolate;
}

/* Palco das telas: tudo que é absoluto se ancora aqui, não no #app,
   para a status bar simulada não ser coberta. */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* Espaco da barra do sistema e do notch. Quem fazia esse papel era
     a barra de status desenhada pelo app; removida ela, o conteudo
     passaria por baixo do relogio do celular. `viewport-fit=cover` no
     meta viewport e o que faz env() valer mais que zero. */
  padding-top: env(safe-area-inset-top);
}

@media (min-width: 520px) {
  body {
    display: grid;
    place-items: center;
    padding: var(--s-6) 0;
    background:
      radial-gradient(900px 600px at 50% -10%, rgba(237,185,72,.07), transparent 60%),
      var(--bg-root);
  }
  #app {
    height: min(920px, calc(100dvh - 48px));
    min-height: 0;
    border-radius: 34px;
    border: 1px solid var(--line);
    box-shadow: 0 40px 100px rgba(0,0,0,.8), var(--glow-sm);
  }
}

/* A barra de status desenhada pelo app foi REMOVIDA.
   Era fiel ao mockup e errada no produto: no navegador ela duplicava
   a barra do proprio navegador, e instalada no celular duplicava a do
   sistema operacional - duas horas diferentes na mesma tela. Esconder
   so em `display-mode: standalone` nao resolvia, porque o caso mais
   comum (abrir pelo navegador) e justamente o que ela estragava.

   O espaco da barra do sistema agora e respeitado por
   `env(safe-area-inset-top)`, que e o mecanismo real para isso. */

/* ---------- Área rolável de cada tela ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--bg-canvas);
}
.screen.is-active { display: flex; }

.screen__body {
  flex: 1 1 auto;
  /* `min-height: 0` NAO e enfeite: sem ele o overflow abaixo nunca
     entra em acao.

     O padrao de um item flex e `min-height: auto`, que significa "nao
     encolha abaixo do meu conteudo". Com isso o body crescia ate 986px
     dentro de uma tela de 809, ignorando o `overflow-y: auto` - a
     barra de rolagem so aparece quando o elemento e MENOR que o
     conteudo, e ele nunca era. O resultado era rodape cortado e
     inalcancavel: nao dava nem para rolar ate ele. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--s-6);
}
.screen__body::-webkit-scrollbar { display: none; }
/* Respiro para a barra inferior. Como ela agora aparece em quase toda
   tela, o padrão é reservar o espaço e abrir exceção, não o contrário. */
.screen__body { padding-bottom: calc(var(--tabbar-h) + var(--s-6)); }
html[data-route="splash"] .screen__body,
html[data-route="age"] .screen__body,
html[data-route="auth"] .screen__body,
html[data-route="signup"] .screen__body,
html[data-route="otp"] .screen__body,
html[data-route="recover"] .screen__body,
html[data-route="result"] .screen__body,
html[data-route="offline"] .screen__body { padding-bottom: var(--s-6); }

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

/* ---------- Tipografia utilitária ---------- */
.t-display {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); color: var(--text-hi);
}
.t-h1 { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text-hi); }
.t-h2 { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-hi); }
.t-h3 { font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-hi); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-sm   { font-size: var(--fs-sm);  line-height: var(--lh-sm); }
.t-xs   { font-size: var(--fs-xs);  line-height: var(--lh-xs); }
.t-mid  { color: var(--text-mid); }
.t-low  { color: var(--text-low); }
.t-hi   { color: var(--text-hi); }
.t-gold { color: var(--gold-300); }
.t-ok   { color: var(--ok); }
.t-danger { color: var(--danger); }
.t-center { text-align: center; }
.t-num  { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.t-caps {
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-mid);
}

/* Texto com preenchimento dourado — usado em títulos de impacto */
.t-goldfill {
  background: var(--grad-gold-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Utilitários de layout ---------- */
.row   { display: flex; align-items: center; }
.row-b { display: flex; align-items: center; justify-content: space-between; }
.col   { display: flex; flex-direction: column; }
.grow  { flex: 1 1 auto; min-width: 0; }
.gap-1{gap:var(--s-1)} .gap-2{gap:var(--s-2)} .gap-3{gap:var(--s-3)}
.gap-4{gap:var(--s-4)} .gap-5{gap:var(--s-5)} .gap-6{gap:var(--s-6)}
.mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)} .mt-6{margin-top:var(--s-6)} .mt-7{margin-top:var(--s-7)}
.mb-2{margin-bottom:var(--s-2)} .mb-3{margin-bottom:var(--s-3)} .mb-4{margin-bottom:var(--s-4)}
.mb-5{margin-bottom:var(--s-5)} .mb-6{margin-bottom:var(--s-6)}
.hidden { display: none !important; }

.divider { height: 1px; background: var(--line); border: 0; }
.divider--fade { background: var(--grad-gold-line); opacity: .5; }

/* Acessível só para leitor de tela */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}