/* Second Listener — folha de estilo única.
 *
 * A mesma família de tokens da Foc.us (tipos de letra do sistema, claro e
 * escuro automáticos, raios e espaçamentos iguais), com o acento em vermelho:
 * numa app de gravação, o vermelho é o único sinal que não precisa de legenda.
 *
 * Sem webfonts, de propósito: carregam a zero e são os tipos mais legíveis no
 * telemóvel.
 */

:root {
  --fundo: #f7f7f5;
  --superficie: #ffffff;
  --superficie-2: #f0f0ed;
  --texto: #1c1c1a;
  --texto-2: #6b6b66;
  --texto-3: #9a9a94;
  --contorno: #e4e4e0;
  --contorno-forte: #d0d0ca;

  --acento: #c0392b;
  --acento-fundo: #fbeceb;
  --gravando: #e0342a;

  --perigo: #c0392b;
  --ok: #2f7d5b;
  --aguardar: #b8860b;

  --barra-topo: #c0392b;
  --barra-topo-texto: #fff;

  --tipo: 15px;
  --tipo-pequeno: 12.5px;
  --raio: 6px;
  --topo-altura: 48px;
}

/* A paleta escura vive num atributo e não numa media query: o js/tema.js
   resolve "auto" antes do primeiro pixel e escreve aqui. Uma media query em
   paralelo seria uma segunda fonte de verdade para a mesma cor — e as duas
   divergiriam na primeira vez que eu ajustasse uma. */
[data-tema="escuro"] {
  --fundo: #141413;
  --superficie: #1e1e1c;
  --superficie-2: #262624;
  --texto: #eeeeea;
  --texto-2: #9a9a94;
  --texto-3: #6f6f6a;
  --contorno: #2e2e2b;
  --contorno-forte: #3d3d39;

  --acento: #ff7b6b;
  --acento-fundo: #33211f;
  --gravando: #ff5a4d;

  --perigo: #ff7b6b;
  --ok: #8fc79a;
  --aguardar: #e8c25a;

  --barra-topo: #2a1c1a;
}

* { box-sizing: border-box; }

/* O atributo `hidden` é `display: none` na folha de estilo do browser, e
   QUALQUER declaração de display do autor ganha-lhe. Como .entrada e .fase são
   `display: flex`, sem esta linha nada se esconde: aparecia o ecrã de entrada E
   a aplicação, com as três fases do gravador empilhadas uma sob a outra.
   É a primeira regra do ficheiro por ser a que sustenta todas as outras. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
}

body {
  font: var(--tipo)/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  /* Comportamento de app nativa, em quatro linhas:
     - manipulation mata o atraso de 300 ms e o duplo-toque-para-ampliar;
     - user-select nenhum, porque não há texto para copiar e uma seleção
       acidental a meio de uma gravação é só ruído;
     - overscroll-behavior tira o efeito elástico do fim da página;
     - text-size-adjust impede o iOS de aumentar a letra sozinho em landscape. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* --- ecrã de entrada (passo 4) ------------------------------------------ */

.entrada {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
}

.entrada-marca {
  margin: 0;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.4px;
}

.entrada-forma {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 320px);
}

.entrada-campo {
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--contorno-forte);
  border-radius: var(--raio);
  padding: 11px 12px;
  min-height: 44px;
  /* O único campo de texto da app: aqui a seleção tem de funcionar. */
  -webkit-user-select: text;
  user-select: text;
}

/* --- topo --------------------------------------------------------------- */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: calc(var(--topo-altura) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
  background: var(--barra-topo);
  color: var(--barra-topo-texto);
}

.topo-marca {
  font-weight: 600;
  letter-spacing: -0.2px;
}

.topo-estado {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--texto-3);
  transition: background 0.2s;
}

.topo-direita {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topo-sair {
  font: inherit;
  font-size: var(--tipo-pequeno);
  color: inherit;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--raio);
  padding: 4px 10px;
  cursor: pointer;
}

