/* GayStash — the stasher directory and the embed builder.
   Both are small surfaces that lean on components already in core. */

/* ── stasher directory ──────────────────────────────────────────
   12,770 people. Ranking on volume alone puts bulk importers at the top
   and curators nowhere, so both numbers are shown: how much they have
   kept, and how well it lands. */
.people{display:flex;flex-direction:column;padding:0 14px}
.prow2{
  display:grid;grid-template-columns:34px 40px minmax(0,1fr) auto;
  align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);
  transition:background .14s var(--ease);
}
.prow2:first-child{border-top:0}
.prow2:hover{background:var(--surface)}
.prow2 .n{
  font-size:13px;font-weight:800;color:var(--text-3);
  text-align:center;font-variant-numeric:tabular-nums;
}
.prow2 .av{width:40px;height:40px;font-size:15px}
.prow2 .who{min-width:0}
.prow2 strong{
  display:block;font-size:15px;font-weight:700;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.prow2 .sub{
  display:block;padding-top:2px;
  font-size:12.5px;font-weight:500;color:var(--text-3);
}
.prow2 .nums{
  display:flex;gap:18px;flex:none;text-align:right;
}
.prow2 .nums span{font-size:12px;font-weight:600;color:var(--text-3);white-space:nowrap}
.prow2 .nums b{
  display:block;font-size:15px;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;
}
/* an account that imports in bulk is a different animal from a curator,
   and the list says which is which rather than pretending they rank alike */
.prow2 .bulk{color:var(--warn)}
@media (max-width:699px){
  .prow2{grid-template-columns:26px 40px minmax(0,1fr)}
  .prow2 .nums{grid-column:3;justify-content:flex-start;gap:14px;padding-top:5px}
  .prow2 .nums b{font-size:13.5px;display:inline;padding-right:4px}
  .prow2 .nums span b{color:var(--text-2)}
}

/* ── embed builder ──────────────────────────────────────────────
   The embed is the only part of GayStash that renders on somebody else's
   page, so the page that generates it shows exactly what they will get. */
.emb{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:0 14px 20px}
.emb-prev{
  background:var(--surface);border-radius:var(--r-lg);padding:16px;
}
.emb-lab{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);padding-bottom:11px;
}
/* the card as a third-party page renders it, at the size they will use */
.emb-card{
  max-width:420px;border-radius:var(--r-md);overflow:hidden;
  background:var(--bg);border:1px solid var(--line-2);
}
.emb-card .thumb{border-radius:0}
.emb-body{padding:11px 12px}
.emb-body h3{font-size:14.5px;line-height:1.3;letter-spacing:-.012em}
.emb-by{
  display:flex;align-items:center;gap:7px;padding-top:7px;
  font-size:12px;font-weight:600;color:var(--text-3);
}
.emb-by .mark{width:14px;height:14px}
.emb-by b{color:var(--text-2)}
.emb-by .gap{flex:1}

.code{
  margin-top:14px;padding:13px 14px;border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--line-2);
  font:600 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--text-2);overflow-x:auto;white-space:pre;
}
.code b{color:var(--accent);font-weight:600}
.emb-acts{display:flex;gap:8px;flex-wrap:wrap;padding-top:13px}

@media (min-width:1000px){
  .people{padding:0 22px}
  .emb{grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding:0 22px 30px;align-items:start}
}