/* ==========================================================================
   EVM Reboques — "Planeje seu reboque" (configurador.html) · v2.2
   DESIGN-SYSTEM.md §3.7, §8.5 e §8.7. Complementa styles.css §26.10
   (.configurator, .config-step, .swatch, .option-toggle, .config-summary),
   §26.2–26.3 (.scene, .scene-controls) e §27 (selos, .photo, .gallery__count).

   v2.2 (transições entre etapas, fim do arquivo): etapa concluída troca o
   número por um visto (200 ms); botões "Continuar"; scroll-margin das etapas;
   View Transitions só nos elementos que o script nomeia (a raiz fica de fora);
   esmaecimento de 180 ms sem a API; esmaecimento cruzado do pôster; barra de
   carga com largura animada (300 ms). Movimento reduzido: tudo imediato.

   Layout
   · ≥ 1024: cena 3D (~60 %) à esquerda, fixa ao rolar: a cena ocupa a altura
     da janela menos o cabeçalho, a barra da cena e o aviso logo abaixo dela;
     etapas à direita (~40 %), rolando com a página.
   · < 1024: cena no topo, no fluxo (sem grudar: com o teclado do celular
     aberto, uma cena fixa esconderia os campos de peso e observações);
     etapas abaixo.
   A barra da cena (.cfg-stagebar) fica fora da cena: "Explorar em 3D"
   (celular), "Carregando…", vistas + girar/aproximar, ou o aviso de 3D
   indisponível. A altura é reservada para a troca de estado não empurrar
   as etapas. Dentro da cena fica só o selo "Representação 3D".

   v2.6 (docs/UX-2.6.md §1 e §6): sob a barra, o aviso de representação
   virtual (.cfg-stage__disclaimer, texto fixo de uma ou duas linhas: na
   coluna fixa ≥ 1024 ele sai da altura da cena, não da página). As regras de
   View Transitions da raiz valem só com a classe .cfg-vt no <html> (posta
   pelo script durante a transição desta página): fora dela vale a transição
   entre páginas do styles.css.

   v2.4 (produção, WhatsApp em primeiro lugar): a etapa 2 tem dois modos
   (.cfg-load[data-mode]): "consulta" (ficha técnica sob consulta: só o peso
   informado e o aviso de que a EVM indica a capacidade no orçamento) e
   "calculo" (ficha validada: percentual + barra). No resumo, o botão verde
   "Enviar pelo WhatsApp" (.btn--whatsapp, styles.css) é a ação principal,
   com uma dica curta embaixo; o selo .sob-consulta vem de styles.css.
   ========================================================================== */

/* Cabeçalho da página ------------------------------------------------------ */
.cfg-head {
  display: grid;
  gap: 12px;
  margin: 16px 0 clamp(24px, 4vw, 40px);
}

.cfg-head h1 {
  max-width: 20ch;
}

/* Link antigo (modelo fora da linha ou id da v2): aviso com barra de acento */
.cfg-notice {
  justify-self: start;
  max-width: 64ch;
  padding: 10px 14px 10px 17px;
  background-color: var(--accent-tint);
  border-radius: var(--radius);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.45;
}

/* Rascunho salvo + "Recomeçar" */
.cfg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}

/* --fg-3 sobre branco: 6,2:1 */
.cfg-draft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--fg-3);
  font-size: .875rem;
  line-height: 1.45;
}

/* Ponto de estado: vazado (nada salvo), cheio verde (salvo/recuperado),
   anel vermelho (armazenamento bloqueado) — forma, além da cor */
.cfg-draft::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
}

.cfg-draft[data-state="saved"]::before,
.cfg-draft[data-state="restored"]::before {
  background-color: var(--ok);
  border-color: var(--ok);
}

.cfg-draft[data-state="blocked"]::before {
  border-width: 2.5px;
  border-color: var(--error);
}

.cfg-restart {
  flex: none;
}

/* Cena 3D (cena + barra + aviso) -------------------------------------------- */

/* A superfície do OrbitControls (criada pelo motor) fica acima do canvas e
   abaixo do selo (4) */
.cfg .scene__surface {
  z-index: 3;
}

