/* Trustline — custom polish on top of Tailwind */
:root { --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; }
body { font-family: var(--font-sans); }

/* Subtle scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }

/* Multi-line clamp fallback */
.line-clamp-\[4\] { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-\[3\] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Hide Alpine elements until initialized */
[x-cloak] { display: none !important; }

/* Page reveal animation (re-runs each time a tab is shown via display toggle) */
@keyframes tlPageIn { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes tlFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tlPop { 0% { opacity: 0; transform: scale(.92) translateY(8px); } 60% { opacity: 1; transform: scale(1.01); } 100% { transform: none; } }
@keyframes tlShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

section[x-show] { animation: tlPageIn .45s cubic-bezier(.22,.61,.36,1) both; }

/* Staggered card entrance for KB + stats grids */
.tl-stagger > * { animation: tlFadeUp .45s ease both; }
.tl-stagger > *:nth-child(1) { animation-delay: .03s; }
.tl-stagger > *:nth-child(2) { animation-delay: .06s; }
.tl-stagger > *:nth-child(3) { animation-delay: .09s; }
.tl-stagger > *:nth-child(4) { animation-delay: .12s; }
.tl-stagger > *:nth-child(5) { animation-delay: .15s; }
.tl-stagger > *:nth-child(6) { animation-delay: .18s; }
.tl-stagger > *:nth-child(7) { animation-delay: .21s; }
.tl-stagger > *:nth-child(8) { animation-delay: .24s; }

/* Modal pop */
.tl-modal-card { animation: tlPop .3s cubic-bezier(.22,.61,.36,1) both; }

/* Sidebar active indicator */
nav button svg { width: 16px; height: 16px; }