/* =============================================================================
   Goals.Fit Challenge Detail v3 — shared stylesheet
   Enqueue handle: gf-challengedetail-v3
   Used by: page-challengedetail-v3.php
   To use in other templates: wp_enqueue_style('gf-challengedetail-v3');
   ============================================================================= */

/* ── Design tokens ── */
:root {
  --navy:     #0F2E46;
  --navy-mid: #1a3d56;
  --teal:     #11B494;
  --teal-dim: rgba(17,180,148,.12);
  --blue:     #206AEE;
  --orange:   #FF4700;
  --text:     #1a2a36;
  --muted:    #5c7080;
  --border:   #dce8f0;
  --bg:       #f0f4f7;
  --white:    #ffffff;
  --r:        10px;
  --r-sm:     6px;
  --side:     320px;
  --gap:      24px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.6; overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: #095df3; }
img { display: block; }

/* ── Layout ── */
.page-shell { max-width: 1140px; margin: 0 auto; padding: 0 var(--gap) var(--gap); }
@media (max-width: 899px) { .page-shell { padding: 0; } }
.page-grid {
  display: grid;
  grid-template-columns: 1fr var(--side);
  gap: var(--gap); align-items: start; margin-top: var(--gap);
}
@media (max-width: 899px) { .page-grid { display: block; margin-top: 0; } }
.col-main { min-width: 0; }
.col-side { position: sticky; top: 16px; }
@media (max-width: 899px) { .col-side { position: static; } }

/* ── Nav ── */
.site-nav {
  background: var(--navy); padding: 0 var(--gap); height: 52px;
  display: flex; align-items: center; gap: 14px;
}
.site-nav .back-link { color: rgba(255,255,255,.6); font-size: 20px; line-height: 1; flex-shrink: 0; }
.site-nav .logo { font-size: 19px; font-weight: 700; letter-spacing: .3px; color: var(--teal); }
.site-nav .logo span { color: #fff; }
.site-nav .logo-link { display: flex; align-items: center; text-decoration: none; }
/* brightness(0) collapses any coloured logo to black, invert(1) flips it to white — makes any logo readable on the dark navy nav */
.site-nav .site-logo-img { height: 32px; width: auto; display: block; filter: brightness(0) invert(1); }
.site-nav .breadcrumb {
  font-size: 13px; color: rgba(255,255,255,.38); margin-left: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
@media (max-width: 600px) { .site-nav .breadcrumb { display: none; } }

/* ── Hero ── */
.hero {
  background: linear-gradient(160deg, #0a1f30 0%, var(--navy) 60%, #0d3548 100%);
  padding: 28px var(--gap) 32px; position: relative; overflow: hidden;
}
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 300px; height: 300px; right: -80px; top: -80px; background: rgba(17,180,148,.07); }
.hero::after  { width: 180px; height: 180px; right: 80px; bottom: -80px; background: rgba(32,106,238,.06); }
.hero-inner {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  align-items: start; position: relative; z-index: 1;
}
@media (max-width: 699px) { .hero-inner { grid-template-columns: 1fr; } }
.hero-pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; }
.pill-private { background: rgba(255,71,0,.18); color: #ff7f55; }
.pill-public  { background: rgba(17,180,148,.2); color: var(--teal); }
.pill-paid    { background: rgba(17,180,148,.2); color: var(--teal); }
.pill-free    { background: rgba(32,106,238,.15); color: #6fa0f5; }
.pill-sport   { background: rgba(255,255,255,.1); color: rgba(255,255,255,.65); }
.hero h1 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 14px; }
.hero-organizer { display: flex; align-items: center; gap: 10px; }
.hero-organizer img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--teal); object-fit: cover; }
.hero-organizer-text { font-size: 13px; color: rgba(255,255,255,.55); }
.hero-organizer-text strong { color: #fff; font-weight: 600; }
.hero-stats-box {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); padding: 16px 20px; min-width: 180px;
  display: flex; flex-direction: column; gap: 14px; align-self: center;
}
.hstat { text-align: center; }
.hstat .val { font-size: 1.6rem; font-weight: 700; color: var(--teal); line-height: 1; }
.hstat .lbl { font-size: 11px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* Mobile stats strip */
.hero-stats-strip { display: none; background: var(--navy-mid); border-bottom: 1px solid rgba(255,255,255,.06); }
@media (max-width: 699px) { .hero-stats-strip { display: grid; grid-template-columns: repeat(3,1fr); } .hero-stats-box { display: none; } }
.hstrip-stat { padding: 12px 8px; text-align: center; border-right: 1px solid rgba(255,255,255,.07); }
.hstrip-stat:last-child { border-right: none; }
.hstrip-stat .val { font-size: 1.2rem; font-weight: 700; color: var(--teal); line-height: 1; }
.hstrip-stat .lbl { font-size: 10px; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
@media (min-width: 900px) { .hero { padding: 32px var(--gap) 36px; } }

/* ── Card ── */
.card { background: var(--white); border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; margin-bottom: 14px; }
@media (max-width: 899px) { .card { border-radius: 0; border-left: none; border-right: none; margin-bottom: 1px; } }

/* ── Collapsible detail blocks ── */
.detail-block { border-bottom: 1px solid var(--border); }
.detail-block:last-child { border-bottom: none; }
details.detail-block > summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; cursor: pointer; user-select: none;
  background: var(--white); transition: background .12s;
}
details.detail-block > summary:hover { background: #f8fafc; }
details.detail-block > summary::-webkit-details-marker { display: none; }
.summary-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.si-teal   { background: var(--teal-dim); color: var(--teal); }
.si-blue   { background: rgba(32,106,238,.1); color: var(--blue); }
.si-orange { background: rgba(255,71,0,.1); color: var(--orange); }
.si-grey   { background: #f0f4f7; color: var(--muted); }
.si-navy   { background: rgba(15,46,70,.08); color: var(--navy); }
.summary-label { font-size: 14px; font-weight: 700; color: var(--navy); flex: 1; }
.summary-chevron { font-size: 13px; color: var(--muted); transition: transform .22s ease; flex-shrink: 0; }
details.detail-block[open] > summary .summary-chevron { transform: rotate(180deg); }
.summary-peek { font-size: 12px; color: var(--muted); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.detail-block[open] > summary .summary-peek { display: none; }
.detail-body { padding: 0 18px 16px 58px; font-size: 14px; color: var(--muted); line-height: 1.7; }
@media (max-width: 500px) { .detail-body { padding-left: 18px; } }
.detail-body p { margin-bottom: 8px; }
.detail-body p:last-child { margin-bottom: 0; }

/* Rules expand */
.rules-collapsible { position: relative; max-height: 120px; overflow: hidden; transition: max-height .3s ease; }
.rules-collapsible.expanded { max-height: 2000px; }
.rules-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--white)); pointer-events: none; transition: opacity .2s; }
.rules-collapsible.expanded .rules-fade { opacity: 0; }
.rules-expand-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--blue); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.rules-expand-btn:hover { color: #095df3; }

/* Warning strip */
.warning-strip { font-size: 13px; color: #6a5200; background: #fffbec; border-left: 3px solid #e0aa00; padding: 10px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; line-height: 1.55; margin: 0 18px 14px 18px; }

/* Stats grid */
.stats-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.stat-item { background: #f4f7fa; border-radius: var(--r-sm); padding: 10px 14px; min-width: 86px; text-align: center; }
.stat-value { display: block; font-size: 1.2rem; font-weight: 700; color: var(--navy); line-height: 1; }
.stat-label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
.stat-ride .stat-value { color: var(--blue); }

/* ── Spotlight leaderboard ── */
.spotlight-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.spotlight-tabs::-webkit-scrollbar { display: none; }
.stab { padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--muted); border: none; border-bottom: 2.5px solid transparent; background: none; cursor: pointer; font-family: inherit; white-space: nowrap; display: flex; align-items: center; gap: 5px; transition: color .12s; }
.stab.active { color: var(--navy); border-bottom-color: var(--teal); }
.spotlight-panel { display: none; }
.spotlight-panel.active { display: block; }
.sp-meta { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; margin: 12px 18px 0; letter-spacing: .2px; }
.sp-speed  { background: rgba(17,180,148,.1);  color: #0a7a63; border: 1px solid rgba(17,180,148,.25); }
.sp-dist   { background: rgba(32,106,238,.08); color: #1450b0; border: 1px solid rgba(32,106,238,.2); }
.sp-persist{ background: rgba(255,71,0,.08);   color: #b83500; border: 1px solid rgba(255,71,0,.22); }
.podium-row { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 12px 12px 6px; }
.podium-slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 8px 4px 6px; border-radius: 10px; transition: background .12s; position: relative; }
.podium-slot:hover { background: #f4f7fa; }
.podium-slot .av-wrap { position: relative; }
.podium-slot img { border-radius: 50%; object-fit: cover; }
.ps-1 img { width: 64px; height: 64px; border: 3px solid var(--teal); }
.ps-2 img, .ps-3 img { width: 50px; height: 50px; border: 2px solid var(--border); }
.p-crown { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 18px; line-height: 1; }
.p-badge { position: absolute; bottom: -3px; right: -3px; width: 17px; height: 17px; border-radius: 50%; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.pb1 { background: var(--teal); color: #fff; }
.pb2 { background: #5a8ab0; color: #fff; }
.pb3 { background: #a07858; color: #fff; }
.p-metric { font-size: 1.1rem; font-weight: 700; color: var(--navy); line-height: 1; margin-top: 3px; }
.ps-1 .p-metric { color: var(--teal); font-size: 1.3rem; }
.p-name { font-size: 12px; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.2; }
.p-unit { font-size: 11px; color: var(--muted); text-align: center; }
.podium-bases { display: flex; gap: 6px; padding: 0 12px 14px; }
.pbase { flex: 1; border-radius: 4px 4px 0 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.pbase-1 { height: 30px; background: rgba(17,180,148,.13); color: #0a7a63; }
.pbase-2 { height: 20px; background: rgba(90,138,176,.13); color: #5a8ab0; }
.pbase-3 { height: 14px; background: rgba(160,120,88,.13); color: #a07858; }

/* ── Main leaderboard ── */
.lb-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px; }
.lb-header h2 { font-size: 15px; font-weight: 700; color: var(--navy); }
.lb-viewall { font-size: 13px; font-weight: 600; color: var(--blue); }
.top3-wrap { display: flex; justify-content: center; align-items: flex-end; gap: 4px; padding: 20px 12px 8px; }
.top-candidate { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; cursor: pointer; padding: 8px 4px; border-radius: 10px; transition: background .12s; position: relative; }
.top-candidate:hover { background: #f4f7fa; }
.top-rank { font-size: 12px; font-weight: 700; color: var(--muted); }
.top-img   { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--border); object-fit: cover; }
.center-img{ width: 68px; height: 68px; border-radius: 50%; border: 3px solid var(--teal); object-fit: cover; }
.top-candidate h3 { font-size: 13px; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.2; }
.top-candidate p  { font-size: 12px; color: var(--muted); text-align: center; }
.bottom-card-container { display: flex; align-items: center; gap: 8px; padding: 2px 18px; }
.btm-card-rank { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 22px; text-align: right; }
.leader-board-card { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #f8fafc; border-radius: 8px; cursor: pointer; margin: 3px 0; border: 1px solid #eaf0f5; transition: background .12s; }
.leader-board-card:hover { background: #eef4fa; }
.leader-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border); flex-shrink: 0; }
.car-body { flex: 1; min-width: 0; }
.car-body h4 { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-body p  { font-size: 12px; color: var(--muted); }
.lb-bottom-pad { height: 10px; }

/* ── Ranking overlay ── */
#ranking {
  position: fixed; inset: 0; z-index: 1000;
  overflow-y: auto; background: var(--bg);
  border-radius: 0 !important; border: none !important; margin: 0 !important;
  animation: rankingSlideUp .2s ease;
}
@keyframes rankingSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.ranking { max-width: 700px; margin: 0 auto; padding: 0 0 32px; background: none; cursor: default; }
.ranking-close-row {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  background: var(--navy); padding: 14px 18px;
  cursor: pointer; user-select: none;
}
.ranking-close-row:hover { background: var(--navy-mid); }
.ranking-close-row span { font-size: 13px; color: rgba(255,255,255,.7); }
.ranking-close-row .mdi { color: rgba(255,255,255,.7); font-size: 20px; }
.ranking-header { padding: 16px 18px 4px; }
.ranking-header h2 { font-size: 15px; font-weight: 700; color: var(--navy); }
.ranking-header p  { font-size: 12px; color: var(--muted); margin-top: 4px; }
.rank-card-wrapper { background: var(--white); border-radius: var(--r); border: 1px solid var(--border); margin: 10px 18px 0; padding: 12px 14px; }
.rank-card-details-wrapper { display: flex; gap: 0; border-bottom: 2px solid #DDEBF3; padding: 6px 0; }
.ranking-card .date { font-size: 12px; color: var(--navy); font-weight: 700; margin-bottom: 4px; }
.rank-card-details { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rank-card-details p { font-size: 11px; color: var(--muted); }
.rank-card-details .distance, .rank-card-details .elapsedtime, .rank-card-details .movingtime { font-size: 13px; font-weight: 700; color: var(--navy); }

/* ── Sidebar join card ── */
.join-card { background: var(--white); border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; box-shadow: 0 2px 16px rgba(15,46,70,.08); }
.join-card-head { background: var(--navy); padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.join-card-head .jci { width: 38px; height: 38px; border-radius: 9px; background: rgba(17,180,148,.18); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--teal); flex-shrink: 0; }
.join-card-head h2 { font-size: 16px; font-weight: 700; color: #fff; }
.join-card-head p  { font-size: 12px; color: rgba(255,255,255,.5); }
.join-body { padding: 18px; }
@media (max-width: 899px) { .join-card { border-radius: 0; border-left: none; border-right: none; box-shadow: none; margin-bottom: 1px; } .col-side .join-card { display: none; } .mobile-join-placeholder { display: block; } }
@media (min-width: 900px) { .mobile-join-placeholder { display: none; } }

/* ── Join form elements ── */
.fgroup { margin-bottom: 12px; }
.fgroup label { display: block; font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
.fdivider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.form-check { margin-bottom: 8px; }
.form-check-label { font-size: 14px; color: var(--text); padding-left: 5px; }
.form-check-input { accent-color: var(--teal); }
.form-control { width: 100%; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 14px; font-family: inherit; color: var(--text); background: #fafcfe; }
.form-control:focus { outline: none; border-color: var(--teal); }
.mt-2 { margin-top: 8px; }
span.tags { background: #11b494; border-radius: 2px; color: #f5f5f5; font-weight: 700; padding: 2px 6px; font-size: 12px; }
.goalsfit-tnc-check { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; margin: 10px 0; }
.goalsfit-tnc-check label { cursor: pointer; }
.goalsfit-tnc-check a { color: var(--teal); }
.tnc-error { font-size: 12px; color: #c0392b; }
.join-challenge-btn, .join-btn { display: block; width: 100%; padding: 11px 0; background: var(--teal); color: #fff; border: none; border-radius: var(--r-sm); font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; text-align: center; transition: background .15s; }
.join-challenge-btn:hover, .join-btn:hover { background: #0fa07f; }
.join-notice { font-size: 12px; color: var(--muted); display: block; margin-top: 8px; }
.join-notice a { color: var(--blue); }
.btns-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 18px 10px; }
.paid-btn, .public-btn { border: none; border-radius: 3px; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .5px; cursor: default; }
.paid-btn   { background: var(--teal); color: #fff; }
.public-btn { background: rgba(15,46,70,.08); color: var(--navy); }
.share-row, .sb-share { display: flex; align-items: center; gap: 8px; padding: 12px 18px; flex-wrap: wrap; border-top: 1px solid var(--border); }
.share-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.share-btn-icon { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; border: none; text-decoration: none; transition: opacity .15s; }
.share-btn-icon:hover { opacity: .8; }
.s-wa { background: #25d366; color: #fff; }
.s-fb { background: #1877f2; color: #fff; }
.s-tw { background: #000; color: #fff; }
.s-li { background: #0a66c2; color: #fff; }
.s-em { background: #648096; color: #fff; }
.s-cp { background: #f0f4f7; color: var(--muted); border: 1px solid var(--border); }

/* ── Sidebar states ── */
.sb-status-badge { display: flex; align-items: center; gap: 8px; padding: 11px 18px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--border); }
.sb-status-badge i { font-size: 14px; flex-shrink: 0; }
.sb-status-badge .sb-since { font-weight: 400; color: var(--muted); margin-left: auto; font-size: 12px; }
.badge-closed { background: #fff8f0; color: #b84800; }
.badge-ended  { background: #f4f7fa; color: var(--muted); }
.sb-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); }
.sb-stat { background: var(--white); padding: 12px 8px; text-align: center; }
.sb-stat .val { font-size: 1.2rem; font-weight: 700; color: var(--navy); line-height: 1; }
.sb-stat .val-teal { color: var(--teal); }
.sb-stat .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
.sb-app-cta { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.sb-app-cta p { font-size: 13px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.sb-app-cta p strong { color: var(--text); }
.app-dl-btns { display: flex; flex-direction: column; gap: 8px; }
.app-dl-btn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--border); background: #fafcfe; font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; transition: background .12s, border-color .12s; }
.app-dl-btn:hover { background: #f0f6fb; border-color: var(--teal); color: var(--navy); }
.app-dl-btn i { font-size: 20px; color: var(--muted); }
.app-dl-btn .btn-sub { font-size: 11px; font-weight: 400; color: var(--muted); display: block; margin-top: 1px; }
.sb-finishers { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sb-finishers h3 { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.sb-finisher-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f4f7; }
.sb-finisher-row:last-child { border-bottom: none; }
.sb-finisher-rank { font-size: 15px; min-width: 22px; text-align: center; }
.sb-finisher-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border); flex-shrink: 0; }
.sb-finisher-info .name { font-size: 13px; font-weight: 700; color: var(--navy); }
.sb-finisher-info .dist { font-size: 12px; color: var(--muted); }
.sb-organiser-link { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .12s; }
.sb-organiser-link:hover { background: #f8fafc; }
.sb-organiser-link img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--teal); object-fit: cover; flex-shrink: 0; }
.org-text { flex: 1; min-width: 0; }
.org-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.org-name  { font-size: 14px; font-weight: 700; color: var(--navy); }
.org-sub   { font-size: 12px; color: var(--blue); }
.org-chevron { color: var(--muted); font-size: 14px; }
.sb-create-nudge { padding: 14px 18px; background: linear-gradient(135deg, #f0f7f4 0%, #e8f4fb 100%); }
.sb-create-nudge p { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.sb-create-nudge p strong { color: var(--text); }
.btn-create { display: block; width: 100%; padding: 9px 0; background: var(--white); color: var(--navy); border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; text-align: center; text-decoration: none; transition: border-color .15s, color .15s; }
.btn-create:hover { border-color: var(--teal); color: var(--teal); }

/* ── Gender tabs ── */
.gender-tabs { display: flex; gap: 4px; }
.gender-tab { padding: 5px 14px; font-size: 12px; font-weight: 700; border: 1.5px solid var(--border); border-radius: 20px; background: none; cursor: pointer; color: var(--muted); font-family: inherit; transition: all .12s; }
.gender-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Daily winners ── */
.daily-winners-section { padding: 14px 18px; }
.daily-winners-section h2 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.date-picker-container { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; }
.date-picker-container input[type="date"] { padding: 6px 10px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-family: inherit; font-size: 13px; }
.winners-placeholder { font-size: 13px; color: var(--muted); text-align: center; padding: 12px 0; }
.winners-activity-group { margin-bottom: 14px; }
.winners-group-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.winners-gender-row { display: flex; gap: 12px; }
.winners-gender-col { flex: 1; }
.gender-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 6px; }
.male-label { color: #206AEE; }
.female-label { color: #e05aa0; }
.winner-card { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0f4f7; }
.winner-photo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border); flex-shrink: 0; }
.winner-info { display: flex; flex-direction: column; }
.winner-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.winner-distance { font-size: 12px; color: var(--muted); }
.no-winner-text { font-size: 13px; color: var(--muted); }

/* ── Dialog overrides ── */
.ui-dialog-titlebar { background: #095DF3 !important; color: #fff !important; border: none !important; }
.ui-dialog-titlebar .ui-button { background: transparent !important; border: none !important; color: #fff !important; }
.ui-dialog { max-width: 92vw !important; }
#terms p, #strava-confirm p, #tnc-dialog p { font-size: 14px; color: #2B485F; line-height: 1.65; margin-bottom: 10px; }

/* ── Footer ── */
footer { text-align: center; padding: 20px 16px 32px; background: var(--white); border-top: 1px solid var(--border); margin-top: var(--gap); }
footer p { font-size: 12px; color: #9aabb5; margin: 3px 0; }
footer a { color: var(--blue); }

/* =============================================================================
   Listing pages (All Challenges, Organizer page, etc.)
   ============================================================================= */

/* ── Listing hero ── */
.ac-hero { background: linear-gradient(160deg,#0a1f30 0%,var(--navy) 60%,#0d3548 100%); padding: 32px var(--gap) 36px; }
.ac-hero h1 { font-size: clamp(1.4rem,3vw,2rem); font-weight:700; color:#fff; line-height:1.2; margin-bottom:10px; }
.ac-hero p { font-size:14px; color:rgba(255,255,255,.6); max-width:680px; line-height:1.65; }
.ac-hero p a { color:var(--teal); }

/* ── Search / filter bar ── */
.ac-controls {
  background:var(--white); border-bottom:1px solid var(--border);
  padding:14px var(--gap); display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  position:sticky; top:0; z-index:100;
}
.ac-search { flex:1; min-width:200px; position:relative; }
.ac-search input {
  width:100%; padding:8px 12px 8px 36px; border:1.5px solid var(--border);
  border-radius:var(--r-sm); font-size:14px; font-family:inherit; color:var(--text);
  background:#fafcfe; transition:border-color .15s;
}
.ac-search input:focus { outline:none; border-color:var(--teal); }
.ac-search .search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; pointer-events:none; }
.ac-select {
  padding:8px 32px 8px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:14px; font-family:inherit; color:var(--text); background:#fafcfe;
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%235c7080' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; cursor:pointer;
  transition:border-color .15s;
}
.ac-select:focus { outline:none; border-color:var(--teal); }
.ac-count { font-size:13px; color:var(--muted); margin-left:auto; white-space:nowrap; }
@media (max-width:599px) { .ac-count { display:none; } }

/* ── Listing grid shell ── */
.ac-shell { max-width:1140px; margin:0 auto; padding:20px var(--gap) 40px; }
@media (max-width:899px) { .ac-shell { padding:12px 0 32px; } }
.ac-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
}
@media (max-width:599px) { .ac-grid { grid-template-columns:1fr; gap:1px; } }

/* ── Challenge card ── */
.ch-card {
  background:var(--white); border-radius:var(--r); border:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:box-shadow .15s, border-color .15s;
  text-decoration:none; color:inherit; cursor:pointer;
}
.ch-card:hover { box-shadow:0 4px 20px rgba(15,46,70,.1); border-color:#b8d0e0; }
@media (max-width:599px) { .ch-card { border-radius:0; border-left:none; border-right:none; } }

.ch-card-body { padding:14px 16px 12px; flex:1; display:flex; flex-direction:column; gap:7px; }
.ch-badge { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; align-self:flex-start; }
.ch-badge-active { background:rgba(17,180,148,.15); color:#0a7a63; }
.ch-badge-ended  { background:#f0f4f7; color:var(--muted); }
.ch-name { font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; }
.ch-org-row { display:flex; align-items:center; gap:8px; }
/* Avatar: always shows initials; img overlays when it loads */
.ch-avatar {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff; letter-spacing:.3px;
}
.ch-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ch-org-name { font-size:12px; color:var(--muted); }
.ch-org-name a { color:var(--blue); text-decoration:none; }
.ch-org-name a:hover { color:#095df3; }
.ch-dates { font-size:11px; color:var(--muted); }

.ch-card-foot { display:flex; justify-content:flex-end; padding:10px 16px; border-top:1px solid var(--border); }
.ch-btn { font-size:12px; font-weight:700; padding:6px 16px; border-radius:var(--r-sm); border:none; cursor:pointer; font-family:inherit; transition:background .15s; text-decoration:none; display:inline-block; }
.ch-btn-join { background:var(--teal); color:#fff; }
.ch-btn-join:hover { background:#0fa07f; }
.ch-btn-view { background:rgba(15,46,70,.08); color:var(--navy); }
.ch-btn-view:hover { background:rgba(15,46,70,.14); }

/* ── Empty state ── */
.ac-empty { text-align:center; padding:60px 20px; color:var(--muted); font-size:14px; }
.ac-empty .mdi { font-size:40px; display:block; margin-bottom:12px; color:var(--border); }

/* ── Pagination ── */
.ac-pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:28px; flex-wrap:wrap; }
.pg-btn { padding:7px 14px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:13px; font-weight:600; font-family:inherit; background:var(--white); color:var(--navy); cursor:pointer; transition:all .12s; }
.pg-btn:hover:not(:disabled) { border-color:var(--teal); color:var(--teal); }
.pg-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.pg-btn:disabled { opacity:.4; cursor:default; }
.pg-ellipsis { color:var(--muted); font-size:13px; padding:0 4px; }

/* =============================================================================
   Profile pages (User Profile, Organizer Profile)
   ============================================================================= */

/* ── Profile hero ── */
.up-hero {
  background: linear-gradient(160deg,#0a1f30 0%,var(--navy) 60%,#0d3548 100%);
  padding: 28px var(--gap) 22px; position: relative; overflow: hidden;
}
.up-hero::before { content:''; position:absolute; width:260px; height:260px; right:-60px; top:-60px; background:rgba(17,180,148,.07); border-radius:50%; pointer-events:none; }
.up-hero-inner { max-width:900px; margin:0 auto; display:flex; align-items:center; gap:20px; position:relative; z-index:1; }
@media (max-width:599px) { .up-hero { padding:18px var(--gap) 16px; } .up-hero-inner { gap:14px; } }

/* Avatar with initials fallback */
.up-avatar {
  width:80px; height:80px; border-radius:50%; flex-shrink:0;
  border:3px solid var(--teal); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700; color:#fff; letter-spacing:.5px;
}
.up-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:599px) { .up-avatar { width:56px; height:56px; font-size:18px; } }

.up-info { flex:1; min-width:0; }
.up-badge-org { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.4px; background:rgba(17,180,148,.2); color:var(--teal); border:1px solid rgba(17,180,148,.3); margin-bottom:6px; }
.up-name { font-size:clamp(1.2rem,3vw,1.7rem); font-weight:700; color:#fff; line-height:1.2; margin-bottom:6px; }
.up-meta { display:flex; flex-wrap:wrap; gap:6px 16px; }
.up-meta-item { font-size:13px; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:5px; }

/* Share row inside hero */
.up-share { max-width:900px; margin:14px auto 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative; z-index:1; }

/* ── Profile tab nav ── */
.up-tabs-wrap { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.up-tabs { max-width:900px; margin:0 auto; display:flex; overflow-x:auto; scrollbar-width:none; padding:0 var(--gap); }
.up-tabs::-webkit-scrollbar { display:none; }

/* ── Profile content shell ── */
.up-shell { max-width:900px; margin:0 auto; padding:20px var(--gap) 40px; }
@media (max-width:899px) { .up-shell { padding:12px 0 32px; } }
.up-tab-panel { display:none; }
.up-tab-panel.active { display:block; }

/* ── Joined-challenge extras ── */
.ch-rank-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ch-rank-chip { font-size:11px; font-weight:700; color:var(--blue); background:rgba(32,106,238,.09); border-radius:4px; padding:2px 7px; }
.ch-stat-text { font-size:11px; color:var(--muted); }

/* ── Milestone / Event card ── */
.ms-card { background:var(--white); border-radius:var(--r); border:1px solid var(--border); padding:14px 16px; margin-bottom:8px; display:flex; align-items:flex-start; gap:12px; }
@media (max-width:599px) { .ms-card { border-radius:0; border-left:none; border-right:none; margin-bottom:1px; } }
.ms-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.ms-icon-milestone { background:var(--teal-dim); color:var(--teal); }
.ms-icon-event     { background:rgba(32,106,238,.1); color:var(--blue); }
.ms-body { flex:1; min-width:0; }
.ms-event-tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:3px; }
.ms-desc { font-size:14px; font-weight:700; color:var(--navy); line-height:1.3; }
.ms-date { font-size:12px; color:var(--muted); margin-top:3px; }

/* ── Private profile lockout ── */
.up-private { text-align:center; padding:64px 24px; color:var(--muted); }
.up-private .up-private-icon { font-size:52px; display:block; margin-bottom:16px; color:var(--border); }
.up-private h2 { font-size:18px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.up-private p  { font-size:14px; line-height:1.6; max-width:340px; margin:0 auto; }