/* ============================================================
   tryzen — componentes
   ============================================================ */

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: 34px;
  padding: 0 var(--pad);
  margin-bottom: var(--gap-lg);
}
.topbar__back {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: -6px;
  padding: 6px;
  min-height: 44px;          /* area de toque confortavel no celular */
  color: var(--text);
  font-size: var(--fs-body);
}
.topbar__back svg { width: 20px; height: 20px; }
.topbar__spacer { flex: 1; }
.topbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--text-3);
}
.topbar__action { color: var(--accent-texto); font-weight: 600; }

/* acao textual pequena: mantem o visual, garante 44px de toque */
.tap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* mesma ideia, mas sem empurrar o layout ao redor */
.tap--inline { padding: 6px 0; margin: -6px 0; }
/* qualquer acao no topo tem no minimo 44px de altura tocavel */
.topbar__right > *,
.topbar__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -8px;
  color: var(--text);
  position: relative;
}
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn--dot::after {
  content: '';
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}

/* ---------- botoes ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
  border-radius: var(--r);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .12s var(--ease), opacity .12s var(--ease);
}
.btn:active { transform: scale(.985); opacity: .9; }

.btn--primary   { background: var(--accent); color: var(--on-accent); }
.btn--secondary { background: var(--surface); color: var(--text); }
.btn--outline   { border: 1px solid var(--border); color: var(--text); }
.btn--ghost     { color: var(--text); min-height: 48px; }
.btn[disabled]  { opacity: .38; pointer-events: none; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill--solid   { background: var(--accent); color: var(--on-accent); }
.pill--outline { border-color: var(--accent-texto); color: var(--accent-texto); }
.pill--muted   { border-color: var(--border); color: var(--text-2); }
.pill--lg      { min-height: 52px; font-size: var(--fs-body); flex: 1; }
.pill:active   { opacity: .82; }

/* ---------- campo com underline ---------- */
/* e um <label>: sem display:block o padding vertical nao entra no fluxo
   e os campos se sobrepoem, fazendo o rotulo encostar na linha de cima. */
.field {
  display: block;
  padding: 18px 0 15px;
  border-bottom: 1px solid var(--border);
}
.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
  margin-bottom: 10px;
}
.field__input {
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--text);
  padding: 2px 0;
}
.field:focus-within { border-bottom-color: var(--accent-texto); }

.or {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-3);
}
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------- card de opcao (quiz) ---------- */
.opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: transparent;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.opt + .opt { margin-top: 12px; }
.opt__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
  margin-bottom: 6px;
}
.opt__text { font-size: var(--fs-body); line-height: 1.4; color: var(--text); }
.opt__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-3);
  margin-top: 4px;
}
.opt[aria-selected="true"] { border-color: var(--accent-texto); background: var(--accent-tint); }
.opt[aria-selected="true"] .opt__kicker { color: var(--accent-texto); }
.opt--warn[aria-selected="true"] { border-color: var(--warn); background: var(--warn-tint); }
.opt--warn[aria-selected="true"] .opt__title { color: var(--warn); }
.opt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.opt__title { font-size: var(--fs-body); font-weight: 500; }
.opt__check { color: var(--warn); flex: none; }
.opt__check svg { width: 20px; height: 20px; }

/* ---------- linha de lista ---------- */
.list { border-top: 1px solid var(--border); }
.list--flush { border-top: 0; }

.row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  text-align: left;
  min-height: 66px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.row__main  { flex: 1; min-width: 0; }
.row__title { font-size: var(--fs-body); line-height: 1.3; }
.row__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-3);
  margin-top: 3px;
}
.row__value { font-size: var(--fs-body); color: var(--text-2); white-space: nowrap; }
/* etiqueta ao lado do nome (+5% pace, 4 em comum): nunca quebra no meio */
.row__tag { white-space: nowrap; font-size: 12px; }
.row__chev  { color: var(--text-3); flex: none; }
.row__chev svg { width: 18px; height: 18px; }
.row:active { opacity: .6; }

