/* ============================================================
   tryzen — ajustes por tela
   ============================================================ */

/* utilitarios de layout usados nas telas */
.line-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.line-between--base { align-items: baseline; }

.block-link { display: block; color: inherit; }
.block-link:active { opacity: .7; }

/* ---------- 01 splash ---------- */
/* Existe UMA marca: simbolo + nome + ponto, sempre por esta classe.
   Recriar os valores dela solto numa tela e como as duas logos acabam
   diferentes uma da outra.

   O simbolo e o corredor do logo — um desenho EM PE, mais alto que a
   letra. Por isso a linha alinha pela BASE, nao pelo centro: centrado,
   a cabeca do boneco sobra por cima do "t" e o pe some por baixo, e a
   palavra parece pendurada nele. */
.wordmark {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
}
/* O verde do LOGO, nao o verde do app: aqui a cor e a marca, nao um
   estado. Ver o bloco "a marca" em css/tokens.css. */
.wordmark .marca { color: var(--marca); flex: none; }
.wordmark__t   { margin-right: -9px; }   /* o ponto cola no nome */
.wordmark__dot { color: var(--marca-texto); }

.s-splash .body { display: flex; flex-direction: column; }
.s-splash .display { max-width: 11ch; }
.s-splash__hero { margin-top: var(--gap-2xl); }

/* ---------- 07 gerando plano ---------- */
.s-gerando .body { display: flex; flex-direction: column; }
.steps__i {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--text-3);
  transition: color .3s var(--ease);
}
.steps__mark {
  flex: none;
  width: 14px;
  text-align: center;
  color: var(--text-3);
}
.steps__i.is-done { color: var(--text-2); }
.steps__i.is-done .steps__mark::before { content: '✓'; }
.steps__i.is-now { color: var(--accent-texto); }
.steps__i.is-now .steps__mark { color: var(--accent-texto); }
.steps__i.is-now .steps__mark::before { content: '•'; }

.gp-bar {
  height: 3px;
  margin: 0 var(--pad) calc(var(--gap) + 4px);
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
}
.gp-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .9s var(--ease);
}

/* ---------- 03-06 quiz ---------- */
.s-quiz .h2 { max-width: 15ch; }

/* ---------- 12 chat ---------- */
.s-chat { padding-bottom: 0; }
.chatbar-wrap {
  position: sticky;
  bottom: 0;
  padding: var(--gap-sm) 0 calc(var(--gap-sm) + var(--safe-bottom));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

/* ---------- 09 registrar ---------- */
/* Esta tela tem que caber numa dobra inteira: microfone e botao de salvar
   visiveis juntos, sem rolar. O conteudo se empilha no topo e a sobra cai
   embaixo (.grow no fim). O padding-bottom fica: e ele que impede o
   segundo botao de encostar no fio da tab bar. */
.s-registrar .body {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--gap-md);
}
.s-registrar .mic-fab { margin-top: var(--gap-md); }

/* A tela encolhe junto com o aparelho, em dois degraus, pra continuar
   cabendo numa dobra. Nao ha rolagem aceitavel aqui: se o "Salvar" sai
   da dobra, quem acabou de correr acha que o app nao tem onde salvar.
   O microfone e o primeiro a ceder (e o maior), depois o vao vertical,
   e por ultimo o titulo. O alvo de toque nunca desce dos 44px. */
