/** * Tier Lock Icons * * Single source of truth for the Pro lock icon used across all gated features. * Usage: * * Visibility is controlled by [data-tier] on , set by auth/index.js. * Use .tier-lock-free-only for features guests can access (bankroll metrics, graph controls). */ .tier-lock { display: none; width: 13px; height: 13px; flex-shrink: 0; margin-right: 5px; background: linear-gradient(135deg, var(--accent) 0%, var(--premium-dark) 100%); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='12' height='9' rx='2'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='12' height='9' rx='2'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Show for all non-Pro users (guest + free) -- practice, ranges, clock */ [data-tier="guest"] .tier-lock, [data-tier="free"] .tier-lock { display: inline-block; } /* Show only for free authenticated users -- bankroll metrics, graph controls */ [data-tier="free"] .tier-lock-free-only { display: inline-block; } /* Guests can access bankroll graph controls -- suppress lock on free-only features */ [data-tier="guest"] .tier-lock-free-only { display: none; }