/* SquadPicks frontend - components.css */
/* Reusable UI components: buttons, cards, badges, modals, dropdowns, sport posters. */

/* ============================================================
 * Button
 *   Every variant explicitly sets `color` on :hover so the base.css
 *   `a:not([class]):hover` rule never wins the cascade fight against us
 *   (and so future tweaks to that rule cannot make text invisible).
 * ============================================================ */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.sp-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);                       /* keep text visible */
}
.sp-btn:active { transform: translateY(1px); }
.sp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sp-btn-primary {
  background: var(--color-emerald-500);
  color: #ffffff;
  border-color: var(--color-emerald-500);
  box-shadow: var(--shadow-emerald);
}
.sp-btn-primary:hover {
  background: var(--color-emerald-600);
  border-color: var(--color-emerald-600);
  color: #ffffff;                                 /* explicit — overrides base.css */
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(16, 185, 129, 0.5);
}

.sp-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.sp-btn-dark {
  /* V2 baseline (Crew section): padding 16x32 / 1.1rem / radius 12 */
  padding: 16px 32px;
  font-size: 1.1rem;
  background: var(--color-slate-900);
  color: #ffffff;
  border-color: var(--color-slate-900);
  border-radius: 12px;
}
.sp-btn-dark:hover {
  background: var(--color-slate-800);
  border-color: var(--color-slate-800);
  color: #ffffff;
}

.sp-btn-ghost { border-color: transparent; background: transparent; }
.sp-btn-ghost:hover { background: var(--color-slate-100); color: var(--color-text); }

.sp-btn-danger {
  background: var(--color-danger);
  color: #ffffff;
  border-color: var(--color-danger);
}
.sp-btn-danger:hover {
  background: #b91c1c;                            /* rose-700 — darker than --color-danger (#dc2626) */
  border-color: #b91c1c;
  color: #ffffff;                                 /* explicit — overrides base .sp-btn:hover */
}

.sp-btn-block { width: 100%; }

/* Long-form pages (About / Terms / Privacy / Refund) — vertical rhythm.
   Targets the inline-styled 820px-wide container those views share so the
   h2 isn't glued to its body paragraph. Width comes from the inline style;
   this rule only adjusts top/bottom margins. */
.sp-section > .container[style*="820px"] > h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}
.sp-section > .container[style*="820px"] > h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}
.sp-section > .container[style*="820px"] > p {
  margin: 0 0 var(--space-4);
}

/* OAuth provider buttons (Google / Microsoft) — icon + label on one row */
.sp-btn-oauth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.sp-btn-oauth .sp-oauth-icon {
  flex-shrink: 0;
  display: block;
}
.sp-btn-sm {
  /* V2 navbar signup-btn: padding 10x24 / 0.95rem / pill */
  padding: 10px 24px;
  font-size: 0.95rem;
}
.sp-btn-lg {
  /* V2 hero buttons: padding 18x40 / 1.1rem / pill */
  padding: 18px 40px;
  font-size: 1.1rem;
}

/* Compatibility shims for older view markup */
.sp-btn-hero          { /* alias of sp-btn-primary sp-btn-lg */ }
.sp-btn-outline-light {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
}
.sp-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

/* ============================================================
 * Flash messages — inline alert <p> rendered above forms / page header
 *   Used by .sp-flash-success / .sp-flash-error / .sp-flash-warn.
 *   Card-like visual treatment with a strong left border so it stands
 *   out against the slate page-header background.
 * ============================================================ */
.sp-flash {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-slate-400);
  background: var(--color-slate-100);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.sp-flash-success {
  background: #ecfdf5;                            /* emerald-50 */
  border-left-color: var(--color-emerald-500);
  color: #065f46;                                 /* emerald-800 */
}
.sp-flash-error {
  background: #fef2f2;                            /* rose-50 */
  border-left-color: var(--color-danger);
  color: #991b1b;                                 /* rose-800 */
}
.sp-flash-warn {
  background: #fffbeb;                            /* amber-50 */
  border-left-color: #f59e0b;                     /* amber-500 */
  color: #92400e;                                 /* amber-800 */
}

/* ============================================================
 * Card
 * ============================================================ */
