/* Checkbox e Switch — o que os cards não trazem (components/forms/{checkbox,switch}.card.html,
 * bundle 8cd72241). Os estilos vêm dos arquivos gerados (design/static/css/widgets/checkbox.css
 * e switch.css); aqui não há valor de design novo, só a marcação única servindo os formatos, o
 * erro do Checkbox.jsx e o movimento reduzido refeito sem a moldura `.scheme` do card. Carregado
 * depois dos gerados: com a mesma especificidade, a ordem decide. */

/* ── Checkbox: a marca de cada estilo ────────────────────────────────────────────
   O card escolhe o desenho no script (ICONS: check, pen, x; minus no indeterminado). Aqui a
   marcação traz os quatro e o estilo mostra o seu — Caneta o traço à mão, Rabisco o X. */
.sg-cbx .sg-cbx__tick > svg{ display:none; }
.sg-cbx .sg-cbx__tick > .sg-cbx__mk--check{ display:block; }
@scope ([data-checkbox="pen"]) to ([data-checkbox]) {
  :scope .sg-cbx .sg-cbx__tick > .sg-cbx__mk--check{ display:none; }
  :scope .sg-cbx .sg-cbx__tick > .sg-cbx__mk--pen{ display:block; }
}
@scope ([data-checkbox="scribble"]) to ([data-checkbox]) {
  :scope .sg-cbx .sg-cbx__tick > .sg-cbx__mk--check{ display:none; }
  :scope .sg-cbx .sg-cbx__tick > .sg-cbx__mk--x{ display:block; }
}
/* indeterminado: o traço, em qualquer estilo (o `:indeterminate` vem de js/widgets/choice.js) */
.sg-cbx input:indeterminate + .sg-cbx__box .sg-cbx__tick > svg{ display:none; }
.sg-cbx input:indeterminate + .sg-cbx__box .sg-cbx__tick > .sg-cbx__mk--minus{ display:block; }
/* erro — Checkbox.jsx (`.sg-choice.is-error .sg-box`) */
.sg-cbx.is-error .sg-cbx__box{ border-color:var(--negative); }

/* ── Switch: o conteúdo dos encaixes ─────────────────────────────────────────────
   Rótulo põe I / O nos encaixes da trilha e Tema põe sol e lua; os outros os deixam vazios
   (o card monta cada um com o seu conteúdo). Ícone usa os ícones do knob, que o próprio card
   mostra e esconde. */
.sg-switch .sg-switch__track .sg-switch__slot > *{ display:none; }
@scope ([data-switch="label-io"]) to ([data-switch]) {
  :scope .sg-switch .sg-switch__slot > .sg-switch__letter{ display:inline; }
}
@scope ([data-switch="side-icons"]) to ([data-switch]) {
  :scope .sg-switch .sg-switch__slot > svg{ display:block; }
}

/* ── Switch: o curso do knob nas animações Carimbo, Salto e Dobra ───────────────
   As três animações do card terminam em translateX(16px), o curso do formato Padrão. Nos
   formatos de trilha maior ou menor o knob pularia ao fim da animação para o curso do formato.
   As mesmas animações, com o curso lido do formato (desvio registrado no design/README.md). */
.sg-switch{ --sg-switch-travel:16px; }
@scope ([data-switch="label-io"]) to ([data-switch]) { :scope .sg-switch{ --sg-switch-travel:24px; } }
@scope ([data-switch="knob-icon"]) to ([data-switch]) { :scope .sg-switch{ --sg-switch-travel:18px; } }
@scope ([data-switch="outline"]) to ([data-switch]) { :scope .sg-switch{ --sg-switch-travel:15px; } }
@scope ([data-switch="side-icons"]) to ([data-switch]) { :scope .sg-switch{ --sg-switch-travel:20px; } }
@scope ([data-switch="compact"]) to ([data-switch]) { :scope .sg-switch{ --sg-switch-travel:14px; } }
@scope ([data-switch-fx="stamp"]) to ([data-switch-fx]) {
  :scope .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ animation-name:sg-switch-stamp; }
}
@scope ([data-switch-fx="hop"]) to ([data-switch-fx]) {
  :scope .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ animation-name:sg-switch-hop; }
}
@scope ([data-switch-fx="flip"]) to ([data-switch-fx]) {
  :scope .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ animation-name:sg-switch-flip; }
}
@keyframes sg-switch-stamp{ 0%{ transform:translateX(0) scale(1); } 50%{ transform:translateX(var(--sg-switch-travel)) scale(1.18,.82); } 100%{ transform:translateX(var(--sg-switch-travel)) scale(1); } }
@keyframes sg-switch-hop{ 0%{ transform:translateX(0) scale(1,1); } 30%{ transform:translateX(2px) scale(1.2,.78); } 60%{ transform:translateX(var(--sg-switch-travel)) translateY(-5px) scale(.82,1.2); } 100%{ transform:translateX(var(--sg-switch-travel)) scale(1,1); } }
@keyframes sg-switch-flip{ 0%{ transform:translateX(0) rotateY(0); } 100%{ transform:translateX(var(--sg-switch-travel)) rotateY(360deg); } }

/* ── Movimento reduzido ─────────────────────────────────────────────────────────
   O do card para tudo dentro da moldura `.scheme` da demonstração e deixa as marcas no estado
   final; o mesmo, com o próprio controle como moldura. */
@media (prefers-reduced-motion: reduce){
  :is(.sg-cbx, .sg-switch), :is(.sg-cbx, .sg-switch)::before, :is(.sg-cbx, .sg-switch)::after,
  :is(.sg-cbx, .sg-switch) *, :is(.sg-cbx, .sg-switch) *::before,
  :is(.sg-cbx, .sg-switch) *::after{ animation:none !important; transition-duration:.001ms !important; }
  @scope ([data-checkbox="pen"]) to ([data-checkbox]) {
    :scope .sg-cbx__tick .sg-cbx__pen{ stroke-dashoffset:0 !important; }
  }
  @scope ([data-checkbox="scribble"]) to ([data-checkbox]) {
    :scope .sg-cbx__tick .sg-cbx__x1, :scope .sg-cbx__tick .sg-cbx__x2{ stroke-dashoffset:0 !important; }
  }
  @scope (:is([data-checkbox="fill"], [data-checkbox-format="fill"])) to (:is([data-checkbox], [data-checkbox-format])) {
    :scope .sg-cbx input:checked + .sg-cbx__box::before,
    :scope .sg-cbx input:indeterminate + .sg-cbx__box::before{ transform:scale(1.8) !important; border-radius:0 !important; }
  }
  @scope (:is([data-switch-fx="ink"], [data-switch-fx="fill"])) to ([data-switch-fx]) {
    :scope .sg-switch input:checked + .sg-switch__track :is(.sg-switch__ink, .sg-switch__fill){ transform:scaleX(1) !important; }
  }
}

/* ── Piso de toque (PROVISÓRIO (ADR-009)) ───────────────────────────────────────
   O bundle 8cd72241 não põe piso de 44 px na Checkbox nem no Switch; o do DS (responsive.css,
   `:root .sg-choice`) mira uma classe que nenhum dos dois usa. Só amplia a área clicável do rótulo
   inteiro, sem mudar o desenho; nas duas medidas, como o `.sg-choice` (o interruptor sem texto tem 36 px
   de largura). Sai quando o bundle entregar o piso (pendência no design/README.md). */
@media (max-width: 599px), (pointer: coarse){
  .sg-cbx, label.sg-switch{ min-height:var(--hit-min); min-width:var(--hit-min); }
}