/* style — the tab bar.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- tabs (plain text: grey, active = pink) ---------- */
/* Sticky: the tab bar pins just below the sticky header while the form
   scrolls. --hdr-h is measured from the real header height in main.js. */
#tabs {
  display: flex; gap: 6px;
  border: none; border-radius: 0;
  padding: 2px 0 6px; margin-top: 4px;
  position: sticky; top: var(--hdr-h, 42px); z-index: 9;
  background: var(--bg);
}
.tab {
  flex: none; width: 34px; height: 30px; padding: 0; border: none; cursor: pointer;
  background: none; color: var(--text-dim); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tab svg { width: 17px; height: 17px; display: block; }
.tab:hover { color: var(--text); background: var(--card); }
.tab.active { color: var(--accent); background: var(--accent-soft); }