/* linha de lista com simbolo a esquerda: o icone nao ganha caixa nem
   fundo — ele e so mais um sinal cinza, senao a lista vira um mosaico */
.row--com-icone { gap: 15px; }
.row__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  color: var(--text-3);
}
.row__icon svg { width: 23px; height: 23px; }

/* ---------- estado vazio ----------
   Desenho, frase e (as vezes) uma saida, centralizados. O maior ganho
   aqui e o VAO: a ilustracao fica sozinha no meio da tela, com ar dos
   dois lados, em vez de um paragrafo cinza encostado na margem.      */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--gap-md) 0 var(--gap-lg);
}
.vazio p { max-width: 32ch; }
.vazio__acao { width: 100%; max-width: 300px; }

/* As ilustracoes vivem numa moldura de 160x96; o max-width segura elas
   num tamanho confortavel no celular e impede que estiquem no desktop. */
.arte {
  width: 100%;
  max-width: 208px;
  height: auto;
  color: var(--text-3);
}

.group-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}

/* ---------- chips ---------- */
.chips { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
}
.chips--scroll::-webkit-scrollbar { display: none; }
/* numa fila que rola, os chips mantem a largura do texto (nao encolhem) */
.chips--scroll > * { flex: none; }

.chip {
  display: grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: var(--fs-body);
  white-space: nowrap;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.chip[aria-pressed="true"] {
  border-color: var(--accent-texto);
  background: var(--accent-tint);
  color: var(--accent-texto);
}
.chip--pill  { border-radius: var(--r-pill); min-height: 44px; }
.chip--solid[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent-texto); }
.chip--sq { padding: 0; width: 46px; }

/* fila de 7 dias: divide a largura por igual pra nunca quebrar linha */
.chips--days { display: flex; gap: 8px; }
.chips--days .chip {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 0;
  aspect-ratio: 1;
}

/* ---------- escala: uma fila de opcoes que divide a largura ----------
   Serve pras tres perguntas da avaliacao pos-corrida (esforco 1-10,
   dificuldade 1-5, corpo em tres palavras) e pra qualquer outra fila
   onde as opcoes sao irmas e nenhuma pode ser mais larga que a outra.
   `flex: 1` + `min-width: 0` e o que impede a fila de quebrar linha
   num aparelho de 320px — sem o min-width o conteudo do chip vira o
   piso da largura e a ultima opcao cai pra baixo. */
.escala { display: flex; gap: 7px; }
.escala .chip {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- dez opcoes nao cabem numa fileira ----------
   A regua de esforco vai de 1 a 10, e dez chips lado a lado dao 22px
   de largura num aparelho de 320px — e 33px ate num de 430px. Alvo de
   toque tem piso de 44px, e aqui ele importa mais que em qualquer
   outro lugar do app: errar o chip corrompe justamente o dado que a
   tela inteira existe pra coletar.

   Duas fileiras de cinco resolvem em todo tamanho de tela (50px de
   largura ja no 320px) e ainda leem melhor — 1 a 5 em cima, 6 a 10
   embaixo. `flex-basis: 20%` menos a folga das quatro brechas e o que
   fixa cinco por linha; sem isso o `flex: 1` esticaria pra dez. */
.escala--dupla { flex-wrap: wrap; }
.escala--dupla .chip { flex: 1 1 calc(20% - 6px); }

/* ---------- os porques ----------
   A lista de motivos que sustentam uma recomendacao. Marcador em traco,
   nao em bolinha: sao razoes, nao itens de checklist — e bolinha puxa
   o olho pro marcador em vez de pro texto. */
.porques { list-style: none; padding: 0; margin: 0; }
.porques li { position: relative; padding-left: 18px; }
.porques li + li { margin-top: 6px; }
.porques li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 10px;
  height: 1px;
  background: var(--text-3);
}

