/* A CHAVE DE LIGAR E DESLIGAR da loja (18/10, chave.js): a mesma no formulario do pedido (depois do style.css) e na
   pagina de ajuste (depois do quem-fala.css). Do dono: "seria bom as duas (ficha do pedido e interface de ajustes) ter
   a mesma chave". O desenho e o das chaves do painel (`button.onoff`): a palavra do estado escrita na chave, a bolinha
   do lado oposto; ligada na cor da marca, desligada em cinza. As cores proprias (`--chave-*`) porque as duas folhas
   chamam os tons de nomes diferentes; so a marca (`--brand`) e a mesma nas duas. */
:root {
  --chave-on: var(--brand, #2f6f4f);
  --chave-off: #6b6b6b;
  --chave-ink: #ffffff;
  --chave-knob: #ffffff;
  --chave-foco: var(--brand, #2f6f4f);
}
@media (prefers-color-scheme: dark) {
  :root {
    --chave-off: #8a8a8a;
    --chave-ink: #0d0f0d;
    --chave-knob: #eceae6;
  }
}

.chave-bloco { margin: 0 0 18px; }
.chave-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.chave-rotulo { font-weight: 600; }
.chave-dica {
  display: block;
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted, var(--fraco, #6b6b6b));
}

/* `button.chave`, e nao so `.chave`: a folha da loja estica todo botao a 100% e o pinta de verde. A largura cresce com
   a palavra (uma traducao mais longa que "Sim" cabe), nunca menos que a do painel. */
button.chave {
  --chave-h: 30px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  min-width: 76px;
  height: var(--chave-h);
  min-height: 0;
  margin: 0;
  /* O espaco da bolinha segue a direcao do texto, como a propria bolinha (`inset-inline-*`) e a palavra
     (`justify-content`): com `left`/`right` fixos, numa pagina da direita para a esquerda (arabe, persa, urdu,
     hebraico) o espaco ficava do lado errado e a bolinha cobria a palavra (achado da revisao, 18/10). */
  padding-block: 0;
  padding-inline: calc(var(--chave-h) + 2px) 12px;
  border: 0;
  border-radius: 999px;
  background: var(--chave-off);
  color: var(--chave-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
button.chave[aria-checked="true"] {
  background: var(--chave-on);
  justify-content: flex-start;
  padding-inline: 12px calc(var(--chave-h) + 2px);
}
.chave-bola {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: calc(var(--chave-h) - 6px);
  height: calc(var(--chave-h) - 6px);
  border-radius: 50%;
  background: var(--chave-knob);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
button.chave[aria-checked="true"] .chave-bola {
  inset-inline-start: auto;
  inset-inline-end: 3px;
}
/* A palavra do estado, e so ela: as duas vem do servidor, e o CSS mostra a certa. */
button.chave[aria-checked="true"] .chave-nao,
button.chave:not([aria-checked="true"]) .chave-sim { display: none; }
button.chave:focus-visible { outline: 3px solid var(--chave-foco); outline-offset: 2px; }
button.chave:disabled { opacity: 0.55; cursor: default; }
/* O DEGRAU (18/10, chave.js `Chave.degrau`): [-] 20% [+], o volume da voz original por baixo, na pagina de ajuste e
   no formulario do pedido (do dono: "devemos oferecer o mesmo design na hora de fazer o pedido e na interface de
   ajustes"). Do dono: "fazer 20 como medio e diminuir (ou aumentar) 5 a cada toque". Os botoes redondos, da altura da chave e nas
   cores dela (a marca; o cinza quando desligados, nas pontas); o numero entre eles, em algarismos da mesma largura
   (20% e 25% nao mexem os botoes). `button.chave-passo`, e nao so a classe, pelo mesmo motivo de `button.chave`. Da
   direita para a esquerda a linha vira sozinha (o flex segue a direcao do texto): o "mais baixa" fica no comeco da
   linha nas duas direcoes. */
.chave-nivel {
  --chave-h: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 8px 0 0;
}
.chave-nivel[hidden] { display: none; }
.chave-passos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
button.chave-passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chave-h);
  min-width: 0;
  height: var(--chave-h);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--chave-on);
  color: var(--chave-ink);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
button.chave-passo:disabled { background: var(--chave-off); opacity: 0.45; cursor: default; }
button.chave-passo:focus-visible { outline: 3px solid var(--chave-foco); outline-offset: 2px; }
.chave-valor {
  min-width: 3.2em;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* No celular (dedo, nao mouse), a altura minima para o dedo acertar. */
@media (pointer: coarse) {
  button.chave, .chave-nivel { --chave-h: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  button.chave, button.chave-passo { transition: none; }
}