.topo-estado[data-estado="ligado"] { background: #7fd6a2; }
.topo-estado[data-estado="sem-rede"] { background: #ffd75e; }
.topo-estado[data-estado="erro"] { background: #ff8b7d; }

/* --- palco -------------------------------------------------------------- */

.palco {
  display: flex;
  flex-direction: column;
  min-height: calc(100% - var(--topo-altura));
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  gap: 16px;
}

.gravador {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 260px;
  padding: 24px 16px;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: 12px;
}

.lista {
  flex: 1;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: 12px;
  padding: 12px 14px;
}

/* --- gravador ----------------------------------------------------------- */

.fase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* Contagem: o número é enorme de propósito. Lê-se de relance, com o telefone
   a meio caminho do bolso, que é exatamente quando se usa. */
.contagem-numero {
  margin: 0;
  font-size: 96px;
  line-height: 1;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
  animation: pulsar-numero 1s ease-out infinite;
}

@keyframes pulsar-numero {
  0% { transform: scale(1.12); opacity: 0.55; }
  40% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.contagem-nota {
  margin: 0;
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
}

/* A onda: as mesmas cinco barras do ícone. O JS escreve --n (0..1) em cada uma
   a partir do volume real do microfone; o CSS só as desenha. */
.onda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 96px;
}

.onda span {
  display: block;
  width: 10px;
  border-radius: 5px;
  background: var(--gravando);
  /* A altura mínima garante que a onda existe mesmo em silêncio: uma coluna
     de barras achatadas parece uma gravação avariada. */
  height: calc(14px + (var(--n, 0) * var(--f, 1)) * 78px);
  transition: height 90ms linear;
}

/* Cada barra reage a uma fração diferente do volume: a do meio ao máximo, as
   das pontas a menos. É o que dá o desenho de onda em vez de cinco barras
   iguais a subir e descer em bloco. */
.onda span:nth-child(1), .onda span:nth-child(5) { --f: 0.38; }
.onda span:nth-child(2), .onda span:nth-child(4) { --f: 0.7; }
.onda span:nth-child(3) { --f: 1; }

/* Sem medidor de volume (ou com movimento reduzido) as barras respiram sozinhas,
   para nunca haver a dúvida de "está a gravar ou congelou?". */
.onda[data-sem-medidor="1"] span {
  animation: respirar 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

.onda[data-sem-medidor="1"] span:nth-child(2) { --i: 1; }
.onda[data-sem-medidor="1"] span:nth-child(3) { --i: 2; }
.onda[data-sem-medidor="1"] span:nth-child(4) { --i: 3; }
.onda[data-sem-medidor="1"] span:nth-child(5) { --i: 4; }

@keyframes respirar {
  0%, 100% { height: 20px; }
  50% { height: 72px; }
}

.cronometro {
  margin: 0;
  font-size: 34px;
  font-weight: 300;
  /* Dígitos de largura fixa: sem isto o cronómetro tremia a cada segundo. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.botao-largo { width: min(100%, 280px); }

.botao-gravar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 280px);
  justify-content: center;
  font-size: 17px;
  padding: 16px 22px;
}

.ponto-gravar {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

/* --- lista de gravações -------------------------------------------------- */

.gravacoes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gravacao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--contorno);
}

.gravacao:last-child { border-bottom: none; }

.gravacao-info {
  display: flex;
  flex-direction: column;
  /* min-width: 0 permite ao flex encolher este bloco; sem isto, um texto longo
     empurrava o botão de apagar fora do ecrã num telemóvel estreito. */
  min-width: 0;
  flex: 1;
}

.gravacao-quando {
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gravacao-detalhe {
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  font-variant-numeric: tabular-nums;
}

.gravacao-estado {
  font-size: var(--tipo-pequeno);
  font-weight: 550;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto-2);
  /* Largura fixa: sem isto a linha saltava de "a enviar 9%" para
     "a enviar 10%" e empurrava tudo ao lado. */
  min-width: 96px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gravacao-estado[data-estado="aguardar"] { color: var(--aguardar); }
.gravacao-estado[data-estado="enviando"] { color: var(--acento); }
.gravacao-estado[data-estado="enviado"] { color: var(--texto-2); }
.gravacao-estado[data-estado="erro"] { color: var(--perigo); }
.gravacao-estado[data-estado="descartada"] { color: var(--texto-3); }

/* Chegou ao vault: é o único estado que merece fundo, porque é o único que
   significa "acabou bem". */
.gravacao-estado[data-estado="no-vault"] {
  color: #fff;
  background: var(--ok);
}

/* As entregues ficam mais discretas: o que interessa ver de relance é o que
   ainda está por sair do telemóvel. */
.gravacao-feita .gravacao-quando { font-weight: 500; }
.gravacao-feita { opacity: 0.72; }

/* O nome do ficheiro no vault pode ser longo — corta-se em vez de empurrar o
   estado e o botão de apagar para fora do ecrã. */
.gravacao-feita .gravacao-detalhe {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gravacao-apagar {
  font: inherit;
  font-size: var(--tipo-pequeno);
  color: var(--texto-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  /* 40px de alvo mínimo: apagar por engano é a única acção irreversível
     desta app, e um alvo apertado é a forma mais fácil de a provocar. */
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}

.gravacao-apagar.a-confirmar {
  color: #fff;
  background: var(--perigo);
  border-color: var(--perigo);
  padding: 0 10px;
}

/* Marcador de andaime: some quando o passo respetivo aterrar. Fica visível de
   propósito — uma zona vazia sem explicação parece uma app avariada. */
.marcador {
  margin: 0;
  color: var(--texto-3);
  font-size: var(--tipo-pequeno);
  text-align: center;
}

/* --- avisos ------------------------------------------------------------- */

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(92vw, 420px);
  padding: 10px 14px;
  background: var(--texto);
  color: var(--fundo);
  border-radius: var(--raio);
  font-size: var(--tipo-pequeno);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  z-index: 50;
}

.aviso[data-tipo="erro"] { background: var(--perigo); color: #fff; }

/* --- folha de instruções (instalar no iOS) ------------------------------- */

.folha-fundo {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
}

.folha {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  background: var(--superficie);
  /* Só os cantos de cima: encostada em baixo, como as folhas do sistema. */
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
}

.folha-titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 620;
}

.folha-passos {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.folha-nota {
  margin: 0;
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
}

/* --- botões ------------------------------------------------------------- */

.botao {
  font: inherit;
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--contorno-forte);
  border-radius: var(--raio);
  padding: 11px 18px;
  cursor: pointer;
  /* 44px é o mínimo tocável recomendado pela Apple e o que evita o toque
     falhado com o telefone na mão a andar. */
  min-height: 44px;
}

.botao:active { transform: translateY(1px); }

.botao-principal {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.botao-discreto {
  background: none;
  border-color: transparent;
  color: var(--texto-2);
  font-weight: 500;
  font-size: var(--tipo-pequeno);
  min-height: 36px;
  padding: 6px 12px;
}

/* Quem navega por teclado tem de ver onde está; quem toca no ecrã, não. */
.botao:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}