/* A opcao que pede atencao — "dolorido" na pergunta do corpo. Amarelo,
   nao vermelho: o vermelho deste app e so pra acao destrutiva, e dizer
   que algo doeu nao e um estrago, e uma coisa que pede olhar. */
.chip--acao[aria-pressed="true"] {
  border-color: var(--acao-fio);
  background: var(--acao-fundo);
  color: var(--acao-texto);
}

/* ============================================================
   O CARTAO — a peca que separa
   ------------------------------------------------------------
   ANATOMIA (a mesma em toda tela; se uma tela ganhar valores
   proprios, as telas se afastam e a grade nunca assenta):

     ┌─ .card — corpo na cor do ESTADO (--*-fundo) ─────────┐
     │  .card__head  titulo e selos, SEM fundo proprio      │
     │  ┌─ .bandeja — recuo em --bg, com halo de 4px ────┐  │
     │  │   .pastilha  linha de informacao               │  │
     │  └────────────────────────────────────────────────┘  │
     │  .card__foot  acoes                                  │
     └──────────────────────────────────────────────────────┘

   REGRAS
   1. UMA cor por cartao. Todas as pastilhas vestem o tom do corpo.
      Quem separa uma da outra e a BANDEJA por tras, nao mais cor.
   2. Nada de letra direto sobre a cor viva. Toda letra mora no
      cabecalho claro, na bandeja ou num botao.
   3. Sem sombra. O que separa o cartao da pagina e a diferenca de
      TOM. Sombra so no que flutua de verdade (modal, hover).
   ============================================================ */
.card {
  display: block;
  padding: 8px;
  border-radius: var(--r-card);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.card + .card { margin-top: var(--gap); }

/* o corpo veste o ESTADO. Uma classe por leitura, e so estas. */
.card--certo { background: var(--certo-fundo); }
.card--acao  { background: var(--acao-fundo); }
.card--feito { background: var(--feito-fundo); }
.card--risco { background: var(--risco-fundo); }
/* incompleto nao tem corpo: so o traco de onde a coisa vai ficar */
.card--vazio {
  background: var(--vazio-fundo);
  box-shadow: inset 0 0 0 1px var(--vazio);
}
.card--vazio .bandeja { background: var(--surface); }

.card__head {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
  padding: 10px 12px 12px;
}
.card__head > .grow { flex: 1; }
.card__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-2);
}
.card__title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; }
.card__foot {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 12px 12px 6px;
}

/* a bandeja: o recuo que separa as informacoes umas das outras.
   Vai em --bg (o fundo da pagina), nunca em branco puro no claro —
   com o cartao colorido, o branco puro virava um TERCEIRO tom. */
.bandeja {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: 4px;              /* o halo de 4px em volta das pastilhas */
}
.pastilha {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.pastilha + .pastilha { box-shadow: 0 -1px 0 var(--border-soft); }
.pastilha__ic { flex: none; color: var(--text-3); display: flex; }
.pastilha__ic svg { width: 19px; height: 19px; }
.pastilha__label { color: var(--text-2); }
.pastilha__valor { margin-left: auto; font-weight: 500; white-space: nowrap; }
/* pastilha de recado: o valor e uma frase, entao quebra e alinha a
   esquerda. Sem isso o texto do coach vazava pra fora do cartao. */
.pastilha--texto { align-items: flex-start; }
.pastilha--texto .pastilha__valor {
  margin-left: 0;
  white-space: normal;
  font-weight: 400;
  color: var(--text-2);
  min-width: 0;
}
.pastilha--texto .pastilha__ic { margin-top: 1px; }

/* selo: o que significa um ESTADO nao veste a cor do cartao (regra 2
   do doc) — ele tem a propria, senao "feito" e "atrasado" ficam iguais. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.selo--certo { background: var(--certo-fundo); color: var(--certo-texto); }
.selo--acao  { background: var(--acao-fundo);  color: var(--acao-texto); }
.selo--feito { background: var(--feito-fundo); color: var(--feito-texto); }
.selo--risco { background: var(--risco-fundo); color: var(--risco-texto); }

/* ---------- stats ---------- */
.stats { display: flex; gap: var(--gap-lg); }
.stats--grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md) var(--gap); }
.stats--spread { justify-content: space-between; gap: var(--gap); }
/* fila de PRs: 4 lado a lado, mas vira 2x2 em telas estreitas */
.stats--prs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md) var(--gap-sm); }
@media (max-width: 379px) {
  .stats--prs { grid-template-columns: repeat(2, 1fr); }
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
  margin-bottom: 4px;
}
.stat__value {
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.stat__value--lg { font-size: var(--fs-stat-lg); }
.stat__unit { font-size: var(--fs-body); font-weight: 400; color: var(--text-3); margin-left: 3px; }
.stat__note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-3);
  margin-top: 5px;
}

