/*
 * Visualizador do PC (assets/js/visualizador/): a base são os estilos do @pkg/viewer3d copiados
 * para /vendor/viewer3d/styles.css (classes v3d*); aqui só o diagrama de folga (o ClearanceDiagram
 * do Next) e o que o JS esconde. Só tokens; cores por classe (CSP sem style inline).
 */
@layer site-componentes {
  /* A classe do pacote (camada components) venceria o [hidden] da base. */
  .v3d__legend[hidden],
  .v3d__bar[hidden] {
    display: none;
  }

  /* Em 320 px o min-height de 240 px, com a proporção 4:3, pedia 320 px de largura e estourava a
     coluna: a largura é a da coluna, e a altura mínima fica por conta do min-height. */
  .v3d__stage {
    width: 100%;
    min-width: 0;
  }

  .folga-2d {
    width: 100%;
    max-width: 420px;
    height: auto;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
  }

  .folga-2d-espaco {
    fill: var(--color-bg-muted);
    stroke: var(--color-border-control);
  }

  .folga-2d-placa {
    fill: var(--color-fg-muted);
  }

  .folga-2d-excesso {
    fill: var(--color-danger);
  }

  .folga-2d-parede {
    stroke: var(--color-fg);
  }

  .folga-2d-eixo {
    stroke: var(--color-fg-muted);
  }

  .folga-2d-texto {
    fill: var(--color-fg);
  }

  .folga-2d-texto--suave {
    fill: var(--color-fg-muted);
  }

  .folga-2d-texto--placa {
    fill: var(--color-bg);
  }

  .folga-2d-texto--excesso {
    fill: var(--color-danger);
  }
}