/* ============================================================
   TABS — a row of options where one is selected (built for /pricing; candidate for a component)
   Requires: tokens.css, page.css

   One look, taken from the live /how-to-choose-birch-ai-tools filter: a Surface tray,
   the selected option a white segment inside it. Live 22 radius / 8.8 padding / 13.2 inner radius → tokens:
   tray --radius-xl with --space-xs inside, segment --radius-lg (nested: 24 − 8 = 16).
     .tabs          the tray: role="tablist" (switches a panel) or role="group" (a choice, aria-pressed)
     .tabs--sm      a smaller one (/pricing's «Billed monthly / Annually» under the bigger plan tabs)
     .tabs__icon    an icon before the label, sized from the text
     .tabs__note    a small note near the option's top-right corner («1 mo free»)
     .tabs__indicator  added by tabs.js: the white segment that glides to the selected option
   The selected option carries aria-selected="true" (tabs) or aria-pressed="true" (a choice).
   ============================================================ */

.tabs {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr; /* equal options, as wide as the widest label */
  gap: var(--space-xxs);
  padding: var(--space-xs);
  position: relative; /* the glide indicator (tabs.js) is placed inside it */
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  --motion-dur: var(--duration-toggle); /* the Toggle character: a choice changes in place */
  --motion-ease: var(--ease-toggle);
}
.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space);
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  font-family: inherit; /* size and weight come from the type class on the tab */
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.tabs__tab { z-index: 1; }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-pressed="true"] { background: var(--color-bg-white); }
/* no hover fill on options that are not selected (tried half-white, then Surface muted; dropped) */
/* glide (tabs.js): one white segment moves to the selected option; the option itself stays clear */
.tabs__indicator {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  pointer-events: none;
  transition: transform var(--motion-dur) var(--motion-ease), width var(--motion-dur) var(--motion-ease);
}
.tabs--glide .tabs__tab[aria-selected="true"], .tabs--glide .tabs__tab[aria-pressed="true"] { background: transparent; }
@media (prefers-reduced-motion: reduce) { .tabs__indicator { transition: none; } }
/* dark pages (live /mcp «How to connect», 27.10.2026): a Background/Grey tray, the options grey, the selected one black on
   its white segment */
.theme-dark .tabs { background: var(--color-bg-grey); }
.theme-dark .tabs__tab { color: var(--color-text-grey-on-grey); transition: color var(--duration-hover) var(--ease-hover); }
.theme-dark .tabs__tab[aria-selected="true"], .theme-dark .tabs__tab[aria-pressed="true"] { color: var(--color-text-inverted); }
@media (hover: hover) { .theme-dark .tabs__tab:not([aria-selected="true"], [aria-pressed="true"]):hover { color: var(--color-text); } }
.tabs__tab:focus-visible { outline: var(--border-thick) solid var(--color-accent-indigo); outline-offset: var(--border-thin); }
.tabs__icon { width: 1.25em; height: 1.25em; flex: none; }
img.tabs__icon { border-radius: 50%; } /* a picture icon (a product mark) is a circle; drawn marks keep their own shape */
.tabs__note {
  /* plain text pinned near the option's top-right corner, no badge; the option is
     tall enough that it clears the centred label */
  position: absolute;
  top: var(--space-xs);
  right: var(--space-sm);
  font-size: var(--text-eyebrow-size);
  line-height: 1;
}

.tabs--sm .tabs__tab { padding: var(--space-sm) var(--space-lg); } /* taller than first tried, so the note fits above the label */

@media (max-width: 47.9375rem) {
  .tabs { display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr); } /* the container's width; options share it */
  .tabs__tab { min-width: 0; padding-inline: var(--space-xs); }
  .tabs { container-type: inline-size; } /* full width here, so it can measure itself (inline-flex elsewhere: no) */
  /* narrow options: room on the right for the note, so the label centres in what is left */
  .tabs__tab:has(.tabs__note) { padding-right: var(--space-xl); } /* 80 ≥ the note (≈ 58) + its 16 from the edge */
}
/* a narrow frame (a 320 phone, the /design-system catalog at 375): an icon and «performance» no longer fit half the tray
   and spilled over its edge — the label steps down to Paragraph LG (27.10.2026) */
@container (max-width: 20rem) {
  .tabs__tab.t-para-xl { font-size: var(--text-para-lg-size); line-height: var(--text-para-lg-lh); }
}