/* ============================================================
   public-sponsor-flow.css
   Page-internal styles for the donor sponsorship surfaces:
   - Participant fundraising page    body.fr-public-fundraising
   - Sponsor multi-step flow         body.fr-public-sponsor
   - Thank-you terminal pages        body.fr-public-sponsor

   Builds on patterns shipped in public-register-flow.css. The
   shared chrome (.fr-register-context, .fr-register-step,
   .fr-confirm-summary/total/terms, .fr-radio--card, .fr-form-checkbox,
   .fr-terminal-badge) is reused verbatim under body.fr-public-sponsor
   — see README for the codebase consolidation note.
   ============================================================ */


/* ============================================================
   PART 1 — Participant fundraising page (body.fr-public-fundraising)
   The donor's landing pad — single page, persuasion surface.
   ============================================================ */

body.fr-public-fundraising main {
  padding-top: var(--fr-space-7);
  padding-bottom: var(--fr-space-10);
}

@media (max-width: 640px) {
  body.fr-public-fundraising main {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(var(--fr-space-10) + 5rem);
  }
}

/* ---------- Hero — participant photo or coloured placeholder ---------- */

body.fr-public-fundraising .fr-fp-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--fr-radius-lg);
  overflow: hidden;
  background: var(--fr-color-surface-sunken);
  border: 1px solid var(--fr-color-border);
}
body.fr-public-fundraising .fr-fp-hero > img,
body.fr-public-fundraising .fr-fp-hero > svg {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
body.fr-public-fundraising .fr-fp-hero::after {
  content: '';
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(180deg, rgba(22,33,58,0) 0%, rgba(22,33,58,0.55) 100%);
  pointer-events: none;
}
body.fr-public-fundraising .fr-fp-hero__presenter {
  position: absolute;
  left: var(--fr-space-5);
  bottom: var(--fr-space-5);
  z-index: 1;
}
@media (max-width: 640px) {
  body.fr-public-fundraising .fr-fp-hero {
    aspect-ratio: 4 / 3;
    border-radius: 0;
    border-left: 0; border-right: 0;
  }
  body.fr-public-fundraising .fr-fp-hero__presenter {
    left: var(--fr-space-4);
    bottom: var(--fr-space-4);
  }
}

/* No-photo variant — coloured placeholder with the participant's initials. */
body.fr-public-fundraising .fr-fp-hero--placeholder {
  background: linear-gradient(135deg, var(--fr-color-primary-soft) 0%, #fbe5d3 60%, #f0c4a8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 5;
}
body.fr-public-fundraising .fr-fp-hero--placeholder .fr-fp-hero__initials {
  font-size: clamp(3rem, 9vw, 5rem);
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.04em;
  color: var(--fr-color-primary);
  opacity: 0.55;
  line-height: 1;
}
@media (max-width: 640px) {
  body.fr-public-fundraising .fr-fp-hero--placeholder { aspect-ratio: 5 / 3; }
}

/* ---------- Participant header — H1 + summary line ---------- */

body.fr-public-fundraising .fr-fp-header {
  margin-top: var(--fr-space-7);
  margin-bottom: var(--fr-space-7);
  padding-bottom: var(--fr-space-6);
  border-bottom: 1px solid var(--fr-color-border);
}
body.fr-public-fundraising .fr-fp-header__name {
  font-size: clamp(var(--fr-text-2xl), 4vw + 0.5rem, var(--fr-text-4xl));
  letter-spacing: -0.03em;
  line-height: var(--fr-leading-tight);
  margin: 0;
}
body.fr-public-fundraising .fr-fp-header__sub {
  margin-top: var(--fr-space-3);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-md);
}
body.fr-public-fundraising .fr-fp-header__when {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-variant-numeric: tabular-nums;
  margin-top: var(--fr-space-2);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-subtle);
}
@media (max-width: 640px) {
  body.fr-public-fundraising .fr-fp-header {
    margin-top: var(--fr-space-6);
    margin-bottom: var(--fr-space-6);
    padding-bottom: var(--fr-space-5);
    padding-left: var(--fr-container-pad-x);
    padding-right: var(--fr-container-pad-x);
  }
}

/* ---------- Two-col layout ---------- */

