/* ============================================================
 * View tabs
 * The Today / Table / 24-Hour Graph / Year Graph / 24-Hour Forecast / 14-Day Forecast tab bar, and the view-section show/hide mechanism.
 * ============================================================ */
/* ---------- Main / Tabs ---------- */
.view-tabs{
  display:flex; flex-wrap:wrap; gap:4px 8px; margin-bottom:18px; border-bottom:1px solid var(--line-soft); padding-bottom:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.view-tabs::-webkit-scrollbar{display:none;}
.view-tab{
  padding:10px 18px; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--ink-faint);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; flex:0 1 auto;
}
@media (max-width:700px){
  .view-tabs{gap:4px 6px;}
  .view-tab{padding:9px 12px; font-size:12.5px;}
  .tab-divider{display:none;}
}
@media (max-width:460px){
  .view-tab{padding:7px 8px; font-size:11px;}
}
.view-tab.active{color:var(--gold); border-bottom-color:var(--gold);}

.tab-divider{ width:1px; align-self:stretch; background:var(--line-soft); margin:6px 4px; flex:0 0 auto; }
.view-tab.forecast-tab{ color:var(--ink-faint); }
.view-tab.forecast-tab.active{ color:#7FD1AE; border-bottom-color:#7FD1AE; }

.view-section{display:none;}
.view-section.active{display:block;}