/* Tab strip. The generic kit twin of the store's `.store-tabs`, which is what
   `tabs()` renders when a caller does not override `className`.

   ── One deliberate difference from `store-tabs.css`, and why ──────────────

   `ui/tabs/CONTEXT.md` expects these two rule sets to end up "byte-for-byte
   equivalent modulo the selector". They are not, and the difference is one
   value: the store's selected bar carries a `box-shadow` glow and a stronger
   upward accent wash. That treatment belongs to the store's row in
   `DESIGN.md` section 0, which runs MOTION 6 because it is a marketing
   surface. This strip is the default for every other caller, and the named
   ones are utility screens: an admin panel at MOTION 1, a settings pane at 4.
   A lit, glowing bar on an admin table is the accent drift section 2 bans.

   So the structure, the interaction and the selection contract are identical
   and only the loudness differs. The store keeps its own class and its own
   file; nothing here changes a pixel of it.

   ── The contract that must not change ────────────────────────────────────

   Selection keys off `aria-selected`, never off a class. That is what makes
   restyling this strip incapable of changing which panel opens, and it is
   load-bearing rather than stylistic. */

@layer components {
  .tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    /* Defensive: a fifth tab scrolls inside the strip rather than widening the
       body. DESIGN.md section 5, "no horizontal scroll on the page body,
       ever". */
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }

  .tabs__tab {
    position: relative;
    flex: 0 0 auto;
    min-height: calc(44px * var(--ui-scale));
    padding: var(--space-3) var(--space-5);
    /* THE RAIL'S VOICE (2026-10-05). Mono, tracked and uppercase, faint until
       you are on it or over it - the same words the nav rail, the hamburger
       sheet and the hero's story tabs are set in, so every tabbed surface in
       the product reads as one family. Square, like every other control since
       the kit stopped rounding. */
    border-radius: 0;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-2) var(--ease-out),
                background-color var(--dur-2) var(--ease-out);
  }

  /* The bar is a pseudo-element so the tab can animate its width without
     animating a layout property, and so the strip's own hairline is never
     covered by a transparent border. */
  .tabs__tab::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: var(--space-3);
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    opacity: 0;
    /* scaleX rather than an animated inset: DESIGN.md section 7 bans animating
       layout properties, and only transform and opacity may animate. */
    transform: scaleX(0);
    transition: transform var(--dur-3) var(--ease-out),
                opacity var(--dur-2) var(--ease-out);
  }

  .tabs__tab:hover:not(:disabled) {
    color: var(--text);
    background: color-mix(in oklab, var(--text) 4%, transparent);
  }
  .tabs__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

  .tabs__tab[aria-selected="true"] {
    color: var(--text);
    font-weight: 600;
  }
  .tabs__tab[aria-selected="true"]::after {
    transform: scaleX(1);
    opacity: 1;
  }

  /* Every disabled control states why it is disabled (DESIGN.md section 4), so
     a caller that disables a tab is expected to put the reason in its own
     `title` or helper text. What this file owes is that the state reads as
     unavailable rather than merely dim: no hover, no pointer, and the bar
     cannot appear, because `tabs()` hands selection to the next enabled tab
     rather than leaving a disabled one marked selected. */
  .tabs__tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @media (prefers-reduced-motion: reduce) {
    .tabs__tab, .tabs__tab::after { transition: none; }
    .tabs__tab[aria-selected="true"]::after { transform: none; }
  }
}