.bignum { display: flex; align-items: flex-end; gap: 10px; }
.bignum__n {
  font-size: clamp(96px, 34vw, 140px);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--accent-texto);
}
.bignum__side { padding-bottom: 10px; }

/* ---------- progresso ---------- */
.progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  overflow: hidden;
}
.progress__fill { height: 100%; background: var(--accent); border-radius: inherit; }

.progress-seg { display: flex; gap: 8px; }
.progress-seg span { flex: 1; height: 2px; background: var(--border); border-radius: 2px; }
.progress-seg span.is-on { background: var(--accent); }

.split-bar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; }
.split-bar__a { background: var(--accent); }
.split-bar__b { background: var(--warn); }

/* ---------- segmented / tabs ---------- */
.segmented {
  display: flex;
  padding: 5px;
  background: var(--surface);
  border-radius: var(--r-pill);
}
.segmented button {
  flex: 1;
  min-height: 42px;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-2);
}
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }

.tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--border);
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  position: relative;
  padding: 0 0 15px;
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; }
.tabs button[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
}

/* ---------- avatar ---------- */
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.avatar--me { background: var(--accent); color: var(--on-accent); }
.avatar--sm { width: 36px; height: 36px; font-size: var(--fs-xs); }
.avatar--lg { width: 74px; height: 74px; font-size: 26px; }
.avatar--xl { width: 88px; height: 88px; font-size: 30px; }

/* ---------- anel de score ---------- */
.ring { position: relative; flex: none; display: grid; place-items: center; }
.ring svg { transform: rotate(-90deg); }
.ring__track { stroke: var(--border); }
.ring__bar   { stroke: var(--accent); stroke-linecap: round; }
.ring__inner { position: absolute; display: grid; place-items: center; line-height: 1; }
.ring__n { font-size: 26px; font-weight: 600; color: var(--accent-texto); letter-spacing: -.02em; }
.ring__cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--text-3);
  margin-top: 3px;
}

/* ---------- grafico de barras da semana ---------- */
.weekbars { display: flex; align-items: flex-end; gap: 10px; height: 132px; }
.weekbars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  justify-content: flex-end;
}
/* A semana em quatro leituras, uma cor so:
     hoje       verde CHEIO      — e o agora, e onde o olho para
     planejado  verde DILUIDO    — mesmo verde, menos voz
     feito      cinza cheio      — aconteceu, tem corpo, nao pede nada
     vazio      cinza sem corpo  — traco: nao existe treino nesse dia
   Sem aro em volta do dia de hoje: a forca do verde ja diz qual e, e o
   aro so acrescentava um segundo contorno brigando com o raio da barra. */
