/* v1.0 — Appendix N component styles (namespaced) */
#appendixN { margin: 1rem 0; }
#appendixN .an-controls{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin:1rem 0}
#appendixN .an-controls input,#appendixN .an-controls select{padding:.5rem;font-size:1rem}
#appendixN .an-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
#appendixN .an-card{border:1px solid #ddd;padding:1rem;border-radius:.5rem;background:#fff}
#appendixN .an-card h3{margin:.25rem 0 .5rem;font-size:1.05rem}
#appendixN .an-meta{font-size:.92rem;color:#555;margin:.25rem 0 .5rem}
#appendixN .an-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.5rem}
#appendixN .an-tag{font-size:.8rem;border:1px solid #bbb;padding:.1rem .4rem;border-radius:999px}
#appendixN .an-cover{width:100%;height:auto;object-fit:cover;aspect-ratio:3/4;border-radius:.25rem;margin-bottom:.5rem}
#appendixN .an-empty{padding:2rem;text-align:center;color:#666}
#appendixN .an-cover--ph {
  display:grid; place-items:center;
  aspect-ratio:3/4; border:1px dashed #ccc; border-radius:.25rem;
  background:#fafafa; font-size:.9rem; color:#777; padding:.5rem;
  text-align:center;
  /* Constrain cover size & keep 2:3 aspect */
.an-card .an-cover{
  width: 160px;                /* tweak: 140–200 works well */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* Reserve space to prevent layout shift */
.an-card .an-cover[width][height]{
  height: auto;                /* browser will respect the aspect from width/height attrs */
}

/* Responsive: shrink on small screens */
@media (max-width: 640px){
  .an-card .an-cover{ width: 120px; }
}

}