/****************************************************
* Station Records page (records.htm)                *
*****************************************************/
.ch-sep::before {
  content:          "\00b7";
  margin:           0 10px;
  color:            rgba(255, 255, 255, 0.4);
}

.ch-subtitle {
  font-size:        12px;
}

.solar-note {
  margin-top:       10px;
  font-size:        11px;
  color:            rgba(255, 255, 255, 0.4);
}

/* ---- the record tiles ---- */
.rec-tiles {
  display:          grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:              10px;
}

/* twelve all-time tiles and four for this year:  rows that come out even at every width */
@media (min-width: 768px) { .rec-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rec-tiles.rec-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .rec-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rec-tile {
  --accent:         #5bc8f5;
  border-left:      3px solid var(--accent);
  background:       rgba(255, 255, 255, 0.03);
  border-radius:    4px;
  padding:          9px 12px 10px;
  min-width:        0;
}

.rec-tile.hot  { --accent: #ff8c3c; }
.rec-tile.cold { --accent: #8fb8ff; }
.rec-tile.wet  { --accent: #5bc8f5; }
.rec-tile.dry  { --accent: #d9b36a; }
.rec-tile.wind { --accent: #6fe0a8; }

.rec-tile-label {
  font-size:        10px;
  font-weight:      700;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  color:            var(--accent);
}

.rec-tile-value {
  font-size:        26px;
  font-weight:      600;
  line-height:      1.2;
  color:            #fff;
  font-variant-numeric: tabular-nums;
}

.rec-tile-value small {
  font-size:        13px;
  color:            rgba(255, 255, 255, 0.6);
}

.rec-tile-sub {
  font-size:        12px;
  color:            rgba(255, 255, 255, 0.6);
}

.rec-span {
  font-size:        12px;
  margin-bottom:    10px;
}

/* ---- this year's charts and records ---- */
.rec-chart-title {
  font-size:        11px;
  color:            rgba(255, 255, 255, 0.55);
  margin-bottom:    4px;
}

.rec-chart {
  position:         relative;
  height:           180px;
}

.rec-year-records {
  font-size:        13px;
  color:            rgba(255, 255, 255, 0.8);
}

.rec-year-records summary {
  cursor:           pointer;
  color:            #5bc8f5;
  font-size:        12px;
}

.rec-chip {
  display:          inline-block;
  font-size:        11px;
  padding:          1px 8px;
  margin:           2px 2px 2px 0;
  border-radius:    10px;
  white-space:      nowrap;
  background:       rgba(143, 184, 255, 0.15);
  color:            #b8d0ff;
}

.rec-chip.rec-warm { background: rgba(255, 140, 60, 0.15); color: #ffb380; }
.rec-chip.rec-wet  { background: rgba(91, 200, 245, 0.15); color: #8fdcfb; }

.rec-scroll {
  max-height:       420px;
  overflow-y:       auto;
}

/* ---- the tables ---- */
.rec-table {
  font-size:        12px;
  margin-bottom:    0;
  --bs-table-bg:    transparent;
}

.rec-table th {
  position:         sticky;
  top:              0;
  background:       rgba(14, 34, 64, 0.98);
  color:            #5bc8f5;
  font-weight:      600;
  white-space:      nowrap;
  vertical-align:   bottom;
  border-bottom:    1px solid rgba(91, 200, 245, 0.3);
}

.rec-table td {
  color:            rgba(255, 255, 255, 0.85);
  border-color:     rgba(255, 255, 255, 0.06);
  vertical-align:   top;
}

.rec-table tbody tr:nth-child(even) td {
  background:       rgba(255, 255, 255, 0.025);
}

.rec-table .num {
  text-align:       right;
  font-variant-numeric: tabular-nums;
  white-space:      nowrap;
}

.rec-table .muted,
.rec-table .rec-year {
  color:            rgba(255, 255, 255, 0.4);
}

.rec-table .rec-year {
  display:          block;
  font-size:        10px;
}

.rec-table td.rec-new {
  color:            #ffd13c;
}

.rec-table td.rec-new .rec-year {
  color:            rgba(255, 209, 60, 0.75);
}

.rec-table tr.rec-today td {
  background:       rgba(91, 200, 245, 0.12) !important;
}

.rec-table tr.rec-few td,
.rec-table tr.rec-partial td {
  opacity:          0.55;
}

.rec-note {
  font-size:        10px;
  color:            rgba(255, 255, 255, 0.45);
  margin-left:      4px;
}

.rec-month-pick {
  display:          flex;
  gap:              4px;
  text-transform:   none;
  letter-spacing:   normal;
}

.rec-month-pick .form-select {
  width:            auto;
  min-width:        130px;
}

.rec-about {
  font-size:        13px;
  color:            rgba(255, 255, 255, 0.7);
}

/* narrow screens (kept last so they win over the sizes above) */
@media (max-width: 420px) {
  .rec-tile-value { font-size: 21px; }
}

@media (max-width: 340px) {
  .rec-tiles, .rec-tiles.rec-tiles-4 { grid-template-columns: minmax(0, 1fr); }
}