body.fr-public-fundraising .fr-fp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(20rem, 32%, 24rem);
  gap: var(--fr-space-8);
  align-items: start;
}
body.fr-public-fundraising .fr-fp-layout__main { min-width: 0; }
body.fr-public-fundraising .fr-fp-layout__aside {
  position: sticky;
  top: calc(3.75rem + var(--fr-space-5));
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-4);
}
@media (max-width: 960px) {
  body.fr-public-fundraising .fr-fp-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fr-space-7);
  }
  body.fr-public-fundraising .fr-fp-layout__aside {
    position: static;
    order: -1;             /* thermometer above message+supporters on tablet */
  }
}
@media (max-width: 640px) {
  body.fr-public-fundraising .fr-fp-layout {
    padding-left: var(--fr-container-pad-x);
    padding-right: var(--fr-container-pad-x);
    gap: var(--fr-space-5);
  }
}

/* ---------- Hero thermometer card (the page's primary number) ---------- */

body.fr-public-fundraising .fr-fp-thermo-card {
  padding: var(--fr-space-5) var(--fr-space-6);
}
body.fr-public-fundraising .fr-fp-thermo-card .fr-card__body {
  padding: var(--fr-space-5) var(--fr-space-6) var(--fr-space-6);
}
body.fr-public-fundraising .fr-fp-thermo__amount {
  font-size: clamp(var(--fr-text-3xl), 6vw, var(--fr-text-4xl));
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fr-color-ink);
  line-height: 1;
}
body.fr-public-fundraising .fr-fp-thermo__caption {
  display: block;
  margin-top: var(--fr-space-2);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
}
body.fr-public-fundraising .fr-fp-thermo__caption strong {
  color: var(--fr-color-ink);
  font-variant-numeric: tabular-nums;
}
body.fr-public-fundraising .fr-fp-thermo__bar {
  position: relative;
  margin-top: var(--fr-space-4);
  height: 14px;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-surface-sunken);
  border: 1px solid var(--fr-color-border);
  overflow: hidden;
}
body.fr-public-fundraising .fr-fp-thermo__bar-fill {
  position: absolute;
  inset: 0;
  width: var(--fr-thermo-pct, 0%);
  background: linear-gradient(90deg,
    var(--fr-color-primary) 0%,
    var(--fr-color-primary-hover) 100%);
  border-radius: var(--fr-radius-pill);
  transition: width var(--fr-duration-base) var(--fr-ease);
}
body.fr-public-fundraising .fr-fp-thermo__pct {
  display: block;
  margin-top: var(--fr-space-3);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  font-variant-numeric: tabular-nums;
}
body.fr-public-fundraising .fr-fp-thermo__pct strong {
  color: var(--fr-color-primary);
  font-weight: var(--fr-weight-bold);
}
body.fr-public-fundraising .fr-fp-thermo__pct.is-complete strong {
  color: var(--fr-color-success);
}

body.fr-public-fundraising .fr-fp-sponsor-cta {
  margin-top: var(--fr-space-5);
}

/* Sub-rows under the thermometer card (event + date, soft) */
body.fr-public-fundraising .fr-fp-thermo-meta {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-1);
  margin-top: var(--fr-space-4);
  padding-top: var(--fr-space-4);
  border-top: 1px solid var(--fr-color-border);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
}
body.fr-public-fundraising .fr-fp-thermo-meta strong {
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-semibold);
}

/* ---------- Personal message — wider, prose-y ---------- */

body.fr-public-fundraising .fr-fp-message p {
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  max-width: 60ch;
}
body.fr-public-fundraising .fr-fp-message p + p {
  margin-top: var(--fr-space-3);
}

/* Empty-message callout (Day 0, edit view) */
body.fr-public-fundraising .fr-fp-empty {
  padding: var(--fr-space-5) var(--fr-space-6);
  border: 1.5px dashed var(--fr-color-border-strong);
  background: var(--fr-color-surface-sunken);
  border-radius: var(--fr-radius-md);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-relaxed);
}
body.fr-public-fundraising .fr-fp-empty strong {
  display: block;
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-semibold);
  margin-bottom: var(--fr-space-2);
}

/* ---------- Recent supporters — rows with avatar initials ---------- */

body.fr-public-fundraising .fr-fp-supporters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
body.fr-public-fundraising .fr-fp-supporter {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: var(--fr-space-3) var(--fr-space-4);
  align-items: start;
  padding: var(--fr-space-4) 0;
  border-top: 1px solid var(--fr-color-border);
}
body.fr-public-fundraising .fr-fp-supporter:first-child { border-top: 0; padding-top: var(--fr-space-2); }

