/* ===== weekly.css — 🏆 "This week's competition" board on communities.html =====
 * Which community's MEMBERS earned the most points this week. Activity only — never market cap.
 * Depends on the design tokens + the .comm-pill / .comm-pulse / .grules helpers in styles.css
 * (--gold, --gold-deep, --green-bright, --ink-2..4, --text, --text-dim). Owns nothing else. */

/* ---------- the section shell (gold, to read as a distinct "event" next to the green officials strip) ---------- */
.wk {
  margin: 0.2rem 0 1.4rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,179,64,0.10), rgba(255,179,64,0.02));
  border: 1.5px solid rgba(255,179,64,0.35);
}

.wk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.35rem 0.9rem; flex-wrap: wrap;
}
.wk-h {
  font-family: 'Luckiest Guy', cursive; color: var(--gold);
  font-size: max(var(--text-floor), 1.35rem); line-height: 1.2; margin: 0; letter-spacing: 0.02em;
}
.wk-when {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  margin: 0; font-size: max(var(--text-floor), 0.8rem); font-weight: 700; color: var(--text-dim);
}
.wk-dates { white-space: nowrap; }
.wk-count {
  white-space: nowrap; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: rgba(255,179,64,0.14); border: 1px solid rgba(255,179,64,0.38); color: var(--gold);
}
.wk-count:empty { display: none; }

.wk-explain {
  margin: 0.5rem 0 0.6rem; max-width: 76ch;
  color: var(--text-dim); font-size: max(var(--text-floor), 0.86rem); line-height: 1.55;
}
.wk-explain b { color: var(--text); }

/* the honest "how the score works" disclosure — .grules supplies the frame, we only retune the spacing */
.wk-rules { margin-top: 0; margin-bottom: 0.85rem; }

.wk-status { margin: 0 0 0.6rem; color: var(--text-dim); font-size: max(var(--text-floor), 0.78rem); line-height: 1.5; }
.wk-status:empty { display: none; }

/* ---------- empty state: an invitation, never an error ---------- */
.wk-empty {
  margin: 0; padding: 0.9rem 1rem; border-radius: 14px;
  background: var(--ink-2); border: 1.5px dashed var(--ink-4);
  color: var(--text-dim); font-size: max(var(--text-floor), 0.88rem); line-height: 1.6;
}
.wk-empty b { color: var(--text); }

/* ---------- the board ---------- */
.wk-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

/* An explicit grid (not flex-wrap) so the narrow layout is deterministic: the name column is the only
   flexible one — minmax(0,1fr) lets it shrink to nothing and ellipsis, which is what keeps 320px clean. */
.wk-link {
  display: grid; align-items: center; gap: 0.4rem 0.65rem;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "rank logo id meta score";
  min-height: 56px; padding: 0.5rem 0.7rem;
  border-radius: 14px; text-decoration: none; color: var(--text);
  background: var(--ink-2); border: 1.5px solid var(--ink-4);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* rank + medal */
.wk-rank {
  grid-area: rank; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 2.2rem; gap: 0.05rem;
}
.wk-medal { font-size: max(var(--text-floor), 1.4rem); line-height: 1; }
.wk-rank-n {
  font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), 0.9rem); line-height: 1.1;
  color: var(--text-dim); letter-spacing: 0.02em;
}

/* logo */
.wk-logo {
  grid-area: logo; width: 38px; height: 38px; border-radius: 11px;
  object-fit: cover; background: var(--ink-3); border: 1.5px solid var(--ink-4);
}
.wk-logo-none { display: inline-flex; align-items: center; justify-content: center; font-size: max(var(--text-floor), 1.1rem); }

/* $SYM + name (+ the "you're in" chip) */
.wk-id { grid-area: id; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.wk-sym {
  font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), 1rem); line-height: 1.15;
  color: var(--green-bright); letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-name {
  font-size: max(var(--text-floor), 0.78rem); line-height: 1.3; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-you {
  align-self: flex-start; margin-top: 0.2rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, transparent); border: 1px solid color-mix(in srgb, var(--green) 42%, transparent);
  color: var(--green-bright); font-size: max(var(--text-floor), 0.68rem); font-weight: 800; letter-spacing: 0.01em;
}

/* this week's points */
.wk-score { grid-area: score; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.wk-xp { font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), 1.15rem); color: var(--gold); letter-spacing: 0.02em; }
.wk-xp-l { font-size: max(var(--text-floor), 0.66rem); font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

/* level pill + activity pulse */
.wk-meta { grid-area: meta; display: flex; align-items: center; gap: 0.35rem 0.45rem; flex-wrap: wrap; }

/* ---------- 🥇🥈🥉 — visibly bigger, and never colour-only (medal + "#n" + the podium class) ---------- */
.wk-top .wk-link { min-height: 76px; padding: 0.75rem 0.9rem; border-radius: 18px; }
.wk-top .wk-rank { min-width: 2.8rem; }
.wk-top .wk-medal { font-size: max(var(--text-floor), 2rem); }
.wk-top .wk-rank-n { font-size: max(var(--text-floor), 1rem); color: var(--gold); }
.wk-top .wk-logo { width: 52px; height: 52px; border-radius: 14px; }
.wk-top .wk-logo-none { font-size: max(var(--text-floor), 1.5rem); }
.wk-top .wk-sym { font-size: max(var(--text-floor), 1.2rem); }
.wk-top .wk-name { font-size: max(var(--text-floor), 0.84rem); }
.wk-top .wk-xp { font-size: max(var(--text-floor), 1.5rem); }

.wk-r1 .wk-link {
  background: linear-gradient(180deg, rgba(255,179,64,0.17), rgba(255,179,64,0.04));
  border-color: rgba(255,179,64,0.58);
  box-shadow: 0 10px 30px rgba(255,179,64,0.10);
}
.wk-r2 .wk-link {
  background: linear-gradient(180deg, rgba(210,225,245,0.11), rgba(210,225,245,0.02));
  border-color: rgba(210,225,245,0.42);
}
.wk-r3 .wk-link {
  background: linear-gradient(180deg, rgba(224,123,0,0.13), rgba(224,123,0,0.03));
  border-color: rgba(224,123,0,0.48);
}

/* hover/focus tuned NOT to repaint the podium gradients (border + lift only) */
.wk-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.wk-link:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; transform: translateY(-2px); }

/* ---------- narrow screens (no horizontal overflow at 320px) ----------
   The level pill + activity pulse drop to their own line and share it with the score, so the
   $SYM/name column keeps the whole first line next to the rank and logo. */
@media (max-width: 620px) {
  .wk-link {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "rank logo id" "meta meta score";
  }
}
@media (max-width: 480px) {
  .wk { padding: 0.8rem; }
  .wk-h { font-size: max(var(--text-floor), 1.15rem); }
  .wk-top .wk-link { min-height: 68px; padding: 0.65rem 0.7rem; }
  .wk-top .wk-rank { min-width: 2.3rem; }
  .wk-top .wk-logo { width: 44px; height: 44px; }
  .wk-top .wk-medal { font-size: max(var(--text-floor), 1.7rem); }
  .wk-top .wk-sym { font-size: max(var(--text-floor), 1.05rem); }
  .wk-top .wk-xp { font-size: max(var(--text-floor), 1.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .wk-link { transition: none; }
  .wk-link:hover, .wk-link:focus-visible { transform: none; }
}