/* Clubs section (#sectionClubs, portal/clubs.js — CLUBS_PLAN.md PR1) + Pending club invites
   (CLUBS_PLAN.md PR3). Decomposition slice 4 out of index.html's first inline <style> block
   (README_BACKLOG.md). */

.club-found-card {
  max-width: 420px;
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  padding: 16px;
  color: var(--dash-text-soft);
}
.club-found-card label {
  display: block;
  margin: 12px 0 4px;
  font-size: 0.82em;
  color: var(--dash-text-mute);
}
.club-found-card input[type='text'] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  color: var(--dash-text);
  font: inherit;
}
.club-found-progress {
  color: var(--dash-warn-text);
  font-weight: 600;
}
.club-emblem-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 12px 0;
}
.club-emblem-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  font-size: 1.3em;
  cursor: pointer;
}
.club-emblem-tile.selected {
  border-color: #55a05a;
  background: var(--dash-accent-bg);
}
.club-found-status {
  margin-top: 10px;
  font-size: 0.86em;
}
.club-emblem-img {
  width: 2.5em;
  height: 2.5em;
  object-fit: contain;
  vertical-align: -0.125em;
}
.club-emblem-tile .club-emblem-img {
  width: 100%;
  height: 100%;
  vertical-align: baseline;
}
.club-summary-emoji {
  font-size: 2.2em;
}
.club-summary-name {
  font-weight: 700;
  color: var(--dash-text);
  margin-top: 6px;
}
.club-summary-meta {
  color: var(--dash-text-mute);
  font-size: 0.86em;
  margin-top: 4px;
}
.club-view-link {
  display: inline-block;
  margin-top: 12px;
}

.club-pending-invites {
  max-width: 420px;
  margin-bottom: 16px;
}
.club-pending-invite-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 8px;
}
.club-pending-invite-row .club-summary-emoji {
  font-size: 1.6em;
}
.club-pending-invite-info {
  flex: 1;
  min-width: 0;
}
.club-pending-invite-note {
  margin: 6px 2px 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--dash-text-soft);
}
.club-pending-invite-note.is-error {
  color: var(--dash-danger-text);
}
.club-pending-invite-note a {
  color: var(--dash-info-text);
  white-space: nowrap;
}
.club-pending-invite-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}