/* Opção selecionável. Lista, grade e grade compacta: rádio ou check visível; marcada = borda de 2 px + selected-subtle + marcador.
   Exceção da densidade segmentada (#279), no fim do bloco: sem marcador visível, a marcada se distingue pela
   borda, pelo fundo e pelo título em negrito. */

.option-group {
  min-width: 0;
  margin: var(--space-4) 0;
  padding: 0;
  border: 0;
}

.option-group > legend {
  margin: 0 0 var(--space-2);
  padding: 0;
}

/* Legenda que é título de seção (heading: :h3), como “Quem atende” (#547). */
.option-group > legend > h3 {
  margin: var(--space-2) 0 0;
}

.option-group > .field-help {
  margin: 0 0 var(--space-2);
}

.option-list {
  display: grid;
  gap: var(--space-2);
}

.option-group-grid .option-list {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
}

.option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-min-height);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  cursor: pointer;
}

.option-group-grid .option {
  gap: var(--space-2);
  padding-inline: var(--space-3);
}

/* Uma palavra longa quebra em vez de alargar a página, com a fonte mínima do navegador em 32 px (#619). */
.option-title,
.option-description {
  overflow-wrap: anywhere;
}

/* Grade compacta (#324): muitas opções de título curto, como as horas cheias; quatro por linha a partir de 360 px
   (três em 320 px), com o marcador visível e o conteúdo centrado. */
.option-group-compact .option-list {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}

.option-group-compact .option {
  grid-template-columns: 20px auto;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: var(--space-1);
  font-variant-numeric: tabular-nums;
}

/* Densidade segmentada (#279), exceção ao marcador visível: poucas opções lado a lado numa trilha. A marcada
   tem a borda de 2 px em selected, o fundo selected-subtle e o título em negrito; o rádio continua real,
   focável e operado pelas setas, e o foco contorna a opção inteira. Cada coluna cabe o título inteiro, em negrito,
   numa linha: marcar outra opção não muda a altura da trilha (#418). */
.option-group-segmented .option-list {
  grid-auto-columns: minmax(max-content, 1fr);
  grid-auto-flow: column;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
}

.option-group-segmented .option {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: var(--space-2);
  border-color: transparent;
  border-radius: var(--radius-field);
  text-align: center;
}

.option-group-segmented .option-title {
  white-space: nowrap;
}

.option input {
  accent-color: var(--selected);
}

.option input:focus-visible {
  outline: none;
}

.option:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.option:has(input:checked) {
  border-color: var(--selected);
  box-shadow: inset 0 0 0 1px var(--selected);
  background: var(--selected-subtle);
}

.option:has(input[aria-invalid="true"]) {
  border-color: var(--error);
}

.option-text {
  display: grid;
}

.option:has(input:checked) .option-title {
  font-weight: 700;
}

.option-description {
  color: var(--muted);
  font-size: var(--font-size-support);
}

@media (forced-colors: active) {
  .option {
    border-color: ButtonText;
  }

  .option:has(input:checked) {
    outline: 2px solid Highlight;
  }
}

/* Seções de opções (ex.: um dia de horários): título curto acima da grade. */
.option-section-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--font-size-body);
}

.option:has(input:disabled) {
  color: var(--muted);
  cursor: not-allowed;
}

/* Opção indisponível com motivo (#547), como quem está ocupado na lista de quem atende: fica no lugar, sem controle,
   com a borda tracejada, o nome e o motivo. */
.option-unavailable {
  grid-template-columns: minmax(0, 1fr);
  border-style: dashed;
  background: transparent;
  cursor: default;
}

/* Segmentada: o rádio invisível cobre a opção inteira e recebe o toque, as setas e o foco. */
.option-group-segmented .option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Opção com ajuste (#419): a opção com check num item que leva, abaixo dela, o que a marcada abre. O item faz a borda e
   o estado de marcado; a opção dentro dele fica sem borda. O "Ajustar" (summary do details) fica no canto da opção. */
.option-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
}

/* O item que já existe fora da lista (#480): sem borda, na superfície. */
.option-item:has(> a.option) {
  border-color: transparent;
  background: var(--surface);
}

.option-item:has(> .option input:checked),
.option-item[data-checked] {
  border-color: var(--selected);
  box-shadow: inset 0 0 0 1px var(--selected);
  background: var(--selected-subtle);
}

/* Com erro, a borda vai a error, também no item marcado. */
.option-item[data-invalid]:has(> .option input),
.option-item[data-invalid][data-checked] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

/* O canto do "Ajustar" fica reservado mesmo antes de marcar: marcar não muda a altura nem quebra o título. */
.option-item > .option:is(label, div, a) {
  padding-inline-end: calc(var(--space-12) + var(--space-8));
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

.option-item > .option:is(label, div, a) .option-title {
  font-weight: 700;
}

.option-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-field);
  background: var(--selected);
  color: var(--selected-subtle);
}

.option-mark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 3;
}

/* Item que já existe fora da lista (#480), como o serviço que já está na página: sem caixa nem borda, um link para ele,
   com o marcador em sucesso e a seta de abrir. */
.option-item > a.option {
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  padding-inline-end: var(--space-4);
  color: var(--text);
  text-decoration: none;
}

.option-item > a.option:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.option-item > a.option .option-mark {
  background: transparent;
  color: var(--success);
}

.option-open {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}

.option-item > details > summary {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-end: var(--space-4);
  display: flex;
  align-items: center;
  min-height: var(--control-min-height);
  cursor: pointer;
  list-style: none;
}

.option-item > details > summary::-webkit-details-marker {
  display: none;
}

/* Até 480 px o canto de 80 px deixa o texto com 104 px a 320 px (#619, S01): o "Ajustar" vira uma linha própria sob o
   texto, alinhada ao título (borda do item, marcador, ladrilho de 40 px e os espaços), com o alvo do controle, e o título usa a
   largura toda. Só o item marcado tem o details, então nenhum título reflui ao marcar. */
@media (width <= 480px) {
  .option-item > .option:is(label, div) {
    padding-inline-end: var(--space-4);
  }

  .option-item > details > summary {
    --text-start: calc(1px + var(--space-4) + 20px + var(--space-3) + 40px + var(--space-3));

    position: static;
    margin: calc(var(--space-3) * -1) 0 0;
    padding: 0 var(--space-4) var(--space-2) var(--text-start);
  }
}

.option-item > details[open] > :not(summary) {
  margin-inline: var(--space-4);
}

.option-item > details[open] > :last-child {
  margin-block-end: var(--space-4);
}

@media (forced-colors: active) {
  .option-item {
    border-color: ButtonText;
  }

  .option-item > .option:is(label, div) {
    border-style: none;
    outline: none;
  }

  .option-item:has(> .option input:checked),
  .option-item[data-checked] {
    outline: 2px solid Highlight;
  }

  .option-item[data-invalid]:has(> .option input),
  .option-item[data-invalid][data-checked] {
    outline-style: dashed;
  }
}