/* Tabs — WAI-ARIA tabs pattern.
 * Legacy .tabs/.tabs__tab block retained for backward-compatibility.
 * V2 design system uses .lc-tabs/.lc-tabs__tab (see below).
 * Horizontal scroll on narrow viewports. */

.tabs {
  display: flex;
  gap: 0.125rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0.125rem;
}

.tabs::-webkit-scrollbar {
  display: none;
}

/* Override Pico's default filled-button styling — tabs are text-like, not
 * primary actions. Covers base, hover, focus, active states. */
button.tabs__tab,
button.tabs__tab:hover,
button.tabs__tab:focus,
button.tabs__tab:active,
button.tabs__tab:is([aria-selected="true"]) {
  --pico-background-color: transparent;
  --pico-border-color: transparent;
  --pico-box-shadow: none;
}

button.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.625rem 1rem;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--pico-muted-color);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

/* Active underline is an ::after so transitions are smooth and it sits
 * flush with the tablist border without collapsing layout. */
button.tabs__tab::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  height: 3px;
  background-color: transparent;
  border-radius: 3px 3px 0 0;
  transition: background-color 0.15s ease;
}

button.tabs__tab:hover {
  color: var(--pico-color);
  background-color: rgba(0, 0, 0, 0.04);
}

button.tabs__tab[aria-selected="true"] {
  color: var(--pico-primary-color, #1976d2);
}

button.tabs__tab[aria-selected="true"]::after {
  background-color: var(--pico-primary-color, #1976d2);
}

button.tabs__tab:focus-visible {
  outline: 2px solid var(--pico-primary-focus, #1976d2);
  outline-offset: -2px;
}

.tabs__tab-label {
  line-height: 1;
}

.tabs__badge {
  display: inline-block;
  min-width: 1.375rem;
  padding: 0 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.375rem;
  text-align: center;
  border-radius: 999px;
  background-color: var(--pico-muted-border-color);
  color: var(--pico-muted-color);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

button.tabs__tab[aria-selected="true"] .tabs__badge {
  background-color: var(--pico-primary-color, #1976d2);
  color: #fff;
}

.tabs__panel[hidden] {
  display: none;
}

.tabs__panel {
  padding-top: 1rem;
}

/* ─── v2 DS — .lc-tabs family (U5 / issue #594 restyle) ─────────────────
 *
 * Segmented-control: a sand container wraps all tabs as inset pills.
 * Active tab: dark-olive fill with paper text. Hover: white fill.
 * Inactive tabs: muted ink on the container surface; no rule line.
 * Compound selectors (button.lc-tabs__tab / a.lc-tabs__tab) override
 * Pico's own button and anchor cascade without !important.
 * All color values consume var(--color-*) semantic aliases from tokens.css.
 * ──────────────────────────────────────────────────────────────────────── */

.lc-tabs {
  /* Component-local sizing — V2 proposal spec, off the global control
   * scale (--control-h-sm/-/-lg = 32/40/48). Named here so the math
   * stays in one place. */
  --lc-tabs-h: 44px;
  --lc-tab-h: 34px;

  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: var(--lc-tabs-h);
  padding: 0 var(--sp-1);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-2);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.lc-tabs::-webkit-scrollbar {
  display: none;
}

/* Each tab button still carries both `.tabs__tab` and `.lc-tabs__tab` for
 * backward compatibility; suppress the legacy ::after underline strip on the
 * active tab, which does not belong in the v2 segmented control. */
.lc-tabs button.tabs__tab::after,
.lc-tabs a.tabs__tab::after {
  display: none;
  content: none;
}

/* Neutralise Pico's button/anchor cascade for all states before
 * applying our own. Covers base, hover, focus, active, and selected. */
button.lc-tabs__tab,
button.lc-tabs__tab:hover,
button.lc-tabs__tab:focus,
button.lc-tabs__tab:active,
button.lc-tabs__tab[aria-selected="true"],
a.lc-tabs__tab,
a.lc-tabs__tab:hover,
a.lc-tabs__tab:focus,
a.lc-tabs__tab:active,
a.lc-tabs__tab[aria-current="page"] {
  --pico-background-color: transparent;
  --pico-border-color: transparent;
  --pico-box-shadow: none;
  --pico-color: inherit;
  --pico-text-decoration: none;
}

/* Base tab — button and anchor variants share the same chrome.
 * Fixed 34px height inside the 44px container centres each pill with a
 * 5px gap top/bottom. Concentric corner radius: outer is --r-2, inner is
 * --r-2 minus the 2px gap from the centring math.
 * `min-height: auto` / `margin: 0` override the legacy .tabs__tab rules
 * (44px min-height, -1px bottom margin) that would otherwise inflate
 * the segmented control. */
button.lc-tabs__tab,
a.lc-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--lc-tab-h);
  min-height: auto;
  margin: 0;
  padding: 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-ink-muted);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-2) - 2px);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out);
}

/* Hover (non-active) — white pill lifts above the sand container */
button.lc-tabs__tab:hover,
a.lc-tabs__tab:hover {
  color: var(--color-ink);
  background: var(--color-paper);
}

/* Active / selected — dark-olive fill */
button.lc-tabs__tab[aria-selected="true"],
a.lc-tabs__tab[aria-current="page"] {
  color: var(--color-ink-onfill);
  background: var(--color-primary);
}

/* Keep active dark on hover */
button.lc-tabs__tab[aria-selected="true"]:hover,
a.lc-tabs__tab[aria-current="page"]:hover {
  color: var(--color-ink-onfill);
  background: var(--color-primary-hover);
}

/* Focus ring — keyboard accessible, matches design system */
button.lc-tabs__tab:focus-visible,
a.lc-tabs__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Disabled state */
button.lc-tabs__tab[aria-disabled="true"],
a.lc-tabs__tab[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tab label — line-height normalisation */
.lc-tabs__tab-label {
  line-height: 1;
}

/* Tab badge — small circular count chip beside the label. Reads on the
 * sand container by default; flips to a sand chip when the parent tab
 * lifts to white on hover; inverts to soft-olive-on-dark on the active. */
.lc-tabs .tabs__badge {
  background: var(--color-paper);
  color: var(--color-ink-muted);
  transition:
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

button.lc-tabs__tab:not([aria-selected="true"]):hover .tabs__badge,
a.lc-tabs__tab:not([aria-current="page"]):hover .tabs__badge {
  background: transparent;
  color: var(--color-ink-muted);
}

button.lc-tabs__tab[aria-selected="true"] .tabs__badge,
a.lc-tabs__tab[aria-current="page"] .tabs__badge {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.tabs__panel[hidden] {
  display: none;
}

.tabs__panel {
  padding-top: var(--sp-4);
}