/* Bueiros.
 *
 * A base vem da folha de hidrologia já em uso na família: painel, cartões,
 * verificações, abas, canvas e avisos são os mesmos componentes. O seletor de
 * opção vem de chuva–vazão, que já o compartilha com sarjetas. Aqui ficam só as
 * peças próprias deste produto: o campo empilhado dos seletores longos, o
 * quadro comparativo dos dois controles e as cores do perfil da travessia.
 */
@import url("../chuva-vazao/styles.css");
@import url("../shared/ep-como-usar.css");

/* Rótulos como "Boca de montante" trazem descrições longas; em duas colunas o
   texto do <select> some. Estes campos ocupam a linha inteira do painel. */
.stacked-field {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}
.stacked-field select,
.stacked-field .input-with-unit { margin-top: 4px; width: 100%; }
.stacked-field select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
}

/* Quadro dos dois controles. O governante recebe tratamento cheio; o outro
   permanece legível, porque saber por quanto ele perdeu é parte da leitura. */
.control-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.control-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.control-card.is-governing {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
.control-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.control-card header span {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.control-card.is-governing header span { color: #a8e3cf; }
.control-card header b { font-size: 10px; font-weight: 500; color: var(--green); }
.control-card.is-governing header b { color: #7ce0b8; }
.control-card strong { display: block; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.control-card strong small { font-size: 13px; color: var(--muted); margin-left: 3px; }
.control-card.is-governing strong small { color: #a8e3cf; }
.control-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 10px 0 0;
  font-size: 11.5px;
}
.control-card dt { color: var(--muted); }
.control-card.is-governing dt { color: #a8e3cf; }
.control-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .control-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Perfil da travessia.
 *
 * Hierarquia do padrão EP: contorno do elemento estrutural forte, lâminas e
 * cotas de referência médias, terreno e cotas leves. A cor da água é a mesma da
 * família de hidrologia (#2e86c1) e a da carga governante é o verde EP. */
.profile-fill { fill: #efe4d0; }
.profile-ground { fill: none; stroke: #9c7c55; stroke-width: 1.5; }
.profile-barrel { fill: #f7faf9; stroke: var(--navy); stroke-width: 2.6; }
.profile-headwall { fill: #e4ebe8; stroke: var(--navy); stroke-width: 2; }
.profile-water { fill: rgb(46 134 193 / 20%); stroke: #2e86c1; stroke-width: 1.6; }
.profile-hw { fill: none; stroke: #087f5b; stroke-width: 1.8; stroke-dasharray: 8 5; }
.profile-grade { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 6 5; }

/* Curva de desempenho: uma linha por controle e a envoltória governante. */
.perf-inlet { fill: none; stroke: #c0392b; stroke-width: 2.2; }
.perf-outlet { fill: none; stroke: #2e86c1; stroke-width: 2.2; }
.perf-governing { fill: none; stroke: #087f5b; stroke-width: 3.4; stroke-opacity: 0.32; }
.perf-design { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 5 4; }
.perf-point { fill: #087f5b; stroke: #fff; stroke-width: 2; }
.perf-axis { stroke: var(--line); stroke-width: 1.2; }
.perf-grid { stroke: var(--line); stroke-width: 0.8; stroke-dasharray: 3 5; opacity: 0.7; }

/* Subtítulos dentro de um passo do painel: separam bacia, chuva e perdas sem
   criar um fieldset novo para cada um. */
.panel-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.panel-subhead span {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
#runoff-summary { margin-top: 18px; }