/* ═══════════════════════════════════════════════════════════════
   members/css/profile_v2.css
   The redesigned profile (/members/profile/) and account settings
   (/members/settings/): the paper look the meeting page and Fox
   Signals use — warm off-white ground, white cards, DM Sans, ink
   text, gold accents. The site nav and footer keep their own look.
   ═══════════════════════════════════════════════════════════════ */

.page-profile-v2 .site-main { background: #FAFAF7; }

.pv2 {
  --pv-paper: #FAFAF7;
  --pv-card: #FFFFFF;
  --pv-warm: #F7F5EE;
  --pv-track: #F2EFE6;
  --pv-ink: #11151F;
  --pv-ink-2: #41474F;
  --pv-ink-3: #666B73;
  --pv-rule: #E7E5DD;
  --pv-rule-2: #D6D2C5;
  --pv-gold: #D4AF37;
  --pv-gold-ink: #856510;
  --pv-gold-wash: #FAF1D7;
  --pv-gold-line: #E6D6A0;
  --pv-green: #1A7D4A;
  --pv-green-dark: #156A3E;
  --pv-green-wash: #EDF5F0;
  --pv-red: #C0392B;
  --pv-red-ink: #A32F23;
  --pv-red-wash: #FBEEEC;
  --pv-silver: #E2E5EA;
  --pv-shadow: 0 1px 2px rgb(17 21 31 / 4%), 0 6px 20px rgb(17 21 31 / 6%);

  color-scheme: light;
  background: var(--pv-paper);
  color: var(--pv-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.pv2 a { color: var(--pv-gold-ink); text-decoration: none; }
.pv2 a:hover { color: var(--pv-ink); }
.pv2 :focus-visible { outline: 2px solid var(--pv-gold-ink); outline-offset: 2px; }
/* Anchored sections (#results, #profile, …) land below the fixed nav. */
.pv2 [id] { scroll-margin-top: 84px; }

.pv2-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Type ─────────────────────────────────────────────────────── */
.pv2-title { margin: 6px 0 0; font-size: 32px; font-weight: 800; line-height: 1.15; }
.pv2-h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
.pv2-h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.25; }
.pv2-kicker {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pv-gold-ink);
}
.pv2-kicker--gold { color: var(--pv-gold); }
.pv2-muted { color: var(--pv-ink-3); font-size: 13px; }
.pv2-up { color: var(--pv-green); }
.pv2-link { font-weight: 700; font-size: 13px; }
.pv2-empty { margin: 0; color: var(--pv-ink-3); font-size: 13px; }
.pv2-note { margin: 0; font-size: 13px; color: var(--pv-ink-2); }
.pv2-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Cards ────────────────────────────────────────────────────── */
.pv2-card {
  background: var(--pv-card);
  border: 1px solid var(--pv-rule);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.pv2-card--side { padding: 20px 22px; gap: 12px; }
.pv2-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 16px;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.pv2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--pv-rule-2);
  background: var(--pv-card);
  color: var(--pv-ink) !important;
  font: 600 14px 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.pv2-btn:hover { background: var(--pv-gold-wash); border-color: var(--pv-gold-line); }
.pv2-btn--ink { background: var(--pv-ink); border-color: var(--pv-ink); color: #FFFFFF !important; font-weight: 700; }
.pv2-btn--ink:hover { background: #2A2F3D; border-color: #2A2F3D; }
.pv2-btn--gold { background: var(--pv-gold); border-color: var(--pv-gold); color: var(--pv-ink) !important; font-weight: 800; }
.pv2-btn--gold:hover { background: #C29E2C; border-color: #C29E2C; }
.pv2-btn--sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
.pv2-btn:disabled { opacity: .5; cursor: not-allowed; }
.pv2-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 1 · Identity ─────────────────────────────────────────────── */
.pv2-id {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px 28px;
  box-shadow: var(--pv-shadow);
}
.pv2-avatar {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6px var(--pv-gold);
}
.pv2-avatar--md { width: 80px; height: 80px; }
.pv2-avatar--initial {
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 40px; font-weight: 800;
}
.pv2-avatar--md.pv2-avatar--initial { font-size: 32px; }
.pv2-id__text { flex: 999 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pv2-id__name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv2-id__name { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* Names run to 30 characters, and one long word can't wrap between
   words: set long names smaller so they fit the line instead of
   breaking mid-word (overflow-wrap stays as the last resort). */
.pv2-id__name--long { font-size: 26px; }
.pv2-id__tagline { margin: 0; font-size: 15px; color: var(--pv-ink-2); }
.pv2-id__tagline--empty { color: var(--pv-ink-3); font-size: 14px; }
.pv2-id__meta { margin: 0; font-size: 13px; color: var(--pv-ink-3); }
.pv2-id__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pv2-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--pv-gold-wash); border: 1px solid var(--pv-gold-line);
  color: var(--pv-gold-ink); font-size: 12px; font-weight: 700;
}
.pv2 .profile-signout {
  margin-top: 4px;
  min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--pv-rule-2);
  background: none; color: var(--pv-ink-2);
  font: 600 13px 'DM Sans', system-ui, sans-serif; cursor: pointer;
}
.pv2 .profile-signout:hover { color: var(--pv-red-ink); border-color: var(--pv-red); background: var(--pv-red-wash); }

/* ── 2 · Numbers ──────────────────────────────────────────────── */
.pv2-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pv2-stat {
  background: var(--pv-card); border: 1px solid var(--pv-rule); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.pv2-stat__label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-ink-3); }
.pv2-stat__value { font-size: 28px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.pv2-stat__note { font-size: 12px; font-weight: 600; color: var(--pv-ink-3); }
.pv2-stat__note.pv2-up { color: var(--pv-green); }

/* ── Columns ──────────────────────────────────────────────────── */
.pv2-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pv2-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pv2-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ── Lists and rows ───────────────────────────────────────────── */
.pv2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pv2-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--pv-rule);
}
.pv2-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv2-row__body strong { font-weight: 700; }
.pv2-time { width: 44px; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.pv2-silk { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }

.pv2-state {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--pv-track); color: var(--pv-ink-2);
}
.pv2-state--won { background: var(--pv-green-wash); color: var(--pv-green-dark); }
.pv2-state--placed { background: var(--pv-silver); color: var(--pv-ink); }
.pv2-state--live { background: var(--pv-gold-wash); color: var(--pv-gold-ink); }

/* ── Meters ───────────────────────────────────────────────────── */
.pv2-meter { display: flex; align-items: center; gap: 12px; }
.pv2-meter__track { flex: 1; height: 10px; border-radius: 999px; background: var(--pv-track); overflow: hidden; }
.pv2-meter__fill { height: 100%; border-radius: 999px; background: var(--pv-gold); max-width: 100%; }
.pv2-meter__fill--ink { background: var(--pv-ink); }
.pv2-meter__label { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ── Today: the big race ──────────────────────────────────────── */
.pv2-feature {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  padding: 16px 18px; border-radius: 12px;
  background: var(--pv-gold-wash); border: 1px solid var(--pv-gold-line);
}
.pv2-feature__text { flex: 999 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-feature__name { font-size: 16px; font-weight: 800; }
.pv2-feature__pick.my-vote-card--empty { display: none; }

/* ── Waiting for you ──────────────────────────────────────────── */
.pv2-waiting { border-color: var(--pv-gold-line); box-shadow: 0 0 0 3px var(--pv-gold-wash); }
.pv2-waiting__group { display: flex; flex-direction: column; gap: 4px; }
.pv2-waiting__group + .pv2-waiting__group { padding-top: 6px; }
.pv2-row--wrap { flex-wrap: wrap; }
.pv2-row--wrap .pv2-row__body { flex: 999 1 260px; }
.pv2-row--wrap .pv2-challenge__actions { flex: 1 1 220px; }

/* ── Vote list ────────────────────────────────────────────────── */
.pv2-closed { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--pv-red-wash); color: var(--pv-red-ink); font-weight: 600; font-size: 13px; }
.pv2-runner {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 8px; margin: 0 -8px;
  border-top: 1px solid var(--pv-rule); border-radius: 10px;
}
.pv2-runner.vote-card--selected { background: var(--pv-gold-wash); border-top-color: transparent; }
.pv2-runner__no {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-weight: 800; font-size: 13px;
  text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}
.pv2-runner__body { flex: 2 1 0; min-width: 0; display: flex; flex-direction: column; }
.pv2-runner__body .pv2-muted a { color: inherit; }
.pv2-fav { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: var(--pv-ink); color: #FFFFFF; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.pv2-runner__odds { width: 52px; text-align: right; font-weight: 800; flex-shrink: 0; }
.pv2-runner__share { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 90px; }
.pv2-runner__track { flex: 1; height: 6px; border-radius: 999px; background: var(--pv-track); overflow: hidden; }
.pv2-runner__fill { height: 100%; background: var(--pv-ink-3); border-radius: 999px; }
.pv2-runner.vote-card--leader .pv2-runner__fill { background: var(--pv-green); }
.pv2-runner__count { width: 30px; text-align: right; font-size: 12px; color: var(--pv-ink-2); }
.pv2-runner .vote-btn { min-width: 96px; }
.pv2-runner .vote-btn--selected { background: var(--pv-ink); border-color: var(--pv-ink); color: #FFFFFF !important; }
.pv2-runner .vote-btn--loading { opacity: .6; }
.pv2-more summary {
  cursor: pointer; font-weight: 700; font-size: 13px; color: var(--pv-gold-ink);
  padding: 10px 0; list-style-position: inside;
}

/* ── History ──────────────────────────────────────────────────── */
.pv2-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-pill {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--pv-rule-2); background: var(--pv-card);
  font-size: 13px; font-weight: 600; color: var(--pv-ink-2) !important;
}
.pv2-pill:hover { background: var(--pv-gold-wash); border-color: var(--pv-gold-line); }
.pv2-pill.is-on { background: var(--pv-ink); border-color: var(--pv-ink); color: #FFFFFF !important; }
/* While profile_v2.js fetches another period. */
#results.is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }
.pv2-totals { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--pv-ink-2); }
.pv2-totals strong { font-size: 16px; color: var(--pv-ink); }
.pv2-totals strong.pv2-up { color: var(--pv-green); }
.pv2-day__head {
  display: flex; justify-content: space-between; padding: 8px 0 6px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pv-ink-3);
}
.pv2-pos {
  min-width: 64px; height: 28px; padding: 0 8px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--pv-track); color: var(--pv-ink-3);
}
.pv2-pos--won { background: var(--pv-gold); color: var(--pv-ink); }
.pv2-pos--placed { background: var(--pv-silver); color: var(--pv-ink); }
.pv2-pos--live { background: var(--pv-gold-wash); color: var(--pv-gold-ink); }
.pv2-pts { min-width: 44px; text-align: right; font-weight: 800; color: var(--pv-ink-3); }
.pv2-pts.pv2-up { color: var(--pv-green); }

/* ── Trophies ─────────────────────────────────────────────────── */
.pv2-trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.pv2-trophy {
  border: 1px solid var(--pv-gold-line); background: var(--pv-gold-wash); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.pv2-trophy__icon {
  width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF;
  border: 1px solid var(--pv-gold-line); color: var(--pv-gold-ink);
  display: flex; align-items: center; justify-content: center;
}
.pv2-trophy--fox { background: var(--pv-ink); border-color: var(--pv-ink); color: #FFFFFF; }
.pv2-trophy--fox .pv2-muted { color: #C9CCD3; }
.pv2-trophy--locked { background: var(--pv-card); border: 1px dashed var(--pv-rule-2); color: var(--pv-ink-3); }
.pv2-trophy--locked .pv2-trophy__icon { border-color: var(--pv-rule-2); color: var(--pv-ink-3); }

/* ── Side column pieces ───────────────────────────────────────── */
.pv2-count {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--pv-red); color: #FFFFFF; font-size: 12px; font-weight: 800;
}
.pv2-challenge { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--pv-rule); }
.pv2-challenge__actions { display: flex; gap: 8px; }
.pv2-challenge__actions form { flex: 1; display: flex; }
.pv2-challenge__actions .pv2-btn { flex: 1; }
.pv2-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--pv-rule); padding-top: 12px; }

.pv2-league { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pv2-league li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.pv2-league li.is-me { background: var(--pv-gold-wash); font-weight: 800; }
.pv2-league__rank { width: 28px; font-weight: 800; color: var(--pv-ink-2); }
.pv2-league__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pv2-side-row { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--pv-rule); color: var(--pv-ink) !important; }
.pv2-side-row--split { flex-direction: row; justify-content: space-between; gap: 8px; font-size: 13px; }

.pv2-plan {
  background: var(--pv-ink); color: #FFFFFF; border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.pv2-plan p { margin: 0; font-size: 13px; color: #C9CCD3; }
.pv2 .pv2-plan__compare { color: var(--pv-gold-line); font-size: 13px; font-weight: 600; text-align: center; }
.pv2 .pv2-plan__compare:hover { color: #FFFFFF; }

.pv2-account { padding: 8px; gap: 0; }
.pv2-account a, .pv2-account__out {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 14px; border-radius: 10px;
  color: var(--pv-ink) !important; font-weight: 600;
}
.pv2-account a:hover { background: var(--pv-warm); }
.pv2-account__out {
  width: 100%; background: none; border: 0; border-top: 1px solid var(--pv-rule); border-radius: 0 0 10px 10px;
  color: var(--pv-red-ink) !important; font: 700 14px 'DM Sans', system-ui, sans-serif; text-align: left; cursor: pointer;
}
.pv2-account__out:hover { background: var(--pv-red-wash); }

/* ── Settings page ────────────────────────────────────────────── */
.pv2-cols--settings { align-items: flex-start; }
.pv2-sections { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 84px; }
.pv2-sections a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px;
  color: var(--pv-ink) !important; font-weight: 600;
}
.pv2-sections a:hover { background: var(--pv-warm); }
.pv2-messages { display: flex; flex-direction: column; gap: 8px; }
.pv2-message { margin: 0; padding: 12px 16px; border-radius: 10px; font-weight: 600; background: var(--pv-green-wash); color: var(--pv-green-dark); border: 1px solid #B9D9C7; }
.pv2-message--error { background: var(--pv-red-wash); color: var(--pv-red-ink); border-color: #ECC4BE; }
.pv2-form { display: flex; flex-direction: column; gap: 18px; }
.pv2-form__actions { display: flex; justify-content: flex-end; }
.pv2-form__actions--split { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.pv2-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pv2-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pv2-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; min-width: 0; }
.pv2-field input[type="text"], .pv2-field input[type="password"], .pv2-field textarea {
  width: 100%; box-sizing: border-box;
  min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--pv-rule-2); border-radius: 10px; background: #FFFFFF;
  font: 500 16px 'DM Sans', system-ui, sans-serif; color: var(--pv-ink);
}
.pv2-field textarea { resize: vertical; line-height: 1.5; }
.pv2-field input:focus, .pv2-field textarea:focus { outline: none; border-color: var(--pv-gold-ink); box-shadow: 0 0 0 3px rgb(212 175 55 / 22%); }
.pv2-field input[aria-invalid="true"] { border-color: var(--pv-red); }
.pv2-field input[type="file"] { font: 500 14px 'DM Sans', system-ui, sans-serif; }
.pv2-field__error { color: var(--pv-red-ink); font-weight: 600; }
.pv2-errors { padding: 10px 14px; border-radius: 10px; background: var(--pv-red-wash); color: var(--pv-red-ink); font-weight: 600; }
.pv2-errors ul { margin: 0; padding-left: 18px; }
.pv2-hint { font-size: 12.5px; font-weight: 500; color: var(--pv-ink-3); }
.pv2-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.pv2-photo__controls { display: flex; flex-direction: column; gap: 10px; }
.pv2-check { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; font-weight: 600; }
.pv2-check input { width: 18px; height: 18px; }
.pv2-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv2-fieldset legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.pv2-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pv2-swatch { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pv2-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pv2-swatch span:first-of-type { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.pv2-swatch input:checked + span { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--pv-ink); }
.pv2-swatch input:focus-visible + span { outline: 2px solid var(--pv-gold-ink); outline-offset: 4px; }

.pv2-toggle { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--pv-rule); cursor: pointer; position: relative; }
.pv2-toggle__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv2-toggle input { position: absolute; right: 0; width: 48px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.pv2-toggle__ui {
  width: 48px; height: 28px; border-radius: 999px; background: #CBD0D8; flex-shrink: 0;
  position: relative; transition: background .15s;
}
.pv2-toggle__ui::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 2px rgb(17 21 31 / 20%); transition: transform .15s;
}
.pv2-toggle input:checked + .pv2-toggle__ui { background: var(--pv-green); }
.pv2-toggle input:checked + .pv2-toggle__ui::after { transform: translateX(20px); }
.pv2-toggle input:focus-visible + .pv2-toggle__ui { outline: 2px solid var(--pv-gold-ink); outline-offset: 2px; }

/* ── Vote toasts (voting.js) on the paper page ────────────────── */
.vote-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px); opacity: 0; z-index: 1000;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 12px 20px; border-radius: 999px;
  font: 600 14px 'DM Sans', system-ui, sans-serif;
  background: #11151F; color: #FFFFFF; box-shadow: 0 16px 48px rgb(0 0 0 / 25%);
  transition: opacity .25s, transform .25s;
}
.vote-toast--in { opacity: 1; transform: translate(-50%, 0); }
.vote-toast--error { background: #A32F23; }

.pv2-more--days summary { min-height: 44px; display: flex; align-items: center; padding: 0; }

/* ── Narrower screens ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .pv2-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pv2-wrap { padding: 20px 16px 48px; gap: 18px; }
  .pv2-card { padding: 18px; border-radius: 14px; }
  .pv2-id { gap: 16px; align-items: flex-start; }
  .pv2-id__text { flex: 1 1 0; }  /* beside the avatar, not under it */
  .pv2-avatar { width: 68px; height: 68px; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--pv-gold); }
  .pv2-avatar--initial { font-size: 28px; }
  .pv2-id__name { font-size: 26px; }
  .pv2-id__name--long { font-size: 19px; }
  .pv2-id__actions { width: 100%; }
  .pv2-id__actions .pv2-btn { flex: 1; }
  .pv2-stats { gap: 8px; }
  .pv2-stat { padding: 12px; }
  .pv2-stat__value { font-size: 22px; }
  .pv2-stat__note { display: none; }
  .pv2-title { font-size: 26px; }
  .pv2-grid2, .pv2-grid3 { grid-template-columns: minmax(0, 1fr); }
  .pv2-sections { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .pv2-sections a { min-height: 40px; border: 1px solid var(--pv-rule-2); border-radius: 999px; background: var(--pv-card); font-size: 13px; }
  /* Runner rows: name and button on one line, the share bar under. */
  .pv2-runner { flex-wrap: wrap; gap: 8px 12px; }
  .pv2-runner__body { flex: 1 1 140px; }
  .pv2-runner__odds { width: auto; }
  .pv2-runner__share { order: 5; flex: 1 1 100%; padding-left: 44px; }
  .pv2-runner .vote-btn { min-width: 0; }
}
/* Phones: every control a finger can hit, 44px tall. Links inside a
   line of text (jockey, trainer) can't be, so they get at least 24px
   and room around them. */
