/* Phone tab bar · the kit rules for this component, quoted from phase-2/kit (kit v3) by phase-4/src/build_pack.py.
   Tokens come from ../../styles.css. Build it as: a composed component. */
/* base.css */
.tabbar{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);background:hsl(var(--background)/.96);backdrop-filter:blur(var(--actbar-blur));border-top:1px solid hsl(var(--border));padding:6px 0 10px}
/* base.css */
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:46px;font:var(--text-10-5)/1 var(--font-voice);color:hsl(var(--muted-foreground));text-decoration:none}
/* base.css */
.tabbar a.on{color:hsl(var(--primary))}
/* families/app-shell/family.css */
.sh-tab{font-family:var(--font-voice);font-stretch:var(--font-stretch-title);font-variation-settings:normal;letter-spacing:0}
/* families/app-shell/family.css */
.sh-tab{position:relative}
/* families/app-shell/family.css */
.tabbar a.is-focus{outline:2px solid hsl(var(--ring));outline-offset:-4px;border-radius:var(--r-control)}
/* families/app-shell/family.css */
.tabbar a[aria-disabled=true]{opacity:.45}
/* families/app-shell/family.css */
.tabbar a .sh-tb{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:hsl(var(--primary));color:hsl(var(--primary-foreground));font:var(--w-semibold) var(--text-10)/16px var(--font-ui);text-align:center}
/* families/app-shell/family.css */
.tabbar a .sh-tb.warn{background:hsl(var(--warning))}
/* families/app-shell/family.css */
.tabbar a{position:relative}
/* families/app-shell/family.css */
.tabbar a.on::after{content:"";position:absolute;top:-6px;left:30%;right:30%;height:2px;border-radius:var(--r-pill);background:hsl(var(--primary))}