/* Firm settings tab bar. Replaces 4,011px of stacked panels with four groups. */

.st-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 18px;
  padding: 3px;
  background: var(--bone, #F4F0E9);
  border-radius: 11px;
  overflow-x: auto;                 /* many tabs on a narrow screen scroll... */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.st-tabs::-webkit-scrollbar { display: none; }

.st-tab {
  flex: 1 1 auto;
  white-space: nowrap;              /* ...rather than wrapping to two lines */
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 9px 15px;
  border-radius: 9px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #1A1B18);
  opacity: .58;
  transition: background .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.st-tab:hover { opacity: .85; }
.st-tab.on {
  background: var(--paper, #FBF9F4);
  opacity: 1;
  box-shadow: 0 1px 3px rgba(26, 27, 24, .10);
}
.st-tab:focus-visible {
  outline: 2px solid var(--gold, #A9824C);
  outline-offset: 1px;
}

.st-pane { display: none; }
.st-pane.on { display: block; }

/* The panes hold panels that already carry their own spacing; only the gap
   between two panels in the same pane needs restoring. */
.st-pane > * + * { margin-top: 16px; }

@media (max-width: 640px) {
  .st-tabs {
    margin-bottom: 14px;
    /* Bleed to the screen edges so the scrollable strip reads as scrollable
       instead of looking like a clipped box. */
    margin-left: -14px;
    margin-right: -14px;
    padding: 3px 14px;
    border-radius: 0;
  }
  .st-tab {
    flex: 0 0 auto;                 /* natural width; the strip scrolls */
    padding: 9px 13px;
    font-size: 13px;
  }
}