/* The rain card — the vendorable cut of the rain story.
 *
 * This file travels with raincard.js, so it names its own tokens and gives each a fallback
 * equal to the network's shared value: on Forecast Points the page's :root values win, and on
 * a vendored site with no tokens the card still lands on the house palette. Light only, like
 * everything on the network — the card is part of a document, not a terminal.
 */

.raincard { font-family: var(--mono-font, 'Overpass Mono', monospace); }

.raincard .rc-days {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px;
}
.raincard .rc-day {
  flex: 1 1 64px; min-width: 64px; padding: 6px 4px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card, #ffffff);
  border: 1px solid var(--line, #c9c5bc); border-radius: 3px;
  font: inherit; text-align: center;
}
.raincard button.rc-day { cursor: pointer; }
.raincard button.rc-day:hover,
.raincard button.rc-day:focus-visible { border-color: var(--blue, #0a5ca8); }

.raincard .rc-dn {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: var(--mut, #8a867c);
}
.raincard .rc-chance {
  font-size: 17px; font-weight: 900; line-height: 1;
  color: var(--blue, #0a5ca8);
}
.raincard .rc-qpf {
  font-size: 10px; font-weight: 800; min-height: 11px; line-height: 1.1;
  color: var(--navy, #103e7e);
}
.raincard .rc-trend { font-size: 9px; color: var(--mut, #8a867c); }

.raincard .rc-sentence {
  margin: 6px 2px 0; font-size: 12px; line-height: 1.5;
  color: var(--ink2, #4a463e);
}
.raincard .rc-verif {
  margin: 6px 2px 2px; padding-top: 6px;
  border-top: 1px dashed var(--line, #c9c5bc);
  font-size: 11px; line-height: 1.5; color: var(--ink2, #4a463e);
}
.raincard .rc-verif a {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  color: var(--blue-dk, #08488a);
}