.weekbars__bar { width: 100%; border-radius: 5px; background: var(--feito); }
.weekbars__bar--done    { background: var(--feito); }
.weekbars__bar--planned { background: var(--certo-fraco); }
.weekbars__bar--today   { background: var(--certo); }
.weekbars__bar--empty   { border: 1px dashed var(--vazio); background: none; }
.weekbars__day { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-3); }
.weekbars__col.is-today .weekbars__day { color: var(--certo-texto); font-weight: 600; }

/* ---------- citacao / card ---------- */
.quote {
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  font-style: italic;
  color: var(--text-2);
  line-height: 1.5;
}
.quote--muted { border-left-color: var(--border); }
/* trecho em destaque dentro da citacao volta ao normal (igual ao mockup) */
.quote b { font-style: normal; color: var(--text); }

/* ---------- splits: cartao visual, nunca planilha ----------
   Era uma tabela de 4 colunas (n · alvo · real · delta) com o MESMO
   alvo repetido em toda linha. O alvo agora e dito UMA vez no topo e
   cada km vira uma barra que sai do centro: pra esquerda foi mais
   rapido, pra direita mais lento. O olho le o desenho; o numero fica
   so pro delta, que e o unico dado que a barra nao mede com precisao.
   -------------------------------------------------------------- */
.splits-v { display: flex; flex-direction: column; }
.splits-v__linha {
  display: grid;
  grid-template-columns: 34px 1fr 46px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}
.splits-v__km {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-3);
}
/* a trilha tem um fio no meio: e o alvo. A barra nasce dele. */
.splits-v__trilha {
  position: relative;
  height: 12px;
  border-radius: 3px;
  background: var(--border-soft);
}
.splits-v__trilha::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--border);
}
.splits-v__barra {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 2px;
  background: var(--certo);   /* dentro do combinado */
}
.splits-v__barra--lento { background: var(--acao); }
.splits-v__delta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-align: right;
  color: var(--text-3);
}
.splits-v__delta--rapido { color: var(--certo-texto); }
.splits-v__delta--lento  { color: var(--acao-texto); }

/* ---------- mic ---------- */
.mic-fab {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  /* margem propria: numa tela baixa os espacadores .grow zeram, e sem ela
     o halo do botao encosta no rotulo de cima */
  margin: var(--gap) auto 0;
  border-radius: 50%;
  background: var(--certo);
  color: var(--on-accent);
  box-shadow: var(--fab-halo);
  transition: transform .16s var(--ease);
}
.mic-fab svg { width: 42px; height: 42px; }
.mic-fab:active { transform: scale(.94); }
/* Gravando: o halo respira. Anima o proprio halo do tema, entao no claro
   pulsa o anel e no escuro pulsa a luz — em vez de acender um borrao
   verde que so existe enquanto grava. */
.mic-fab.is-rec { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: var(--fab-halo); }
  50%      { box-shadow: var(--fab-halo-forte); }
}

/* ---------- chat ---------- */
.chat__turn + .chat__turn { margin-top: var(--gap-md); }
.chat__who {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
  margin-bottom: 6px;
}
.chat__text { font-size: var(--fs-body); line-height: 1.5; }
.chat__text + .chat__text { margin-top: 14px; }

.chatbar {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin: 0 var(--pad);
  padding: 8px 8px 8px 20px;
  background: var(--surface);
  border-radius: var(--r-pill);
}
.chatbar input { font-size: var(--fs-body); }
.chatbar__mic {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.chatbar__mic svg { width: 22px; height: 22px; }

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  background: var(--surface);
  border-radius: var(--r);
  color: var(--text-3);
}
.search svg { width: 21px; height: 21px; flex: none; }
.search input { font-size: var(--fs-body); }

.dashed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 68px;
  padding: 0 18px;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--text-2);
  font-size: var(--fs-body);
  width: 100%;
}
.dashed svg { width: 20px; height: 20px; }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--tabbar-fundo);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-soft);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-3);
  padding-top: 2px;
}
.tabbar__item svg { width: 25px; height: 25px; }
.tabbar__item span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
}
.tabbar__item.is-active { color: var(--accent-texto); }
/* (o `[hidden]` que vence este display:flex mora no base.css, valendo
   pra todo componente — nao so pra barra) */

