/* ============================================================
   vouches.css — the ONLY stylesheet this site adds.

   style.css and tokens.css are byte-for-byte copies of donutsmpstats', and
   nothing in this file overrides them. Everything here is for markup that does
   not exist on the stats site: the homepage counters, the network strip, the
   full-page recent feed and the how-it-works page.

   THE RULE FOR THIS FILE: if a thing already has a class on the stats site,
   use that class and add nothing. A second definition of a card is how two
   sites that are meant to look identical stop being identical. Every selector
   below is either a NEW component or a positioning tweak to place an existing
   one — never a restyle of one.
   ============================================================ */

/* ── homepage ──────────────────────────────────────────────────────────── */

/* The search shell ships with 64px of top padding, which is right when it is
   the first thing on a page. Here the counters hang off its bottom, so the
   block is taller and wants to sit a little higher. */
.vch-home .search-shell { padding-bottom: 8px; }

/* The counters reuse .home-hero-stats wholesale — same flex row, same
   .hh-num/.hh-lab/.hh-div children, so the type, tracking and the trick that
   re-centres the label against its number all come for free.

   Only the scale changes: on the stats homepage these are the hero and run to
   34px, here they are a caption under a search box and would shout over it.
   Held to 22px with the same clamp shape so they still shrink on a phone. */
.vch-totals { margin-top: clamp(22px, 3vw, 30px); }
.vch-totals .hh-num { font-size: clamp(19px, 2.4vw, 23px); }
.vch-totals .hh-stat { flex: 0 1 150px; }

/* ── the network strip ─────────────────────────────────────────────────── */

.vch-net { margin-top: 46px; }
.vch-net .ah-sec-title-row { margin-bottom: 12px; }

/* auto-fit rather than a fixed four columns: the strip is the last thing on
   the page and has no reason to force a horizontal scrollbar on a narrow
   screen. minmax(0, …) on the track, because a bare 1fr will not shrink below
   its content and a long site name would push the grid past the wrap. */
.vch-net-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 10px;
}

/* The site's card, not a new one: same surface, border, radius and hover lift
   as .vch-lb-row, so a tile here and a row above it are recognisably the same
   object. */
.vch-net-card {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 13px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.vch-net-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue-border);
  background: var(--card-bg-hover);
}
.vch-net-ico {
  grid-row: 1 / span 2;
  /* Minecraft sprites are 16px art. Scaling them with the browser's default
     smoothing turns them to mush at 22px; pixelated keeps the edges the artist
     drew. Same treatment the stat icons get on the stats site. */
  image-rendering: pixelated;
}
.vch-net-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.vch-net-sub {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
}

/* ── /recent ───────────────────────────────────────────────────────────── */

.vch-recent-head { margin: 26px 0 12px; }

/* .vch-lb-row is a three-part row built for a rank, a face and a score. A
   recent-vouch row has no rank, so the grid it inherits leaves a gap where one
   would be — this closes it and lets the middle column take the space. */
.vch-recent-row { cursor: pointer; }
.vch-recent-row .vch-lb-main {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.vch-recent-by {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
  /* One line, always. A long comment must not be allowed to make one row twice
     the height of its neighbours — the list is read by scanning down it, and
     an uneven rhythm is what makes scanning fail. The full text is on the
     profile, one click away. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vch-recent-row .vch-lb-right { gap: 12px; }
/* The badge is given a width so "Vouched" and "Scam" start at the same x.
   Without it each badge sizes to its own word, so the verdict column zig-zags
   down the page — and the verdict is the one thing a reader is scanning this
   list FOR. Centred inside that width so neither word sits off to one side. */
.vch-recent-row .vch-item-badge {
  min-width: 84px;
  justify-content: center;
}
.vch-recent-time {
  font-size: 10.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  /* Fixed width so the badges above and below line up with each other rather
     than each sitting wherever "11m ago" happens to end. */
  min-width: 58px;
  text-align: right;
}

/* Below the phone breakpoint the timestamp is the first thing worth losing:
   the verdict and the name are the row's whole job, and "2h ago" is the only
   part a reader can infer from position in the list. */
@media (max-width: 560px) {
  .vch-recent-time { display: none; }
}

/* ── /how-it-works ─────────────────────────────────────────────────────── */

.vch-about .ah-sec-title-row { margin: 18px 0 14px; }
.vch-about-body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 6px 22px 22px;
  /* Prose, so it gets a measure. A card that spans the full 980px wrap runs to
     about 140 characters a line, which is roughly twice what anybody reads
     comfortably. */
  max-width: 680px;
}
.vch-about-body h3 {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 20px 0 6px;
}
.vch-about-body p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-mid);
  margin: 0;
}
.vch-about-body a { color: var(--blue-bright); text-decoration: none; }
.vch-about-body a:hover { text-decoration: underline; }