/* library.css — the reference-library document index under the ATLAS map.
   Mirrors the BENCH app's Reference tab layout (generated dial-face cover,
   type badge, doc number + rev chip, family line, type filter pills) in the
   house palette. Loaded only on src/pages/atlas.html via {{extraCss}};
   palette and type tokens come from site.css. Per-card accent arrives as
   --acc / --acc-fg, set inline by build.js from the doc's type. */

.library { margin: 2.5rem 0 0; }
.library h2 {
  font-family: var(--disp); font-weight: 600; letter-spacing: .02em;
  color: var(--oxblood); font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0 0 .3em;
}
.lib-lede { max-width: 64ch; color: var(--ink-soft); margin: 0 0 1.4rem; }
.lib-empty { color: var(--ink-soft); font-style: italic; }

/* ---------- type filter pills ---------- */
.lib-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.4rem; }
.lib-chip {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--ink-soft); background: var(--paper-panel);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 999px; padding: 5px 13px; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.lib-chip:hover { border-color: var(--gold); color: var(--ink); }
.lib-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lib-chip.on { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }
.lib-n { opacity: .65; margin-left: .35em; }
.lib-chip.on .lib-n { opacity: .8; }

/* ---------- card grid ---------- */
/* One card per row, the full width of the column — the same width as the
   map above it — and every card the same height. Two-up stretched a row to
   whichever card had the longest title, so the shelf stepped as you read
   down it. A shelf card is a preview, not an index line: cover you can
   actually see, title at reading size, two lines of what the document is. */
.lib-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 14px; margin: 0;
}
/* Cover left, text right. A tall stacked card gave the generated dial face
   more room than a placeholder deserves and pushed the titles — the part
   you actually read — down the page. Landscape puts the title on the
   reading line and fits far more of the shelf on one screen. */
.lib-card {
  display: flex; flex-direction: row; align-items: stretch; height: 172px;
  background: var(--paper-panel);
  border: 1px solid color-mix(in srgb, var(--acc, #8A8D8F) 42%, transparent);
  border-radius: 8px; overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 8px 22px -16px rgba(34, 28, 25, .8);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.lib-card:hover {
  transform: translateY(-2px); border-color: var(--acc, #8A8D8F);
  box-shadow: 0 14px 28px -13px rgba(34, 28, 25, .55);
}
.lib-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lib-card[hidden] { display: none; }

.lib-cov {
  position: relative; flex: none; width: 270px;
  border-right: 1px solid color-mix(in srgb, var(--acc, #8A8D8F) 30%, transparent);
}
.lib-cov svg { width: 100%; height: 100%; display: block; }
.lib-badge {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--acc, #8A8D8F); color: var(--acc-fg, #F1EDE3);
  padding: 2px 8px; border-radius: 3px;
}

.lib-body {
  flex: 1; min-width: 0; /* let long titles wrap instead of stretching the card */
  display: flex; flex-direction: column; justify-content: center;
  padding: 16px 26px 18px;
}
.lib-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.lib-docid {
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .08em; color: var(--gold-dim);
}
.lib-rev {
  font-family: var(--mono); font-size: .58rem; font-weight: 500; letter-spacing: .07em;
  background: var(--acc, #8A8D8F); color: var(--acc-fg, #F1EDE3);
  padding: 1px 7px; border-radius: 9px; white-space: nowrap;
}
/* One line each. A title that wrapped made its card taller than the one
   above it, so the shelf stepped up and down as you read it — the whole
   point of a card index is that the rows are the same. The full text stays
   in the DOM, so it is still read out and still searchable; only the
   painting is clipped. */
.lib-title {
  font-family: var(--disp); font-weight: 600; font-size: 1.45rem; letter-spacing: .04em;
  color: var(--ink); line-height: 1.15; max-width: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the description reads as prose now, not a mono caption — two lines,
   clamped so the cards stay one height */
.lib-sub {
  font-family: var(--body); font-size: 1rem; color: var(--ink-soft);
  line-height: 1.5; margin-top: 7px; max-width: 62ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-none { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); margin-top: 1rem; }

@media (max-width: 40rem) {
  /* one per row on a phone: two landscape cards side by side leaves the
     title about twelve characters of width */
  .lib-grid { gap: 10px; }
  .lib-card { height: 120px; }
  .lib-cov { width: 132px; }
  .lib-body { padding: 10px 13px 11px; }
  .lib-title { font-size: 1.15rem; }
  .lib-sub { font-size: .88rem; -webkit-line-clamp: 2; }
}