body.fr-public-fundraising .fr-fp-supporter__avatar {
  grid-row: 1 / span 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-primary-soft);
  color: var(--fr-color-primary);
  font-weight: var(--fr-weight-semibold);
  font-size: var(--fr-text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
}
body.fr-public-fundraising .fr-fp-supporter__avatar--anon {
  background: var(--fr-color-surface-sunken);
  color: var(--fr-color-ink-subtle);
}

body.fr-public-fundraising .fr-fp-supporter__name {
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  font-size: var(--fr-text-base);
}
body.fr-public-fundraising .fr-fp-supporter__name--anon {
  color: var(--fr-color-ink-muted);
  font-weight: var(--fr-weight-regular);
}
body.fr-public-fundraising .fr-fp-supporter__when {
  display: block;
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-subtle);
  margin-top: 2px;
}
body.fr-public-fundraising .fr-fp-supporter__amount {
  font-weight: var(--fr-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--fr-color-ink);
  font-size: var(--fr-text-base);
  white-space: nowrap;
}
body.fr-public-fundraising .fr-fp-supporter__message {
  grid-column: 2 / span 2;
  margin: var(--fr-space-2) 0 0;
  font-size: var(--fr-text-sm);
  line-height: var(--fr-leading-snug);
  color: var(--fr-color-ink);
  padding: var(--fr-space-3) var(--fr-space-4);
  background: var(--fr-color-surface-sunken);
  border-radius: var(--fr-radius-md);
}

body.fr-public-fundraising .fr-fp-supporters__empty {
  padding: var(--fr-space-5);
  text-align: center;
  border: 1.5px dashed var(--fr-color-border-strong);
  background: var(--fr-color-surface-sunken);
  border-radius: var(--fr-radius-md);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-base);
}
body.fr-public-fundraising .fr-fp-supporters__empty strong {
  display: block;
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  margin-bottom: var(--fr-space-2);
}

/* Section heads in the main col */
body.fr-public-fundraising .fr-fp-layout__main h2 {
  font-size: var(--fr-text-xl);
  letter-spacing: -0.015em;
  margin-bottom: var(--fr-space-4);
}
body.fr-public-fundraising .fr-fp-layout__main section + section {
  margin-top: var(--fr-space-8);
}

/* Footer link to event */
body.fr-public-fundraising .fr-fp-more {
  margin-top: var(--fr-space-7);
  padding-top: var(--fr-space-5);
  border-top: 1px solid var(--fr-color-border);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
}

/* Edit-my-page CTA */
body.fr-public-fundraising .fr-fp-edit-cta {
  margin-top: var(--fr-space-4);
}


/* ============================================================
   PART 2 — Sponsor flow (body.fr-public-sponsor)

   The flow mirrors the register flow's chrome: form column + sticky
   context aside. Most of the shared chrome
   (.fr-register-context / .fr-register-step / .fr-confirm-* / etc.)
   is REUSED from public-register-flow.css — see README for the
   selector-generalization note that should land alongside this
   stylesheet in production. For the mockups, the body carries
   BOTH `fr-public-register` and `fr-public-sponsor` so the existing
   rules apply.
   ============================================================ */

body.fr-public-sponsor main {
  padding-top: var(--fr-space-7);
  padding-bottom: var(--fr-space-10);
}
@media (max-width: 640px) {
  body.fr-public-sponsor main {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(var(--fr-space-10) + 5rem);
  }
}

/* ---------- Sponsor layout — alias of fr-register-layout ---------- */

body.fr-public-sponsor .fr-register-layout__main {
  max-width: 40rem;
}

/* ---------- Participant context — adds runner photo + thermo
              to the standard register context band. ---------- */

body.fr-public-sponsor .fr-register-context__participant {
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
  padding: var(--fr-space-4);
  border-bottom: 1px solid var(--fr-color-border);
}
body.fr-public-sponsor .fr-register-context__avatar {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-primary-soft);
  color: var(--fr-color-primary);
  font-weight: var(--fr-weight-bold);
  font-size: var(--fr-text-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--fr-color-surface);
  box-shadow: 0 0 0 1px var(--fr-color-border);
}
body.fr-public-sponsor .fr-register-context__avatar > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
body.fr-public-sponsor .fr-register-context__participant-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.fr-public-sponsor .fr-register-context__participant-label {
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink-subtle);
}
body.fr-public-sponsor .fr-register-context__participant-name {
  font-size: var(--fr-text-base);
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.01em;
  color: var(--fr-color-ink);
  line-height: var(--fr-leading-snug);
  margin: 0;
}
body.fr-public-sponsor .fr-register-context__participant-hint {
  margin: 0;
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-muted);
}

