/* NotebookLM Gallery - Shared Styles */

.material-symbols-outlined {
	font-variation-settings:
		"FILL" 0,
		"wght" 400,
		"GRAD" 0,
		"opsz" 24;
	vertical-align: middle;
}

.notebook-card {
	transition: all 0.3s ease;
	cursor: pointer;
}

.notebook-card:hover {
	box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.05);
	transform: translateY(-2px);
}

.glass-blur {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Line clamp utilities */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Skeleton loading animation */
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

.skeleton {
	background: linear-gradient(90deg, #eceef0 25%, #e6e8ea 50%, #eceef0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: 0.5rem;
}

/* Category active state */
.category-active {
	background-color: #dbe1ff !important;
	color: #00174b !important;
	font-weight: 600 !important;
}

/* Heart animation for likes */
.heart-icon {
	transition: all 0.2s ease;
	cursor: pointer;
}
.heart-icon:hover {
	transform: scale(1.15);
}
.heart-icon.liked {
	font-variation-settings:
		"FILL" 1,
		"wght" 400,
		"GRAD" 0,
		"opsz" 24;
	color: #e11d48 !important;
}

/* Card thumbnail fallback gradient */
.thumbnail-fallback {
	background: linear-gradient(135deg, #dbe1ff 0%, #b4c5ff 50%, #e0e3e5 100%);
}

/* Scrollbar for sidebar */
.sidebar-scroll::-webkit-scrollbar {
	width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-track {
	background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
	background: #c2c6d9;
	border-radius: 9999px;
}

/* Focus-visible outline for keyboard navigation */
:focus-visible {
	outline: 2px solid #004bca;
	outline-offset: 2px;
}

/* Skip link — visually hidden until focused */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	position: fixed;
	left: 50%;
	top: 1rem;
	transform: translateX(-50%);
	width: auto;
	height: auto;
	padding: 0.75rem 1.5rem;
	background: #004bca;
	color: white;
	border-radius: 0.5rem;
	z-index: 9999;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}