.hazard-head { max-width: 850px; }
.hazard-head h1 { margin: 8px 0 12px; }
.hazard-head p { margin: 0; font-size: 17px; line-height: 1.7; }
.hazard-kicker { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hazard-panel { overflow: hidden; }
.hazard-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.hazard-toolbar strong { display: block; }
.hazard-opacity { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hazard-opacity input { width: 130px; accent-color: var(--accent); }
.hazard-opacity output { min-width: 4ch; font-family: 'Fira Code', monospace; }
#hazard-map { height: clamp(370px, 62vh, 680px); width: 100%; background: var(--bg); }
.hazard-legend { padding: 16px 20px; }
.hazard-scale { display: grid; grid-template-columns: repeat(13, 1fr); margin-top: 10px; border: 1px solid var(--line2); border-radius: 5px; overflow: hidden; }
.hazard-scale span { height: 14px; }
.hazard-ticks { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); margin-top: 6px; font: 11px 'Fira Code', monospace; }
.hazard-ticks span:nth-child(2) { grid-column: 4; }
.hazard-ticks span:nth-child(3) { grid-column: 7; }
.hazard-ticks span:nth-child(4) { grid-column: 10; }
.hazard-ticks span:last-child { grid-column: 13; justify-self: end; white-space: nowrap; }
.hazard-legend p { margin: 10px 0 0; }
.hazard-status { padding: 0 20px 16px; margin: 0; }
.hazard-explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hazard-explain h2 { font-size: 18px; margin: 0 0 12px; }
.hazard-explain p, .hazard-source p { line-height: 1.75; margin: 0 0 12px; }
.hazard-explain p:last-child, .hazard-source p:last-child { margin-bottom: 0; }
.hazard-source h2 { margin-top: 0; }
.hazard-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
@media (max-width: 760px) {
  .hazard-explain { grid-template-columns: 1fr; }
  .hazard-toolbar { padding: 14px; }
  .hazard-opacity { width: 100%; }
  .hazard-opacity input { flex: 1; }
  .hazard-legend { padding: 14px; }
  .hazard-status { padding: 0 14px 14px; }
  .hazard-ticks { font-size: 10px; }
  .hazard-head p { font-size: 15px; }
}