/* Tabs
 *
 * Sections of one screen, switched in place. Three screens use them — Money,
 * Inventory, and an Event's four sections — and the wiring was copied twice
 * before it was extracted, which is the usual sign.
 *
 *   <div class="tabs" role="tablist" aria-label="Money views">
 *     <button class="tab" role="tab" id="tab-a" aria-selected="true"  aria-controls="p-a">Rows</button>
 *     <button class="tab" role="tab" id="tab-b" aria-selected="false" aria-controls="p-b">
 *       Still out<span class="tab__count">3</span>
 *     </button>
 *   </div>
 *   <div id="p-a" role="tabpanel" aria-labelledby="tab-a" tabindex="0">…</div>
 *   <div id="p-b" role="tabpanel" aria-labelledby="tab-b" tabindex="0" hidden>…</div>
 *
 * ── what carries the contract, and it is not this file ───────────────────────
 * Carrying `role="tablist"` advertises a keyboard contract: arrow keys move
 * between tabs, Home and End jump to the ends. CSS cannot supply that, and a
 * tablist without it is worse than a row of buttons, because it has promised
 * something. The behaviour belongs with whatever implements the component.
 *
 * ── selection is never colour alone ──────────────────────────────────────────
 * The selected tab is heavier AND carries the accent rule beneath it AND is
 * `aria-selected`. Any one of those removed still leaves two.
 *
 * ── the panel takes focus, not the tab ───────────────────────────────────────
 * `tabindex="0"` on the panel is deliberate: the panel is a scrollable region
 * with no other focusable entry point, and without it a keyboard user tabs from
 * the tab straight past everything the tab just revealed.
 */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-block-end: 1px solid var(--color-border);
}

.tab {
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;

  padding: var(--space-3) var(--space-4);
  min-block-size: var(--target-min);

  /* The rule sits on the tab and overlaps the tablist's own border, so the
     selected tab reads as joined to its panel rather than underlined. */
  border-block-end: var(--border-width-accent) solid transparent;
  margin-block-end: -1px;
}

.tab:hover { color: var(--color-text); }

.tab[aria-selected="true"] {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  border-block-end-color: var(--color-accent);
}

.tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  /* Inset: an outward ring on a tab is clipped by the tablist's own edge. */
  outline-offset: calc(var(--focus-ring-offset) * -1);
}

/* Count on a tab — "Still out 3". It belongs on the tab rather than inside the
 * panel, because the number is the reason to go there and a closed panel says
 * nothing. Wraps into the accessible name, which reads correctly: "Still out 3".
 *
 * Shown at zero as well. "Nothing is out" is information, and a count that
 * disappears makes the reader wonder whether it failed to load. */
.tab__count {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding-inline: var(--space-2);

  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;

  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.tab[aria-selected="true"] .tab__count {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}

/* Wrapping, not scrolling. Four tabs at a phone width wrap to two rows and stay
 * readable; a horizontally scrolling tab strip hides its own last entry, which
 * is how a destination becomes undiscoverable. Revisit only if a screen ever
 * needs more tabs than fit two rows — and then the answer is fewer tabs. */