@media (max-width: 760px) {
  .pv2-pill { min-height: 44px; }
  .pv2-link { display: inline-flex; align-items: center; min-height: 44px; }
  .pv2 .profile-signout { min-height: 44px; }
  .pv2-more summary { min-height: 44px; display: flex; align-items: center; padding: 0; }
  .pv2-side-row { min-height: 44px; justify-content: center; }
  .pv2-own a { display: inline-block; padding: 12px 0; }
  .pv2 .pv2-plan__compare { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .pv2-runner__body .pv2-muted { line-height: 1.9; }
  .pv2-runner__body .pv2-muted a { display: inline-block; padding: 3px 0; }
  .pv2-btn--sm { min-height: 44px; }
}
@media (max-width: 400px) {
  .pv2-stat__label { font-size: 9.5px; letter-spacing: .06em; }
  .pv2-time { width: 38px; }
}

/* ═══════════════════════════════════════════════════════════════
   Public Cub page (cubs/public_profile_v2.html)
   ═══════════════════════════════════════════════════════════════ */
.pv2-own {
  margin: 0; padding: 12px 16px; border-radius: 12px;
  background: var(--pv-gold-wash); border: 1px solid var(--pv-gold-line);
  font-size: 13px; font-weight: 600; color: var(--pv-ink-2);
}
.pv2-id__actions--public { flex: 1 1 320px; justify-content: flex-end; }
.pv2-challenge-form { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; justify-content: flex-end; }
.pv2-challenge-form input {
  flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--pv-rule-2); border-radius: 999px; background: #FFFFFF;
  font: 500 16px 'DM Sans', system-ui, sans-serif; color: var(--pv-ink);
}
.pv2-challenge-form input:focus { outline: none; border-color: var(--pv-gold-ink); box-shadow: 0 0 0 3px rgb(212 175 55 / 22%); }
.pv2-hint--box { margin: 0; max-width: 360px; padding: 12px 14px; border-radius: 12px; background: var(--pv-warm); font-size: 13px; color: var(--pv-ink-2); }

