/* Public athlete pages served by the app (29 Sep 2026). Loaded after the site's styles.css,
   so these only add what the hand-built listing pages never needed: the athlete's header,
   photos in their own shape, the forms' states, the track record. */

.public-page .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.public-page .error { color: var(--red-600); font-size: 13px; font-weight: 500; }
.public-page .soft { color: var(--text-secondary); font-weight: 400; }
.public-page .small { font-size: 14px; line-height: 1.45; }
.public-page .muted { color: var(--text-secondary); }

/* ---- The athlete -------------------------------------------------------------- */
.athlete-head { padding-bottom: 8px !important; }
.ah-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 320px); gap: clamp(20px, 3vw, 40px); align-items: start; }
.ah-photo { width: clamp(96px, 11vw, 160px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ink-900); display: grid; place-items: center; box-shadow: 0 0 0 4px var(--paper-100), 0 0 0 5px var(--border-hairline); }
.ah-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-initials { color: var(--lime-500); font: 800 clamp(32px, 4vw, 56px)/1 var(--font-core); letter-spacing: -.02em; }
.ah-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ah-main .profile-name { overflow-wrap: anywhere; }
.ah-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ah-trust li { font: var(--type-meta-sm); letter-spacing: var(--ls-meta); text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-secondary); background: var(--surface-card); }
.ah-trust li.ok { background: var(--status-available); border-color: var(--status-available); color: var(--ink-900); }
.ah-bio { max-width: 62ch; white-space: pre-line; }
.ah-channels { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; }
.ah-channels a { border-bottom: 1px solid var(--border-subtle); }
.ah-channels b { font-weight: 700; }
.ah-side { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); }
.share-btn { align-self: flex-start; }
.follow-form { display: flex; flex-direction: column; gap: 8px; }
.follow-form label { font-size: 14px; font-weight: 600; line-height: 1.35; }
.follow-row { display: flex; gap: 8px; }
.follow-row input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font: 400 15px/1 var(--font-core); background: var(--paper-050); }
.follow-row .btn { height: 40px; }
.follow-form .form-status { font-size: 13px; }
.public-page .form-status.success { color: var(--accent-text); }
@media (max-width: 900px) {
  .ah-grid { grid-template-columns: auto minmax(0, 1fr); }
  .ah-side { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ah-grid { grid-template-columns: minmax(0, 1fr); }
  .ah-photo { width: 104px; }
}

/* ---- The campaign ------------------------------------------------------------- */
.campaign-block { padding-top: 24px !important; }
.campaign-title { font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--font-core); letter-spacing: -.02em; margin: 0; }
/* Photos keep their own shape, so the markers sit where they were placed. */
.canvas.fit { aspect-ratio: var(--ratio, 2 / 3); background: var(--grey-100); border-radius: var(--radius-md); }
.canvas.fit img { object-fit: contain; object-position: center; border-radius: var(--radius-md); }
.canvas a.callout, .canvas a.pin { text-decoration: none; }
.canvas a.pin { display: grid; place-items: center; font: 700 11px/1 var(--font-mono); }
@media (max-width: 560px) {
  .canvas.fit { aspect-ratio: auto; background: none; }
  .canvas.fit img { aspect-ratio: var(--ratio, 2 / 3); object-fit: contain; background: var(--grey-100); }
  .canvas.fit.pins .pin { display: none; }
}
.gallery { display: flex; flex-direction: column; gap: 10px; }
.thumb-row { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb-row a { display: block; }
.thumb-row img { width: 84px; height: 112px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); display: block; background: var(--grey-100); }
.thumb-row.small img { width: 56px; height: 72px; }
.goal dd { display: flex; flex-direction: column; gap: 8px; }
.goal-bar { display: block; height: 6px; border-radius: 3px; background: var(--grey-100); overflow: hidden; }
.goal-bar span { display: block; height: 100%; background: var(--lime-500); }
.inv-row .sponsor-tag { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-weight: 700; }
.inv-row .sponsor-tag a { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border-subtle); }
.inv-row .sponsor-tag img, .sponsor-chip img { height: 18px; width: auto; max-width: 64px; object-fit: contain; }
.inv-row:target { background: var(--lime-wash); }
.results { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-card); }
.results-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.proof-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.proof-links a { border-bottom: 1px solid var(--border-subtle); }

/* ---- Forms -------------------------------------------------------------------- */
.public-page .request-form [data-amount-field][hidden] { display: none; }
.offer-box { gap: 0; }
.offer-box > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.offer-box > summary::-webkit-details-marker { display: none; }
.offer-box > summary .offer-q { font: 700 clamp(20px, 2.2vw, 26px)/1.2 var(--font-core); letter-spacing: -.02em; }
.offer-box > summary .offer-q::after { content: " +"; color: var(--accent-text); }
.offer-box[open] > summary .offer-q::after { content: " \2212"; }
.offer-box > summary .offer-a { color: var(--text-secondary); font-size: 15px; }
.offer-box[open] > summary { margin-bottom: 20px; }

/* ---- Track record ------------------------------------------------------------- */
.past-list { display: flex; flex-direction: column; border-top: 1.5px solid var(--ink-900); }
.past-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; padding: 20px 0; border-bottom: 1px solid var(--border-hairline); align-items: start; }
.past-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.past-main h3 { margin: 0; font: 700 20px/1.2 var(--font-core); letter-spacing: -.01em; }
.past-main h3 a:hover { color: var(--lime-700); }
.past-sponsors { display: flex; flex-wrap: wrap; gap: 8px; }
.sponsor-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; background: var(--surface-card); }
a.sponsor-chip:hover { border-color: var(--ink-900); }
.past-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 560px) { .past-item { grid-template-columns: minmax(0, 1fr); } .past-side { align-items: flex-start; } }

/* ---- Report ------------------------------------------------------------------- */
.report-wrap { padding-top: 0 !important; }
.report summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; width: max-content; }
.report[open] summary { margin-bottom: 16px; }
.report .request-form { max-width: 720px; }
.message-wrap { min-height: 50vh; justify-content: center; }

/* A form's "sent" message stands out: it is the only proof the brand has that it worked. */
.public-page .request-box > .form-status.success, .public-page .offer-box > .form-status.success, .public-page .report > .form-status.success { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--lime-wash-strong); color: var(--ink-900); font-weight: 600; }
.public-page .follow-form .form-status.success { color: var(--ink-900); background: var(--lime-wash-strong); padding: 8px 10px; border-radius: var(--radius-sm); }