/* hourly.html */

.hr-chart-card{
  background:var(--paper);border:1px solid var(--ink);
  box-shadow:6px 6px 0 0 var(--ink);
  padding:1.2rem;margin-top:.5rem;
}
.hr-chart{
  position:relative;width:100%;
  height:clamp(260px, 38vh, 360px);
  overflow:hidden;background:var(--white);
  border:1px solid var(--rule);
}
.hr-chart svg{width:100%;height:100%;display:block}
.hr-chart .axis text{
  font-family:var(--mono);font-size:10px;fill:var(--slate);
}
.hr-chart .axis line{stroke:var(--rule);stroke-width:1}
.hr-chart .axis .tick--day{stroke:var(--ink);stroke-width:2;stroke-dasharray:2 3}
.hr-chart .bar-precip{fill:var(--lake);opacity:.35}
.hr-chart .line-temp{fill:none;stroke:var(--rust);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hr-chart .line-wind{fill:none;stroke:var(--moss);stroke-width:1.6;stroke-dasharray:3 3}
.hr-chart .dot-temp{fill:var(--rust);stroke:var(--paper);stroke-width:1.2}
.hr-chart .cursor{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3;opacity:.4}
.hr-chart .hot-area{fill:url(#hrGrad);opacity:.7}

.hr-hover{
  position:absolute;pointer-events:none;
  background:var(--ink);color:var(--paper);
  padding:.5rem .8rem;border-radius:2px;
  font-family:var(--mono);font-size:.72rem;line-height:1.4;
  box-shadow:2px 2px 0 0 rgba(0,0,0,.3);
  white-space:nowrap;z-index:10;
}
.hr-hover strong{font-family:var(--display);color:var(--gold);font-size:1rem}

.hr-list{
  list-style:none;margin:1.2rem 0 0;padding:0;
  max-height:380px;overflow-y:auto;
  border:1px solid var(--rule);
  background:var(--paper);
}
.hr-list li{
  display:grid;grid-template-columns:auto 2rem 1fr auto auto auto;
  gap:1rem;align-items:center;
  padding:.6rem 1rem;border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums;
}
.hr-list li:last-child{border-bottom:0}
.hr-list li:hover{background:var(--white)}
.hr-list li.is-now{background:var(--ink);color:var(--paper)}
.hr-list__t{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--slate);min-width:64px}
.hr-list li.is-now .hr-list__t{color:var(--gold)}
.hr-list__icon{width:24px;height:24px;color:var(--ink-soft)}
.hr-list li.is-now .hr-list__icon{color:var(--gold)}
.hr-list__icon svg{width:100%;height:100%}
.hr-list__cond{font-style:italic;color:var(--ink-soft);font-size:.9rem}
.hr-list li.is-now .hr-list__cond{color:rgba(243,236,219,.85)}
.hr-list__temp{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.hr-list__precip{font-family:var(--mono);font-size:.75rem;color:var(--lake);min-width:54px;text-align:right}
.hr-list li.is-now .hr-list__precip{color:#8cb2d6}
.hr-list__wind{font-family:var(--mono);font-size:.75rem;color:var(--slate);min-width:80px;text-align:right}
.hr-list li.is-now .hr-list__wind{color:rgba(243,236,219,.75)}

.hr-list__precip.is-zero{color:var(--slate);opacity:.4}

@media (max-width:720px){
  .hr-list li{grid-template-columns:auto 1.6rem 1fr auto;gap:.6rem;padding:.5rem .7rem}
  .hr-list__wind,.hr-list__cond{display:none}
}