/* ---------- ranking ---------- */
.rank {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--border);
}
.rank--me {
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent-tint);
  padding: 14px;
  margin: 8px 0;
}
.rank__pos {
  flex: none;
  width: 30px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-3);
  text-align: center;
}
.rank__pos--1 {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.rank__main  { flex: 1; min-width: 0; }
.rank__name  { font-size: var(--fs-body); font-weight: 500; }
.rank__sub   { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); margin-top: 2px; }
.rank__delta { font-family: var(--font-mono); font-size: var(--fs-mono); }
.rank__score { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.rank__score small {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  color: var(--text-3);
}

/* ---------- notificacao ---------- */
.notif {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 19px 0;
  border-bottom: 1px solid var(--border);
  width: 100%;
  text-align: left;
}
.notif__dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 19px;
}
.notif__dot--off { background: none; }
.notif__text { font-size: var(--fs-body); line-height: 1.42; color: var(--text-2); }
.notif__text b { color: var(--text); font-weight: 600; }
.notif__time { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); margin-top: 5px; }
.notif__ai {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent);
}
.notif__ai::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ---------- feed ---------- */
.post { padding: var(--gap-lg) 0; border-bottom: 1px solid var(--border); }
.post__head { display: flex; align-items: center; gap: 14px; }
.post__name { font-size: var(--fs-lg); font-weight: 600; }
.post__meta { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); margin-top: 2px; }
.post__actions { display: flex; align-items: center; gap: 22px; color: var(--text-3); }
.post__action {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-body);
  /* cresce a area de toque pra 44px sem empurrar o layout */
  min-height: 44px;
  padding: 0 4px;
  margin: 0 -4px;
}
.post__action svg { width: 21px; height: 21px; }

.reps { display: flex; gap: var(--gap-sm); overflow-x: auto; scrollbar-width: none; }
.reps::-webkit-scrollbar { display: none; }
.rep { flex: 1; min-width: 78px; padding: 15px 16px; background: var(--surface); border-radius: var(--r-sm); }
.rep__label { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); }
.rep__value { font-size: 21px; font-weight: 600; color: var(--accent-texto); margin-top: 3px; letter-spacing: -.02em; }

/* ---------- linha do plano ---------- */
/* A linha do plano mora DENTRO do cartao (.card__head), entao ela nao
   carrega mais fundo, fio nem padding proprio — quem separa um dia do
   outro e a caixa. Antes era um fio de 1px e o resto era espaco vazio. */
.plan-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  text-align: left;
}
.plan-row__date { flex: none; width: 46px; }
.plan-row__dow  { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); }
.plan-row__day  { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.plan-row__main { flex: 1; min-width: 0; }
.plan-row__title { font-size: var(--fs-lg); font-weight: 500; }
.plan-row__sub  { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-3); margin-top: 4px; }
/* o recado do coach nao e um "feito": e instrucao. Fica no tom de texto. */
.plan-row__note { font-size: var(--fs-sm); font-style: italic; color: var(--text-2); margin-top: 6px; }
.plan-row__mark { flex: none; color: var(--text-3); padding-top: 4px; }
.plan-row__mark svg { width: 20px; height: 20px; }
.plan-row--done .plan-row__title { color: var(--text-3); font-weight: 400; }
.plan-row--done .plan-row__day   { color: var(--text-3); }
.plan-row--rest .plan-row__title { color: var(--text-3); font-weight: 400; }
.plan-row--today .plan-row__dow,
.plan-row--today .plan-row__day  { color: var(--certo-texto); }
/* marcador do dia de hoje: span inline nao aceita width/height */
.plan-row__bullet {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--certo);
  box-shadow: 0 0 0 3px var(--certo-fundo);
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 18px);
  transform: translateX(-50%) translateY(12px);
  z-index: 90;
  max-width: calc(100vw - 40px);
  padding: 13px 20px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   O MAPA — a mesma moldura em toda tela
   ------------------------------------------------------------
   Duas pecas, e nao mais que duas:

     .mapa         a moldura. Serve tanto pra <img> estatica (treino,
                   feed, prova, rotas) quanto pro mapa vivo do GL JS.
     .mapa--vivo   so na tela de correr: ocupa o corpo da tela em vez
                   de ter altura propria.

   Raio e o do cartao, e a borda e o mesmo fio de todo mundo: um mapa
   com raio proprio se afasta das outras pecas e a grade nao assenta
   (a mesma lei do `card()` — ver o bloco do CARTAO acima).

   Sem sombra: o que separa o mapa da pagina e a diferenca de tom, igual
   ao cartao.
   ============================================================ */
