/* ダクトのサイズ計算だけの見た目（共通の style.css には足さない）。
   色は共通のまま（墨・押せる所の藍・注意の茶）。「いま決めている側」は色でなく太さと罫で言う。 */

.result.band { gap: 2px; background: var(--surface); }
.result.band .hero { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.result.band .hero b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.result .unit { font-size: 15px; color: var(--muted); font-weight: 400; }
.result .headline { font-size: 19px; font-weight: 700; line-height: 1.4; }
.result.warn .headline, .result .answer.warn { color: var(--warn); }
.result .answer { font-size: 17px; font-weight: 700; }
.result .governing { font-weight: 700; }
.result h3 { font-size: 15px; }

.limits { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.limit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  flex-wrap: wrap;
  padding: 4px 8px;
  border-left: 3px solid transparent;
}
.limit b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }
.limit.governs { border-left-color: var(--fg); font-weight: 700; }
.limit.governs b { font-weight: 700; }
.result .grand {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
}

.basis { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.basis summary { cursor: pointer; color: var(--accent); width: fit-content; }
.basis ul { list-style: none; padding-left: 0; gap: 2px; margin-top: 4px; overflow-wrap: anywhere; }

.air-state { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.air-state > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.air-state dt { min-width: 8.5em; font-size: 14px; }
.air-state dd { margin: 0; }
.air-state dd b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; }
.air-state .formula-name { flex-basis: 100%; font-size: 12px; color: var(--muted); }

.fixed-conditions { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.fixed-conditions .label { font-weight: 600; margin-right: 8px; }

/* 説明のページの例の表: 字の列も折らない（狭い画面では表の箱の中で横に送る。
   折れると「保温 65 mm」「結露しません」が1字ずつ縦に並ぶ＝2026-10-18 に 390 幅で撮って見つけた） */
.table-wrap td { white-space: nowrap; }