/* ATELIER 38 — elastic tabs. */

.tablist {
  position: relative; display: flex; gap: var(--sp-1, 4px); width: fit-content;
  max-width: 100%; padding: 4px; background: var(--gray-2, #f6f6f5);
  border: 1px solid var(--gray-6, #dcdcd8); border-radius: 999px;
}

/* One pill for the whole strip. left and width are written by the script;
   transform is left free for the FLIP animation to own. */
.indicator {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px);
  width: 88px; background: var(--accent-9, #b4501e); border-radius: 999px;
  z-index: 0; will-change: transform;
}

.tablist button[role="tab"] {
  position: relative; z-index: 1;          /* labels ride above the pill */
  background: none; border: none; padding: 9px 18px; border-radius: 999px;
  white-space: nowrap; color: var(--gray-11, #45443e);
  transition: color var(--dur-micro, 120ms) var(--ease-out, cubic-bezier(.2,.7,.3,1));
}
/* .is-on is set at half the spring, not on click: the label flips as the pill
   passes under it. aria-selected still moves immediately. */
.tablist button[role="tab"].is-on { color: var(--accent-contrast, #fff); }

/* height is animated between two measured pixel values, then released to auto */
.panels {
  position: relative; margin-top: var(--sp-5, 20px); overflow: hidden;
  transition: height var(--dur-state, 220ms) var(--ease-out, cubic-bezier(.2,.7,.3,1));
}
[role="tabpanel"] { transition: opacity var(--dur-state, 220ms) var(--ease-out, cubic-bezier(.2,.7,.3,1)); }
/* the outgoing panel leaves the flow so both panels overlap during the fade */
[role="tabpanel"].leaving { position: absolute; inset: 0; }