/* Torro — one tab pattern for the whole app (Discover, Offerbox, Offer thread, Tasks | Crew, Profile).
   Underline tabs: ink text, bold reserved so nothing shifts, a 2px ink bar that slides to the selection.
   Phones: equal columns across the full width. Desktop: left-aligned labels, bar as wide as the label.
   --scroll: as many tabs as needed, side-scroll on narrow screens (Profile). */
:where(.utabs) { position: relative; }
.utabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--color-surface); box-shadow: inset 0 calc(-1 * var(--hairline)) 0 var(--color-line); }
.utabs[hidden] { display: none !important; }
.utabs > :is(button, a) { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 48px; padding: 0 12px; color: var(--color-ink-muted); font-size: 15px; line-height: 20px; font-weight: 400; text-decoration: none; white-space: nowrap; background: none; border-radius: 0; box-shadow: none; transition: color .15s ease; -webkit-tap-highlight-color: transparent; }
.utabs > :is([aria-selected="true"], [aria-current="page"]) { color: var(--color-ink); }
.utabs__label { display: inline-grid; }
.utabs__label::after { content: attr(data-l); font-weight: 700; height: 0; visibility: hidden; overflow: hidden; user-select: none; pointer-events: none; }
.utabs__label, .utabs__label::after { grid-area: 1 / 1; }
.utabs > :is([aria-selected="true"], [aria-current="page"]) .utabs__label { font-weight: 700; }
.utabs__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--color-field); color: var(--color-ink-muted); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.utabs__n:empty { display: none; }
.utabs > :is([aria-selected="true"], [aria-current="page"]) .utabs__n { color: var(--color-ink); }
.utabs__ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px 2px 0 0; background: var(--color-ink); pointer-events: none; transition: transform .28s cubic-bezier(.2, .8, .2, 1), width .28s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.utabs > :is(button, a):focus-visible { outline: none; background: var(--color-hover); border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .utabs__ink { transition: none; } }
@media (hover: hover) and (pointer: fine) { .utabs > :is(button, a):not([aria-selected="true"]):not([aria-current="page"]):hover { color: var(--color-ink-2); } }

/* Many tabs: scroll sideways instead of squeezing */
.utabs--scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
.utabs--scroll::-webkit-scrollbar { display: none; }
.utabs--scroll > :is(button, a) { flex: 1 0 auto; padding: 0 14px; }

@media (min-width: 1024px) {
  .utabs:not(.utabs--fill) { display: flex; gap: 32px; background: var(--color-bg); }
  .utabs:not(.utabs--fill) > :is(button, a) { flex: none; justify-content: flex-start; padding: 0 2px; height: 52px; font-size: 16px; }
  .utabs:not(.utabs--fill) > :is(button, a):focus-visible { padding: 0 8px; margin: 0 -6px; }
}