/* Tab bar and panel visibility. */

/* =========================
   Tabs — pill navigation, as on the data123 site
   ========================= */
#tabBar{
  display:flex; align-items:center; gap:4px; padding:8px 22px;
  background:var(--surface); border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
#tabBar::-webkit-scrollbar{ display:none; }
.tabBtn{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border:none; border-radius:999px;
  background:none; font-weight:500; font-size:13px;
  color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap;
}
.tabBtn svg{ width:15px; height:15px; flex-shrink:0; opacity:.8; }
.tabBtn:hover{ color:var(--navy); background:#f1f4f7; }
.tabBtn.active{ color:var(--teal); background:var(--primary-soft); font-weight:600; }
.tabBtn.active svg{ opacity:1; }
#meta{ margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; }
.tabPanel{ display:none; }
/* Defined here rather than up with the body rules: an earlier .tabPanel.active
   block would lose to this one on equal specificity. */
.tabPanel.active{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}