/* Chips e controle segmentado. O selecionado tem um polegar que desliza com mola (ver ui/escolha.js). */
.escolha { position: relative; isolation: isolate; }
.escolha-chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.escolha-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.escolha-segmentado {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: .25rem;
  border: 1px solid var(--fio-campo);
  border-radius: var(--r-m);
  background: var(--papel);
}

.polegar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: var(--r-p);
  background: var(--grafite);
  opacity: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.escolha-segmentado .polegar { border-radius: .5625rem; }

.opcao {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .5rem var(--e4);
  border: 1px solid var(--fio-campo);
  border-radius: var(--r-p);
  background: var(--papel);
  color: var(--grafite);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition: color 200ms var(--ease-suave), border-color 200ms var(--ease-suave), background-color 200ms var(--ease-suave);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .opcao:hover { border-color: var(--grafite); } }
.opcao[aria-checked="true"] { border-color: transparent; background: transparent; color: var(--papel); }
.opcao:active { transition-duration: 60ms; }

.escolha-segmentado .opcao { border-color: transparent; background: transparent; min-height: 3rem; }
.escolha-segmentado .opcao[aria-checked="true"] { color: var(--papel); }
@media (hover: hover) { .escolha-segmentado .opcao:hover:not([aria-checked="true"]) { background: rgba(66, 66, 60, .06); } }

/* Chip de ação (sugestões de nicho, sugestões de próximo passo): não é escolha única, é um atalho */
.atalho {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.75rem;
  padding: 0 var(--e4) 0 .75rem;
  border: 1px solid var(--fio-campo);
  border-radius: var(--r-pilula);
  background: var(--papel);
  color: var(--grafite);
  font-size: .9375rem;
  font-weight: 600;
  transition: border-color 160ms var(--ease-suave), background-color 160ms var(--ease-suave), transform 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.atalho svg { width: 1rem; height: 1rem; flex: none; color: var(--grafite-claro); transition: transform 280ms var(--ease); }
@media (hover: hover) {
  .atalho:hover:not([aria-disabled="true"]) { border-color: var(--grafite); background: var(--folha); }
  .atalho:hover:not([aria-disabled="true"]) svg { transform: rotate(90deg); }
}
.atalho:active:not([aria-disabled="true"]) { transform: scale(.96); }
.atalho[aria-disabled="true"] { border-style: dashed; color: var(--grafite-claro); cursor: default; }
.atalhos { display: flex; flex-wrap: wrap; gap: var(--e2); }
.atalho.adicionado svg { color: var(--certo); }