@media (max-height: 820px) {
  .s-registrar .body > .mt-md { margin-top: var(--gap); }
  .s-registrar .mic-fab { width: 96px; height: 96px; margin-top: var(--gap); }
  .s-registrar .mic-fab svg { width: 36px; height: 36px; }
}
@media (max-height: 760px) {
  .s-registrar .body > .mt-md,
  .s-registrar .body > .mt-sm { margin-top: var(--gap-sm); }
  .s-registrar .mic-fab { width: 80px; height: 80px; margin-top: var(--gap-sm); }
  .s-registrar .mic-fab svg { width: 32px; height: 32px; }
  .s-registrar .h1 { font-size: 31px; }
  .s-registrar .field { padding: 10px 0 12px; }
  .s-registrar .field__label { margin-bottom: 6px; }
}
@media (max-height: 680px) {
  .s-registrar .mic-fab { width: 68px; height: 68px; }
  .s-registrar .mic-fab svg { width: 28px; height: 28px; }
  .s-registrar .h1 { font-size: 28px; }
  .s-registrar .btn--primary { min-height: 52px; }
  /* "toque para falar" some: o icone de microfone ja diz isso, e aqui
     cada linha custa a visibilidade do botao de salvar. */
  .s-registrar #dica { display: none; }
}
/* Menor que qualquer celular em uso hoje (o 360x640 e o piso do mercado),
   mas cabe aqui porque custa tres linhas de CSS: teclado aberto em
   paisagem cai nesta faixa. Nada some — so aperta. */
@media (max-height: 620px) {
  .s-registrar .body > .mt-md,
  .s-registrar .body > .mt-sm { margin-top: var(--gap-xs); }
  .s-registrar .h1 { font-size: 26px; }
  .s-registrar .body-t { font-size: var(--fs-xs); line-height: 1.4; }
  .s-registrar .mic-fab { width: 60px; height: 60px; }
  .s-registrar .mic-fab svg { width: 26px; height: 26px; }
}

/* ---------- 26 historico ---------- */
.log-day {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.log-day__date { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.log-day__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.015em; }

/* ---------- 17 provas / 22 segmentos: graficos ---------- */
.chart { width: 100%; height: 128px; display: block; overflow: visible; }
.chart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__dash { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart__dot  { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.chart__area { fill: url(#gradAccent); }
.chart__axis { display: flex; justify-content: space-between; margin-top: 14px; }

.legend { display: flex; gap: 26px; align-items: center; }
.legend__i { display: flex; align-items: center; gap: 8px; }
.legend__swatch { width: 20px; height: 0; border-top: 2px solid var(--accent); }
.legend__swatch--dash { border-top-style: dashed; border-color: var(--text-3); }

/* ---------- 18 rede / 19 post ---------- */
.feed-stats { display: flex; gap: var(--gap-lg); }
.feed-stats .stat__value { font-size: 27px; }
.feed-stats .stat__note { margin-top: 2px; }

.score-box {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
}

/* ---------- 23 desafios ---------- */
.versus { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.versus__side { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; }
.versus__vs { color: var(--text-3); font-size: var(--fs-lg); font-weight: 500; }

/* ---------- 27 voce / 29 ajustes ---------- */
.danger .row__title { color: var(--risco-texto); }

/* ---------- responsivo: telas bem estreitas ---------- */
@media (max-width: 359px) {
  :root { --pad: 18px; --fs-body: 16px; --gap-xl: 42px; --gap-2xl: 60px; }
  .stats { gap: var(--gap); }
  .avatar--lg { width: 62px; height: 62px; font-size: 22px; }
}

/* ---------- desktop: nao e o foco, so nao deixa feio ---------- */
@media (min-width: 640px) {
  body { background: var(--fora-do-app); }
  #app {
    max-width: 430px;
    margin: 0 auto;
    background: var(--bg);
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--border-soft);
  }
  .tabbar { max-width: 430px; left: 50%; transform: translateX(-50%); }
  .toast { left: 50%; }
}

/* ---------- 17 historico de provas ---------- */
/* grid de 2 fileiras: rotulos em cima, valores embaixo — igual ao mockup */
.prova-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 4px;
  padding: 19px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.prova-row__nome  { font-size: var(--fs-body); font-weight: 500; }
.prova-row__pr    { color: var(--accent-texto); font-size: 11px; margin-left: 2px; }
.prova-row__tempo { font-size: 25px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.prova-row__meta  { font-size: var(--fs-mono-sm); }
.prova-row__score { font-size: 25px; font-weight: 600; letter-spacing: -.02em; text-align: right; }

/* pilha de acoes no topo de perfil publico */
.chips--nowrap { flex-wrap: nowrap; }