/* VVHL — Draft Recap on the Media page (vvhl-draft-recap.js). */
.es-rc-sub { font-family: var(--es-font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--es-muted); }
.es-rc-event { padding: 0.3rem 0.5rem; border: 1px solid var(--es-line); border-radius: 4px; background: var(--es-page); color: var(--es-ink); font: inherit; font-size: 0.85rem; }
.es-rc-meta { margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--es-muted); }
.es-rc-tabs { position: static; margin-bottom: 0.8rem; background: none; }   /* not the sticky page strip */
body.es-page.is-navy .es-rc-tabs { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.es-rc-rounds { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.es-rc-round { padding: 0.3rem 0.7rem; border: 1px solid var(--es-line); border-radius: 999px; background: none; color: var(--es-ink-soft); font-family: var(--es-font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; }
.es-rc-round:hover { color: var(--es-ink); }
.es-rc-round.is-active { border-color: var(--es-teal); background: color-mix(in srgb, var(--es-teal) 18%, transparent); color: var(--es-ink); }

.es-rc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.8rem; }
.es-rc-pick { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.4rem 0.55rem; border: 1px solid var(--es-line); border-radius: 6px; background: rgba(255, 255, 255, 0.025); }
.es-rc-num { flex: 0 0 auto; min-width: 2.3rem; font-family: var(--es-font-display); font-size: 0.82rem; font-weight: 700; color: var(--es-muted); }
.es-rc-rd { flex: 0 0 auto; min-width: 1.6rem; font-family: var(--es-font-display); font-size: 0.75rem; font-weight: 600; color: var(--es-muted); }
.es-rc-crest { flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; }
.es-rc-crest.is-chip, .es-rc-clubcrest.is-chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-family: var(--es-font-display); font-weight: 700; }
.es-rc-club { flex: 0 1 8.5rem; min-width: 0; font-family: var(--es-font-display); font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-rc-name { flex: 1 1 auto; min-width: 0; font-family: var(--es-font-display); font-size: 0.98rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-rc-tag { margin-left: 0.4rem; padding: 0 0.3rem; border-radius: 3px; background: rgba(255, 174, 0, 0.16); color: #ffae00; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; vertical-align: 2px; }
.es-rc-tag.is-mgmt { background: rgba(0, 179, 201, 0.16); color: var(--es-teal); }
.es-rc-ovr { flex: 0 0 auto; min-width: 1.8rem; text-align: right; font-family: var(--es-font-display); font-size: 0.95rem; font-weight: 700; color: var(--es-teal); }

.es-rc-clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.7rem; }
.es-rc-clubcard { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem; border: 1px solid var(--es-line); border-top: 3px solid var(--club); border-radius: 8px; background: linear-gradient(170deg, color-mix(in srgb, var(--club) 12%, transparent), transparent 60%); }
.es-rc-clubhead { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.es-rc-clubcrest { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }
.es-rc-clubinfo { min-width: 0; }
.es-rc-clubinfo b { display: block; font-family: var(--es-font-display); font-size: 1.1rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-rc-clubinfo small { color: var(--es-muted); font-size: 0.78rem; }
.es-rc-clubcard .es-rc-pick { padding: 0.3rem 0.45rem; }

@media (max-width: 720px) {
  .es-rc-list { grid-template-columns: 1fr; }
  .es-rc-club { flex-basis: 6rem; }
}

/* The recap card has no padding of its own: the meta line, the tab strip and
   the body carry the standard 1rem card gutter so nothing sits on the edge. */
[data-es-draft-recap] > .es-rc-meta { margin: 0.75rem 1rem 0.6rem; }
[data-es-draft-recap] > .es-rc-tabs { margin: 0 1rem 0.8rem; }
[data-es-draft-recap] > .es-rc-body { margin: 0 1rem 1rem; }