/* Sarjetas e bocas de lobo.
 *
 * A base é a folha compartilhada da família de hidrologia: painel, cartões,
 * verificações, abas, canvas e avisos são os mesmos componentes dos demais
 * produtos. Aqui ficam apenas as peças próprias deste — os seletores de posição
 * e tipo de boca e os quadros de interceptação e espaçamento.
 */
@import url("../shared/ep-hidrologia.css");
@import url("../shared/ep-como-usar.css");

.option-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.option-picker.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-picker button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  text-align: left;
}
.option-picker button strong { font-size: 12px; font-weight: 500; letter-spacing: -0.01em; }
.option-picker button small { font-size: 10px; color: var(--muted); line-height: 1.3; }
.option-picker button:hover { border-color: var(--chart-blue-light); }
.option-picker button[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  box-shadow: 0 4px 13px rgb(17 24 22 / 18%);
}
.option-picker button[aria-pressed="true"] strong { color: #fff; }
.option-picker button[aria-pressed="true"] small { color: #a8e3cf; }

.state-table { margin-top: 12px; overflow: auto; border: 1px solid var(--line); border-radius: 11px; }
.state-table table { font-size: 11px; }
.state-table th, .state-table td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: right; }
.state-table th:first-child, .state-table td:first-child { text-align: left; }
.state-table thead th { position: sticky; top: 0; background: #f4f7f6; color: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.state-table tbody tr:last-child td { border-bottom: 0; }
.state-table tbody tr.is-highlight td { background: #f2f9f6; font-weight: 500; }
.state-table .row-mark { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 2px; vertical-align: -1px; }

.panel-intro { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.panel-intro strong { color: var(--ink); font-weight: 600; }

.figure-note { margin: 8px 0 0; color: var(--muted); font-family: Georgia, serif; font-size: 12px; line-height: 1.5; }

.quantities { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.quantities > div { padding: 12px 14px; background: white; }
.quantities dt { color: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.quantities dd { margin: 5px 0 0; font-size: 17px; font-weight: 500; }
.quantities dd small { margin-left: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }

.empty-state {
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px dashed #c3d2cc;
  border-radius: 11px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .option-picker.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}