/* P-11 · библиотека */

.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chips button { font: inherit; font-size: 14.5px; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

.count { font-size: 13.5px; color: var(--ink-3); margin: 0 0 var(--sp-4); }

/* ── карточка материала ───────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.mat { display: flex; align-items: flex-start; gap: var(--sp-4); width: 100%; text-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); font: inherit; color: var(--ink); cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s; }
.mat:hover { border-color: var(--primary); background: var(--primary-tint); }
.mat .body { flex: 1; min-width: 0; }
.mat h2 { font-size: 18px; line-height: 1.35; letter-spacing: -.012em; margin: 0 0 6px; font-weight: 600; }
.mat .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink-3); }
.mat .tag { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2px 9px; font-size: 12px; color: var(--ink-2); background: var(--surface); }
.mat .arrow { flex: none; color: var(--ink-3); margin-top: 4px; }
.mat.risk h2::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--crisis); margin-inline-start: 8px; vertical-align: middle; }

/* ── пустая выдача ────────────────────────────────────────── */
.nothing { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--paper); padding: var(--sp-6) var(--sp-5); margin-bottom: var(--sp-4); }
.nothing h2 { font-size: 18px; letter-spacing: -.012em; margin: 0 0 var(--sp-2); }
.nothing p { font-size: 15px; color: var(--ink-2); margin: 0 0 var(--sp-4); }
.nothing .pop { display: flex; flex-direction: column; gap: var(--sp-2); }
.nothing .pop button { font: inherit; font-size: 15.5px; text-align: start; padding: 12px 15px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.nothing .pop button:hover { border-color: var(--primary); background: var(--primary-tint); }

/* ── скелетоны загрузки ───────────────────────────────────── */
.skel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-2); }
.skel i { display: block; height: 12px; border-radius: 4px; margin-bottom: 9px; background: linear-gradient(90deg, var(--surface) 25%, var(--line) 37%, var(--surface) 63%); background-size: 400% 100%; animation: sh 1.4s ease infinite; }
.skel i:last-child { margin: 0; height: 9px; width: 38%; }
@keyframes sh { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; background: var(--surface); } }

/* ── карточка проверки состояния ──────────────────────────── */
.checkcard { background: var(--paper); border: 1px solid var(--primary); border-radius: var(--r-lg); padding: var(--sp-5); }
.checkcard h2 { font-size: 18px; letter-spacing: -.013em; margin: 0 0 var(--sp-2); }
.checkcard p { font-size: 15px; color: var(--ink-2); margin: 0 0 var(--sp-4); }