/* ---------- Mini thermometer inside the context band ---------- */

body.fr-public-sponsor .fr-register-context__thermo {
  padding: var(--fr-space-3) var(--fr-space-4);
  border-bottom: 1px solid var(--fr-color-border);
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-muted);
}
body.fr-public-sponsor .fr-register-context__thermo-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fr-space-3);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
body.fr-public-sponsor .fr-register-context__thermo-label strong {
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-semibold);
  font-size: var(--fr-text-sm);
}
body.fr-public-sponsor .fr-register-context__thermo-bar {
  position: relative;
  height: 6px;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-surface-sunken);
  overflow: hidden;
}
body.fr-public-sponsor .fr-register-context__thermo-bar > span {
  position: absolute;
  inset: 0;
  width: var(--fr-thermo-pct, 0%);
  background: var(--fr-color-primary);
  border-radius: var(--fr-radius-pill);
}

/* When sponsor-event has typed-name / general, the participant slot
   shows a subtler "we'll match this later" treatment. */
body.fr-public-sponsor .fr-register-context__participant--typed .fr-register-context__avatar {
  background: var(--fr-color-surface-sunken);
  color: var(--fr-color-ink-subtle);
}
body.fr-public-sponsor .fr-register-context__participant--typed .fr-register-context__avatar::after {
  content: '?';
  font-size: var(--fr-text-lg);
}
body.fr-public-sponsor .fr-register-context__participant--general .fr-register-context__avatar {
  background: color-mix(in oklch, var(--fr-color-success-soft) 70%, transparent);
  color: var(--fr-color-success);
}


/* ---------- Stripe trust badge — slightly more visible
              than the legacy muted line. Used on Details step. ---------- */

body.fr-public-sponsor .fr-stripe-trust {
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
  padding: var(--fr-space-3) var(--fr-space-4);
  background: var(--fr-color-surface-sunken);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-md);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  line-height: var(--fr-leading-snug);
  margin-bottom: var(--fr-space-5);
}
body.fr-public-sponsor .fr-stripe-trust__icon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--fr-radius-sm);
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-bold);
  font-size: 0.65rem;
  letter-spacing: 0.02em;
}
body.fr-public-sponsor .fr-stripe-trust__body strong {
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-semibold);
}


/* ---------- Gift Aid section — boost callout treatment ---------- */

body.fr-public-sponsor .fr-giftaid {
  position: relative;
  padding: var(--fr-space-5) var(--fr-space-6);
  background: color-mix(in oklch, var(--fr-color-success-soft) 65%, var(--fr-color-bg));
  border: 1px solid color-mix(in oklch, var(--fr-color-success) 25%, var(--fr-color-border));
  border-radius: var(--fr-radius-md);
}
body.fr-public-sponsor .fr-giftaid__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  background: var(--fr-color-surface);
  border: 1px solid color-mix(in oklch, var(--fr-color-success) 35%, transparent);
  border-radius: var(--fr-radius-pill);
  color: var(--fr-color-success);
  font-size: var(--fr-text-xs);
  font-weight: var(--fr-weight-semibold);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--fr-space-3);
}
body.fr-public-sponsor .fr-giftaid__pill::before {
  content: '+25%';
  font-variant-numeric: tabular-nums;
}
body.fr-public-sponsor .fr-giftaid__pill > span { display: none; } /* "+25%" pseudo-element carries the value */
body.fr-public-sponsor .fr-giftaid h3 {
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.01em;
  margin-bottom: var(--fr-space-2);
}
body.fr-public-sponsor .fr-giftaid__lead {
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
  line-height: var(--fr-leading-normal);
  margin-bottom: var(--fr-space-4);
  max-width: 50ch;
}
body.fr-public-sponsor .fr-giftaid .fr-form-checkbox {
  background: var(--fr-color-surface);
  padding: var(--fr-space-3) var(--fr-space-4);
  border-radius: var(--fr-radius-sm);
}
body.fr-public-sponsor .fr-giftaid .fr-form-checkbox + .fr-form-field {
  margin-top: var(--fr-space-4);
}


