/*
 * waivers/join — the cross-league join's rows on the Waiver Scout page
 * (GET /waivers, ch. 16 E-24). Linked after waivers.css as `waivers-join.css`;
 * split from it at the per-file ceiling, the way show/picker.css is from
 * show.css. The tokens are waivers.css's.
 *
 * One row per man: his name, his best number and where he is free, your
 * starter or your opponent's. THE NAME IS NEVER ELLIPSISED — the drawing's
 * first shoot cut "Makai Lemon" to "Ma…" at 320 and that is rubric 5's own
 * failure; at ≤340 the best number goes UNDER the name instead of beside it.
 *
 * It also carries the page's two non-content states — the state box (Final
 * Drive's, verbatim in shape) and the skeleton — and League by league's
 * hidden-leagues foot (E-25), because waivers.css met the ceiling
 * (tests/unit/monolith-budget.test.mjs) with the cards alone.
 */

.join {
  display: grid;
  gap: 8px;
}

.jr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}
.jr-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.jr-name span {
  font-weight: 500;
  color: var(--faint);
  font-size: 0.78rem;
  margin-left: 6px;
}
.jr-best {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  white-space: nowrap;
}
.jr-best b {
  color: var(--good);
  font-weight: 700;
  font-size: 1rem;
}
.jr-best small {
  color: var(--faint);
  font-size: 0.72rem;
  margin-left: 4px;
}
.jr-where {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.jr-where b {
  color: var(--text);
  font-weight: 600;
}
.jr-where .g {
  color: var(--good);
}
.jr-where .own {
  color: var(--gold);
}
.jr-where .opp {
  color: var(--bad);
}

/* ≤340: one column — the best number under the name, never beside it. */
@media (max-width: 340px) {
  .jr {
    grid-template-columns: minmax(0, 1fr);
  }
  .jr-best {
    text-align: left;
    white-space: normal;
  }
}

/* ≥1024: the join two-up, beside nothing else that changes. */
@media (min-width: 1024px) {
  .join {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* ---------- the state box — Final Drive's, verbatim shape ---------------- */

.state-box {
  text-align: center;
  padding: 44px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: 16px;
}
.state-box h2 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  display: block;
}
.state-box p {
  margin: 0 auto 18px;
  color: var(--muted);
  max-width: 46ch;
}
.state-box .btn {
  display: inline-flex;
  text-decoration: none;
}

/* The foot of League by league when some leagues are hidden (E-25): a quiet
   line, its link a 44px target that wraps under the words at 320. */
.ws-hidden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 0.82rem;
}
.ws-hidden a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- the skeleton, in the shape of the answer -------------------- */

.skel {
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  animation: wsPulse 1.6s ease-in-out infinite;
}
@keyframes wsPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.sk-top {
  height: 44px;
  margin-bottom: 14px;
}
.sk-row {
  height: 58px;
  margin-bottom: 8px;
}
.sk-card {
  height: 260px;
  margin-top: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
  }
}