/* Escada de concreto armado — a dobra que empurra.
 *
 * Herda a folha da família e as compartilhadas, e não redeclara a geometria de
 * página: largura, margem e as duas colunas do `.workspace` são da folha-base,
 * que mantém a escada de breakpoints inteira.
 *
 * O que é DESTE produto: a altura do canvas, a pílula de conferência e a
 * marcação da exigência de detalhe, que não é uma verificação de utilização e
 * por isso não pode usar o mesmo selo.
 */
@import url("../shared/ep-hidrologia.css");
@import url("../shared/ep-como-usar.css");

/*
 * O CANVAS DA ESCADA É LARGO E BAIXO, E MESMO ASSIM PEDE ALTURA.
 *
 * A elevação do exemplo tem 4,44 m de projeção por 2,40 m de topo — razão 1,85,
 * que caberia em 300 px. O que pede os 420 é o que vive FORA da peça: a faixa
 * de carga acima, as duas linhas de cota abaixo, a cota vertical à esquerda e o
 * detalhe do degrau no canto superior direito. Com 380 px a faixa de carga
 * encostava no detalhe do degrau.
 */
.escada-workspace .canvas-superficie { height: 420px; }
.escada-workspace .figuras-card { grid-column: 1 / -1; }
.escada-workspace > .results-panel { grid-column: 1 / -1; }

/* O inspetor do elemento selecionado é a PRIMEIRA seção do painel, porque num
 * produto com canvas é ele que se mexe a todo clique — e o canvas fica no topo
 * da coluna ao lado. Sem seleção, ele instrui o que clicar. */
#bloco-selecao .instrucao { font-size: .74rem; color: #62766e; line-height: 1.45; }
#bloco-selecao .alvo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: .72rem; color: #0e6b4f; font-weight: 600;
}
#bloco-selecao .alvo .marca {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
}

.escada-workspace [hidden] { display: none !important; }

/* Todo coeficiente aqui precisa ser conferido contra a edição da norma que quem
 * projeta tem em mãos. Dois são ARBITRADOS — o limite de flecha e a relação de
 * pré-dimensionamento —, e a pílula os marca do mesmo jeito: o que importa é
 * que nenhum passe por valor de norma sem ser conferido. */
/*
 * A PÍLULA NÃO SE ESTICA, e isto é consequência de o `label` ser grade.
 *
 * `.field-grid label` é `display: grid`, de modo que todo filho inline do rótulo
 * vira ITEM DE GRADE e é esticado para a coluna inteira: a pílula saía como uma
 * barra âmbar de 165 px atravessando o campo. `justify-self: start` com largura
 * de conteúdo a devolve ao tamanho do texto, e o `display: inline-block`
 * continua valendo para quando ela está dentro de um `<span>` de texto.
 */
.pilula-confira {
  display: inline-block; padding: 1px 7px; border-radius: 999px; margin-left: 6px;
  font-size: .64rem; font-weight: 700; color: #fff6db; background: #8a6a10;
  letter-spacing: .03em; justify-self: start; width: fit-content;
}

/*
 * A EXIGÊNCIA DE DETALHE NÃO É UMA VERIFICAÇÃO DE UTILIZAÇÃO, E NÃO USA O
 * MESMO SELO.
 *
 * Uma utilização tem demanda, capacidade e margem. A ancoragem reta na dobra
 * não tem nada disso: ela é adotada ou não é. Dar-lhe a pílula verde de
 * "atende" ao lado de uma margem percentual ensinaria que existe folga onde não
 * existe. O bloco é uma nota destacada, com moldura e sem número.
 */
.exigencia {
  border: 1px solid #e8d2d2; border-left: 4px solid #b5432a; border-radius: 10px;
  background: #fdf7f5; padding: 12px 14px; margin: 12px 0; display: grid; gap: 6px;
}
.exigencia.atendida { border-color: #cfe0d8; border-left-color: #2f7d5d; background: #f6fbf8; }
.exigencia h4 {
  margin: 0; font-size: .82rem; font-weight: 600; color: #0b2b21;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.exigencia .marca {
  font-size: .64rem; font-weight: 700; letter-spacing: .03em; padding: 1px 8px;
  border-radius: 999px; color: #fff; background: #b5432a;
}
.exigencia.atendida .marca { background: #2f7d5d; }
.exigencia p { margin: 0; font-size: .76rem; line-height: 1.5; color: #46655a; }
.exigencia p b { color: #0b2b21; }

/* A checkbox da confirmação e a do apoio do patamar vivem no `field-grid`, e
 * sem isto elas herdam o `display: grid` do label e o quadrado sai acima do
 * texto em vez de ao lado. */
.escada-workspace label.checkbox {
  display: flex; align-items: center; gap: 8px; font-size: .74rem; color: #46655a;
  line-height: 1.35;
}
.escada-workspace label.checkbox input { width: auto; flex: none; }

/*
 * A LEITURA DE BLONDEL E A DE PRÉ-DIMENSIONAMENTO SÃO LEITURAS, E NÃO ERROS.
 *
 * As duas ficam fora da faixa recomendada em muita escada que se constrói. Um
 * campo pintado de vermelho porque `2e + p` deu 66 faria a pessoa procurar
 * defeito onde há escolha: as duas são conforto e ordem de grandeza, não
 * resistência. Fora da faixa, âmbar; dentro, verde discreto.
 */
.leitura-fora { color: #8a6a10; font-weight: 600; }
.leitura-dentro { color: #0e6b4f; font-weight: 600; }

@media (max-width: 1100px) {
  .escada-workspace .canvas-superficie { height: 380px; }
}

/*
 * AS DEZ ABAS QUEBRAM EM LINHA, E NÃO ROLAM.
 *
 * A folha-base dá `flex-wrap: nowrap` com `overflow-x: auto` à tira de abas, que
 * é a escolha certa para cinco ou seis: a rolagem horizontal some e o espaço
 * fica para o conteúdo. Com DEZ abas, a 1024 px a última ("Memorial") fica 68 px
 * fora da tela — medido pelo auditor —, e uma aba que só aparece rolando é uma
 * aba que ninguém sabe que existe. Duas linhas de aba custam 26 px e mostram as
 * dez.
 */
.escada-workspace .tab-strip { flex-wrap: wrap; overflow-x: visible; }