/* ---------- Tip step — segmented selector + lighter framing ---------- */

body.fr-public-sponsor .fr-tip-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fr-space-2);
  margin-bottom: var(--fr-space-4);
}
body.fr-public-sponsor .fr-tip-segment {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--fr-space-3) var(--fr-space-2);
  border: 1.5px solid var(--fr-color-border);
  border-radius: var(--fr-radius-md);
  background: var(--fr-color-surface);
  cursor: pointer;
  transition: border-color var(--fr-duration-base) var(--fr-ease),
              background var(--fr-duration-base) var(--fr-ease);
}
body.fr-public-sponsor .fr-tip-segment input[type='radio'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
body.fr-public-sponsor .fr-tip-segment:has(input:checked) {
  border-color: var(--fr-color-primary);
  background: var(--fr-color-primary-soft);
}
body.fr-public-sponsor .fr-tip-segment:has(input:focus-visible) {
  box-shadow: var(--fr-shadow-focus);
}
body.fr-public-sponsor .fr-tip-segment__amount {
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--fr-color-ink);
}
body.fr-public-sponsor .fr-tip-segment__label {
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-muted);
  margin-top: 2px;
}


/* ---------- SponsorEvent "two ways to give" radio-card pair ---------- */

body.fr-public-sponsor .fr-radio--card .fr-radio__nested {
  display: none;
  margin-top: var(--fr-space-4);
  padding-top: var(--fr-space-4);
  border-top: 1px solid var(--fr-color-border);
}
body.fr-public-sponsor .fr-radio--card:has(input:checked) .fr-radio__nested {
  display: block;
}
body.fr-public-sponsor .fr-radio--card .fr-radio__nested .fr-form-field {
  margin-bottom: var(--fr-space-3);
}
body.fr-public-sponsor .fr-radio--card .fr-radio__nested .fr-form-field:last-child {
  margin-bottom: 0;
}

/* Two-up name fields on tablet+ */
@media (min-width: 520px) {
  body.fr-public-sponsor .fr-typed-name-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fr-space-4);
  }
  body.fr-public-sponsor .fr-typed-name-grid .fr-form-field {
    margin-bottom: 0;
  }
}


/* ---------- Confirm "On Sam's page" message quote ---------- */

body.fr-public-sponsor .fr-confirm-summary__quote {
  display: block;
  margin-top: 4px;
  font-weight: var(--fr-weight-regular);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
  white-space: pre-wrap;
}


/* ---------- Thank-you page — earned-feel terminal ---------- */

body.fr-public-sponsor .fr-thanks-hero {
  text-align: center;
  padding: var(--fr-space-7) var(--fr-space-5) var(--fr-space-6);
}
body.fr-public-sponsor .fr-thanks-hero .fr-terminal-badge {
  margin: 0 auto var(--fr-space-4);
  width: 4rem;
  height: 4rem;
  font-size: var(--fr-text-2xl);
}
body.fr-public-sponsor .fr-thanks-hero__amount {
  display: block;
  font-size: clamp(var(--fr-text-3xl), 8vw, var(--fr-text-4xl));
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fr-color-ink);
  line-height: 1;
  margin-bottom: var(--fr-space-2);
}
body.fr-public-sponsor .fr-thanks-hero__caption {
  display: block;
  font-size: var(--fr-text-md);
  color: var(--fr-color-ink-muted);
  margin-bottom: var(--fr-space-2);
}
body.fr-public-sponsor .fr-thanks-hero__caption strong {
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-semibold);
}

body.fr-public-sponsor .fr-thanks-share {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-3);
  padding: var(--fr-space-5) var(--fr-space-6);
  background: var(--fr-color-primary-soft);
  border-radius: var(--fr-radius-md);
  margin: var(--fr-space-4) 0 var(--fr-space-5);
}
body.fr-public-sponsor .fr-thanks-share__lead {
  font-size: var(--fr-text-base);
  color: var(--fr-color-ink);
  line-height: var(--fr-leading-snug);
  margin: 0;
}
body.fr-public-sponsor .fr-thanks-share__url {
  display: flex;
  align-items: center;
  gap: var(--fr-space-2);
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border-strong);
  border-radius: var(--fr-radius-md);
  padding: var(--fr-space-2) var(--fr-space-3);
  font-family: var(--fr-font-mono);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink);
  word-break: break-all;
}
body.fr-public-sponsor .fr-thanks-share__url > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.fr-public-sponsor .fr-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-space-3);
  margin-top: var(--fr-space-3);
}

