/* 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 LINE UNDER THE LIVE TAB IS ui/underline's (owner, 2026-11-04: the
     universe page's List | Map line "should be standard on all elements that
     have an underline that indicates what the active item is"). `tabs()`
     puts `data-underline="x"` on the strip and the shared module draws the
     one travelling, glowing line. This file's own `::after` bar, which grew
     in place under each tab, is gone, so there is exactly one line.

     ROOM FOR ITS GLOW. The strip scrolls sideways, and a scroller clips both
     axes, so the bloom round the line needs room INSIDE the strip: padding
     below the tabs and at both ends (the first tab's line sits on the
     strip's leading edge), cancelled by negative margins so nothing around
     the strip moves (public/app/styles/CONTEXT.md, "Glows are not clipped",
     point 3). The strip's hairline therefore cannot be its border any more -
     a border sits outside that padding - so it is a 1px background on the
     CONTENT box's floor: exactly under the tabs, exactly their width. The
     line sits one pixel over it, where the old bar sat. */
  .tabs {
    --underline-offset: 1px;
    --tabs-room: var(--underline-room, var(--space-2));
    border-bottom: 0;
    padding: 0 var(--tabs-room) var(--tabs-room);
    margin: 0 calc(-1 * var(--tabs-room)) calc(-1 * var(--tabs-room));
    background: linear-gradient(var(--border), var(--border)) content-box 0 100% / 100% 1px no-repeat;
  }

  .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;
  }

  /* 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 line
     cannot land on it, 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 { transition: none; }
  }
}