/* Tab — LittleLives design system
   Tokens follow /tokens/semantics.web.json. In sv-frontend, replace custom
   props with Tailwind classes (bg-surface/*, text-content/*).
*/

:root {
  /* Primitives (subset) */
  --color-white:        #ffffff;
  --color-dim-06:       rgba(0, 0, 0, 0.06);
  --color-neutral-25:   #fafafa;   /* surface/default/neutral-soft-secondary */
  --color-neutral-100:  #e6e6e6;
  --color-neutral-600:  #8b8b8b;
  --color-neutral-950:  #333333;
  --color-brand-50:     #e6f8fd;
  --color-brand-400:    #33c6f0;
  --color-brand-800:    #005b82;

  /* Semantics — mirror of /tokens/semantics.web.json */
  --surface-default-white:                 var(--color-white);
  --surface-default-brand-soft:            var(--color-brand-50);
  --surface-default-neutral-soft-secondary: var(--color-neutral-25);
  --surface-hover-clear:                   var(--color-dim-06);

  --content-neutral-primary:     var(--color-neutral-950);
  --content-neutral-tertiary:    var(--color-neutral-600);
  --content-brand-strong:        var(--color-brand-800);

  --stroke-neutral-soft-secondary: var(--color-neutral-100);
  --stroke-brand:                  var(--color-brand-400);
}

/* ---------- Tablist ---------- */
.ll-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;                          /* tabs are flush — no spacing */
  align-items: stretch;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}

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

/* Tier 1 baseline divider — used for STANDALONE tab usage (storybook).
   When tab is rendered inside <PageShell>, page-shell suppresses this
   border and provides a full-width divider on its own wrapper. */
.ll-tabs[data-tier="tier-1"] {
  border-bottom: 1px solid var(--stroke-neutral-soft-secondary);
}

/* Tier 2 row — neutral-soft-secondary background, full-width strip.
   Tabs sit flush, no rounding on tabs, no row divider. */
.ll-tabs[data-tier="tier-2"] {
  background: var(--surface-default-neutral-soft-secondary);
}

/* ---------- Tab ---------- */
.ll-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-radius: 8px 8px 0 0;      /* tier 1: rounded top, flat bottom (indicator sits flush) */
  cursor: pointer;
  color: var(--content-neutral-primary);
  font-family: inherit;
  font-size: 16px;                 /* text-body-16 */
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

/* Tier 1, size 36 (small) — same rounded top */
.ll-tabs[data-tier="tier-1"][data-size="36"] .ll-tab {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 8px 8px 0 0;
}

/* Tier 2 — 36px, flush rectangles, no rounding */
.ll-tabs[data-tier="tier-2"] .ll-tab {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 0;
}

/* Hover */
.ll-tab:hover {
  background: var(--surface-hover-clear);
}

/* Focus */
.ll-tab:focus-visible {
  outline: 2px solid var(--stroke-brand);
  outline-offset: -2px;
}

/* ---------- Selected (tier 1) ---------- */
.ll-tabs[data-tier="tier-1"] .ll-tab[aria-selected="true"] {
  background: var(--surface-default-brand-soft);
  color: var(--content-brand-strong);
}

/* 2px indicator — sits ON TOP of the tier-1 divider, fully covering it.
   z-index ensures the brand-strong line draws above any neutral-soft
   divider provided by a parent wrapper (e.g. PageShell). */
.ll-tabs[data-tier="tier-1"] .ll-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--content-brand-strong);
  z-index: 1;
}

/* ---------- Selected (tier 2) — pill bg only, no underline ---------- */
.ll-tabs[data-tier="tier-2"] .ll-tab[aria-selected="true"] {
  background: var(--surface-default-brand-soft);
  color: var(--content-brand-strong);
}

/* ---------- Disabled ---------- */
.ll-tab[aria-disabled="true"],
.ll-tab[aria-disabled="true"]:hover {
  color: var(--content-neutral-tertiary);
  background: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.ll-tab[aria-disabled="true"][aria-selected="true"]::after {
  background: var(--stroke-neutral-soft-secondary);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ll-tab { transition: none !important; }
}