/* ===================================================================
   ClanWar -- feature stylesheet for the Clans leaderboard + clan page.

   Loaded by clans.php and clan.php (page.php only ships cw.css, which we
   must not edit). Every selector is namespaced `cw-fc-*` so it composes
   with -- never clobbers -- the shared classes in cw.css. Colours come
   straight from the cw.css design tokens (crimson accent = --cw-accent).
   No emojis anywhere.
   =================================================================== */

/* -------------------------------------------------------------------
   CW-rating column: ClanWar's OWN clan ranking (average of members'
   cw_ratings.rating). Made deliberately prominent so it never reads as
   the old stored clan MMR or as HLstatsX skill.
   ------------------------------------------------------------------- */
.cw-fc-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.cw-fc-rating-val {
  font-weight: 800;
  font-size: 15px;
  color: var(--cw-fg);
  letter-spacing: -0.01em;
}
.cw-fc-rating-peak {
  font-size: 11px;
  color: var(--cw-fg-dim);
  font-weight: 600;
}
.cw-fc-rating-na {
  font-size: 12px;
  color: var(--cw-fg-dim);
  font-style: italic;
}

/* Small "based on N members" caption under the rating in the table. */
.cw-fc-rating-sub {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cw-fg-dim);
  text-transform: uppercase;
}

/* A slim crimson meter that visualises a clan's avg CW rating relative
   to the top clan on the board. Width is set inline (--cw-fc-pct). */
.cw-fc-meter {
  position: relative;
  height: 4px;
  margin-top: 5px;
  width: 88px;
  max-width: 100%;
  border-radius: 999px;
  background: var(--cw-bg-4);
  overflow: hidden;
}
.cw-fc-meter > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cw-fc-pct, 0%);
  border-radius: 999px;
  background: var(--cw-accent);
}

/* -------------------------------------------------------------------
   Roster: rank badge cell. CWRank::badge() renders its own chip; this
   just gives it breathing room and a stable min-width in the table.
   ------------------------------------------------------------------- */
.cw-fc-rankcell { min-width: 168px; }

/* The clan-rating call-out in the clan-page hero. */
.cw-fc-hero-cw {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cw-border);
  font-size: 12px;
  color: var(--cw-fg-2);
}
.cw-fc-hero-cw strong {
  color: var(--cw-fg);
  font-size: 13px;
}
.cw-fc-hero-cw .cw-fc-tag-cw {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-fg-dim);
}

/* -------------------------------------------------------------------
   Strong empty state -- shown on the leaderboard when no clans exist
   (the live DB starts empty). Centres a crest, a headline, a line of
   copy and a primary CTA.
   ------------------------------------------------------------------- */
.cw-fc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 52px 24px 56px;
}
.cw-fc-empty-crest {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: var(--cw-radius-lg);
  color: var(--cw-accent);
  background: var(--cw-bg-3);
  border: 1px solid var(--cw-border);
}
.cw-fc-empty-crest svg { width: 38px; height: 38px; display: block; }
.cw-fc-empty h3 {
  margin: 4px 0 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cw-fg);
}
.cw-fc-empty p {
  margin: 0;
  max-width: 460px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cw-fg-2);
}
.cw-fc-empty-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.cw-fc-empty-hint {
  font-size: 12px;
  color: var(--cw-fg-dim);
}

/* Three little "how it works" beats under the empty-state CTA. */
.cw-fc-empty-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  width: 100%;
  max-width: 640px;
}
.cw-fc-step {
  flex: 1 1 170px;
  min-width: 150px;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  background: var(--cw-bg-3);
}
.cw-fc-step b {
  display: block;
  font-size: 12.5px;
  color: var(--cw-fg);
  margin-bottom: 3px;
}
.cw-fc-step span {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--cw-fg-dim);
}
.cw-fc-step-n {
  display: inline-block;
  min-width: 18px;
  margin-right: 6px;
  color: var(--cw-accent);
  font-weight: 800;
}

/* -------------------------------------------------------------------
   Roster empty fallback (defensive: members query returned nothing).
   ------------------------------------------------------------------- */
.cw-fc-roster-empty {
  padding: 28px;
  text-align: center;
  color: var(--cw-fg-dim);
  font-size: 13px;
}

@media (max-width: 560px) {
  .cw-fc-empty { padding: 38px 16px 42px; }
  .cw-fc-empty h3 { font-size: 18px; }
  .cw-fc-rankcell { min-width: 0; }
}