body.fr-public-sponsor .fr-thanks-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fr-space-3);
  margin-top: var(--fr-space-5);
}
@media (max-width: 520px) {
  body.fr-public-sponsor .fr-thanks-next { grid-template-columns: 1fr; }
}
body.fr-public-sponsor .fr-thanks-next a {
  display: block;
  padding: var(--fr-space-4) var(--fr-space-5);
  background: var(--fr-color-surface-sunken);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-md);
  color: var(--fr-color-ink);
  text-decoration: none;
  transition: border-color var(--fr-duration-base) var(--fr-ease);
}
body.fr-public-sponsor .fr-thanks-next a:hover {
  border-color: var(--fr-color-primary);
}
body.fr-public-sponsor .fr-thanks-next a > strong {
  display: block;
  font-weight: var(--fr-weight-semibold);
  font-size: var(--fr-text-base);
}
body.fr-public-sponsor .fr-thanks-next a > span {
  display: block;
  margin-top: 2px;
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
}

/* ------------------------------------------------------------
   C5 — owner-only bar + share affordances on the participant
   sponsorship page (body.fr-public-fundraising). All scoped under
   the body class so they can't leak into other layouts.
   ------------------------------------------------------------ */

body.fr-public-fundraising .fr-fp-saved-notice {
  max-width: var(--fr-container-wide);
  margin: var(--fr-space-3) auto 0;
  padding: var(--fr-space-2) var(--fr-space-4);
  background: var(--fr-color-primary-soft);
  border: 1px solid var(--fr-color-primary);
  border-radius: var(--fr-radius-sm);
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-medium);
  font-size: var(--fr-text-sm);
  text-align: center;
}

body.fr-public-fundraising .fr-fp-owner-bar {
  max-width: var(--fr-container-wide);
  margin: var(--fr-space-3) auto var(--fr-space-4);
  padding: var(--fr-space-3) var(--fr-space-4);
  background: var(--fr-color-primary-soft);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fr-space-3);
}
body.fr-public-fundraising .fr-fp-owner-bar__title {
  flex: 1 1 320px;
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink);
  line-height: var(--fr-leading-normal);
}
body.fr-public-fundraising .fr-fp-owner-bar__title strong {
  display: block;
  font-weight: var(--fr-weight-bold);
  margin-bottom: 2px;
}
body.fr-public-fundraising .fr-fp-owner-bar__actions {
  display: flex;
  gap: var(--fr-space-2);
  flex-wrap: wrap;
}
/* Share primitives are unscoped: the owner bar on the participant
   sponsorship page (C5) and the per-card share affordance on the
   My events list (C5 mirror) both use them. Owner-bar-specific
   spacing (full-width row, top border) is added below via a sibling
   selector so the My events panel stays compact inside an fr-card. */
.fr-fp-share-panel { margin-top: var(--fr-space-3); }
.fr-fp-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-space-2);
}
body.fr-public-fundraising .fr-fp-owner-bar .fr-fp-share-panel {
  flex: 1 0 100%;
  margin-top: 0;
  padding-top: var(--fr-space-3);
  border-top: 1px solid var(--fr-color-border);
}

body.fr-public-fundraising .fr-fp-share-prompt {
  margin: var(--fr-space-5) 0;
  padding: var(--fr-space-4);
  border-radius: var(--fr-radius-md);
  border: 1px solid var(--fr-color-border);
}
body.fr-public-fundraising .fr-fp-share-prompt h3 {
  margin: 0 0 var(--fr-space-2);
  font-family: var(--fr-font-serif);
  font-size: var(--fr-text-xl);
  color: var(--fr-color-heading);
}
body.fr-public-fundraising .fr-fp-share-prompt p {
  margin: 0 0 var(--fr-space-3);
  color: var(--fr-color-ink);
}
body.fr-public-fundraising .fr-fp-share-prompt--first-visit {
  background: var(--fr-color-primary-soft);
  border-color: var(--fr-color-primary);
}
body.fr-public-fundraising .fr-fp-share-prompt--encourage {
  background: var(--fr-color-surface-sunken);
  border-color: var(--fr-color-border);
}
body.fr-public-fundraising .fr-fp-share-prompt--encourage p {
  margin: 0 0 var(--fr-space-3);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
}