/* Sets, people and the selectable grid (public/js/sets). Tokens only. */
.sets { display: flex; flex-direction: column; gap: 16px; }
.sets-head h1 { margin: 4px 0 8px; }
.sets-head .eyebrow a { color: inherit; text-decoration: none; }
.sets-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sets-tools input[type="search"] { max-width: 360px; }
.set-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--muted); }

.set-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.set-card { display: flex; flex-direction: column; border: 1px solid var(--line); text-decoration: none; color: inherit; background: var(--bg); }
.set-card:hover { border-color: var(--muted); }
.set-card-thumbs { aspect-ratio: 3 / 2; display: grid; gap: 2px; background: var(--line); place-items: center; overflow: hidden; }
.set-card-thumbs.n2, .set-card-thumbs.n3, .set-card-thumbs.n4 { grid-template-columns: 1fr 1fr; }
.set-card-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.set-card-title { font-weight: 500; }
.set-card.none { border-style: dashed; }

.set-bar { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.set-tile { position: relative; aspect-ratio: 1; background: var(--line); cursor: pointer; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; user-select: none; display: grid; place-items: center; }
.set-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-tile.on { outline-color: var(--accent); }
.set-tile.on::after { content: ''; position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; background: var(--accent); border: 2px solid var(--bg); }
.set-tile:focus-visible { outline-color: var(--muted); }
.set-open, .set-badge, .set-people { position: absolute; background: var(--bg); color: var(--ink); padding: 1px 5px; opacity: 0.92; }
.set-open { right: 4px; bottom: 4px; text-decoration: none; font-size: 11px; }
.set-badge { right: 4px; top: 4px; font-size: 11px; }
.set-people { left: 4px; bottom: 4px; max-width: calc(100% - 80px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.set-addperson .row input { flex: 1; min-width: 160px; }
@media (max-width: 600px) { .set-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } }