/* Flashcards, tests and materials lists: the grid / list switch and the
 * two layouts. Rows and cards share one markup; only the class changes. */
.library-bar{display:flex;justify-content:flex-end;margin-bottom:-6px}
.library-view{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--color-paper-2)}
.library-view a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 12px;border-radius:10px;color:var(--color-muted);font-size:13px;text-decoration:none;white-space:nowrap}
.library-view a:hover{color:var(--color-ink)}
.library-view a[aria-current=page]{background:var(--color-surface);color:var(--color-ink);font-weight:500;box-shadow:0 1px 3px var(--color-shadow)}
.library-view a:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.library-view svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.library-view circle{fill:currentColor;stroke:none}

/* Decks and test packages as cards: glyph on top, then progress and action. */
.deck-rows.is-grid{grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:12px}
.deck-rows.is-grid .deck-row,.deck-rows.is-grid .deck-row:first-child{grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;padding:16px;border:0;border-radius:16px;background:var(--color-paper-2)}
.deck-rows.is-grid .deck-row-main{flex-direction:column;align-items:flex-start;gap:12px}
.deck-rows.is-grid .deck-row-gap{display:none}
.deck-rows.is-grid .deck-row .deck-meter{grid-row:auto;grid-column:auto}
.deck-rows.is-grid .deck-row .btn{justify-self:start;margin-top:auto}
.deck-rows.is-grid .deck-meter::-webkit-progress-bar{background:var(--color-surface)}

/* Materials as rows inside one surface. */
.lesson-list.is-list{grid-template-columns:minmax(0,1fr);gap:0;padding:4px 22px;border-radius:var(--radius-surface);background:var(--color-surface)}
.lesson-list.is-list .lesson-row{grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0;border-radius:0;background:none;border-top:1px solid var(--color-rule)}
.lesson-list.is-list .lesson-row:first-child{border-top:0}
.lesson-list.is-list .lesson-row>:is(.lesson-symbol,.lesson-thumbnail){align-self:center;width:48px;height:48px;border-radius:12px;font-size:20px}
.lesson-list.is-list .lesson-row h2{margin:0;font-size:15px;line-height:1.35}
.lesson-list.is-list .lesson-row-copy>.badge+h2{margin-top:4px}
.lesson-list.is-list .lesson-row p{display:-webkit-box;margin:2px 0 4px;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.lesson-list.is-list .lesson-row>.btn,.lesson-list.is-list .lesson-row>form{grid-column:auto;justify-self:end}
.lesson-lock{display:inline-flex;align-items:center;gap:4px}
.lesson-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.test-last-score.is-good{color:var(--color-success)}
.report-next form{margin:0}
.report-next form .btn{display:inline-flex;align-items:center;gap:8px;margin:0;white-space:nowrap}
.report-next form .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

@media (max-width:767px){
 .library-bar{margin-bottom:-2px}
 .deck-rows.is-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .deck-rows.is-grid .deck-row,.deck-rows.is-grid .deck-row:first-child{padding:14px;gap:12px}
 .deck-rows.is-grid .deck-row .btn{min-width:0;width:100%}
 .lesson-list.is-list{padding:2px 14px}
 .lesson-list.is-list .lesson-row{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:12px 0}
 .lesson-list.is-list .lesson-row>:is(.lesson-symbol,.lesson-thumbnail){width:44px;height:44px}
}