/*
 * Library: the catalogue (/library) and the book reader (/library/{id}).
 * Everything else (reading column, TOC, scan pane, find) comes from the shared CSS.
 */
:root {
  --lib-title-size: 21px;     /* a book's title in the catalogue list (EB Garamond) */
  --lib-cover-w: 64px;
  --lib-cover-h: 96px;
}

/* ======================================================================================== */
/* Reader                                                                                    */
/* ======================================================================================== */

/* The meta line under the book's title: no lone last word. */
.library-reader .toc-meta, .library-catalogue .toc-meta { text-wrap: pretty; }

/* Noisy machine OCR: long "headings" in the page list stay two lines at most. */
.lib-toc .toc-heading .toc-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.lib-toc .lib-badge { color: var(--text-muted); }
.toc-item[aria-current] .lib-badge { color: var(--text-caps); }

.lib-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0 18px 28px 27px;
  margin-top: -12px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.lib-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* The pills under the title: a pencil before "Proofread". */
.reader-head .pill .icon-xs { margin-right: 2px; }

/* A book without text: a calm note, then its details. */
.lib-no-text { margin-top: 56px; padding-bottom: 8px; }
.lib-about { margin-top: 40px; }
.lib-about .lib-meta { margin-top: 32px; }

/* The book's details (dialog and the no-text page). */
.lib-meta { margin: 0; font-size: var(--fs-ui); line-height: 1.5; }
.lib-meta-row {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.lib-meta-row:last-child { border-bottom: 0; }
.lib-meta dt { color: var(--text-muted); }
.lib-meta dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.lib-info { width: min(600px, calc(100vw - 32px)); }

@media (max-width: 767.98px) {
  .lib-meta-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lib-meta dt { font-size: var(--fs-sm); }
}

/* ======================================================================================== */
/* Catalogue                                                                                 */
/* ======================================================================================== */

.lib-catalogue-page { padding-bottom: 72px; }
.lib-head { padding-top: 11px; }

.lib-search { max-width: 440px; margin: 26px auto 0; }
.lib-search .input { height: 40px; }

/* "Continue reading …": the line is kept even while empty, so nothing moves when it fills in. */
.lib-last {
  min-height: 20px;
  margin-top: 14px;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--text-muted);
}
.lib-last[hidden] { display: block; visibility: hidden; }
.lib-last a { color: var(--accent); }
.lib-last a:hover { text-decoration: underline; text-underline-offset: .16em; }

.lib-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.lib-summary {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.lib-bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lib-sort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: var(--fs-sm); }
.lib-sort-label {
  font-size: var(--fs-2xs);
  font-weight: var(--weight-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-caps);
}
.lib-sort a { color: var(--text-nav); border-radius: 3px; }
.lib-sort a:hover { color: var(--text-title); }
.lib-sort a[aria-current] {
  color: var(--text-title);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
@media (min-width: 1200px) { .lib-filters-open { display: none; } }

.lib-list { margin: 0; padding: 0; list-style: none; }
.lib-item {
  display: grid;
  grid-template-columns: var(--lib-cover-w) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.lib-cover {
  display: grid;
  place-items: center;
  width: var(--lib-cover-w);
  height: var(--lib-cover-h);
  overflow: hidden;
  color: var(--text-caps);
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.lib-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lib-item-body { min-width: 0; padding-top: 2px; }
.lib-item-title {
  font-family: var(--font-display);
  font-size: var(--lib-title-size);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-title);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.lib-item-title a { color: inherit; }
.lib-item-title a:hover { color: var(--accent); }
.lib-item-title .deva { font-size: 1em; line-height: 1.4; }
.lib-item-meta {
  margin-top: 5px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--text-muted);
}
.lib-item-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 9px; }
.lib-tag {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  font-size: var(--fs-2xs);
  font-weight: var(--weight-caps);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-pill);
}
.lib-tag-muted { color: var(--text-caps); border-color: var(--control-border); }
.lib-item-link { font-size: var(--fs-sm); color: var(--text-nav); }
.lib-item-link:hover { color: var(--text-title); }

.lib-pager { margin-top: 36px; }

/* Sidebar filters: counts on the right, like the reference's markers. */
.lib-count {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.toc-item[aria-current] .lib-count { color: var(--text-caps); }
.lib-more > summary { list-style: none; cursor: pointer; color: var(--text-nav); }
.lib-more > summary::-webkit-details-marker { display: none; }
.lib-more > summary .icon { flex: none; margin-top: 4px; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease); }
.lib-more[open] > summary .icon { transform: rotate(180deg); }
.lib-more > summary:hover { color: var(--text-title); background: var(--hover-bg); }

@media (max-width: 767.98px) {
  :root { --lib-title-size: 19px; --lib-cover-w: 52px; --lib-cover-h: 78px; }
  .lib-item { gap: 16px; padding: 16px 0; }
  .lib-bar { margin-top: 32px; }
  .lib-search .input { font-size: var(--fs-input-touch); }
}