/* GayStash — communities list. Loads on top of modern-collections.css,
   which already owns the grid and the adaptive cover mosaic; a community
   card is the same object with a handle and two counts. */

.coll-handle{
  display:block;padding-top:2px;
  font-size:12.5px;font-weight:600;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.coll-nums{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding-top:5px;font-size:12.5px;font-weight:600;color:var(--text-3);
}
.coll-nums b{color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums}

/* ── the empty half ─────────────────────────────────────────────
   Half of 214 communities have never had anything stashed in them. A grey
   rectangle answers "what's in here" with "nothing", eleven times down one
   page, and the page reads as abandoned.

   So the cover stops answering that question. An empty community is not
   empty of meaning — it has a name, usually a purpose, and nearly always a
   subject the archive already knows about. Three covers, in the order of
   how much there is to say. */

/* 1. There is a matching tag. The tiles are borrowed from it, and the whole
   cost of this idea is that they must never read as this community's own:
   dimmed, desaturated, and named as somebody else's on the label. Without
   that the card is a lie, and a card that lies about having content is
   worse than a grey box. */
/* Dimmed to secondary, not to invisible. The first pass ran .28 opacity
   under a .5–.68 scrim and the tiles went black — the card was back to
   being a dark rectangle, having paid for the idea and kept none of it.
   The tiles have to be legible or there is no reason to borrow them. */
.cov-borrow .ct{opacity:.5;filter:grayscale(.35)}
.cov-say{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:8px 10px;text-align:center;
  background:linear-gradient(rgba(10,10,12,.42),rgba(10,10,12,.62));
  font-size:11.5px;font-weight:600;color:#cfcfd8;line-height:1.35;
}
.cov-say b{font-size:12.5px;font-weight:800;color:#fff}

/* 2 and 3. Nothing to borrow. The description is the only real information
   an empty community has, and it was being truncated into a byline nobody
   reads — so it moves into the cover, where there is room for it. When
   there is no description either, the honest thing left is how long it has
   been sitting there. */
.cov-none{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:10px 12px;text-align:center;background:var(--surface);
  font-size:12px;font-weight:600;color:var(--text-3);
}
.cov-none em{
  font-style:normal;font-size:13px;font-weight:600;
  color:var(--text-2);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* Every line is its own element. Bare text nodes collapse into one
   anonymous flex item, which ran "Nothing stashed yet" and "Started 4
   months ago" together on a single line. */
.cov-none span{display:block}
.cov-none small{font-size:11.5px;font-weight:600;color:var(--text-3)}
/* the lock is absolute, so the text has to be told to get out from under it */
.cov-none .lock ~ em,.cov-none .lock ~ span{margin-top:15px}

/* Two cards to a row on a phone means a cover about 176×99, and three lines
   of description plus a status line does not fit in it. The description
   gives up the third line rather than the status line: "nothing stashed
   yet" is the fact, the description is the flavour. */
@media (max-width:639px){
  .cov-none{padding:8px 9px;gap:4px}
  .cov-none em{-webkit-line-clamp:2;font-size:12px}
  .cov-none .lock ~ em,.cov-none .lock ~ span{margin-top:11px}
}
.coll-empty .coll-title{color:var(--text-2)}
/* the byline's last slot becomes the ask, since there is no count to put
   there and "empty" is a dead word */
.coll-nums .seed{color:var(--accent);font-weight:700}

/* private communities are marked, not hidden */
.lock{
  position:absolute;left:6px;top:6px;z-index:1;
  width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.72);display:grid;place-items:center;
}
.lock svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2}

/* held by the classifier — visible to staff, so the sweep has somewhere to land */
.swept{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 14px 16px;padding:11px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.swept p{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--text-2)}
.swept b{color:var(--warn);font-weight:800;font-variant-numeric:tabular-nums}

@media (min-width:1000px){
  .swept{margin:0 22px 18px}
}