/* Practice Library page. Filter bar and exercise table. */

.page-library .library-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 12px;
  padding: 14px 16px 2px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.page-library .library-filter { flex: 0 1 170px; min-width: 150px; margin-bottom: 12px; }
.page-library .library-filter-search { flex: 1 1 240px; min-width: 200px; }
.page-library .library-filter-clear { flex: 0 0 auto; min-width: 0; display: flex; align-items: flex-end; }
.page-library .library-filter-clear[hidden] { display: none; }
.page-library .library-filter-clear .btn { height: 36px; }
.page-library .library-filter .field-error:empty { display: none; }
.page-library .library-filter input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.page-library .library-count { margin: 0 0 8px; font-size: 13px; }

.page-library .library-table { min-width: 860px; }
.page-library .library-table .col-title { min-width: 220px; }
.page-library .library-table .col-level { width: 100px; white-space: nowrap; }
.page-library .library-table .col-topic { width: 140px; }
.page-library .library-table .col-objective { min-width: 260px; }
.page-library .library-table .col-assignment { width: 110px; white-space: nowrap; }
.page-library .library-table .col-status { width: 120px; white-space: nowrap; }

.page-library .library-title-link { display: inline-block; }
.page-library .library-title-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.page-library .library-objective { display: block; color: var(--text-2); }
.page-library .library-kind { color: var(--text-3); }

.page-library .empty .empty-action .btn { margin: 0 auto; }

@media (max-width: 900px) {
  .page-library .library-filters { padding: 12px 12px 0; }
  .page-library .library-filter { flex: 1 1 45%; min-width: 140px; }
  .page-library .library-filter-search { flex: 1 1 100%; }
  .page-library .library-filter-clear { flex: 1 1 100%; }
  .page-library .library-filter-clear .btn { width: 100%; }
}