/* ============================================================
   tryzen — reset + base mobile
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  /* Numero de largura fixa em todo o app. A Inter substituiu a mono nos dados
     (pace, tempo, splits, ranking) e, proporcional, faria a coluna dancar a
     cada digito. Herda pra tudo: aqui numero e dado, nao texto corrido. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

/* comportamento de app: sem selecao acidental, sem flash de toque */
body, .tabbar, .btn, .icon-btn, .row, .opt, .chip {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

/* O `hidden` do HTML tem que vencer o display de qualquer componente.
   A regra do navegador e `[hidden] { display: none }` com especificidade
   0-1-0: ela perde pra QUALQUER classe — `.btn { display: flex }`,
   `.chip { display: grid }`, `.tabbar { display: flex }` — e o elemento
   fica na tela com o atributo ligado, que e um jeito silencioso de
   quebrar. Uma regra pra todos, aqui, em vez de um `.x[hidden]` por
   componente (a tab bar ja precisava do dela). */
[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
  width: 100%;
  border-radius: 0;      /* mata o arredondamento nativo do iOS */
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- estrutura do app ---------- */

#app {
  min-height: 100vh;   /* fallback: iOS < 15.4 nao entende dvh */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#view {
  flex: 1;
  position: relative;
  min-height: 0;
  /* a tela entra deslizando pela direita: recorta a sobra para
     nao gerar rolagem horizontal durante a transicao */
  overflow-x: clip;
}

/* cada tela e uma "screen": rola sozinha, respeita safe-areas */
.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;   /* fallback */
  min-height: 100dvh;
  padding-top: calc(var(--safe-top) + 20px);
  padding-bottom: var(--safe-bottom);
}
.screen--tabbed {
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
}

/* corpo rolavel da tela.
   O padding-bottom e a "margem de seguranca" do fim da lista: sem ele o
   ultimo item encosta na tab bar (ou no rodape) e a tela parece cortada. */
.body {
  flex: 1;
  padding: 0 var(--pad) var(--gap-md);
  min-height: 0;
}
.body--flush { padding: 0 0 var(--gap-md); }

/* rodape fixo no fim da tela (botao Continuar etc.) */
.footer {
  padding: var(--gap-md) var(--pad) calc(var(--gap-md) + 4px);
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}

/* ---------- tipografia ---------- */

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 600;
}
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 600;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--tr-tight);
  font-weight: 600;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -.015em;
  font-weight: 600;
}
.lg   { font-size: var(--fs-lg); line-height: 1.4; }
.body-t { font-size: var(--fs-body); line-height: var(--lh-body); }
.sm   { font-size: var(--fs-sm); line-height: 1.45; }
.xs   { font-size: var(--fs-xs); line-height: 1.4; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  font-weight: 400;
}
.mono-sm { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-mono); }

/* cores utilitarias
   As de estado pedem sempre a variante -texto. A viva e clara demais pra
   carregar letra: no claro o verde da 2,2:1 sobre branco e o amarelo
   1,4:1 — os dois reprovam. Quem le e a -texto (>= 4,5:1). */
.c-1 { color: var(--text); }
.c-2 { color: var(--text-2); }
.c-accent { color: var(--certo-texto); }   /* esta certo */
/* Em titulo, o mesmo verde pode ser mais vivo: texto grande fecha em 3:1,
   nao em 4,5:1. Sem isto o tema claro ficava com um verde-garrafa no
   titulo enquanto o escuro usava o verde da marca — o mesmo texto com
   duas personalidades. So vale de .h2 pra cima (>= 27px); em .h3 (21px)
   ainda e texto miudo pra regra, e o verde fechado continua valendo. */
.display .c-accent, .h1 .c-accent, .h2 .c-accent,
.display.c-accent,  .h1.c-accent,  .h2.c-accent { color: var(--certo-titulo); }
.c-warn   { color: var(--acao-texto); }    /* precisa de voce agora */
.c-3      { color: var(--text-3); }        /* ja foi / incompleto */
.c-danger { color: var(--risco-texto); }   /* destrutivo */

.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.italic { font-style: italic; }

/* espacadores */
.mt-xs  { margin-top: var(--gap-xs); }
.mt-sm  { margin-top: var(--gap-sm); }
.mt     { margin-top: var(--gap); }
.mt-md  { margin-top: var(--gap-md); }
.mt-lg  { margin-top: var(--gap-lg); }
.mt-xl  { margin-top: var(--gap-xl); }
.mt-2xl { margin-top: var(--gap-2xl); }
.grow   { flex: 1; }

/* Regua fina: a divisoria da identidade visual.
   Ela so funciona com vao dos DOIS lados. O de cima vem do .mt-* que a
   marcacao poe nela; o de baixo e este piso — por isso margin-bottom
   sozinho, e nao o atalho `margin`, que zeraria o .mt-* de cima. */
.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin-top: 0;
  margin-bottom: var(--gap-md);
}