.mapa {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);   /* o tom que ocupa o lugar enquanto carrega */
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.mapa img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- o mapa vivo (tela de correr) ---------- */
/* flex:1 e min-height:0 na area: e o mapa que absorve a sobra vertical da
   tela, e sao os numeros embaixo dele que tem tamanho fixo. Sem o
   min-height:0 o container de flex se recusa a encolher e empurra o
   rodape pra fora da dobra — que e justamente o botao de Pausar. */
.mapa-area {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  margin: var(--gap) var(--pad) 0;
}
.mapa--vivo {
  flex: 1;
  min-height: 180px;
  border-radius: var(--r-lg);
}

/* Ponto de "estou aqui". Nao e um alfinete: alfinete aponta pra um lugar
   no mapa, e este ponto e a PESSOA — ela esta no meio dele, nao embaixo. */
.gps-ponto {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--certo);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 4px var(--certo-fundo);
}

/* O mapa da Mapbox nasce com a fonte e o tamanho dele. Estas tres regras
   trazem a atribuicao pro tipo do app — ela e obrigatoria por contrato,
   entao fica visivel; o que da pra fazer e nao deixar ela gritando. */
.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-attrib a {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib { background: var(--bg); }

/* ---------- botao de recentralizar ----------
   Aparece so depois que a pessoa arrasta o mapa: enquanto o mapa segue
   sozinho, um botao de "centralizar" nao tem o que fazer e so ocupa um
   canto. Flutua, entao aqui a sombra e legitima. */
/* No ALTO do mapa, nao no rodape: embaixo moram o logo e a atribuicao
   da Mapbox, que sao obrigatorios por contrato e nao podem ficar
   escondidos atras de um botao. */
.mapa__recentrar {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  min-height: 40px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--certo-texto);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16), inset 0 0 0 1px var(--border-soft);
}
.mapa__recentrar svg { width: 16px; height: 16px; }

/* ---------- os numeros da corrida ---------- */
/* Tres, nunca seis: distancia, tempo e pace. Cadencia, calorias e
   altimetria sao numeros que o GPS de celular NAO mede bem — mostrar
   seria inventar precisao. */
.corrida-num {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--gap);
  padding: var(--gap-md) var(--pad) 0;
}
.corrida-num .stat__value { white-space: nowrap; }
.corrida-dica {
  padding: var(--gap-xs) var(--pad) 0;
  min-height: 1.6em;      /* reserva a linha: sem isso a tela pula quando
                             o texto vai de vazio pra "gravando" */
}

/* Corrida ou caminhada, antes de comecar. Mora entre a dica e o rodape
   e some quando a captura arranca — nao ha o que escolher no meio de
   uma corrida, e um chip ali vira alvo de toque acidental. */
.corrida-modo { padding: var(--gap-sm) var(--pad) 0; }

/* Tela baixa: o mapa cede primeiro, igual ao microfone na tela de
   registrar. O que nao pode sair da dobra e o botao do rodape. */