.pv2-pick { display: flex; align-items: center; gap: 14px; }
.pv2-pick__no { width: 44px; height: 44px; font-size: 16px; border-radius: 10px; }
.pv2-pick__horse { font-size: 18px; font-weight: 800; }
.pv2-pick .pv2-muted a { color: inherit; }
.pv2-quote {
  margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--pv-warm);
  font-size: 15px; color: var(--pv-ink-2);
}
.pv2-bio { margin: 0; font-size: 15px; color: var(--pv-ink-2); white-space: normal; }

.pv2-record { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--pv-track); }
.pv2-record span { display: block; height: 100%; }
.pv2-record__win, .pv2-dot--win { background: var(--pv-green); }
.pv2-record__draw, .pv2-dot--draw { background: #CBD0D8; }
.pv2-record__loss, .pv2-dot--loss { background: var(--pv-red); }
.pv2-record__legend { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 600; color: var(--pv-ink-2); }
.pv2-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

.pv2-duel {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--pv-rule); color: var(--pv-ink) !important;
}
.pv2-duel__outcome {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; background: var(--pv-track); color: var(--pv-ink-3);
}
.pv2-duel__outcome--w { background: var(--pv-green-wash); color: var(--pv-green-dark); }
.pv2-duel__outcome--l { background: var(--pv-red-wash); color: var(--pv-red-ink); }

