/* The read-only LIBRARY (web/library.html): every item and chest, for the wiki. */
.library { max-width: 1100px; }
.library a { color: var(--dim); }
.library a:hover { color: var(--fg); }
.library-title { font-size: 18px; letter-spacing: .2em; margin: 8px 0 4px; }
.library-tabs { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin: 12px 0; }
.library-tab { background: none; border: 0; padding: 8px 6px; cursor: pointer; color: var(--dim); font-size: 13px; }
.library-tab:hover { color: var(--fg); }
.library-tab[aria-pressed="true"] { color: var(--bg); background: var(--fg); font-weight: 700; }
.library-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.library-filters input, .library-filters select {
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--faint); padding: 7px 8px; font: inherit; font-size: 13px;
}
.library-filters input { flex: 1 1 220px; min-width: 0; }
.library-shown { margin: 4px 0 10px; font-size: 12px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.library-card { border: 1px dashed var(--faint); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.library-card pre.art { margin: 0 auto; }
.library-card .library-stats { font-size: 12px; color: var(--fg); }
.library-card .library-flavor { font-size: 12px; color: var(--amber); }
.library-card .library-meta { font-size: 11px; color: var(--dim); line-height: 1.5; }
.library-card .library-id { font-size: 10px; color: var(--faint); user-select: all; }
.library-odds { font-size: 12px; width: 100%; border-collapse: collapse; }
.library-odds td { padding: 2px 4px; border-top: 1px dotted var(--faint); }
.library-odds td:last-child { text-align: right; color: var(--dim); white-space: nowrap; }
@media (max-width: 520px) {
  .library-grid { grid-template-columns: 1fr; }
}

/* [ EVENTS ]: one card per world event */
.library-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.library-event-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.library-event .library-stats { line-height: 1.5; }
@media (max-width: 600px) { .library-events { grid-template-columns: 1fr; } }