/* Page: forecast.html */

.fc-picker{
  display:flex;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
  padding:1.4rem 1.5rem;
  background:var(--white);border:1px solid var(--ink);
  box-shadow:5px 5px 0 0 var(--ink);border-radius:2px;
  margin-top:1.5rem;
}
.fc-picker__row{display:flex;flex-direction:column;gap:.3rem}
.fc-picker__or{
  font-family:var(--mono);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--slate);padding-bottom:.6rem;
}
.fc-picker select,
.fc-picker input{
  font-family:var(--display);font-size:1rem;
  padding:.6rem .9rem;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);
  border-radius:2px;min-width:220px;
}
.fc-picker input{font-variant-numeric:tabular-nums;letter-spacing:.08em}
.fc-picker__zip{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.fc-picker__err{
  flex-basis:100%;margin:.2rem 0 0;color:var(--rust);
  font-family:var(--mono);font-size:.78rem;
}
.ctrl-label{
  font-family:var(--mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--slate);
}

.fc-now{
  display:flex;align-items:center;gap:1.2rem;
  background:var(--ink);color:var(--paper);
  padding:1.2rem 1.4rem;border-radius:2px;
  min-width:300px;
}
.fc-now__glyph{
  width:58px;height:58px;color:var(--gold);flex-shrink:0;
}
.fc-now__glyph svg{width:100%;height:100%}
.fc-now__temp{
  font-family:var(--display);font-weight:800;
  font-size:2.6rem;line-height:.9;
  font-variant-numeric:tabular-nums;margin:0;
}
.fc-now__temp small{font-size:1rem;font-weight:400;opacity:.7;letter-spacing:0}
.fc-now__cond{
  font-family:var(--display);font-style:italic;
  font-size:1rem;margin:.2rem 0;color:var(--gold);
}
.fc-now__meta{
  font-family:var(--mono);font-size:.72rem;
  color:rgba(243,236,219,.7);margin:.3rem 0 0;
  letter-spacing:.05em;
}

.fc-sundata{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0;margin-top:1.5rem;
  border:1px solid var(--rule);background:var(--paper);
}
.fc-sundata > div{
  padding:1rem 1.2rem;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.2rem;
}
.fc-sundata > div:last-child{border-right:0}
.fc-sundata__k{
  font-family:var(--mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--slate);
}
.fc-sundata__v{
  font-family:var(--display);font-weight:600;
  font-size:1.1rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.fc-compare__wrap{
  overflow-x:auto;background:var(--paper);
  border:1px solid var(--ink);
}
.fc-compare__table{
  width:100%;border-collapse:collapse;
  font-family:var(--body);
  min-width:720px;
}
.fc-compare__table th,
.fc-compare__table td{
  padding:.7rem .9rem;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.fc-compare__table th:last-child,
.fc-compare__table td:last-child{border-right:0}
.fc-compare__table thead tr:first-child th{
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.16em;
  padding:.8rem;border-right-color:var(--ink-soft);
}
.fc-compare__days th{
  font-family:var(--mono);font-size:.7rem;
  background:var(--paper-warm);
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-soft);
}
.fc-compare__city{
  text-align:left !important;
  font-family:var(--display);font-weight:600;font-size:1rem;
  background:var(--paper-warm);
  position:sticky;left:0;z-index:1;
  border-right:2px solid var(--ink) !important;
  min-width:140px;
}
.fc-compare__table tbody tr:hover{background:var(--white)}
.fc-compare__hi{
  font-family:var(--display);font-weight:700;font-size:1.05rem;
  color:var(--ink);display:block;
}
.fc-compare__lo{
  font-family:var(--mono);font-size:.72rem;color:var(--slate);
  letter-spacing:.04em;display:block;margin-top:.1rem;
}
.fc-compare__cond{
  display:inline-block;width:22px;height:22px;
  margin-bottom:.2rem;color:var(--ink-soft);
}
.fc-compare__cond svg{width:100%;height:100%}

@media (max-width:720px){
  .fc-picker{flex-direction:column;align-items:stretch}
  .fc-picker__or{text-align:center;padding:0}
  .fc-picker select,
  .fc-picker input{min-width:0;width:100%}
  .sec-head--row .fc-now{margin-top:1rem}
}