/* folha.css — folha inferior (bottom sheet) reutilizável. Montada por js/folha.js.
 *
 * Nasceu como a folha do "Aa" da leitura (controle de tema, rodada 2) e é o mesmo componente que servirá
 * à folha de conta. Especificação: features/tema-controle/tema-controle-spec.md (§5, §7).
 *
 *   .folha-raiz [role=presentation]        ← cobre a viewport; `hidden` quando fechada
 *     ├─ .folha-scrim                      ← --scrim, fade de 240ms
 *     └─ .folha [role=dialog]              ← --surface, raio 28px no topo, --shadow-float
 *          ├─ .folha-topo                  ← ÁREA DE ARRASTO: alça + título
 *          └─ .folha-corpo                 ← o conteúdo de quem usa
 *
 * Movimento: entrada 380ms, saída 240ms, sempre --ease-out (nunca spring). A duração vem do estado
 * DESTINO: a regra base (fechada) tem 240ms; `.is-aberta` sobe para 380ms.
 * Cores só de design-system/colors_and_type.css. */

.folha-raiz {
  position: fixed;
  inset: 0;
  z-index: 1000;                    /* acima do modal do leitor (400) e do menu do versículo (500); abaixo do toast */
}

.folha-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.folha-raiz.is-aberta .folha-scrim { opacity: 1; }

.folha {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-inline: auto;
  width: 100%;
  max-width: 480px;                 /* no desktop a MESMA folha fica centralizada, sem esticar por 1280px */
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-sizing: border-box;
  padding: 14px var(--space-4) calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-float);
  transform: translateY(100%);
  transition: transform 240ms var(--ease-out);
  outline: none;                    /* o foco inicial é programático; o anel fica nos controles */
}
.folha-raiz.is-aberta .folha {
  transform: translateY(0);
  transition-duration: 380ms;
}

/* Área de arrasto: só a alça e o título. O corpo tem controles (o deslizante de tamanho) que também
 * respondem a gesto horizontal, e rolar o corpo não pode fechar a folha. */
.folha-topo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.folha.is-arrastando { transition: none; }
.folha.is-arrastando .folha-topo { cursor: grabbing; }

/* --mark-subtle, não --border-strong: é trilho/traço puramente decorativo (a alça não carrega
 * estado nenhum) — --border-strong parou de desenhar borda/trilho/traço na migração da escala de
 * marca (20-21/09/2026, ver docs/estado/03-ARMADILHAS.md e CANONICAL_DECISIONS.md). */
.folha-alca {
  width: 38px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--mark-subtle);
  align-self: center;
}
.folha-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
}

.folha-corpo { display: flex; flex-direction: column; gap: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  .folha-scrim, .folha, .folha-raiz.is-aberta .folha { transition: none; }
}