/* Browse, one category opened: the category's cover and progress head a grid
   of its puzzles. Each card shows the puzzle's own art (its category's cover
   until that is ready). */
.browse .set-head {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--card);
}
.browse .set-cover { width: 96px; height: 96px; border-radius: 6px; overflow: hidden; background: #faf3e3; }
.browse .set-cover > .category-motif { display: block; width: 100%; height: 100%; margin: 0; }
.browse .set-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.browse .set-count { font-family: var(--ui-headline); font-size: 17px; line-height: 1.2; font-weight: 900; letter-spacing: -.04em; color: var(--ink); }
.browse .set-done { font-size: 12px; line-height: 18px; color: var(--ink-soft); }
.browse .set-bar { height: 3px; margin-top: 8px; background: var(--hairline); overflow: hidden; }
.browse .set-bar > span { display: block; height: 100%; background: var(--category-ink, var(--good)); }

/* The puzzles as cards: two across on a phone, more as the page widens (the
   same auto-fill as Solved puzzles on You). The art is the card's top. */
:root .browse .pgrid.set-grid {
  display: grid; gap: 14px 12px; padding-bottom: 3px;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
.browse .set-grid .pcard {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  min-width: 0; min-height: 0; padding: 6px 6px 10px;
}
.browse .set-grid .pcard-emblem {
  width: 100%; height: auto; aspect-ratio: 1; align-self: stretch; flex: none;
}
.browse .set-grid .pcard-copy { flex: 1; gap: 4px; padding: 0 4px; }
.browse .set-grid .pcard-top { min-height: 0; }
.browse .set-grid .pcard-cat {
  display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.browse .set-grid .pcard .pcard-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 15px; line-height: 20px; letter-spacing: -.02em;
}
.browse .set-grid .pcard-meta { font-size: 12px; line-height: 17px; color: var(--ink-soft); }
/* a narrow card gives the keyword count its own line, with no dot left
   dangling at the end of the one above */
.browse .set-grid .pcard-meta .dot-count { display: none; }
.browse .set-grid .pcard-meta .themed-count { flex-basis: 100%; }
.browse .set-grid .pcard-progress-track { flex: 1; width: auto; }
.browse .set-grid .pcard-action {
  flex-direction: row; justify-content: flex-start; align-items: center; gap: 5px;
  min-width: 0; padding: 0 4px; font-size: 12px; line-height: 16px;
}
.browse .set-grid .pcard-action .ico { width: 15px; height: 15px; }
.browse .set-grid .pcard.is-solved .pcard-action { color: var(--good); }