/* Bottom tab bar (2026-09-03, design-review step 4). Markup: templates/ _tabbar.html. Link this sheet LAST in every : besides the bar it overrides three things other stylesheets set for a bar-less page — the body's bottom padding, and the resting positions of the Crew League AI button (ai_chat.css) and the feedback button (feedback.css), which now float ABOVE the bar instead of on the bottom edge. Cascade order does that, no !important. */ /* Back to 56px (2026-09-09, second pass): it went to 60 only because "Player rankings" had to wrap, and Eli shortened that label to "Rankings" — "looks cleaner that way". Every label is now one line (widest is "Live scores", ~60.5px of a 78.6px column in SF Pro's metrics), so the bar does not need the extra row. */ :root { --tabbar-h: 56px; } .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; /* Below the AI dock (55), feedback (60) and the trade board's picker sheet (80), above the AI button (49): an open dock covers the bar. */ background: var(--bg-card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* overflow-x clip: five flex items can round to 393.6px on a 393px phone (design review part two); clip on one axis leaves focus rings visible. */ .tabbar-inner { max-width: 760px; margin: 0 auto; display: flex; height: var(--tabbar-h); overflow-x: clip; } /* Centred again: every label is one line, so there is no taller neighbour to align away from. The span rule below stays as a guard — if a future label ever wraps it still centres instead of overflowing. */ .tb-item { flex: 1 1 0; min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-muted); text-decoration: none; font-family: inherit; font-size: var(--fs-caption); font-weight: 600; line-height: 1; background: none; border: 0; padding: 0 2px; margin: 0; width: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tb-item span { max-width: 100%; text-align: center; line-height: 1.15; } .tb-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tb-more svg circle { fill: currentColor; stroke: none; } .tb-item.active { color: var(--accent); } .tb-item.active span { font-weight: 700; } .tb-item:active { color: var(--ink); } /* "More": a sheet that rises from the bar, scrim behind it. */ .tb-scrim { position: fixed; inset: 0; z-index: 53; background: rgba(2, 6, 23, 0.55); } .tb-sheet { position: fixed; left: 0; right: 0; z-index: 54; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); background: var(--bg-card); border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; padding: 0.35rem 0.6rem 0.6rem; box-shadow: 0 -8px 24px rgba(2, 6, 23, 0.55); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .tb-scrim[hidden], .tb-sheet[hidden] { display: none; } .tb-sheet-inner { max-width: 760px; margin: 0 auto; display: grid; gap: 2px; } .tb-sheet-h { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); padding: 0.4rem 0.6rem 0.2rem; } .tb-sheet a { display: flex; align-items: center; min-height: 48px; padding: 0 0.6rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: var(--fs-body); font-weight: 600; } .tb-sheet a.active { background: var(--bg-accent); color: var(--accent-bright); } .tb-sheet a:active { background: var(--bg-raised); } /* Everything that used to sit on the bottom edge now sits above the bar. `body .aichat-fab` (0,1,1) on purpose: ai_chat.css is linked at the END of on the league pages, after this sheet, so plain `.aichat-fab` lost the cascade and the button sat behind the bar (caught 2026-09-03). */ body { padding-bottom: calc(var(--tabbar-h) + 4.5rem + env(safe-area-inset-bottom, 0px)); } body .aichat-fab { bottom: calc(var(--tabbar-h) + 0.75rem + env(safe-area-inset-bottom, 0px)); } body .fb-btn { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 640px) { body .aichat-fab { bottom: calc(var(--tabbar-h) + 1.1rem + env(safe-area-inset-bottom, 0px)); } }