/* ============================================================
 * 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-wrap{
  display:flex; align-items:stretch; margin-bottom:18px;
  position:sticky; top:0; z-index:20; background:var(--bg-deep);
  box-shadow:0 8px 12px -8px rgba(0,0,0,0.35);
}
.view-tabs{
  display:flex; flex-wrap:nowrap; gap:4px 8px; border-bottom:1px solid var(--line-soft); padding-bottom:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  min-width:0; flex:1 1 auto;
}
.view-tabs::-webkit-scrollbar{display:none;}
.tab-scroll-btn{
  display:none; flex:0 0 auto; align-items:center; justify-content:center;
  width:26px; border:none; border-bottom:1px solid var(--line-soft); background:var(--bg-deep);
  color:var(--ink-dim); font-size:15px; line-height:1; cursor:pointer; padding:0;
}
.tab-scroll-btn:hover{ color:var(--gold-text); }
.tab-scroll-btn.visible{ display:flex; }
.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;}
  .tab-scroll-btn{width:20px; font-size:13px;}
}
.view-tab.active{color:var(--gold-text); border-bottom-color:var(--gold-text);}

.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:var(--now-green); border-bottom-color:var(--now-green); }

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