/* Reset, tipografia e o esqueleto de tela. Aparência de componente mora em
 * componentes.css.
 *
 * Quase toda regra estranha aqui existe por causa de uma armadilha do Safari
 * no iPhone, e cada uma está anotada com a que evita.
 */

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

html {
  background: var(--papel-0);
  -webkit-text-size-adjust: 100%;
  /* `100vh` inclui a barra de URL do Safari: a tela "pula" quando ela some.
   * `100dvh` é a altura de verdade. */
  height: 100dvh;
}

body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papel-0);
  color: var(--tinta-1);
  font-family: var(--fonte-sans);
  font-size: var(--t-300);
  line-height: var(--lh-corpo);
  font-synthesis-weight: none;
  /* Sem isso, puxar a lista para baixo no topo recarrega a página — e a
   * recarga acidental no meio de uma sessão de oração perde o cronômetro. */
  overscroll-behavior-y: contain;
}

h1, h2, h3 { margin: 0; font-weight: 500; line-height: var(--lh-titulo); }
p, ul, ol { margin: 0; }
ul { list-style: none; padding: 0; }

button, input, textarea, select { font: inherit; color: inherit; }

button {
  background: none; border: none; margin: 0; padding: 0;
  cursor: pointer; text-align: left;
  /* Mata o atraso de 300ms e o zoom por duplo toque. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input, textarea {
  /* ABAIXO DE 16px O iOS DÁ ZOOM AO FOCAR e a tela salta de lugar. Este é o
   * único motivo de --t-200 existir. */
  font-size: var(--t-200);
}

/* Números são coisa medida: sempre mono e tabular. `slashed-zero` porque a
 * tela mistura muito 0 com muito O ("Orei", "Ok"). */
.num {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "zero" 1;
  letter-spacing: var(--tr-numero);
}

/* Nome de pessoa e texto de pedido. A pessoa é honrada. */
.serif { font-family: var(--fonte-serif); }

/* Foco visível e INSTANTÂNEO. */
:focus-visible {
  outline: 3px solid var(--ancora);
  outline-offset: 2px;
  transition: none !important;
}

.pular {
  position: absolute; left: -9999px;
  padding: var(--esp-3) var(--esp-5);
  background: var(--papel-2); color: var(--tinta-1);
  border-radius: var(--raio-1);
}
.pular:focus { left: var(--esp-5); top: var(--esp-3); z-index: 20; }

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

/* ------------------------------------------------------------- esqueleto */

.app { display: contents; }

.tela {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--esp-5) var(--esp-5) var(--esp-8);
}

.tela__cabecalho { margin-bottom: var(--esp-6); }

.tela__titulo {
  font-size: var(--t-600);
  line-height: var(--lh-titulo);
  letter-spacing: -0.01em;
}

.tela__subtitulo {
  margin-top: var(--esp-2);
  color: var(--tinta-2);
  font-size: var(--t-300);
}

.tela__secao { margin-top: var(--esp-7); }

.tela__rotulo {
  font-size: var(--t-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: var(--esp-4);
}

/* ------------------------------------------------------------ barra de abas
 * `env(safe-area-inset-bottom)` porque no iPhone sem botão físico o indicador
 * de home come os últimos ~34px e cobriria metade dos alvos.
 */
.abas {
  display: flex;
  border-top: 1px solid var(--linha-1);
  background: var(--papel-1);
  padding-bottom: env(safe-area-inset-bottom);
  flex-shrink: 0;
}

.abas__item {
  flex: 1;
  min-height: var(--toque-min);
  padding: var(--esp-3) var(--esp-2) var(--esp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-1);
  color: var(--tinta-3);
  font-size: var(--t-100);
  position: relative;
}
.abas__item[aria-current="page"] { color: var(--ancora); font-weight: 600; }
.abas__icone { display: block; height: 24px; }

.abas__sinal {
  position: absolute; top: var(--esp-2);
  transform: translateX(18px);
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--raio-cheio);
  background: var(--atencao); color: #FFF;
  font-family: var(--fonte-mono); font-size: 12px; font-weight: 500;
  display: grid; place-items: center;
}

/* O contêiner das telas. `min-height: 0` é o que permite a tela interna
 * rolar dentro de um flex — sem ele, o conteúdo estoura o contêiner e a
 * página inteira rola, levando a barra de abas embora. */
.principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}