/* Curva vertical — parábola do greide.
 *
 * Herda a folha da família. A geometria de página NÃO é redeclarada; só a
 * colocação do painel de resultados, que é do produto.
 */
@import url("../estabilidade-taludes/styles.css");
@import url("../shared/ep-como-usar.css");

.greide-workspace > .results-panel { grid-column: 1 / -1; }

/* --------------------------------------------------- entrada */

/* A nota de fonte. Era caixa vermelha de alerta enquanto o produto não tinha o
 * IPR-706 em mãos e precisava avisar que nenhum critério tinha respaldo. Com a
 * fonte, ela continua sendo a primeira coisa a ler — mas é citação, não
 * advertência, e a cor tem de dizer isso. Deixá-la vermelha seria assustar o
 * usuário com um problema que já foi resolvido. */
.sem-fonte {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #cfe0d8; border-left: 3px solid #0e6b4f; background: #f4f9f7;
  font-size: .78rem; line-height: 1.6; color: #2f4c42;
}
.sem-fonte b { color: #0e6b4f; }
.sem-fonte + .como-lancar { margin-top: 0; }

/* O valor que uma constante tinha antes de a fonte chegar. Fica em âmbar, não
 * em vermelho: não é erro, é histórico — mas quem rodou o produto antes precisa
 * ver que o número mudou. */
.constante .mudou { color: #8a5a0f; font-weight: 600; }
.constante.trocada { border-color: #d9a441; background: #fdfaf3; }

/* A caixa de seleção solta, fora da grade de campos. */
.linha-check {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px;
  font-size: .8rem; line-height: 1.45; color: var(--ink, #24302c);
}
.linha-check input { margin-top: .2rem; flex: none; }

/* A nota de fonte dentro da memória de cálculo. */
.mem-fonte {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #cfe0d8; border-left: 3px solid #0e6b4f; background: #f4f9f7;
  font-size: .8rem; line-height: 1.6; color: #2f4c42;
}
.mem-fonte b { color: #0e6b4f; }

/* As constantes importadas, listadas para o usuário editar e ver de onde vêm. */
.constantes { display: grid; gap: 6px; margin-top: 8px; }
.constante {
  display: grid; grid-template-columns: 2.6rem 1fr 5.2rem; gap: 2px 8px; align-items: center;
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line, #d7e0dc); background: #fff;
  font-size: .76rem;
}
.constante > .simbolo {
  font-weight: 600; color: var(--ink, #24302c); font-size: .84rem; text-align: center;
}
.constante > label { display: contents; }
.constante input {
  width: 100%; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line, #d7e0dc);
  font: inherit; text-align: right; font-variant-numeric: tabular-nums; background: #fff;
}
.constante > small {
  grid-column: 2 / -1; color: var(--muted, #848f8b); line-height: 1.45; font-size: .7rem;
}
.constante.interpolada { border-color: #d9a441; background: #fdf9f0; }

/* Os critérios de comprimento, com o que governa em destaque. */
.criterios-l { display: grid; gap: 6px; margin-top: 8px; }
.criterio-l {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line, #d7e0dc); background: #fff;
  font-size: .76rem;
}
.criterio-l.governa { border-color: #0e6b4f; background: #f2f9f6; }
.criterio-l strong { font-weight: 600; color: var(--ink, #24302c); }
.criterio-l b { font-variant-numeric: tabular-nums; font-size: .84rem; }
.criterio-l small { grid-column: 1 / -1; color: var(--muted, #848f8b); line-height: 1.45; }
.criterio-l .selo-derivado,
.criterio-l .selo-convencao {
  grid-column: 1 / -1; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600;
}
.criterio-l .selo-derivado { color: #0e6b4f; }
.criterio-l .selo-convencao { color: #a4670f; }

/* --------------------------------------------------------------- desenho */

.cv-cota, .cv-hachura { pointer-events: none; }
.cv-tangente { stroke: #848f8b; stroke-width: 1.2; stroke-dasharray: 10 4; fill: none; }
/* O corpo da pista: a linha do greide é o topo do pavimento acabado, e a faixa
 * abaixo dela é a estrada. Espessura FIXA em pixels e declarada no desenho —
 * com o exagero vertical, a espessura real sairia fora de proporção. */
.cv-pista-corpo { fill: #6b756f; fill-opacity: 0.5; stroke: none; }
.cv-greide { fill: none; stroke: #0e6b4f; stroke-width: 2.6; }
.cv-greide-b { fill: none; stroke: #1f7f8c; stroke-width: 2.6; }
.cv-cota-linha { stroke: #848f8b; stroke-width: 1.2; }
.cv-flecha { stroke: #a4670f; stroke-width: 1.4; }
.cv-visada { stroke: #b02a37; stroke-width: 1.4; stroke-dasharray: 7 4; fill: none; }
.cv-grade { stroke: #e4ebe8; stroke-width: 1; }
.cv-eixo { stroke: #cfd8d5; stroke-width: 1.2; }
.cv-ponto { fill: #fff; stroke: #0e6b4f; stroke-width: 2; }
.cv-ponto-piv { fill: #fff; stroke: #b02a37; stroke-width: 2; }
.cv-ponto-vertice { fill: #a4670f; stroke: #fff; stroke-width: 1.5; }

/* -------------------------------------------------------- quadros das abas */

.quadro-elementos td.simbolo { font-weight: 600; color: var(--ink, #24302c); width: 5rem; }
.quadro-cotas { font-variant-numeric: tabular-nums; }
.quadro-cotas tr.marco td { font-weight: 600; background: #eef6f2; }
.quadro-cotas td.afastamento { color: #a4670f; }
.quadro-constantes td.simbolo { font-weight: 600; width: 4rem; }
.quadro-convencao td { color: #a4670f; }

/* Últimos dois tokens secundários acertados no piso de contraste.
 *
 * `#7d9389` sobre branco dava 3,28:1; `#65736e` sobre o verde escuro da faixa
 * de saídas dava 3,06:1. O segundo é texto CLARO sobre fundo escuro, e por isso
 * foi CLAREADO, não escurecido — a primeira tentativa escureceu os dois, o que
 * levou o rótulo da faixa a 1,38:1, pior que estava. A direção da correção vem
 * de comparar a luminância do texto com a do fundo, e não de supor. */