/* Grid / list switch (qw-libview.js) and the description line on library cards. Tokens only. */
.lv-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); flex: none; }
.lv-toggle button:not(#qb) { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-weight: 700; cursor: pointer; transition: background 140ms ease, color 140ms ease, transform 100ms ease; }
.lv-toggle button:not(#qb):hover { color: var(--text); background: var(--surface-hover); }
.lv-toggle button:not(#qb):active { transform: scale(.95); }
.lv-toggle button.on:not(#qb) { background: var(--accent-fill); color: var(--on-accent-fill); }
.ql-searchbar .lv-toggle { margin-left: auto; }
@media (max-width: 560px) { .lv-toggle button:not(#qb) { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; } .lv-toggle button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.ql-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 4px; color: var(--text-muted); font-size: .9rem; line-height: 1.4; }
#ql-list[data-layout="list"] { grid-template-columns: 1fr; gap: 8px; }
#ql-list[data-layout="list"] .ql-desc { -webkit-line-clamp: 1; }
#ql-list[data-layout="grid"] .ql-card { min-height: 150px; }
#quizLibrary[data-layout="list"] .collection-card { min-height: 0; }
#quizLibrary[data-layout="list"] .quiz-grid, .search-result-grid[data-layout="list"] { grid-template-columns: 1fr; }