/* Extra styles for the website version (loaded after style.css) */
.picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
.picker-label { font: 500 15px var(--head); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.chip {
  background: rgba(0, 0, 0, 0.4); color: var(--text); border: 1px solid var(--line);
  font: 600 16px var(--body); padding: 6px 14px; cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip.selected { border-color: var(--accent); color: var(--accent); }
.saved-note { width: 100%; margin: 0; font-size: 17px; color: var(--muted); max-width: 760px; }
.notice { margin-top: 22px; padding: 16px 20px; border: 1px solid var(--amber); background: rgba(255, 176, 32, 0.1); color: #ffd99a; font-size: 19px; max-width: 900px; }
.notice[hidden] { display: none; }
.hero { min-height: 70vh; }
@media (max-width: 700px) {
  body { font-size: 17px; }
  .controls input[type=number] { width: 140px; }
  .ov-year { font-size: 56px; }
  .ov-water { font-size: 28px; }
  .status-word { font-size: 72px; }
  .map-controls { flex-wrap: wrap; }
  #map { height: 50vh; min-height: 320px; }
}