/* mods.css - the mod repository browser's own styles, layered on
 * assets/ssbz.css (the shared system: tokens, panels, tables, chips).
 * Two views share one document: the browse list (?id= absent, an
 * optional ?author= narrowing) and one mod's page (?id=). Anything
 * only this page renders lives here. The hero band and the stat cards
 * follow leaderboard.css's cards-over-hero recipe, replicated here so
 * the two sheets stay independent (the same reason auth.css keeps its
 * own .who row).
 */

/* The list view's hero: the calm band (a directory, no cards to
 * overlap). The mod view swaps in the tall band below. */
.hero { padding: 26px 0 30px; }
.hero h1 { font-size: 26px; }
.hero .sub { margin: 8px 0 0; }

/* The mod view's hero (renderMod adds hero-detail): the leaderboard's
 * tall band - the stat cards overlap its bottom edge, so the extra
 * bottom padding is the room they eat into. */
.hero.hero-detail { padding: 30px 0 46px; }
.hero.hero-detail h1 { font-size: 30px; }

/* The hero's mark row: the logo rides the title's line (the block h1
 * drops below an inline img without the flex row). */
.hero .who { display: flex; align-items: center; gap: 14px; }
.hero .who img.hero-logo { width: 44px; height: 44px; }

/* Poll status line: the leaderboard's flex row + error pill (plain
 * --err red drowns on the accent band). */
.status {
  margin: 10px 0 0; font-size: 12.5px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
}
.hero .status { opacity: .92; }
.status .error {
  background: var(--error-bg); padding: 2px 10px; border-radius: 999px; font-weight: 600;
}

/* The browse list's head: the section title and the filter box on one
 * line, wrapping under a narrow viewport. */
.list-head {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 6px;
}
.list-head h2 { margin: 0; }
.list-head input[type="search"] {
  margin-left: auto; min-width: 220px; max-width: 340px; flex: 1 1 220px;
}

/* The description block: the author's mod.json text verbatim,
 * pre-wrapped so the paragraph breaks the author typed survive
 * without the page interpreting any markdown (the launcher's egui
 * viewer is the markdown renderer; the web stays a plain reader). */
.mod-desc {
  white-space: pre-wrap; overflow-wrap: break-word;
  max-width: 72ch; line-height: 1.55;
}

/* The metadata list on a mod's page: the environment grid's dt/dd
 * rhythm (admin.css owns that page's copy; this is the same shape,
 * kept local so the two sheets stay independent). The dd wraps
 * anywhere: the license field has no server-side length limit, an
 * unbreakable value must overflow its own cell visibly, not the page. */
dl.kv { margin: 0; }
dl.kv dt { float: left; clear: left; width: 150px; color: var(--muted); font-size: 13px; }
dl.kv dd { margin: 0 0 6px 160px; overflow-wrap: anywhere; }

/* Player links: the leaderboard's plink rule, local to this sheet
 * (the shared system defines no anchor styling beyond defaults). */
a.plink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
a.plink:hover { color: var(--chip-ink); border-bottom-color: var(--chip-ink); }

/* The stat cards on a mod's page: the leaderboard's overlap recipe -
 * they ride the hero band's bottom edge (margin-top pulls them up
 * into the tall hero-detail band above). */
.cards {
  display: grid; gap: 14px; margin-top: -26px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08); padding: 13px 16px;
}
.card .label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; color: var(--muted);
}
.card .value {
  font-size: 23px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums;
  /* The version card renders an author-controlled string (up to 64
   * chars, dots give no break opportunity): wrap anywhere so a long
   * one stays inside its card instead of painting over the neighbour. */
  overflow-wrap: anywhere;
}

/* The hero's title wraps anywhere: the mod name is author-controlled
 * (up to 100 chars) and the band is the page's widest text slot. */
.hero h1 { overflow-wrap: anywhere; }