/* =====================================================================
   Tab item · Style=Underline — Figma set 728:10603 (props Label, Count, Selected). Result scope switcher in Search.
   14 top padding, label row (text-sm + 12/16 count, 6 apart), 12 gap, 2px indicator (accent/default when selected) → 48 tall.
   Unselected: text/secondary regular. Selected: text/primary semibold. Count hidden when empty.
   Tab bar (.tab-bar): items 32 apart, border-bottom border/subtle, scrolls sideways when it does not fit.
   ===================================================================== */
.tab-bar{display:flex;align-items:flex-end;gap:var(--space-32);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border-subtle);background:var(--surface-background)}
.tab-bar::-webkit-scrollbar{display:none}
.tab-item{flex:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-12);height:48px;padding:14px 0 0;margin:0;border:0;background:none;cursor:pointer;
  color:var(--text-secondary);font:var(--text-sm);white-space:nowrap;text-decoration:none;-webkit-tap-highlight-color:transparent}
.tab-item__label{display:flex;align-items:center;gap:var(--space-6);min-height:20px}
/* Show count + Count (Prompt 14 A1): a small pill, badge/neutral-bg, text/secondary, 12/16 Semibold, radius full, 2/8 padding.
   Same in Square and Underline; the tab keeps its height. Empty count = Show count off. */
.tab-item__count{display:inline-flex;align-items:center;box-sizing:border-box;padding:var(--space-2) var(--space-8);border-radius:var(--radius-full);background:var(--badge-neutral-bg);color:var(--text-secondary);font:var(--text-xs-semibold)}
.tab-item__count:empty{display:none}
.tab-item::after{content:"";display:block;height:2px;background:transparent;transition:background-color .2s}
.tab-item:hover{color:var(--text-primary)}
.tab-item[aria-selected="true"],.tab-item[aria-pressed="true"],.tab-item.is-selected{color:var(--text-primary);font-weight:600}
.tab-item[aria-selected="true"] .tab-item__count,.tab-item[aria-pressed="true"] .tab-item__count,.tab-item.is-selected .tab-item__count{font:var(--text-xs-semibold)}
.tab-item[aria-selected="true"]::after,.tab-item[aria-pressed="true"]::after,.tab-item.is-selected::after{background:var(--accent-default)}
.tab-item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent-default);border-radius:var(--radius-sm)}

/* Style=Square (Figma 728:10603, "Tab item — Square corners"): 44 high, 8 radius, 16 side padding, text-sm.
   Unselected: Default surface/default · Hover filter-chip fill + border · Pressed navigation secondary pressed · Focus 2px text/primary border · Disabled muted.
   Selected: accent/default · Hover / Pressed accent/hover · Focus 2px text/primary border. Tab bar — Square corners holds them 8 apart. */
.tab-item--square{flex-direction:row;align-items:center;justify-content:center;gap:var(--space-8);height:44px;min-width:108px;padding:0 var(--space-16);box-sizing:border-box;
  border:1px solid transparent;border-radius:var(--radius-md);background:var(--surface-default);color:var(--text-primary);font:var(--text-sm)}
.tab-item--square::after{display:none}
.tab-item--square:is(:hover,.is-hover){background:var(--filter-chip-background);border-color:var(--filter-chip-border);color:var(--text-primary)}
.tab-item--square:is(:active,.is-pressed){background:var(--button-nav-secondary-bg-pressed);border-color:var(--filter-chip-border)}
.tab-item--square:is(:focus-visible,.is-focus){outline:none;border:2px solid var(--text-primary);box-shadow:none}
.tab-item--square:is(:disabled,.is-disabled){background:transparent;border-color:var(--border-subtle);color:var(--text-muted);cursor:not-allowed}
.tab-item--square:is([aria-selected="true"],.is-selected){background:var(--accent-default);border-color:var(--accent-default);color:var(--accent-text);font-weight:400}
.tab-item--square:is([aria-selected="true"],.is-selected):is(:hover,.is-hover,:active,.is-pressed){background:var(--accent-hover);border-color:var(--accent-hover)}
.tab-item--square:is([aria-selected="true"],.is-selected):is(:focus-visible,.is-focus){border:2px solid var(--text-primary)}
.tab-item:not(.tab-item--square):is(.is-hover)::after{background:var(--border-strong)}
.tab-item:is(.is-disabled,:disabled){color:var(--text-muted);cursor:not-allowed}
.tab-bar--square{gap:var(--space-8);border-bottom:0}

/* Tab bar (Figma set 2270:123120, Orientation Horizontal | Vertical; Prompt 14 A1): a container of Tab items (Square). surface/default,
   border/default, radius md-lg, 4 padding, 4 gap. Horizontal: fills the width, equal tabs. Vertical: 240 wide, full-width left-aligned tabs.
   Used by the Feed (For you | Saved) and Settings. Search keeps the Underline row (.tab-bar). */
.tab-bar-box{box-sizing:border-box;display:flex;gap:var(--space-4);padding:var(--space-4);background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md-lg)}
.tab-bar-box--horizontal{width:100%}
.tab-bar-box--horizontal>.tab-item--square{flex:1 1 0;min-width:0;padding:var(--space-4) var(--space-12)}
.tab-bar-box--vertical{flex-direction:column;width:240px}
.tab-bar-box--vertical>.tab-item--square{justify-content:flex-start;width:100%;min-width:0;padding:var(--space-4) var(--space-12)}
.tab-bar-box>.tab-item--square:is([aria-selected="true"],[aria-current="page"],.is-selected){background:var(--accent-default);border-color:var(--border-default);color:var(--accent-text)}