@media (max-width: 760px) {
  /* Actions get a row of their own, so the name keeps its width. */
  .pv2-id__actions--public { flex: 1 1 100%; justify-content: stretch; }
  .pv2-hint--box { max-width: none; }
  .pv2-challenge-form .pv2-btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   The Pack (cubs/pack_v2.html)
   ═══════════════════════════════════════════════════════════════ */
.pk-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; box-shadow: var(--pv-shadow); }
.pk-head__text { flex: 999 1 360px; min-width: 0; }
.pk-head__sub { margin: 6px 0 0; font-size: 15px; color: var(--pv-ink-2); }
.pk-head__sub strong { color: var(--pv-ink); }
.pk-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-head__actions .pv2-count { margin-left: 4px; }

.pk-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
}
.pk-av--initial { display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; font-weight: 800; font-size: 18px; }
.pk-av--sm { width: 34px; height: 34px; font-size: 14px; }

.pk-race { border: 1px solid var(--pv-rule); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.pk-race--featured { border-color: var(--pv-gold-line); background: linear-gradient(var(--pv-gold-wash), #FFFFFF 70px); }
.pk-race__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pk-race__time { font-weight: 800; font-size: 15px; min-width: 42px; }
.pk-race .pv2-list .pv2-row:first-child { border-top: 1px solid var(--pv-rule); }
.pk-state {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--pv-green-wash); color: var(--pv-green-dark);
}
.pk-state--settled { background: var(--pv-ink); color: #FFFFFF; }
.pk-state--pending { background: var(--pv-gold-wash); color: var(--pv-gold-ink); }
.pk-state--abandoned { background: var(--pv-track); color: var(--pv-ink-3); }
.pk-pick.is-me { background: var(--pv-gold-wash); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
.pk-name { font-weight: 700; color: var(--pv-ink) !important; }
.pk-name:hover { text-decoration: underline; }
.pk-pick .pv2-silk { display: inline-block; width: 10px; height: 10px; vertical-align: 0; }
.pk-pick form { display: flex; }

.pk-result { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 600; }
.pk-result .pv2-pos { min-width: 0; height: 24px; margin-right: 4px; }
.pk-pulse { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 4px; }
.pk-pulse__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 44px; align-items: center; gap: 10px; font-size: 13px; }
.pk-pulse__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-pulse__fox { height: 20px; padding: 0 6px; font-size: 10.5px; }
.pk-pulse__track { height: 8px; border-radius: 999px; background: var(--pv-track); overflow: hidden; }
.pk-pulse__fill { display: block; height: 100%; border-radius: 999px; background: var(--pv-ink-3); }
.pk-pulse__fill.is-leader { background: var(--pv-green); }
.pk-pulse__pct { text-align: right; font-weight: 700; color: var(--pv-ink-2); }
.pk-search { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-search input[type="search"] {
  flex: 1 1 220px; min-width: 0; min-height: 46px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--pv-rule-2); border-radius: 999px; background: #FFFFFF;
  font: 500 16px 'DM Sans', system-ui, sans-serif; color: var(--pv-ink);
}
.pk-search input[type="search"]:focus { outline: none; border-color: var(--pv-gold-ink); box-shadow: 0 0 0 3px rgb(212 175 55 / 22%); }

.pk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pk-card {
  display: flex; align-items: flex-start; gap: 12px; height: 100%; box-sizing: border-box;
  padding: 14px; border: 1px solid var(--pv-rule); border-radius: 12px; background: #FFFFFF;
  color: var(--pv-ink) !important; transition: border-color .15s, background .15s;
}
.pk-card:hover { border-color: var(--pv-gold-line); background: var(--pv-gold-wash); }
.pk-card__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-card__name { font-weight: 800; overflow-wrap: anywhere; }
.pk-card__tag { font-size: 13px; color: var(--pv-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-card__nums { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--pv-ink-3); margin-top: 4px; }
.pk-card__nums b { color: var(--pv-ink); font-weight: 800; }

.pv2-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pv2-pager a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--pv-rule-2); font-weight: 700; color: var(--pv-ink) !important;
}
.pv2-pager a:hover { background: var(--pv-gold-wash); border-color: var(--pv-gold-line); }
[data-swap].is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }

.pk-aw__icon { width: 34px; height: 34px; flex-shrink: 0; }
/* When the sidebar drops under the board (tablet widths), its cards sit
   side by side instead of each stretching across the page. Beside the
   board, or on a phone, there is room for one column and this is one. */
.page-pack .pv2-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.pk-newest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pk-newest__cub {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px; border-radius: 10px;
  color: var(--pv-ink) !important; font-weight: 600; font-size: 13px;
}
.pk-newest__cub span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-newest__cub:hover { background: var(--pv-warm); }
.pv2-league__name a { color: var(--pv-ink) !important; }

@media (max-width: 760px) {
  /* Name links in the pick board, the league and awards: a finger's worth. */
  .pk-name, .pv2-league__name a, .pv2-side .pv2-row__body strong a { display: inline-block; padding: 6px 0; }
  /* Race heading: time and name on the first line, the badges under
     them, rather than four things squeezed into one row. */
  .pk-race__head .pv2-row__body { flex: 1 1 calc(100% - 60px); }
  .pk-race__head .pv2-badge { margin-left: 54px; }
  /* Pick rows: the horse and price stay on one line under the name. */
  .pk-pick__horse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pk-head__actions { width: 100%; }
  .pk-head__actions .pv2-btn { flex: 1 1 auto; }
  /* The list of Cubs as compact rows: avatar, name, numbers, a
     one-line tagline. Cards one to a row were about 100px each. */
  .pk-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pk-card { align-items: center; padding: 10px 12px; gap: 10px; }
  .pk-card .pk-av { width: 36px; height: 36px; font-size: 15px; }
  /* Two lines: name and points, then the tagline. Wins and picks are
     on the Cub's own page. */
  .pk-card__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .pk-card__name { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
  .pk-card__nums { grid-column: 2; grid-row: 1; margin-top: 0; align-self: center; }
  .pk-card__nums span:not(:first-child) { display: none; }
  .pk-card__tag { grid-column: 1 / -1; -webkit-line-clamp: 1; }
  .pk-race { padding: 12px; }
}


/* ── Challenges (challenges/hub_v2.html, detail_v2.html) ──────────── */
.ch2-record { margin: 10px 0 0; font-size: 15px; }
.ch2-record strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.ch2-now { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ch2-now .pv2-h2 { flex: 1 1 100%; }
.ch2-now .pv2-note { flex: 999 1 280px; font-size: 15px; }
.ch2-now--challenge, .ch2-now--pick_first { border-color: var(--pv-gold-line); }
.ch2-duel__actions { flex: 0 1 auto; }
.ch2-duel .pv2-row__body > span + span { margin-top: 2px; }
.ch2-outcome {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.ch2-outcome--won { background: var(--pv-green-wash); color: var(--pv-green-dark); }
.ch2-outcome--lost { background: var(--pv-red-wash); color: var(--pv-red-ink); }
.ch2-outcome--draw { background: var(--pv-track); color: var(--pv-ink-2); }
.ch2-archived summary { cursor: pointer; font-weight: 700; }

/* A duel between two other Cubs: name and horse on each side, vs between. */
.ch2-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.ch2-pair__side { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: var(--pv-ink) !important; }
.ch2-pair__side > span { display: flex; flex-direction: column; min-width: 0; }
.ch2-pair__side strong, .ch2-pair__side .pv2-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch2-pair__side--right { justify-content: flex-end; text-align: right; }
.ch2-pair__side.is-winner strong::after { content: " ★"; color: var(--pv-gold-ink); }
.ch2-vs {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px;
  border-radius: 999px; background: var(--pv-track); color: var(--pv-ink-2) !important; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.ch2-vs:hover { background: var(--pv-gold-wash); color: var(--pv-gold-ink) !important; }
.ch2-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--pv-ink-2); }
.ch2-steps strong { color: var(--pv-ink); }

/* Detail page */
.ch2-detail { max-width: 860px; }
.ch2-back { margin: 0; display: flex; align-items: center; gap: 10px; }
.ch2-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--pv-ink) !important; }
.ch2-card { gap: 14px; box-shadow: var(--pv-shadow); }
.ch2-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ch2-card__title { margin: 0; overflow-wrap: anywhere; }
.ch2-card__vs { color: var(--pv-ink-3); font-weight: 600; font-size: .7em; }
.ch2-card__race { margin: -8px 0 0; font-size: 15px; }
.ch2-status {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; background: var(--pv-track); color: var(--pv-ink-2);
}
.ch2-status--pending { background: var(--pv-gold-wash); color: var(--pv-gold-ink); }
.ch2-status--accepted { background: var(--pv-green-wash); color: var(--pv-green-dark); }
.ch2-status--completed { background: var(--pv-ink); color: #FFFFFF; }
.ch2-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; }
.ch2-sides__vs { align-self: center; font-weight: 800; color: var(--pv-ink-3); text-transform: uppercase; font-size: 13px; }
.ch2-side {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0;
  padding: 16px; border: 1px solid var(--pv-rule); border-radius: 14px; background: var(--pv-paper);
}
.ch2-side.is-winner { border-color: var(--pv-gold-line); background: var(--pv-gold-wash); }
.ch2-side.is-loser { opacity: .8; }
.ch2-side__who { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--pv-ink) !important; }
.ch2-side__who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ch2-side__who strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch2-side__role { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; }
.ch2-side__pick { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; }
.ch2-message { margin: 0; padding: 12px 14px; border-left: 3px solid var(--pv-gold); background: var(--pv-paper); border-radius: 0 10px 10px 0; font-style: italic; }
.ch2-message .pv2-muted { font-style: normal; }
.ch2-verdict { margin: 0; font-size: 17px; font-weight: 800; }
.ch2-verdict--won { color: var(--pv-green-dark); }
.ch2-verdict--lost { color: var(--pv-red-ink); }
.ch2-answer { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--pv-gold-wash); border: 1px solid var(--pv-gold-line); }
.ch2-answer p { margin: 0; font-size: 15px; }
.ch2-wait { font-size: 15px; }
.ch2-table-wrap { overflow-x: auto; }
.ch2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ch2-table th, .ch2-table td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--pv-rule); vertical-align: top; }
.ch2-table thead th { border-top: 0; font-weight: 800; }
.ch2-table tbody th { width: 28%; font-weight: 600; color: var(--pv-ink-3); }
.ch2-form { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.ch2-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

@media (max-width: 760px) {
  .ch2-sides { grid-template-columns: minmax(0, 1fr); }
  .ch2-sides__vs { justify-self: center; margin: -4px 0; }
  .ch2-pair { gap: 6px; }
  .ch2-pair .pk-av { display: none; }
  /* Avatar and text side by side; the pill and buttons share the line under. */
  .ch2-duel .pv2-row__body { flex: 1 1 calc(100% - 50px); }
  .ch2-duel__actions { flex: 1 1 auto; }
  .ch2-duel__actions .pv2-btn { flex: 1; }
  .ch2-now .pv2-btn { flex: 1 1 100%; }
  .ch2-card__title { font-size: 26px; }
}

/* ── Syndicates (syndicate/hub_v2.html, directory_v2, detail_v2, form_v2) ── */
.sy2-standing { margin: 10px 0 0; font-size: 15px; }
.sy2-ask__actions { flex: 0 1 auto; }
.sy2-row__name { font-weight: 800; color: var(--pv-ink) !important; overflow-wrap: anywhere; }
.sy2-row__desc { margin-top: 2px; font-size: 13px; color: var(--pv-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sy2-row__act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sy2-row__act form { display: flex; }
/* Side cards are narrow: avatar and text side by side, buttons under. */
.pv2-side .pv2-row--wrap .pv2-row__body { flex: 1 1 calc(100% - 50px); }
.pv2-side .pv2-row--wrap .pv2-challenge__actions { flex: 1 1 100%; }
.sy2-seeall { display: inline-flex; align-items: center; min-height: 44px; }

/* Your syndicates: a card per team with how it's leaning. */
.sy2-teams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sy2-team {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; border: 1px solid var(--pv-rule);
  border-radius: 14px; background: var(--pv-paper); color: var(--pv-ink) !important;
}
.sy2-team:hover { border-color: var(--pv-gold-line); background: var(--pv-gold-wash); }
.sy2-team__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sy2-team__name { font-size: 17px; overflow-wrap: anywhere; }
.sy2-team__lean { font-size: 14px; }
.sy2-bar { display: block; height: 8px; border-radius: 999px; background: var(--pv-track); overflow: hidden; }
.sy2-bar > span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--pv-gold); }
.sy2-mypick { margin-top: 4px; font-size: 14px; }
.sy2-steps { font-size: 15px; }
.sy2-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sy2-rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--pv-ink-2); }
.sy2-rules strong { color: var(--pv-ink); }
.sy2-nums { margin: 0; display: flex; gap: 18px; font-size: 14px; color: var(--pv-ink-2); }
.sy2-nums strong { display: block; font-size: 24px; color: var(--pv-ink); font-variant-numeric: tabular-nums; }
.sy2-limit { max-width: none; }