/* < 1024: cena no fluxo, no topo; a cena pode ser maior que a fixa da v2 */
@media (max-width: 1023.98px) {
  .cfg .configurator__stage {
    position: relative;
    top: auto;
    z-index: auto;
    display: grid;
    gap: 10px;
    margin-block: 0;
    padding-block: 0;
    background-color: transparent;
  }

  .cfg .configurator__stage > .scene {
    width: 100%;
    height: min(calc((100vw - 2 * var(--gutter)) * .75), 60vh, 560px);
    height: min(calc((100vw - 2 * var(--gutter)) * .75), 60svh, 560px);
    min-height: 220px;
    max-height: none;
    aspect-ratio: auto;
  }

  html:has(.cfg .configurator) {
    scroll-padding-top: calc(var(--header-top) + var(--header-h) + 12px);
  }
}

/* ≥ 1024: cena fixa à esquerda (cena + barra + aviso numa coluna de altura
   fixa: a cena é quem cede a altura do aviso) */
@media (min-width: 1024px) {
  .cfg .configurator {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: clamp(28px, 3vw, 48px);
  }

  .cfg .configurator__stage {
    position: sticky;
    top: calc(var(--header-top) + var(--header-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(100vh - var(--header-top) - var(--header-h) - 40px);
    height: calc(100svh - var(--header-top) - var(--header-h) - 40px);
    min-height: 460px;
    max-height: 900px;
    margin-block: 0;
    padding-block: 0;
    background-color: transparent;
  }

  .cfg .configurator__stage > .scene {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 280px;
    max-height: none;
    aspect-ratio: auto;
  }

  .cfg .cfg-stagebar,
  .cfg .cfg-stage__disclaimer {
    flex: none;
  }

  html:has(.cfg .configurator) {
    scroll-padding-top: calc(var(--header-top) + var(--header-h) + 16px);
  }
}

/* v2.6: aviso de representação virtual (EVMSite.copy3d.disclaimer) sob a
   barra da cena — visível perto do 3D grande, fora do canvas. .note de
   styles.css (filete de acento, --fg-3: 6,2:1 sobre branco); sem a margem
   de cima (o gap da coluna já separa). */
.cfg .cfg-stage__disclaimer {
  max-width: 72ch;
  margin: 0;
}

/* Barra da cena: altura reservada (uma linha; duas abaixo de 900 px, onde
   vistas e câmera quebram em duas linhas) */
.cfg-stagebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 8px 12px;
  min-width: 0;
  min-height: 54px;
}

@media (max-width: 899.98px) {
  .cfg-stagebar {
    min-height: 112px;
  }
}

.cfg-stagebar__start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
}

.cfg-stagebar__start > .btn {
  flex: none;
}

/* --fg-2 sobre branco: 9,2:1 */
.cfg-stagebar__text {
  min-width: 0;
  max-width: 56ch;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.45;
}

.cfg-stagebar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.cfg-stagebar .scene-controls--static {
  box-shadow: 0 1px 2px rgba(1, 32, 112, .06);
}

/* Telas estreitas: as quatro vistas cabem em ~312 px */
@media (max-width: 599.98px) {
  .cfg-stagebar__controls {
    justify-content: flex-start;
  }

  .cfg-stagebar .cfg-views .scene-controls__btn--text {
    padding-inline: 8px;
    font-size: .75rem;
  }
}

/* Etapa 1: aplicação e modelo (fotos reais) --------------------------------- */
.cfg-photo-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--fg-3);
  font-size: .8125rem;
  line-height: 1.45;
}

.cfg-apps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