@media (max-height: 700px) {
  .corrida-num { padding-top: var(--gap); }
  .corrida-num .stat__value--lg { font-size: var(--fs-stat); }
  .mapa--vivo { min-height: 140px; }
}

/* ---------- busca de lugar (prova nova) ---------- */
/* Lista de resultado da geocodificacao. Nasce colada no campo: e a
   continuacao dele, nao um cartao a parte. */
.lugares {
  margin-top: 2px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.lugares__i {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  text-align: left;
}
.lugares__i + .lugares__i { box-shadow: 0 -1px 0 var(--border-soft); }
.lugares__i:active { background: var(--surface-2); }
.lugares__ic { flex: none; color: var(--text-3); display: flex; }
.lugares__ic svg { width: 18px; height: 18px; }
.lugares__txt { min-width: 0; }
.lugares__nome {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lugares__end {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- transicao de rota ----------
   Feita com transition (nao animation) de proposito: o estado de REPOUSO
   e o estado correto. Se o JS falhar ou o navegador engasgar na animacao,
   a tela fica no lugar certo em vez de travar deslocada.               */
.screen {
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.screen.is-entering { opacity: 0; transform: translateY(6px); }
.screen.is-entering.is-push { transform: translateX(18px); }

@media (prefers-reduced-motion: reduce) {
  .screen, .screen.is-entering { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   INSTALAR NA TELA DE INICIO
   ------------------------------------------------------------
   Uma folha que sobe do rodape, nao um banner colado no topo. O
   banner competiria com a marca do splash e ficaria por cima do
   conteudo de toda tela; a folha aparece uma vez, pede uma decisao
   e sai. Ela e um dialogo de verdade (role="dialog"): tem scrim,
   fecha no Esc e devolve o foco pro corpo dela.

   z-index 80: acima da tab bar (40), abaixo do toast (90) — um
   aviso de "salvo" ainda precisa ser lido por cima dela.

   O max-width e o mesmo do #app no desktop (430px), senao a folha
   atravessaria a moldura do "celular" que o screens.css desenha.
   ============================================================ */
.instalar {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.instalar__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .32);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.instalar__folha {
  position: relative;
  width: 100%;
  max-width: 430px;
  padding: var(--gap-md) var(--pad) calc(var(--gap-md) + var(--safe-bottom));
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--bg-elev);
  /* a folha FLUTUA de verdade: aqui a sombra e informacao (o que esta
     por cima), nao enfeite — a mesma excecao do modal citada no topo
     deste arquivo */
  box-shadow: 0 -10px 44px rgba(0, 0, 0, .16);
  border-top: 1px solid var(--border-soft);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.instalar__folha:focus { outline: none; }
.instalar.is-on .instalar__scrim { opacity: 1; }
.instalar.is-on .instalar__folha { transform: translateY(0); }

/* o corredor da marca, no verde da marca — igual ao splash */
.instalar__marca {
  color: var(--marca);
  margin-bottom: var(--gap);
}

/* os dois passos do iPhone. Numero em pastilha porque a ordem AQUI e
   informacao: fazer o Compartilhar depois do Adicionar nao existe. */
.instalar__passos {
  list-style: none;
  /* o respiro mora AQUI, nao numa classe .mt-* no HTML: as duas teriam
     a mesma especificidade e este arquivo carrega depois do base.css,
     entao o `margin: 0` da lista venceria a utilitaria e os passos
     colariam no paragrafo */
  margin: var(--gap-md) 0 0;
  padding: 0;
  counter-reset: passo;
}
.instalar__passos li {
  counter-increment: passo;
  position: relative;
  padding-left: 34px;
  min-height: 24px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-2);
}
.instalar__passos li + li { margin-top: var(--gap-sm); }
.instalar__passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--certo-fundo);
  color: var(--certo-texto);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.instalar__passos b { color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .instalar__folha { transition: none; }
}