/* Syndicate page */
.sy2-name { overflow-wrap: anywhere; }
.sy2-meta { margin: 8px 0 0; font-size: 14px; }
.sy2-you { align-items: center; }
.sy2-you form { display: flex; }
.sy2-invite-note { flex: 1 1 100%; font-size: 14px; }
.sy2-board__race { margin: 4px 0 0; }
.sy2-picked { white-space: nowrap; }
.sy2-split { display: flex; flex-direction: column; gap: 10px; }
.sy2-split__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: 12px; font-size: 14px; }
.sy2-split__horse { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sy2-split__row:not(.is-top) .sy2-bar > span { background: var(--pv-rule-2); }
.sy2-split__n { min-width: 24px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.sy2-nudge { font-size: 14px; padding: 10px 14px; border-radius: 10px; background: var(--pv-gold-wash); }
.sy2-members-h { margin-top: 6px; }
.sy2-member.is-me { background: var(--pv-gold-wash); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.sy2-member__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sy2-member__name .pk-name { font-weight: 700; }
.sy2-remove { color: var(--pv-red-ink) !important; }
.sy2-invite-search input[type="search"] { min-width: 0; flex: 1 1 140px; }
.sy2-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sy2-chips li { padding: 4px 10px; border-radius: 999px; background: var(--pv-track); font-size: 13px; font-weight: 600; }

/* Create / edit */
.sy2-formwrap { max-width: 680px; }
.sy2-form-sub { margin-top: 8px; font-size: 15px; }
.sy2-danger { border-color: #ECC4BE; }
.sy2-danger__btn { color: var(--pv-red-ink) !important; border-color: #ECC4BE !important; align-self: flex-start; }
.sy2-danger form { display: flex; }

@media (max-width: 760px) {
  .sy2-ask .pv2-row__body, .sy2-row .pv2-row__body { flex: 1 1 calc(100% - 50px); }
  .sy2-ask__actions { flex: 1 1 auto; }
  .sy2-row__act { margin-left: 46px; }
  .sy2-row__name { display: inline-block; padding: 6px 0; }
  .sy2-teams { grid-template-columns: minmax(0, 1fr); }
  .sy2-split__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .sy2-split__row .sy2-bar { grid-column: 1 / -1; grid-row: 2; }
  .sy2-you { width: 100%; }
  .sy2-you form, .sy2-you .pv2-btn { flex: 1 1 auto; }
  .sy2-you form .pv2-btn { width: 100%; }
}