/****************************************************************************************************
* Precipitation (precipitation.htm).  Built on css/home.css - its colours, panels and footer.  The  *
* cards are Bootstrap .card.solar-card (main.css), restyled here as home-page panels like the solar *
* page; js/precipForecast.js and js/precipHistory.js draw their numbers with the pr- classes below.  *
*****************************************************************************************************/
.pr-page main { padding-top: 22px; }

.pr-title h1 { margin: 0; font-size: 26px; font-weight: 900; }
.pr-title-sub { color: var(--hw-faint); font-size: 13px; margin-top: 2px; }

/* ---- the cards, as home-page panels ---- */
.pr-page .solar-card { margin-top: 20px; border: 1px solid var(--hw-line); border-radius: var(--hw-radius); background: var(--hw-panel); overflow: hidden; }
.pr-page .solar-card .card-header { background: none; border: 0; color: var(--hw-text); font-size: 16px; font-weight: 900;
                                    letter-spacing: 0; text-transform: none; padding: 18px 22px 0; }
.pr-page .solar-card .card-body { background: none; padding: 14px 22px 20px; color: var(--hw-dim); }
.pr-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pr-charts > .solar-card { min-width: 0; }

/* ---- the numbers (js/precipForecast.js, js/precipHistory.js) ---- */
.pr-stat { height: 100%; padding: 12px 16px 13px; border-radius: 12px; background: var(--hw-panel-2); border: 1px solid var(--hw-line); }
.pr-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-faint); }
.pr-value { margin-top: 4px; font-size: 28px; font-weight: 300; line-height: 1.15; color: var(--hw-text); font-variant-numeric: tabular-nums; }
.pr-badges { margin-top: 6px; }
.pr-sub { margin-top: 6px; font-size: 12px; color: var(--hw-faint); }
.pr-badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.pr-wet { color: #8fb8ff; background: rgba(100, 149, 237, .18); }   /* wetter than normal, the wettest year */
.pr-dry { color: #ffb347; background: rgba(255, 140, 0, .16); }     /* drier than normal, the driest year */
.pr-bad { color: #ff8a73; background: rgba(255, 99, 71, .16); }
.pr-ok  { color: var(--hw-ok); background: rgba(111, 224, 168, .14); }
.pr-foot { margin-top: 12px; font-size: 12px; color: var(--hw-faint); }
.pr-loading, .pr-none { font-size: 14px; color: var(--hw-faint); }
.pr-page .row.g-3 > [class*="col-"] { min-width: 0; }

/* the forecast:  three numbers, then each period's chance */
.pr-fc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.pr-fc-head { margin-bottom: 8px; }
.pr-periods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pr-period { padding: 10px 12px 11px; border-radius: 10px; background: var(--hw-panel-2); border: 1px solid var(--hw-line); }
.pr-period-name { font-size: 12px; color: var(--hw-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-period-val { margin-top: 2px; font-size: 20px; font-weight: 700; color: var(--c); }
.pr-period-bar { height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pr-period-bar i { display: block; width: var(--p); height: 100%; border-radius: 3px; background: var(--c); }

/* ---- the charts' buttons (Bootstrap's, drawn by the chart scripts), as pills ---- */
.pr-controls { margin-bottom: 12px; }
.pr-controls .btn { --bs-btn-padding-y: 4px; --bs-btn-padding-x: 12px; --bs-btn-font-size: 13px; border-radius: 20px; font-weight: 400;
                    color: var(--hw-dim); background: var(--hw-panel-2); border: 1px solid var(--hw-line); }
.pr-controls .btn:hover { color: var(--hw-text); background: var(--hw-panel-2); border-color: rgba(91, 200, 245, .45); }
.pr-controls .btn.active, .pr-controls .btn:active { color: var(--hw-text); background: rgba(91, 200, 245, .16); border-color: rgba(91, 200, 245, .6); }
.pr-controls .btn-outline-warning.active { background: rgba(255, 179, 71, .16); border-color: rgba(255, 179, 71, .6); }
.pr-controls label, .pr-controls .form-label { font-size: 12px; color: var(--hw-faint); }

@media (max-width: 900px) {
  .pr-charts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pr-page .solar-card .card-header { padding: 16px 16px 0; }
  .pr-page .solar-card .card-body { padding: 12px 16px 16px; }
  .pr-fc-stats { grid-template-columns: 1fr 1fr; }
  .pr-value { font-size: 24px; }
}