.sp-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: transform var(--transition), box-shadow var(--transition);
}
.sp-card-hoverable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.sp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sp-card-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.sp-card-body  { color: var(--color-text); }
.sp-card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* ============================================================
 * Badge
 * ============================================================ */
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  background: var(--color-slate-100);
  color: var(--color-slate-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sp-badge-primary { background: rgba(16, 185, 129, 0.12); color: var(--color-emerald-600); }
.sp-badge-success { background: rgba(16, 185, 129, 0.12); color: var(--color-emerald-600); }
.sp-badge-warning { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.sp-badge-danger  { background: rgba(220, 38, 38, 0.12);  color: var(--color-danger); }
.sp-badge-info    { background: #e0f2fe; color: #0369a1; }

/* ============================================================
 * Tier badge
 * ============================================================ */
.sp-tier {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
}
.sp-tier-free      { background: var(--tier-free); }
.sp-tier-standard  { background: var(--tier-standard); }
.sp-tier-premium   { background: var(--tier-premium); }
.sp-tier-platinum  { background: var(--tier-platinum); }
.sp-tier-test      { background: #f59e0b; } /* whitelist test tier (amber) */

/* ============================================================
 * Alert
 * ============================================================ */
.sp-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border: 1px solid;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}
.sp-alert-info    { background: rgba(6, 182, 212, 0.08);  border-color: var(--color-info);    color: #055160; }
.sp-alert-success { background: rgba(16, 185, 129, 0.08); border-color: var(--color-success); color: #064e3b; }
.sp-alert-warning { background: rgba(245, 158, 11, 0.08); border-color: var(--color-warning); color: #78350f; }
.sp-alert-danger  { background: rgba(220, 38, 38, 0.08);  border-color: var(--color-danger);  color: #7f1d1d; }

/* ============================================================
 * Form helpers
 * ============================================================ */
.sp-form-group { margin-bottom: var(--space-4); }
.sp-form-help  { margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.sp-form-error { margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-danger); }

/* ============================================================
 * Modal
 * ============================================================ */
.sp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  z-index: var(--z-modal-backdrop);
}
.sp-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.sp-modal-dialog {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  padding: var(--space-6);
}
.sp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.sp-modal-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.sp-modal-close { font-size: var(--font-size-xl); padding: var(--space-1); }

/* ============================================================
 * Dropdown (Alpine.js x-show)
 * ============================================================ */
.sp-dropdown { position: relative; }
.sp-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 180px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
}
.sp-dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}
.sp-dropdown-item:hover { background: var(--color-slate-100); }
.sp-dropdown-item.is-active { background: var(--color-emerald-500); color: #ffffff; }

/* Locale select (in navbar — pill with glass effect when over hero) */
.sp-lang-select {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 28px 8px 14px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background var(--transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}
.sp-lang-select:hover { background-color: rgba(255, 255, 255, 0.2); }
.sp-lang-select option { background: var(--color-slate-900); color: #ffffff; }

/* When navbar is scrolled / solid, switch lang-select to light style */
.sp-navbar.is-scrolled .sp-lang-select,
.sp-navbar.is-solid    .sp-lang-select {
  background-color: var(--color-slate-100);
  color: var(--color-slate-800);
  border-color: var(--color-slate-200);
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231e293b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
 * Figure — aspect-locked admin-replaceable image container
 * ============================================================ */
.sp-figure {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-slate-100);
}
.sp-figure > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sp-figure-16-9 { aspect-ratio: 16 / 9; }
.sp-figure-4-3  { aspect-ratio: 4  / 3; }
.sp-figure-1-1  { aspect-ratio: 1  / 1; }
.sp-figure-3-4  { aspect-ratio: 3  / 4; }
.sp-figure-4-5  { aspect-ratio: 4  / 5; }
.sp-figure-21-9 { aspect-ratio: 21 / 9; }

/* ============================================================
 * Sport posters (4:5 streaming-grade cards with hover scale)
 * ============================================================ */
.sp-sport-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .sp-sport-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .sp-sport-grid { grid-template-columns: repeat(4, 1fr); }
}

.sp-sport-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-slate-800);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  transition: all var(--transition-slow);
  text-decoration: none;
}
.sp-sport-card:hover {
  transform: translateY(-10px);
  border-color: var(--color-emerald-500);
  box-shadow: 0 25px 40px -10px rgba(15, 23, 42, 0.18);
}
.sp-sport-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sp-sport-card:hover .sp-sport-card-image { transform: scale(1.08); }
.sp-sport-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(15, 23, 42, 0.95) 0%,
      rgba(15, 23, 42, 0.40) 45%,
      transparent 100%);
  z-index: 1;
  transition: background var(--transition);
}
.sp-sport-card:hover .sp-sport-card-overlay {
  background: linear-gradient(to top,
      rgba(15, 23, 42, 0.98) 0%,
      rgba(15, 23, 42, 0.55) 50%,
      rgba(15, 23, 42, 0.10) 100%);
}
.sp-sport-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--space-6) var(--space-5);
  z-index: 2;
  transition: transform var(--transition);
}
.sp-sport-card:hover .sp-sport-card-content { transform: translateY(-6px); }
.sp-sport-card-title {
  font-size: 1.875rem;                     /* V2: 1.875rem */
  font-weight: var(--font-weight-extrabold);
  color: #ffffff;
  margin-bottom: var(--space-3);
  line-height: 1.1;
  letter-spacing: -0.5px;                  /* V2: -0.5px */
}
.sp-sport-card-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sp-sport-tag {
  padding: 6px 12px;
  border-radius: 6px;                      /* V2: 6px */
  font-size: 0.75rem;                      /* V2: 0.75rem */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;                   /* V2: 0.5px */
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.sp-sport-tag-soccer { color: var(--sport-tag-soccer-fg); background: var(--sport-tag-soccer-bg); }
.sp-sport-tag-nfl    { color: var(--sport-tag-nfl-fg);    background: var(--sport-tag-nfl-bg); }
.sp-sport-tag-nba    { color: var(--sport-tag-nba-fg);    background: var(--sport-tag-nba-bg); }
.sp-sport-tag-ncaa   { color: var(--sport-tag-ncaa-fg);   background: var(--sport-tag-ncaa-bg); }

/* ============================================================
 * Invite form (Crew section — monospace code input + dark CTA)
 * ============================================================ */
.sp-invite-form {
  margin-top: var(--space-7);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.sp-invite-input {
  padding: 16px 24px;
  font-size: 1.1rem;                       /* match V2 */
  font-family: var(--font-family-mono);
  background: var(--color-slate-50);
  border: 2px solid var(--color-slate-200);
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  outline: none;
  width: 240px;
  transition: all var(--transition);
  color: var(--color-slate-800);
}
.sp-invite-input:focus {
  border-color: var(--color-emerald-500);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.sp-invite-input::placeholder { color: var(--color-slate-400); letter-spacing: 0.1em; }

/* Join-page variant: input + dark CTA share one row on wide screens (input
 * grows, button keeps its label) and stack to full width on phones so the CTA
 * can never overflow off the right edge (the old inline flex-wrap:nowrap +
 * flex:1 input had no min-width:0, pushing the button off-screen on mobile). */
.sp-invite-form-inline {
  flex-wrap: nowrap;
  align-items: stretch;
}
.sp-invite-form-inline .sp-invite-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;            /* allow shrink so the button always stays on-screen */
}
.sp-invite-form-inline .sp-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .sp-invite-form-inline {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .sp-invite-form-inline .sp-invite-input,
  .sp-invite-form-inline .sp-btn {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Browse-public-groups filter bar (join page): keyword + 3 selects + search on
 * one row for wide screens; wraps to stacked rows on phones. The old inline
 * flex-wrap:nowrap spilled the controls off the right edge and let the whole
 * page drag horizontally — wrapping keeps everything inside the viewport. */
.sp-browse-filter {
  max-width: 720px;
  margin: 0 auto var(--space-6);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.sp-browse-filter .sp-browse-keyword {
  flex: 1 1 200px;
  min-width: 0;            /* allow shrink so selects/search stay on-screen */
}
.sp-browse-filter select {
  flex: 0 0 auto;          /* keep natural width on wide screens */
}
@media (max-width: 560px) {
  .sp-browse-filter .sp-browse-keyword {
    flex: 1 1 100%;        /* keyword takes its own full row */
  }
  .sp-browse-filter select {
    flex: 1 1 auto;        /* selects share the rows evenly */
  }
  .sp-browse-filter .sp-btn {
    flex: 1 1 100%;        /* full-width search / clear buttons */
  }
}

/* Create-group form card: generous padding on desktop, but trimmed on phones —
 * the old inline 64px (var(--space-8)) padding ate ~128px of a ~390px viewport,
 * crushing the fields into a narrow column. Drop to 24px on mobile so inputs
 * and the tier cards get real width. */
.sp-create-card {
  padding: var(--space-8);
}
@media (max-width: 560px) {
  .sp-create-card {
    padding: var(--space-5);
  }
}

/* ============================================================
 * Notify form (CTA section — pill email + dark submit)
 * ============================================================ */
.sp-notify-form {
  display: flex;
  flex-direction: column;
  max-width: 540px;
  margin: 0 auto;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .sp-notify-form { flex-direction: row; gap: var(--space-3); }
}
.sp-notify-form input {
  flex: 1;
  padding: 18px 28px;                       /* match V2 */
  font-size: 1.1rem;                        /* match V2 */
  font-family: inherit;
  border-radius: var(--radius-pill);
  border: none;
  color: var(--color-slate-900);
  outline: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.sp-notify-form input::placeholder { color: var(--color-slate-400); }
.sp-notify-form .sp-btn-dark {
  border-radius: var(--radius-pill);
  padding: 18px 40px;                       /* match V2 notify-form override */
  white-space: nowrap;
}
/* Inline AJAX feedback under the notify form. Colors tuned for the emerald->teal
   CTA gradient (light text); success is white, error a light red. */
.sp-notify-status {
  max-width: 540px;
  margin: var(--space-3) auto 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}
.sp-notify-status.is-success { color: #ffffff; }
.sp-notify-status.is-error   { color: #fee2e2; }

/* ============================================================
 * Toast (notification)
 * ============================================================ */
.sp-toast {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-emerald-500);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  max-width: 360px;
}

/* ============================================================
   Leaderboard picks expand row (G1.6.bugfix2)
   ============================================================
   Alpine x-show on <tr> doesn't restore display:table-row reliably
   in some browsers — we keep the <tr> always rendered and let the
   inner <div> control visibility. Collapse the cell padding/border
   to 0 so the row is visually invisible when the inner div is hidden. */
.sp-picks-expand-cell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
}

.sp-picks-expand-inner {
  padding: var(--space-5);
  background: var(--color-slate-50);
  border-top: 1px solid var(--color-slate-200);
}

.sp-picks-expand-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--color-slate-200);
  font-size: var(--font-size-sm);
  color: var(--color-slate-600);
}

.sp-picks-expand-cta {
  color: var(--color-emerald-600);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

.sp-picks-expand-cta:hover {
  text-decoration: underline;
}

/* ============================================================
   Pool page breadcrumb (G1.6.ux1)
   ============================================================
   Small grey-toned context strip under the <h1> on pool sub-pages
   (show / leaderboard / picks / banter / manage), shows
   "<sport> · <tournament> · N matches · M members" so users
   always know which sport/tournament the room belongs to. */
.sp-pool-breadcrumb {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-slate-500);
  letter-spacing: 0.02em;
}

.sp-pool-breadcrumb a {
  color: var(--color-slate-600);
  text-decoration: none;
}

.sp-pool-breadcrumb a:hover {
  color: var(--color-emerald-600);
  text-decoration: underline;
}

/* Picks form per-row sequence number (G1.6.ux1) */
.sp-pick-row-seq {
  display: inline-block;
  min-width: 32px;
  padding: 2px 6px;
  margin-right: var(--space-2);
  background: var(--color-slate-100);
  color: var(--color-slate-600);
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

/* ============================================================
 * Skeleton placeholders (used by featured-pools.js while /api/pools/featured loads)
 * ============================================================ */
@keyframes sp-skel-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.sp-skel {
  display: inline-block;
  background: linear-gradient(90deg, var(--color-slate-100) 0%, var(--color-slate-200) 50%, var(--color-slate-100) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: sp-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
  vertical-align: middle;
}
.sp-skel-line   { display: block; height: 14px; margin: 8px 0; border-radius: var(--radius); }
.sp-skel-pill   { width: 56px; height: 22px; border-radius: var(--radius-pill); }
.sp-skel-block  { flex: 1; height: 44px; border-radius: var(--radius-pill); }
.sp-skel-w-40   { width: 40%; }
.sp-skel-w-60   { width: 60%; }
.sp-skel-w-80   { width: 80%; }
.sp-skel-w-100  { width: 100%; }
.sp-pool-skeleton .sp-card-header { display: flex; align-items: center; gap: var(--space-2); }
.sp-pool-skeleton .sp-card-footer { display: flex; gap: var(--space-2); margin-top: var(--space-4); }