/* SPDX-License-Identifier: MIT
 *
 * employer-tabs.css — the tab strip, ported from hire4real's
 * static/css/components/employer-tabs.css at ebca5d4 (SL_05A Part D), with Stone Lane's four
 * tabs: Intent to hire / keep / fire / Follow-through.
 *
 * Their strip lazy-loads each panel from the server; ours are server-rendered on the page, so
 * with JavaScript off every panel is shown, each under its own heading, and nothing is hidden
 * from a reader without a script. stonelane-tabs.js switches them in place.
 */

.tab-switcher {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  margin: 1.5rem 0 0.75rem;
}
.tab-switcher::-webkit-scrollbar { display: none; }

.tab-btn {
  box-sizing: border-box;
  min-height: 44px;            /* the tap-target floor, theirs */
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active,
.tab-btn[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--earth);
  font-weight: 600;
}

.tab-panel[hidden] { display: none; }
.tab-panel > h3:first-child { margin-top: 0.5rem; }