@media (min-width: 480px) {
  .cfg-apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* < 480: cartão baixo (foto à esquerda, textos à direita, rádio no fim);
   ≥ 480: foto em cima, textos embaixo, rádio no canto da foto */
.cfg-app {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 10px 44px 10px 10px;
  background-color: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

/* Indicador de rádio (forma, além da cor) */
.cfg-app::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background-color: var(--paper);
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  pointer-events: none;
}

.cfg-app__media {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background-color: var(--paper-2);
  border-radius: 8px;
}

.cfg-app__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cfg-app__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

.cfg-app__icon > svg {
  width: 50%;
  height: auto;
  max-height: 80%;
}

.cfg-app__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

/* Marinho 14,6:1 sobre branco; 13,8:1 sobre --accent-wash */
.cfg-app__name {
  color: var(--brand-navy);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* --ink-3: 6,2:1 sobre branco; 5,7:1 sobre --accent-wash */
.cfg-app__model {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.cfg-app__text {
  color: var(--ink-2);
  font-size: .8125rem;
  line-height: 1.4;
}

@media (min-width: 480px) {
  .cfg-app {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 12px;
    padding: 10px 10px 14px;
  }

  .cfg-app::after {
    top: 18px;
    right: 18px;
    margin-top: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
  }

  .cfg-app__body {
    padding-inline: 4px;
  }
}

.cfg-app:hover {
  border-color: var(--ink-3);
}

/* Selecionado: classe .is-checked (script) e :has() como reforço — regras
   separadas, para o :has() sem suporte não derrubar a outra */
.cfg-app.is-checked {
  background-color: var(--accent-wash);
  border-color: var(--brand-blue);
  box-shadow: inset 0 0 0 1px var(--brand-blue);
}

.cfg-app:has(input:checked) {
  background-color: var(--accent-wash);
  border-color: var(--brand-blue);
  box-shadow: inset 0 0 0 1px var(--brand-blue);
}

.cfg-app.is-checked::after {
  border: 5px solid var(--brand-blue);
}

.cfg-app:has(input:checked)::after {
  border: 5px solid var(--brand-blue);
}

.cfg-app.has-focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

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

/* Etapa 2: o que você vai levar? -------------------------------------------- */
.cfg-load-fields {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.cfg-load-fields:empty {
  display: none;
}

.cfg-subfield {
  min-width: 0;
}

/* Quantidade de motos: segmentado (rádios) */
.cfg-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  background-color: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) + 4px);
}

.cfg-seg__opt {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.cfg-seg__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cfg-seg__label {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 16px;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.cfg-seg__opt:hover .cfg-seg__label {
  background-color: var(--paper-3);
  color: var(--ink);
}

/* Marcado: tinta cheia (≈ 14:1), como as abas de vista */
.cfg-seg__input:checked + .cfg-seg__label {
  background-color: var(--ink);
  color: var(--paper);
}

.cfg-seg__input:focus-visible + .cfg-seg__label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Peso em kg (unidade dentro do campo, só visual: o rótulo diz "em kg") */
.cfg-kg {
  position: relative;
  width: 100%;
  max-width: 13rem;
}

.cfg-kg__input {
  padding-right: 52px;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}

.cfg-kg__unit {
  position: absolute;
  top: 50%;
  right: 16px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Resultado: "Carga útil usada: N%" + barra + estado (só com a ficha
   validada) ou, sob consulta, o peso informado + o aviso. Sobre --paper-2:
   --ink-2 8,3:1 · --ink-3-panel 6,4:1 · --ok 5,9:1 · âmbar #7A4A00 6,8:1 ·
   --error 5,9:1. Barra contra o trilho (--paper-3): azul 6,7:1, âmbar
   #8A5300 5,1:1, vermelho 5,4:1. O estado vem também em texto e ícone. */
.cfg-load {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px 18px 18px;
  background-color: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.cfg-load__calc {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* Sob consulta: o peso informado em destaque e o aviso logo abaixo (sem filete) */
.cfg-load[data-mode="consulta"] .cfg-load__detail {
  color: var(--ink);
  font-weight: 600;
}

.cfg-load[data-mode="consulta"] .cfg-load__note {
  padding-top: 0;
  border-top: 0;
}

.cfg-load__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.cfg-load__label {
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.cfg-load__pct {
  color: var(--brand-navy);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cfg-meter {
  position: relative;
  height: 12px;
  overflow: hidden;
  background-color: var(--paper-3);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(15, 26, 51, .16);
}

.cfg-meter__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background-color: var(--brand-blue);
  border-radius: inherit;
  transition: width 300ms var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.cfg-load[data-level="near"] .cfg-meter__fill {
  background-color: #8A5300;
}

/* Acima de 100 %: vermelho com listras (padrão, além da cor) */
.cfg-load[data-level="over"] .cfg-meter__fill {
  background-color: var(--error);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .32) 0 5px, rgba(255, 255, 255, 0) 5px 10px);
}

.cfg-load__detail {
  color: var(--ink-2);
  font-size: .875rem;
  line-height: 1.5;
}

.cfg-load__status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ok);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.45;
}

.cfg-load__status::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cfg-load[data-level="near"] .cfg-load__status {
  color: #7A4A00;
}

.cfg-load[data-level="near"] .cfg-load__status::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 4.6v4.2' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.3' r='1' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 4.6v4.2' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.3' r='1' fill='%23000'/%3E%3C/svg%3E");
}

.cfg-load[data-level="over"] .cfg-load__status {
  color: var(--error);
}

.cfg-load[data-level="over"] .cfg-load__status::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l6.6 12H1.4z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6.2v3.6' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.8' r='1' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l6.6 12H1.4z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6.2v3.6' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.8' r='1' fill='%23000'/%3E%3C/svg%3E");
}

/* Nota da etapa 2 (sempre visível): estimativa ou "a EVM indica no orçamento" */
.cfg-load__note {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-3-panel);
  font-size: .8125rem;
  line-height: 1.5;
}

/* Etapas 3 e 4 --------------------------------------------------------------- */
.cfg .config-step > .note {
  margin-top: 0;
}

.cfg-obs {
  margin-top: 4px;
}

.cfg-obs .textarea {
  min-height: 6rem;
}

.cfg-obs__count {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

/* Etapa 5: resumo técnico --------------------------------------------------- */
.cfg .config-summary .note {
  margin-top: 0;
}

/* Referência legível (ex.: REF CAMPING · GALV · LONA) — não é código oficial.
   Sobre branco: rótulo --ink-3-panel 6,9:1, código marinho 14,6:1. */
.cfg-ref {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  background-color: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.cfg-ref__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.cfg-ref__label {
  color: var(--ink-3-panel);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cfg-ref__code {
  min-width: 0;
  color: var(--brand-navy);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

.cfg-ref__hint {
  color: var(--ink-3);
  font-size: .8125rem;
  line-height: 1.45;
}

.cfg-sum__media {
  min-width: 0;
}

.cfg-sum__photo {
  --photo-radius: var(--radius);
}

.cfg-sum__photo .photo__img {
  background-color: var(--paper);
}

.cfg-sum__obs {
  white-space: pre-line;
}

.cfg-summary__specs {
  min-width: 0;
}

.cfg-summary__more {
  justify-self: start;
}

/* "Medidas, capacidade e opções sob consulta." (.sob-consulta de styles.css) */
.cfg-summary__consult {
  justify-self: start;
  max-width: 100%;
}

/* Dica sob o botão do WhatsApp (--ink-2 sobre --paper-2: 8,3:1) */
.cfg-wa-hint {
  margin-top: -2px;
  color: var(--ink-2);
  font-size: .8125rem;
  line-height: 1.45;
}

/* Copiar link + Compartilhar lado a lado (um só ocupa a largura) */
.cfg-share {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 10px;
}

.cfg-share > .btn {
  width: 100%;
}

/* Status do copiar/compartilhar: vazio sai do fluxo, mas continua na árvore
   de acessibilidade (role="status" precisa existir antes do texto) */
.cfg-share__status {
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.45;
}

.cfg-share__status:empty {
  position: absolute;
}

.cfg-share__status.is-ok {
  color: var(--ok);
}

.cfg-share__status.is-error {
  color: var(--error);
}

.cfg-copy-fallback__input {
  font-family: var(--font-mono);
  font-size: .8125rem;
}

.cfg-sum__restart {
  justify-self: start;
}

/* Amostra da cor ao lado do nome do acabamento */
.cfg-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background-color: var(--swatch, var(--paper-3));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(15, 26, 51, .28);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.cfg-dot--zinc {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 42%, rgba(15, 26, 51, 0) 58%, rgba(15, 26, 51, .22) 100%);
}

.cfg-unavailable {
  margin-top: 0;
}

/* Transições entre etapas (v2.2) ------------------------------------------- */

/* Deslize até a etapa (scrollIntoView): o scroll-padding-top do <html>
   (styles.css §02 e as regras de html:has(...) acima) já desconta o cabeçalho
   flutuante; a margem dá um respiro acima do título e abaixo do fim. */
.cfg .config-step {
  scroll-margin-top: 12px;
  scroll-margin-bottom: 16px;
}

/* Foco levado por "Continuar" (tabindex="-1" temporário): anel só quando o
   navegador indica foco de teclado */
.cfg .config-step:focus {
  outline: none;
}

.cfg .config-step:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
  border-radius: var(--radius);
}

/* "Continuar" no fim de cada etapa, à esquerda */
.cfg .cfg-next {
  justify-self: start;
  margin-top: 2px;
}

/* Etapa concluída: o número sai e o visto entra (200 ms); o círculo passa
   para --ok (visto branco 6,5:1). Forma além da cor; o leitor de tela ouve
   "Etapa N, concluída" pelo texto oculto [data-cfg-done]. */
.cfg .config-step__num {
  position: relative;
  transition: background-color 200ms var(--ease-out);
}

.cfg .config-step__digit {
  display: block;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.cfg .config-step__check {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(.5);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: none;
}

.cfg .config-step.is-done .config-step__num {
  background-color: var(--ok);
}

.cfg .config-step.is-done .config-step__digit {
  opacity: 0;
  transform: scale(.5);
}

.cfg .config-step.is-done .config-step__check {
  opacity: 1;
  transform: none;
}

/* Resumo, referência e valores das etapas sem View Transitions: o conteúdo
   novo esmaece em 180 ms (classe .cfg-swap posta pelo script) */
@keyframes cfg-swap-in {
  from { opacity: .2; }
  to { opacity: 1; }
}

.cfg .cfg-swap {
  animation: cfg-swap-in 180ms var(--ease-out);
}

/* View Transitions desta página: só os elementos que o script nomeia (os que
   mudaram e estão inteiros na tela) animam. A raiz fica de fora — o 3D e o
   resto da página seguem ao vivo — e a camada da transição deixa os cliques
   passarem. Texto: sem esticar (object-fit: none), ancorado no canto.
   v2.6: tudo restrito a :root.cfg-vt (classe posta pelo configurador.js só
   durante a rodada). Sem a classe vale a transição entre páginas do
   styles.css, que precisa capturar a raiz ao entrar e ao sair do
   planejador (com a raiz sem nome, a página seguinte surgiria do vazio). */
:root.cfg-vt {
  view-transition-name: none;
}

:root.cfg-vt::view-transition {
  pointer-events: none;
}

:root.cfg-vt::view-transition-group(*) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

:root.cfg-vt::view-transition-old(*),
:root.cfg-vt::view-transition-new(*) {
  height: 100%;
  object-fit: none;
  object-position: left top;
}

/* Pôster: o desenho anterior (.cfg-poster-ghost) esmaece por cima enquanto o
   novo aparece (240 ms) */
@keyframes cfg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cfg-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.cfg .scene__poster > .cfg-poster-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: cfg-fade-out 240ms var(--ease-out) forwards;
}

.cfg .cfg-poster-ghost > svg,
.cfg .cfg-poster-ghost > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cfg .scene__poster.is-swapping > :not(.cfg-poster-ghost) {
  animation: cfg-fade-in 240ms var(--ease-out) both;
}

/* Movimento reduzido: trocas imediatas (o script também pula as animações).
   Sem .cfg-vt de propósito: com movimento reduzido nenhuma transição anima
   nesta página (a entre páginas do styles.css já nem liga). */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .cfg .scene__poster > .cfg-poster-ghost {
    display: none;
  }
}

/* Cores forçadas (alto contraste do Windows) -------------------------------- */
@media (forced-colors: active) {
  .cfg-dot {
    forced-color-adjust: none;
    box-shadow: none;
    outline: 1px solid CanvasText;
  }

  .cfg-app.is-checked {
    border-color: Highlight;
  }

  .cfg-app:has(input:checked) {
    border-color: Highlight;
  }

  .cfg-app.is-checked::after {
    border-color: Highlight;
  }

  .cfg-app:has(input:checked)::after {
    border-color: Highlight;
  }

  .cfg-seg__input:checked + .cfg-seg__label {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }

  .cfg-meter {
    border: 1px solid CanvasText;
  }

  .cfg-meter__fill {
    forced-color-adjust: none;
    background-color: Highlight;
  }

  .cfg-load__status::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  .cfg .config-step__check {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  .cfg-draft[data-state="saved"]::before,
  .cfg-draft[data-state="restored"]::before {
    forced-color-adjust: none;
    background-color: CanvasText;
    border-color: CanvasText;
  }
}

/* Impressão: o resumo técnico vale como folha de planejamento --------------- */
@media print {
  .cfg-toolbar,
  .cfg-stagebar,
  .cfg-share,
  .cfg-share__status,
  .cfg-copy-fallback,
  .cfg-sum__restart,
  .cfg-obs__count,
  .cfg-next,
  .cfg-poster-ghost,
  .cfg .config-step__check {
    display: none !important;
  }

  /* No papel, o número da etapa continua legível (o visto é só da tela) */
  .cfg .config-step__digit {
    opacity: 1 !important;
    transform: none !important;
  }

  .cfg-app,
  .cfg-load,
  .cfg-ref {
    break-inside: avoid;
  }

  .cfg-app,
  .cfg-load,
  .cfg-ref {
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }

  .cfg-app.is-checked {
    border: 2px solid #000 !important;
  }

  .cfg-meter,
  .cfg-meter__fill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}