/* wgf-mplus-runs.css - the Mythic+ GROUP-run drill-down (board of runs + the run snapshot page).
   Rides the Hall skin (wgf-hall.css / wgf-leaderboard.css); this sheet only adds what the
   group-composition rows and the per-member gear snapshot need. Class colours come from the
   shared pvp identity idiom (--cc is set inline per row/member). No em dashes anywhere. */

/* ---- group-composition cell (the 5-member comp on a board row) ---- */
.wgf-mruns-comp { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.wgf-mruns-member {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .12rem .4rem .12rem .18rem; border-radius: 999px;
  background: rgba(12, 14, 20, .5); border: 1px solid rgba(244, 196, 92, .14);
  max-width: 100%;
}
.wgf-mruns-member:hover { border-color: rgba(244, 196, 92, .4); }
.wgf-mruns-mspec { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; }
.wgf-mruns-mspec img { width: 20px; height: 20px; border-radius: 4px; display: block; }
.wgf-mruns-mname {
  font-weight: 600; text-decoration: none; white-space: nowrap;
  text-shadow: var(--text-ink-outline, 0 1px 2px rgba(0, 0, 0, .92));
}
.wgf-mruns-mname:hover { text-decoration: underline; }
.wgf-mruns-mcrest { vertical-align: -2px; }

/* ---- board row atoms ---- */
.wgf-mruns-key {
  font-family: var(--font-mono, ui-monospace, monospace); font-weight: 800;
  font-size: 1.12rem; color: var(--wgf-gold, var(--wgf-gold-primary));
  text-shadow: 0 0 10px rgba(244, 196, 92, .28);
}
.wgf-mruns-dur { font-family: var(--font-mono, ui-monospace, monospace); color: var(--wgf-text); }
.wgf-mruns-date, .wgf-mruns-realm { color: var(--wgf-muted, #cdbfa6); }
.wgf-mruns-muted { color: var(--wgf-muted, #cdbfa6); opacity: .75; font-size: .88em; }

/* ---- comp-meta line (facts-only, scoped to the runs shown) ---- */
.wgf-mruns-compmeta {
  margin: .1rem 0 1rem; display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center;
  font-size: .92rem; color: var(--wgf-muted, #cdbfa6);
}
.wgf-mruns-compmeta .lbl { font-family: var(--font-display, serif); color: var(--wgf-gold, var(--wgf-gold-primary)); }
.wgf-mruns-compmeta .spec { display: inline-flex; align-items: center; gap: .25rem; }
.wgf-mruns-compmeta .spec img { width: 18px; height: 18px; border-radius: 4px; }

/* ---- prominent link back-and-forth between the two boards ---- */
.wgf-mruns-cta { margin: .5rem 0 1.1rem; text-align: center; }
.wgf-mruns-cta a {
  display: inline-block; padding: .5rem 1rem; border-radius: 9px; text-decoration: none;
  font-family: var(--font-display, serif); color: var(--wgf-gold, var(--wgf-gold-primary));
  border: 1px solid rgba(244, 196, 92, .42); background: rgba(20, 17, 12, .5);
}
.wgf-mruns-cta a:hover { border-color: var(--wgf-gold, var(--wgf-gold-primary)); box-shadow: 0 0 0 1px rgba(244, 196, 92, .3); }

/* ---- run snapshot (detail) page ---- */
.wgf-mruns-snaphead {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  margin: .2rem 0 .9rem;
}
.wgf-mruns-snaphead .k { font-size: 1.5rem; }
.wgf-mruns-snapmeta { color: var(--wgf-muted, #cdbfa6); display: flex; gap: .5rem; flex-wrap: wrap; }
.wgf-mruns-snapmeta .sep { opacity: .5; }

.wgf-mruns-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.wgf-mruns-card {
  border: 1px solid rgba(244, 196, 92, .18); border-radius: 11px; overflow: hidden;
  background: rgba(12, 14, 20, .55);
}
.wgf-mruns-card__hd {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem;
  border-bottom: 1px solid rgba(244, 196, 92, .14); border-left: 3px solid var(--cc, transparent);
}
.wgf-mruns-card__hd .ic { width: 26px; height: 26px; border-radius: 5px; flex: 0 0 auto; }
.wgf-mruns-card__id { display: flex; flex-direction: column; min-width: 0; }
.wgf-mruns-card__name { font-weight: 700; text-decoration: none; }
.wgf-mruns-card__name:hover { text-decoration: underline; }
.wgf-mruns-card__spec { font-size: .82rem; color: var(--wgf-muted, #cdbfa6); }
.wgf-mruns-card__ilvl {
  margin-left: auto; font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--wgf-gold, var(--wgf-gold-primary)); font-weight: 700;
}
.wgf-mruns-card__ilvl small { display: block; font-weight: 400; font-size: .62rem; color: var(--wgf-muted, #cdbfa6); text-align: right; }

.wgf-mruns-gearnote {
  padding: .35rem .7rem; font-size: .76rem; color: var(--wgf-muted, #cdbfa6);
  background: rgba(0, 0, 0, .18); border-bottom: 1px solid rgba(244, 196, 92, .08);
}
.wgf-mruns-slots { list-style: none; margin: 0; padding: .3rem .35rem; }
.wgf-mruns-slot {
  display: flex; align-items: baseline; gap: .5rem; padding: .18rem .35rem; border-radius: 5px;
}
.wgf-mruns-slot:nth-child(odd) { background: rgba(255, 255, 255, .02); }
.wgf-mruns-slot__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wgf-mruns-slot__ilvl { font-family: var(--font-mono, ui-monospace, monospace); color: var(--wgf-gold, var(--wgf-gold-primary)); flex: 0 0 auto; }
.wgf-mruns-nogear { padding: .8rem .7rem; color: var(--wgf-muted, #cdbfa6); font-size: .88rem; }

.wgf-mruns-empty {
  margin: 1.2rem 0; padding: 1.6rem 1rem; text-align: center;
  border: 1px dashed rgba(244, 196, 92, .3); border-radius: 12px;
  color: var(--wgf-muted, #cdbfa6); background: rgba(12, 14, 20, .4);
}
.wgf-mruns-empty b { display: block; color: var(--wgf-text); font-family: var(--font-display, serif); margin-bottom: .3rem; }