/* folha-aa.css — conteúdo da folha do "Aa" (aparência, tamanho do texto, fonte do texto bíblico).
 * O contêiner (raio, scrim, movimento) é css/folha.css; o segmentado é css/segmentado.css.
 * Spec: features/tema-controle (§7). Decisões: d (faixa em --primary-text), g (contorno --mark). */

.folha-secao { display: flex; flex-direction: column; gap: 9px; }
.folha-rotulo {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-label);                 /* 11px */
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.folha-divisor { height: 1px; background: var(--border); }

/* ── Controle deslizante de tamanho: 5 degraus ───────────────────────────── */
.tam { display: flex; align-items: center; gap: 12px; height: 44px; }   /* área de toque de 44px */
.tam__a { flex: none; font-family: var(--font-read); line-height: 1; user-select: none; }
.tam__a--peq { font-size: 14px; color: var(--fg-3); }
.tam__a--gra { font-size: 22px; color: var(--fg); }

/* O elemento inteiro (44px de altura) é o alvo do dedo. O padding lateral de 14px é o meio-knob: o
 * centro do knob percorre a trilha de ponta a ponta sem passar por cima dos "A". */
.tam__slider {
  position: relative;
  flex: 1;
  height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  touch-action: pan-y;                        /* o gesto horizontal é do slider; a rolagem vertical continua */
  cursor: pointer;
  outline: none;                              /* o anel vai no knob (.tam__slider:focus-visible abaixo) */
  -webkit-tap-highlight-color: transparent;
}
/* --mark-subtle, não --track-bg: --track-bg só sobrevive em .cal-dia (conquistas) desde a migração
 * da escala de marca; todo trilho novo é --mark-subtle (decorativo, sem piso de contraste). */
.tam__trilha {
  position: absolute;
  left: 14px; right: 14px;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: var(--radius-pill);
  background: var(--mark-subtle);
}
/* Faixa preenchida em --primary-text — indicador de valor, CD28/CD30 (não --primary). */
.tam__faixa {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--p, 50) * 1%);
  border-radius: var(--radius-pill);
  background: var(--primary-text);
}
.tam__marca {
  position: absolute;
  top: 50%;
  width: 2px; height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: var(--radius-pill);
  background: var(--fg-3);                    /* fora da faixa */
}
.tam__marca.is-cheia { background: var(--surface); }   /* dentro da faixa (sobre --primary-text) */

.tam__knob {
  position: absolute;
  top: 50%;
  left: calc(14px + (100% - 28px) * var(--p, 50) / 100);
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--mark);              /* --surface sobre a folha (--surface) precisa do contorno (CD26) */
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.tam__slider.is-pronto .tam__knob,
.tam__slider.is-pronto .tam__faixa { transition: left 160ms var(--ease-out), width 160ms var(--ease-out); }
.tam__slider.is-arrastando .tam__knob,
.tam__slider.is-arrastando .tam__faixa { transition: none; }
.tam__slider:focus-visible .tam__knob { box-shadow: var(--shadow-md), var(--ring); }

@media (prefers-reduced-motion: reduce) {
  .tam__slider.is-pronto .tam__knob, .tam__slider.is-pronto .tam__faixa { transition: none; }
}