/* segmentado.css — segmentado de opções mutuamente exclusivas (radiogroup com indicador deslizante).
 *
 * Nasceu como o controle de tema (Claro · Escuro · Auto) e serve também à fonte do texto bíblico
 * (Lora · DM Sans). Especificação: design-system-v4/canonical/features/tema-controle/tema-controle-spec.md
 * (§2, §3, §4), com DECISOES-DE-IMPLEMENTACAO.md por cima. Cores SÓ de design-system/colors_and_type.css.
 *
 * Estrutura (montada por js/segmentado.js):
 *   .seg
 *     ├─ .seg__trilha [role=radiogroup]   ← o anel de foco fica NESTE elemento
 *     │    ├─ .seg__indicador             ← a "pílula" que desliza (--surface + --shadow-sm + contorno --mark)
 *     │    └─ button.seg__opcao × N       [role=radio]
 *     ├─ .seg__apoio                      ← rótulo de apoio (opcional)
 *     └─ .seg__anuncio                    ← região aria-live, só para leitor de tela
 *
 * Medidas: segmento 44px no mobile / 38px no desktop (≥ 768px, o mesmo corte da sidebar). */

.seg {
  --seg-h: 44px;          /* altura do segmento */
  --seg-fs: 13.5px;       /* texto */
  --seg-ic: 16px;         /* ícone */
  --seg-gap: 6px;         /* ícone ↔ texto */
  width: 100%;
}
@media (min-width: 768px) {
  .seg { --seg-h: 38px; --seg-fs: 13px; --seg-ic: 15px; --seg-gap: 5px; }
}

/* Trilha: N colunas iguais (--seg-n, posto pelo JS); o indicador é irmão absoluto e desliza por translateX. */
.seg__trilha {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--seg-n, 3), 1fr);
  padding: var(--space-1);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
/* Foco de teclado no GRUPO (nunca outline por segmento). A classe é posta pelo JS só quando o foco
 * é `:focus-visible` — clique de mouse/toque não acende o anel. */
.seg__trilha.is-foco { box-shadow: var(--ring); }

/* Pílula do selecionado. Decisão g (Sérgio, 21/09/2026): contorno de 1px em --mark. Sem ele a pílula
 * (--surface) sobre a trilha (--surface-2) dava 1,09:1 no claro e 1,12:1 no escuro, e o ESTADO
 * selecionado precisa de 3:1 (WCAG 1.4.11). --mark é o contorno perceptível do DS (>= 3:1). */
.seg__indicador {
  position: absolute;
  top: var(--space-1);
  bottom: var(--space-1);
  left: var(--space-1);
  box-sizing: border-box;
  width: calc((100% - 2 * var(--space-1)) / var(--seg-n, 3));
  background: var(--surface);
  border: 1px solid var(--mark);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transform: translateX(calc(var(--i, 0) * 100%));
  pointer-events: none;
}
/* Só anima depois da primeira pintura (o JS põe .is-pronto) — abrir a tela não faz o indicador
 * "viajar" até a posição. 160ms --ease-out, nunca spring. */
.seg__trilha.is-pronto .seg__indicador {
  transition: transform 160ms var(--ease-out);
}

.seg__opcao {
  position: relative;               /* acima do indicador */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--seg-gap);
  min-width: 0;
  height: var(--seg-h);
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--seg-fs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--fg-2);
  cursor: pointer;
  outline: none;                    /* o anel está na trilha (.is-foco) — ver acima */
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms var(--ease-out);
}
.seg__opcao[aria-checked="true"] { color: var(--primary-text); }
@media (hover: hover) {
  .seg__opcao[aria-checked="false"]:hover { color: var(--fg); }
}
/* Opção que mostra a própria fonte (seletor Lora · DM Sans): o rótulo é a amostra. */
.seg__opcao--lora { font-family: var(--font-read); font-size: 15px; }

.seg__opcao svg {
  flex: none;
  width: var(--seg-ic);
  height: var(--seg-ic);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seg__apoio {
  margin: var(--space-3) 0 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg-3);
  text-wrap: pretty;                /* evita a palavra órfã ("celular.") na 2ª linha do mobile */
}
.seg__apoio:empty { display: none; }

/* Região aria-live: existe para o leitor de tela, invisível na tela. */
.seg__anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Com prefers-reduced-motion não há deslize nem transição de cor. (A troca do TEMA em si é
 * instantânea pelo lado do set-theme.js.) */
@media (prefers-reduced-motion: reduce) {
  .seg__trilha, .seg__trilha.is-pronto .seg__indicador, .seg__opcao {
    transition: none;
  }
}