/* =================================================================
   COMMUNITY FUNDRAISING (TASK-494): the meter, a fundraiser's page,
   the sign up form and the manage page.

   Loaded only by those pages and by Get involved (for the meter on a
   fundraiser's card), never by donate.html: the shared bundle is on an
   enforced first paint budget. Everything here is built from the shared
   tokens in styles.css and reuses the donate page's give form classes
   (.give-question, .give-field, .giftaid, .give-check...) so a gift on a
   fundraiser's page looks and feels like the donate page.

   The house rules hold here too: nothing scrolls inside a box (content
   wraps and the page grows), every control is at least 44px to tap,
   focus is always visible, and motion stops for anyone who asks.
   ================================================================= */

/* ---------- the meter ---------- */
.fr-meter { display: grid; gap: 8px; }
.fr-meter__figures {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
  font-size: 1rem;
  color: var(--slate);
}
.fr-meter__raised {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--maroon);
  font-variant-numeric: lining-nums tabular-nums;
}
.fr-meter__target { color: var(--slate-soft); }
.fr-meter__bar {
  position: relative;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--tan-soft);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden; /* clips the fill to the rounded track; nothing to scroll */
}
.fr-meter__fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--holly); /* for browsers without color-mix, such as older iPhones */
  background: linear-gradient(90deg, var(--holly), color-mix(in srgb, var(--holly) 78%, var(--cream)));
}
.fr-meter.is-over .fr-meter__fill { background: var(--holly); }
.fr-meter__percent { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--holly); }
/* TASK-502: the Gift Aid under the total, shown but never counted. Quieter than the total itself. */
.fr-meter__giftaid { margin: -4px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--holly-dark); font-variant-numeric: lining-nums tabular-nums; }
.fr-meter--large .fr-meter__raised { font-size: clamp(2.2rem, 1.8rem + 1.6vw, 2.9rem); }
.fr-meter--large .fr-meter__figures { font-size: 1.08rem; }
.fr-meter--large .fr-meter__bar { height: 20px; }
.fr-meter--large .fr-meter__percent { font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .fr-meter__fill { animation: fr-fill 0.9s cubic-bezier(0.25, 1, 0.5, 1) both; transform-origin: left center; }
}
@keyframes fr-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- shared pieces ---------- */
.fr-intro .intro-hero h1 { overflow-wrap: anywhere; text-wrap: balance; }
.fr-narrow { max-width: 860px; }
.fr-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fr-sublegend {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--slate);
}
.fr-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .fr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.fr-panel { padding: clamp(24px, 4vw, 40px); }
.fr-panel h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); color: var(--maroon); text-wrap: balance; }
.fr-panel > p { margin-top: 14px; }
.fr-noscript, .fr-problem {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--maroon);
  border-radius: 12px;
  background: var(--tan-soft);
  color: var(--maroon);
  font-weight: 600;
}
.fr-aside-link { margin: 20px 0 0; font-size: 0.98rem; color: var(--slate-soft); }
.fr-aside-link a { font-weight: 600; }
.fr-loading { text-align: center; font-weight: 600; color: var(--slate-soft); }
/* A text box grows with what is typed, never scrolls inside itself (Jaimie's rule). field-sizing
   does it where the browser can; the page scripts grow the box everywhere else. */
textarea.give-field-input { min-height: 0; }
.fr-form textarea, .fr-give-form textarea, .fr-after__form textarea { field-sizing: content; min-height: 6.5em; resize: none; }

/* Forms that sit inside a card already: no second card around them. */
.fr-give-form, .fr-form--plain, .fr-after__form { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.fr-form, .fr-give-form { counter-reset: gq; }
.fr-form .form-error-summary + .give-question, .fr-give-form .form-error-summary + .give-question { border-top: 0; padding-top: 6px; }
.fr-form .form-error-summary + .give-question::before, .fr-give-form .form-error-summary + .give-question::before { top: 2px; }
.fr-form .give-cta-row, .fr-give-form .give-cta-row { margin-top: 28px; }

/* ---------- choice cards (the two paths, public or not, the kinds) ---------- */
.fr-options { display: grid; gap: 12px; }
@media (min-width: 640px) {
  .fr-options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.fr-options--grid { gap: 10px; }
/* The categories: at two columns they read A to Z down the left column, then down the right, with
   Other the very last (bottom right). The server sets --rows to half the list, rounded up; the
   page order, and so the tab order, stays A to Z. On a phone, one column. */
@media (min-width: 640px) {
  .fr-options--columns { grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 6), auto); }
}
.fr-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 16px 18px;
  min-height: 56px;
  border: 1.6px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
  font-weight: 400;
  font-size: 1rem;
  color: var(--slate);
  cursor: pointer;
  transition: border-color 0.18s, background-color 0.18s;
}
.fr-option:hover { border-color: var(--crimson); }
.fr-option input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; padding: 0; accent-color: var(--holly); }
.fr-option strong { display: block; font-weight: 600; color: var(--maroon); font-size: 1.05rem; }
.fr-option small { display: block; margin-top: 4px; font-size: 0.92rem; line-height: 1.5; color: var(--slate-soft); }
/* TASK-511: a choice made is NBCC holly green: the border (doubled), the fill and the radio itself. */
.fr-option:has(input:checked) { border-color: var(--holly); background: var(--holly-soft); box-shadow: inset 0 0 0 1px var(--holly); }
.fr-option:has(input:focus-visible) { outline: 3px solid var(--holly); outline-offset: 3px; }
.fr-option--small { align-items: center; padding: 12px 16px; }
.fr-option--small span { font-weight: 600; color: var(--maroon); }
fieldset.is-invalid .fr-option { border-color: var(--crimson); }
.fr-kinds { margin: 4px 0 18px; }

/* ---------- TASK-511: every choice in holly green ----------
   (The questions now come one at a time with Next and Back: the sign up tidy, at the end of this
   file. The rise and fade below is shared with it.) */
@keyframes fr-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fr-kinds .fr-kind-other { margin: 16px 0 0; }
.fr-option:has(input:checked):hover { border-color: var(--holly-dark); }
.fr-option:has(input:checked) strong, .fr-option--small:has(input:checked) span { color: var(--holly-dark); }
.fr-form .give-check-box, .fr-form .fr-option input { accent-color: var(--holly); }
.fr-form .give-check:has(.give-check-box:checked) .give-check-text { color: var(--holly-dark); }
.fr-form .give-check:has(.give-check-box:focus-visible) { outline: 3px solid var(--holly); outline-offset: 2px; border-radius: 8px; }
/* Yes and No side by side, even on a phone, and never wider than they need. */
.fr-options.fr-options--yesno { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 340px; }
.fr-options--yesno .fr-option--small { justify-content: flex-start; }
.fr-note { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--holly); border-radius: 8px; background: var(--holly-soft); color: var(--holly-dark); font-size: 0.95rem; line-height: 1.5; }
.fr-note:empty { display: none; }
/* A note that is also a live region stays in the page while empty, so a screen reader announces what
   it later says (the 18 or over note). It takes no room until then. */
.fr-note--live:empty { display: block; margin: 0; padding: 0; border: 0; }
.fr-either-way { margin: 14px 0 0; font-size: 0.95rem; color: var(--slate-soft); }

/* Jaimie, 2026-10-03: a No to "Are you 18 or over?" stops the form there. fundraise.js marks every
   question after it (data-after-age) and adds fr-under-18 while the answer is No. */
.fr-under-18 [data-after-age] { display: none; }
/* Sharing with another cause: NBCC's percentage, with its sign beside the box. */
.fr-split-fields { margin: 16px 0 0; }
.fr-percent { display: flex; align-items: center; gap: 8px; max-width: 160px; }
.fr-percent .give-field-input { flex: 1; min-width: 0; }
.fr-percent__sign { font-weight: 600; color: var(--slate); }

/* ---------- the sign up's target and counts ---------- */
.fr-target .give-custom-field { max-width: 320px; }
.fr-target .give-custom-label { font-size: 1.15rem; }
.fr-count { max-width: 160px; }

/* ---------- TASK-499: the address boxes and the event questions ---------- */
.fr-subgroup { margin: 8px 0 18px; }
.fr-lead-help, .fr-sublegend-help { margin: -4px 0 12px; }
.fr-checks { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .fr-checks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Three ways in read best one under another, whatever the width. */
.fr-options.fr-options--stack { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fr-subgroup [data-ticket-field] { margin-top: 14px; }
.fr-ticket-note { margin: 12px 0 0; }
/* A short answer starts small, and still grows with what is typed. */
.fr-form textarea.fr-short-text { min-height: 3.4em; }
.fr-captcha { margin: 24px 0 0; max-width: 100%; }

/* ---------- thank you ---------- */
.fr-thanks:focus { outline: none; }
.fr-thanks:focus-visible { outline: 3px solid var(--holly); outline-offset: 4px; }
.fr-thanks .rule { margin-inline: 0; }
.fr-steps { margin: 18px 0 24px; padding: 0; list-style: none; counter-reset: frstep; display: grid; gap: 14px; }
.fr-steps li { position: relative; padding-left: 46px; line-height: 1.55; counter-increment: frstep; text-wrap: pretty; }
.fr-steps li::before {
  content: counter(frstep);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--holly-soft);
  color: var(--holly-dark);
  font-family: var(--font-head);
  font-weight: 800;
}

/* ---------- a fundraiser's page ---------- */
.fr-facts {
  list-style: none;
  margin: 22px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  font-size: 1.02rem;
  color: var(--slate);
}
.fr-facts li { display: inline-flex; align-items: flex-start; gap: 8px; text-align: left; }
.fr-facts svg { flex: none; margin-top: 4px; color: var(--crimson); }

.fr-layout {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "summary" "main" "extras";
}
@media (min-width: 980px) {
  .fr-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-template-areas: "main summary" "main extras";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
}
.fr-summary { grid-area: summary; padding: clamp(22px, 3.4vw, 32px); display: grid; gap: 22px; }
.fr-summary__give { justify-content: center; width: 100%; font-size: 1.08rem; padding: 16px 24px; }
/* Jaimie, 2026-10-03: shared with another cause, the statement the 2009 regulations ask for. */
.fr-split { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--slate); overflow-wrap: anywhere; }
/* Jaimie, 2026-10-03: an event's page says giving is a donation, not a ticket. How to get in sits
   directly above "Make a donation"; under the meter, that it includes money the organiser paid in. */
.fr-summary__entry { margin: 0 0 -12px; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--maroon); overflow-wrap: anywhere; }
.fr-summary__entry a { color: inherit; }
.fr-meter__paidin { margin: -14px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--slate); }
.giftaid-entry { margin-top: 8px; font-weight: 600; }
.fr-thanks__entry { font-weight: 600; }
.give-step-sub + .fr-give-share { margin-top: -12px; font-weight: 600; }
/* Clarity audit: already on the paper sponsor form? A quieter line of its own under the rest. */
.give-step-sub + .fr-give-paper { margin-top: -12px; }
.fr-card__split-note { margin-top: 2px; }
.fr-card__split { margin: 10px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--slate); overflow-wrap: anywhere; }
.fr-main { grid-area: main; display: grid; gap: clamp(28px, 4vw, 44px); min-width: 0; }
.fr-extras { grid-area: extras; display: grid; gap: clamp(22px, 3vw, 30px); align-content: start; }

.fr-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--tint); }
.fr-photo img { width: 100%; height: auto; max-height: 560px; object-fit: cover; }

.fr-story h2, .fr-wall h2, .fr-card h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); color: var(--maroon); margin-bottom: 14px; }
.fr-story p { font-size: 1.08rem; line-height: 1.75; max-width: 66ch; overflow-wrap: anywhere; text-wrap: pretty; }

.fr-card { padding: clamp(22px, 3vw, 28px); }
.fr-card > p { color: var(--slate-soft); font-size: 0.98rem; margin-bottom: 14px; }

/* the give form: the donate page's card, one column */
.fr-give { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.fr-give:focus { outline: none; }
.fr-give-card .give-main { padding: clamp(22px, 4vw, 40px); }
.fr-give-card .give-step-title { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); overflow-wrap: anywhere; }
.fr-amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
@media (min-width: 560px) { .fr-amounts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fr-amount { position: relative; display: block; margin: 0; cursor: pointer; }
.fr-amount input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fr-amount__face {
  display: grid;
  place-items: center;
  min-height: 72px;
  border: 1.6px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--crimson);
  font-variant-numeric: lining-nums tabular-nums;
  transition: border-color 0.18s, background-color 0.18s, transform 0.15s;
}
.fr-amount:hover .fr-amount__face { border-color: var(--tan); }
.fr-amount input:checked + .fr-amount__face { border-color: var(--holly); background: var(--holly-soft); color: var(--holly-dark); box-shadow: var(--shadow-sm); }
.fr-amount input:focus-visible + .fr-amount__face { outline: 3px solid var(--holly); outline-offset: 3px; }
.fr-amount:active .fr-amount__face { transform: translateY(1px); }
.fr-own { margin: 0; }
.fr-own .give-custom-field { max-width: 360px; }
/* What gifts could do (src/fundraising/impact-render.ts): small words under a give amount, inside its
   label so a tap on them chooses it too; under your own amount, the donate page's impact line; under
   the meter, how many Red Bags the total could fill; and the footnote. Words wrap, nothing scrolls. */
.fr-amount__could {
  display: block;
  margin: 8px 2px 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--slate-soft);
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.fr-amount input:checked ~ .fr-amount__could { color: var(--holly-dark); }
.fr-own__could {
  margin: 14px 0 0;
  max-width: 560px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tan-soft);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--slate);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
/* The live region is always there; empty, it takes no room. */
.fr-own__could:empty { margin: 0; padding: 0; border: 0; }
.fr-could-note { margin: 14px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--slate-soft); text-wrap: pretty; }
.fr-meter__could { margin: -8px 0 0; font-size: 0.98rem; font-weight: 500; line-height: 1.5; color: var(--slate); text-wrap: pretty; overflow-wrap: anywhere; }
.fr-summary .fr-could-note { margin: -14px 0 0; }
.fr-choice { margin-top: 6px; }
.fr-choice .give-donor-option { min-height: 48px; margin: 0; font-size: 1rem; color: var(--slate); }
.fr-choice .give-donor-option:has(input:checked) { border-color: var(--holly); background: var(--holly-soft); }
.fr-choice .give-donor-option:has(input:focus-visible) { outline: 3px solid var(--holly); outline-offset: 3px; }
/* Tick box rows: at least 44px to tap, the whole row being the label. */
.fr-form .give-check, .fr-give-form .give-check, .fr-after__form .give-check { min-height: 44px; align-items: flex-start; margin: 2px 0; padding: 11px 0; }
.fr-message { resize: vertical; }
.fr-declaration { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }

/* the supporter wall: a list that grows the page, never a box that scrolls */
.fr-wall__count { color: var(--slate-soft); margin: -4px 0 16px; }
.fr-wall__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fr-wall__item {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.fr-wall__item:focus { outline: none; }
.fr-wall__item:focus-visible { outline: 3px solid var(--holly); outline-offset: 3px; }
.fr-wall__head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.fr-wall__who { font-weight: 600; font-size: 1.05rem; color: var(--maroon); overflow-wrap: anywhere; }
.fr-wall__amount { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--holly); font-variant-numeric: lining-nums tabular-nums; }
.fr-wall__giftaid { font-family: var(--font-body, inherit); font-weight: 600; font-size: 0.92rem; color: var(--holly-dark); white-space: nowrap; }
.fr-wall__msg { margin: 6px 0 0; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; text-wrap: pretty; }
.fr-wall__when { margin: 6px 0 0; font-size: 0.9rem; color: var(--slate-soft); }
.fr-wall__empty { padding: 18px 20px; border: 1.6px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--slate-soft); }
.fr-wall__more {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  padding: 12px 20px;
  border: 1.6px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--maroon);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s;
}
.fr-wall__more:hover { border-color: var(--maroon); }

/* sharing */
.fr-share__links { display: flex; flex-wrap: wrap; gap: 10px; }
.fr-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1.6px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--maroon);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.fr-share__btn:hover { border-color: var(--maroon); background: var(--card); }
.fr-share__btn:active { transform: translateY(1px); }
.fr-share__btn svg { flex: none; color: var(--crimson); }
.fr-share__url { margin: 14px 0 0; font-size: 0.92rem; color: var(--slate-soft); overflow-wrap: anywhere; }
.fr-share__status { margin: 6px 0 0; font-weight: 600; color: var(--holly); min-height: 1.5em; }

/* the QR code: shown in the organiser's private area since TASK-501, no longer on the public page */
.fr-qr__code { width: min(200px, 100%); margin: 4px 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.fr-qr__code img, .fr-qr__code svg { display: block; width: 100%; height: auto; }
.fr-qr__download { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-underline-offset: 3px; }

/* TASK-501: the quiet line at the foot of a fundraiser's page, for its organiser */
.fr-owner { margin: 0 0 clamp(28px, 4vw, 40px); text-align: center; font-size: 0.875rem; color: var(--slate-soft); }
.fr-owner a { color: inherit; text-underline-offset: 3px; }

/* A button that is busy sending says so in words; this makes it look it too. */
.fr-form .btn:disabled, .fr-give-form .btn:disabled, .fr-after__form .btn:disabled { opacity: 0.75; cursor: progress; transform: none; }

/* ---------- the thank you after paying ---------- */
.fr-thanks-panel {
  margin: 28px auto 0;
  max-width: 640px;
  padding: clamp(20px, 3.5vw, 30px);
  border: 1.6px solid var(--holly);
  border-radius: var(--radius-lg);
  background: var(--holly-soft);
  text-align: left;
}
.fr-thanks-panel:focus { outline: none; }
.fr-thanks-panel:focus-visible { outline: 3px solid var(--holly); outline-offset: 4px; }
.fr-thanks-panel h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem); color: var(--holly-dark); text-wrap: balance; overflow-wrap: anywhere; }
.fr-thanks-panel p { margin: 10px 0 0; color: var(--slate); }
.fr-thanks-panel .fr-share__links { margin-top: 16px; }

/* TASK-502: the optional step after paying, inside the thank you: a message for the wall and the
   name and amount choices. The box grows with what is typed; nothing scrolls inside it. */
.fr-after {
  margin: 18px 0 4px;
  padding: clamp(16px, 3vw, 22px);
  border: 1.6px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream, #fff);
}
.fr-after__title { margin: 0; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); color: var(--maroon); overflow-wrap: anywhere; text-wrap: balance; }
.fr-after__title .give-optional { font-family: var(--font-body, inherit); font-size: 0.95rem; font-weight: 600; color: var(--slate-soft); }
.fr-after > p { margin: 6px 0 14px; }
.fr-after__form { display: grid; gap: 12px; }
.fr-after__form .give-field-help { margin: 0; }
.fr-after__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.fr-after__actions .btn { flex: 1 1 160px; justify-content: center; }
.fr-after__skip::after { content: none; } /* closing, not going anywhere: no arrow */

/* TASK-502: a finished fundraiser's page says so, and still takes gifts. */
.fr-finished {
  margin: 24px auto 0;
  max-width: 640px;
  padding: clamp(18px, 3vw, 24px);
  border: 1.6px solid var(--holly);
  border-radius: var(--radius-lg);
  background: var(--holly-soft);
  text-align: left;
}
.fr-finished__title { margin: 0; font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); color: var(--holly-dark); }
.fr-finished p { margin: 8px 0 0; color: var(--slate); }
.fr-finished a { font-weight: 600; }

/* ---------- the manage page ---------- */
.fr-waiting {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1.6px solid var(--holly);
  border-radius: var(--radius);
  background: var(--holly-soft);
  color: var(--slate);
  line-height: 1.6;
}
.fr-waiting strong { display: block; color: var(--holly-dark); }
/* TASK-501: the private area. Signed out, the email box then the code box; signed in, one card per
   fundraiser. Everything wraps and the page grows; nothing scrolls inside a box. */
.fr-code-input { max-width: 12ch; font-size: 1.4rem; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.fr-code-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 18px 0 0; }
.fr-link-btn {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--maroon);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fr-link-btn:focus-visible { outline: 3px solid var(--holly); outline-offset: 2px; }
.fr-area { display: grid; gap: clamp(22px, 3vw, 30px); }
.fr-area__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.fr-area__who { margin: 0; color: var(--slate-soft); }
.fr-area__list { display: grid; gap: clamp(22px, 3vw, 30px); }
.fr-area > .form-status:empty { display: none; }
.fr-mine h2 { overflow-wrap: anywhere; }
.fr-mine__status { margin: 10px 0 0; font-weight: 600; color: var(--holly-dark); }
/* Welcome packs: one small line once theirs has been posted. */
.fr-mine__pack { margin: 6px 0 0; font-size: 0.95rem; color: var(--slate); overflow-wrap: anywhere; }
.fr-mine__page { margin: 6px 0 0; }
.fr-mine__page a { font-weight: 600; text-underline-offset: 3px; }
.fr-mine .fr-waiting { margin: 18px 0 0; }
.fr-mine__part { margin-top: clamp(26px, 4vw, 34px); padding-top: clamp(20px, 3vw, 26px); border-top: 1px solid var(--line); }
.fr-mine__part h3 { margin: 0 0 8px; font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); color: var(--maroon); }
.fr-mine__part > p { margin: 0 0 14px; }
/* TASK-505: what they asked us for, a line each. */
.fr-mine__requests { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; overflow-wrap: anywhere; }
.fr-mine__requests a { font-weight: 600; text-underline-offset: 3px; }
.fr-mine__raised { font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; color: var(--maroon); font-variant-numeric: lining-nums tabular-nums; }
/* Clarity audit: Gift Aid is extra, under the figure; only NBCC's share is paid in, above the amount. */
.fr-mine__giftaid { margin: 6px 0 0; overflow-wrap: anywhere; }
.fr-mine__payin-share { margin: 0 0 14px; font-weight: 600; color: var(--maroon); overflow-wrap: anywhere; }
.fr-mine .fr-thanks-panel { margin: 0 0 18px; }
.fr-mine .fr-thanks-panel h4 { margin: 0; font-size: 1.15rem; color: var(--holly-dark); }
.fr-mine__done { margin: 12px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--holly-soft); color: var(--holly-dark); font-weight: 600; }
.fr-form__title { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); color: var(--maroon); margin-bottom: 6px; overflow-wrap: anywhere; }
.fr-form__lead { margin: 0 0 18px; }
.fr-form__lead a { font-weight: 600; }
/* TASK-507: Thank your supporters. A gift a row, the whole row its tick box's label (44px and up to
   tap); a picked one is tinted; a thanked one is quiet and closed. Everything wraps and the page
   grows; nothing scrolls inside a box. */
.fr-thanks__pick { margin: 0 0 6px; }
.fr-thanks__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 0 0 6px; }
.fr-thanks__picked { color: var(--holly-dark); font-weight: 600; }
.fr-thanks__picked:empty { display: none; }
.fr-thanks__pick-msg { margin: 0 0 8px; }
.fr-thanks__done-status:empty { display: none; }
.fr-thanks__gifts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fr-thanks__gift { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.fr-thanks__gift:has(input:checked) { border-color: var(--holly); background: var(--holly-soft); }
.fr-thanks__gift:has(input:focus-visible) { outline: 3px solid var(--holly); outline-offset: 2px; }
.fr-form .fr-thanks__check { margin: 0; padding: 12px 16px; min-height: 44px; }
.fr-thanks__words { display: block; flex: 1 1 auto; min-width: 0; }
.fr-thanks__words .fr-wall__head { display: flex; }
.fr-thanks__words .fr-wall__msg, .fr-thanks__words .fr-wall__when { display: block; }
.fr-thanks__gift.is-thanked .fr-thanks__check { cursor: default; color: var(--slate-soft); }
.fr-thanks__done { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--holly-soft); color: var(--holly-dark); font-size: 0.85rem; font-weight: 600; }
.fr-thanks__past { margin-top: clamp(20px, 3vw, 26px); }
.fr-thanks__past h4 { margin: 0 0 10px; font-size: 1.1rem; color: var(--maroon); }
.fr-thanks__past-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fr-thanks__status { margin: 0; font-weight: 600; color: var(--holly-dark); }
.fr-thanks__status.is-pending { color: var(--maroon); }
.fr-thanks__status.is-rejected { color: var(--slate-soft); }

/* ---------- the help page (TASK-498) ----------
   A reading page: the privacy notice's .page-prose, centred in a column a little wider, with the
   contents list and the questions panel built from the shared .card and .contact-point. Every list
   wraps and the page grows; nothing scrolls inside itself. */
.fr-aside-link--next { margin-top: 6px; }
.help-body.page-prose { max-width: 760px; margin-inline: auto; }
.help-section { scroll-margin-top: calc(var(--nav-h) + 1rem); margin-top: clamp(40px, 6vw, 64px); }
.help-section h2 { margin-top: 0; }
.help-body h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); color: var(--maroon); margin: 26px 0 8px; }
.help-contents { padding: clamp(20px, 3.4vw, 28px); }
.page-prose .help-contents__title { margin: 0 0 10px; font-size: 1.15rem; }
.page-prose .help-contents ol { margin: 0; padding-left: 22px; display: grid; gap: 2px; }
.page-prose .help-contents li { margin: 0; }
.help-contents a { display: inline-block; padding: 8px 0; min-height: 44px; font-weight: 600; text-underline-offset: 3px; }
/* The A to Z reads like a little dictionary: one column, a round letter badge in the margin of each
   row, sitting level with the idea beside it. The badges alternate NBCC maroon and gold by letter
   (A maroon, B gold, C maroon...; Jaimie's choice), so the list reads as a string of baubles. A second idea for
   the same letter leaves the margin empty. The letters are decoration: the idea names carry them. */
.page-prose .help-az {
  list-style: none;
  margin: 20px 0 22px;
  padding: 6px clamp(16px, 3.2vw, 30px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.page-prose .help-az li {
  --badge: var(--maroon);
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: clamp(14px, 2.6vw, 22px);
  align-items: center;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.page-prose .help-az li.help-az__gold { --badge: var(--gold-ink); }
.page-prose .help-az li:last-child { border-bottom: 0; }
.page-prose .help-az li::before {
  content: attr(data-letter);
  content: attr(data-letter) / "";
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--badge);
  box-shadow: 0 2px 6px rgba(128, 0, 0, 0.18);
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
}
.page-prose .help-az li.help-az__again { padding-top: 4px; }
.page-prose .help-az li.help-az__again::before { content: ""; background: none; box-shadow: none; }
.page-prose .help-az li:has(+ .help-az__again) { border-bottom: 0; padding-bottom: 6px; }
.help-az strong { grid-column: 2; display: block; font-family: var(--font-head); font-size: 1.12rem; color: var(--maroon); }
.help-az__what { grid-column: 2; color: var(--slate); }
.help-note {
  padding: 14px 16px;
  border: 1.6px solid var(--holly);
  border-radius: var(--radius);
  background: var(--holly-soft);
  font-weight: 600;
}
.help-questions { scroll-margin-top: calc(var(--nav-h) + 1rem); margin-top: clamp(44px, 6vw, 72px); }
.page-prose .help-ways { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 560px) { .page-prose .help-ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.page-prose .help-ways li { margin: 0; }
.help-ways .contact-point a { font-size: 1.08rem; overflow-wrap: anywhere; }
.help-ways small { display: block; color: var(--slate-soft); font-weight: 400; font-size: 0.85rem; }
.page-prose .help-questions__cta { margin: 22px 0 0; }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .fr-option, .fr-amount__face, .fr-share__btn, .fr-wall__more { transition: none; }
  .fr-amount:active .fr-amount__face, .fr-share__btn:active { transform: none; }
}

/* ---------- TASK-506: the countdown, the day itself, and the news updates ----------
   The countdown sits under the date in the intro; on the day a festive banner takes its place, with
   the page's own share links. News is a list that grows the page, never a box that scrolls, and a
   photo with an update sits in a small frame of one shape (4 by 3, cropped to fill it): never across
   the page, so a poster or flyer can never take it over. */
.fr-countdown {
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 8px 20px;
  border: 1.6px solid var(--holly);
  border-radius: var(--radius-pill);
  background: var(--holly-soft);
  color: var(--holly-dark);
  font-weight: 600;
  font-size: 1.05rem;
}
.fr-countdown__num {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.fr-countdown--soon { border-color: var(--crimson); background: var(--tan-soft); color: var(--maroon); font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; }

.fr-today {
  position: relative;
  margin: 24px auto 0;
  max-width: 640px;
  padding: clamp(22px, 4vw, 32px) clamp(18px, 4vw, 30px);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 50% 0%, var(--crimson) 0%, var(--maroon) 100%);
  color: var(--cream);
  text-align: center;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.fr-today::before,
.fr-today::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(248, 245, 238, 0.55) 1.2px, transparent 1.6px);
  background-size: 34px 34px;
  opacity: 0.35;
}
.fr-today::after { background-size: 52px 52px; background-position: 17px 11px; opacity: 0.25; }
.fr-today > * { position: relative; z-index: 1; }
.fr-today__star { display: block; margin: 0 auto 6px; color: var(--gold-ink); filter: drop-shadow(0 0 6px rgba(184, 134, 43, 0.6)); }
.fr-today__title { margin: 0; font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); color: var(--cream); text-wrap: balance; overflow-wrap: anywhere; }
.fr-today p { margin: 8px 0 0; color: var(--cream); }
.fr-today .fr-share__links { justify-content: center; margin-top: 18px; }
.fr-today .fr-share__btn { border-color: transparent; }
.fr-today .fr-share__status { color: var(--cream); }
@media (prefers-reduced-motion: no-preference) {
  .fr-today__star { animation: fr-twinkle 2.8s ease-in-out infinite; }
  @keyframes fr-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.85; } }
}

.fr-news h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); color: var(--maroon); margin-bottom: 14px; }
.fr-news__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fr-news__item {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.fr-news__item:focus { outline: none; }
.fr-news__item:focus-visible { outline: 3px solid var(--holly); outline-offset: 3px; }
.fr-news__photo { margin: 0; width: 100%; max-width: 280px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--tint); }
.fr-news__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 560px) {
  .fr-news__item.has-photo { grid-template-columns: 180px minmax(0, 1fr); align-items: start; }
}
.fr-news__words { min-width: 0; }
.fr-news__when { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--slate-soft); }
.fr-news__text { margin: 6px 0 0; font-size: 1.02rem; line-height: 1.65; overflow-wrap: anywhere; text-wrap: pretty; }

/* The private area's "News updates" part (assets/js/fundraise-news.js). */
.fr-newspost { display: grid; gap: 4px; }
.fr-newspost__count { margin: 0; }
.fr-newspost__preview { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 8px; }
.fr-newspost__preview[hidden] { display: none; }
.fr-newspost__preview .fr-news__photo { width: 160px; }
.fr-newspost__file { font-size: 0.95rem; }
.fr-mynews { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.fr-mynews__status {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--tint);
  color: var(--slate);
}
.fr-mynews__status.is-pending { background: var(--tan-soft); color: var(--maroon); }
.fr-mynews__status.is-approved { background: var(--holly-soft); color: var(--holly-dark); }
.fr-today .fr-share__status:empty { min-height: 0; margin: 0; }
/* ---------- the logo pack (TASK-504) ----------
   /fundraise/logos: the three official logos to download, the rules and an example. Each logo is
   shown on the kind of background it is made for. */
.page-prose .logo-cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .page-prose .logo-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-prose .logo-cards li { margin: 0; }
.logo-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.logo-card__show { border-radius: 12px; aspect-ratio: 1; display: grid; place-items: center; padding: 18px; }
.logo-card__show--light { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.logo-card__show--dark { background: var(--maroon); }
.logo-card__show img { width: 100%; height: auto; max-width: 180px; }
.page-prose .logo-card h3 { margin: 6px 0 0; }
.page-prose .logo-card p { margin: 0; font-size: 0.95rem; }
.logo-card__get { margin-top: auto; align-self: flex-start; }
.logo-example { margin: 18px 0; }
.logo-example__poster { max-width: 300px; margin: 0 auto; aspect-ratio: 210 / 297; background: var(--cream); border: 8px solid var(--maroon); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px; text-align: center; box-shadow: 0 12px 30px -18px rgba(60, 20, 20, 0.6); }
.logo-example__poster img { width: 42%; height: auto; margin-bottom: 14px; }
.logo-example__for { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crimson); }
.logo-example__title { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: var(--maroon); }
.logo-example__when { font-size: 0.8rem; color: var(--slate); }
.logo-example figcaption { margin-top: 10px; text-align: center; font-size: 0.85rem; color: var(--slate-soft); }

/* ---------- "Your materials" in the private area (TASK-504) ---------- */
.fr-materials { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 560px) { .fr-materials { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.fr-materials li { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
.fr-materials li[hidden] { display: none; }
.fr-materials a { font-weight: 600; text-underline-offset: 3px; }
.fr-materials span { font-size: 0.85rem; color: var(--slate-soft); }
.fr-qr__download[hidden] { display: none; }
.logo-example__poster { position: relative; overflow: hidden; padding-bottom: 78px; }
.logo-example__foot { position: absolute; left: 0; right: 0; bottom: 0; background: var(--maroon); color: var(--cream); font-family: var(--font-head); font-style: italic; font-size: 0.78rem; line-height: 1.3; padding: 10px 14px; }
/* The space is after each link, so one that wraps onto its own line starts at the left edge. */
.fr-qr__download { margin-right: 18px; }

/* ---------- "Your materials", round two (TASK-512): the posters and the leaflet, each with "Ask us
   to print these"; how to ask us for anything else ---------- */
.fr-materials li.fr-mat-print { grid-column: 1 / -1; gap: 6px; padding: 12px 14px; }
.fr-mat-print__pieces { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 2px; }
.fr-mat-print__pieces span { font-size: inherit; color: inherit; }
.fr-mat-print__pieces span[hidden] { display: none; }
.fr-materials .fr-mat-print__about { font-size: 0.85rem; color: var(--slate-soft); }
.fr-print[hidden] { display: none; }
.fr-print { margin: 6px 0 0; padding: 10px 12px 2px; border-radius: 10px; background: var(--tint); }
.fr-print fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fr-print legend { padding: 0; font-weight: 600; color: var(--maroon); font-size: 0.95rem; }
.fr-print__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 6px; }
.fr-print__count { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--slate); font-weight: 600; }
.fr-print__count input { width: 7.5em; min-height: 44px; }
.fr-print__go { min-height: 44px; }
.fr-print .form-status { margin: 6px 0 8px; min-height: 0; }
.fr-print .form-status:empty { margin: 0 0 6px; }
.fr-print-closed[hidden] { display: none; }
.fr-print-closed { margin: 10px 0 0; font-size: 0.92rem; }
.fr-ask-us { margin: 14px 0 0; padding: 14px 16px; border: 1.6px solid var(--line); background: var(--tint); border-radius: var(--radius); font-size: 0.92rem; line-height: 1.6; color: var(--slate); }
.fr-ask-us a { font-weight: 600; }

/* TASK-512, after Jaimie's look: each material opens from an outline button, not underlined text.
   44px tall at least, and the words wrap on a narrow phone rather than overflow. */
.fr-mat__name { font-family: var(--font-head); font-weight: 700; color: var(--maroon); font-size: 1.05rem; line-height: 1.3; }
.fr-materials li { gap: 6px; justify-content: flex-start; }
.fr-materials a.fr-mat-btn { font-weight: 600; text-decoration: none; }
.fr-mat-btn { min-height: 44px; padding: 9px 18px; font-size: 0.95rem; line-height: 1.3; white-space: normal; text-align: left; max-width: 100%; align-self: flex-start; }
.fr-mat-print__pieces .fr-mat-btn { align-self: auto; }

/* ---------- Team pages (Jaimie, 2026-10-03) ---------- */
/* The sign up's "Just me, or a team?": the team's boxes under the choice, and a row per person added
   (three boxes side by side on a wide screen, one under another on a phone). Nothing scrolls. */
.fr-team-fields { margin: 18px 0 0; }
.fr-team-note { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--holly); border-radius: 8px; background: var(--holly-soft); color: var(--holly-dark); font-size: 0.98rem; line-height: 1.55; }
.fr-team-members { margin-top: 18px; }
.fr-team-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fr-team-row { padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
@media (min-width: 760px) { .fr-row.fr-row--three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); } }
.fr-team-under18 { margin: 0 0 4px; }
.fr-team-remove { min-height: 40px; font-size: 0.95rem; }
.fr-team-add-row { margin: 10px 0 0; }
.fr-link-btn:disabled { color: var(--slate-soft); text-decoration: none; cursor: default; }

/* A team page: "Join this team" under the give button, and the team after the story: the members
   A to Z in a list that grows the page, each with a small meter. Never a ranking. */
.fr-summary__join { justify-content: center; width: 100%; }
.fr-team h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); color: var(--maroon); margin-bottom: 8px; }
.fr-team__organiser { margin: 0 0 14px; font-weight: 600; color: var(--slate); }
.fr-team__count { color: var(--slate-soft); margin: 0 0 14px; }
.fr-team__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .fr-team__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.fr-team__member { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.fr-team__name { display: inline-block; margin: 0 0 8px; font-weight: 600; font-size: 1.05rem; color: var(--maroon); text-underline-offset: 3px; overflow-wrap: anywhere; }
.fr-team__member .fr-meter__figures { font-size: 0.95rem; }
.fr-team__member .fr-meter__raised { font-size: 1.2rem; }
.fr-team__join { margin-top: 22px; padding: 20px; border: 1.6px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.fr-team__join-title { margin: 0 0 6px; font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); color: var(--maroon); }
.fr-team__join > p { margin: 0 0 14px; color: var(--slate); }
.fr-team-of { margin: 10px 0 0; font-weight: 600; color: var(--slate); }
.fr-team-of a { color: var(--maroon); text-underline-offset: 3px; }

/* The team organiser's private area: who has joined, a line each, and the message to forward. */
.fr-mine__team-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.fr-mine__team-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.fr-mine__team-who { font-weight: 600; color: var(--maroon); overflow-wrap: anywhere; }
.fr-mine__team-what { color: var(--slate-soft); font-size: 0.95rem; }
.fr-mine__forward { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); font-family: var(--font-head); font-style: italic; color: var(--maroon); line-height: 1.55; overflow-wrap: anywhere; }
.intro-hero .fr-team__organiser { margin: 18px 0 0; }
.intro-hero .fr-team-of { margin: 6px 0 0; }
/* ---------- In memory of someone (Jaimie, 2026-10-03) ----------
   A page in memory of someone (src/fundraising/memory-render.ts) is the same page made quieter: the
   house palette at a lower contrast (maroon, tan and cream, no crimson call to action, no holly
   cheer), lighter headings, no festive banner, countdown or confetti. Only what is scoped under
   .fr-memory-page (the page) and .ev-card--memory (its card on Get involved) changes. */
.fr-memory-page .eyebrow { color: var(--slate-soft); letter-spacing: 0.24em; }
.fr-memory-page .intro-hero h1 { font-weight: 600; color: var(--maroon); letter-spacing: -0.005em; }
.fr-memory__dates {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  color: var(--slate-soft);
  overflow-wrap: anywhere;
}
.fr-memory-page .rule::before,
.fr-memory-page .rule::after { background: var(--tan); opacity: 0.6; }
.fr-memory-page .rule i { background: var(--tan); }
.fr-memory-page .fr-facts svg { color: var(--slate-soft); }
.fr-memory-page .btn-primary { --bg: var(--maroon); --fg: var(--cream); }
.fr-memory-page .btn-primary:hover { --bg: var(--slate); }
.fr-memory-page .fr-summary { background: var(--tint); box-shadow: none; border: 1px solid var(--line); }
.fr-memory-page .fr-meter__fill { background: var(--tan); background: color-mix(in srgb, var(--maroon) 45%, var(--tan)); animation: none; }
.fr-memory-page .fr-meter__percent { color: var(--slate-soft); font-weight: 500; }
.fr-memory-page .fr-meter__giftaid { color: var(--slate-soft); }
.fr-memory-page .fr-story h2,
.fr-memory-page .fr-wall h2,
.fr-memory-page .fr-card h2 { font-weight: 600; }
.fr-memory__photo {
  margin: 0;
  max-width: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--tint);
}
.fr-memory__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.fr-memory-page .fr-wall__amount { color: var(--slate); font-weight: 700; }
.fr-memory-page .fr-wall__giftaid { color: var(--slate-soft); }
.fr-wall__note { margin: 14px 0 0; font-size: 0.92rem; color: var(--slate-soft); }
.fr-memory-page .fr-thanks-panel { background: var(--tint); border-color: var(--line); }
.fr-memory-page .fr-thanks-panel h2 { color: var(--maroon); font-weight: 600; }
.fr-memory-page .fr-finished { border-color: var(--tan); background: var(--tint); }
.fr-memory-page .fr-finished__title { color: var(--maroon); font-weight: 600; }
.fr-family-check { margin-top: 4px; }

/* Its card on Get involved: a soft cream cover with their name, and no Fundraiser flag. */
.ev-art--memory { --art-ground: var(--tint); color: var(--maroon); }
.ev-art--memory .ev-art__name { font-style: normal; font-weight: 600; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); line-height: 1.1; }
.ev-art--memory .ev-art__place { color: var(--slate-soft); margin: 10px 0 0; }
.ev-art--memory .ev-art__place:first-child { margin: 0 0 8px; }
.ev-card--memory .fr-meter__fill { background: var(--tan); background: color-mix(in srgb, var(--maroon) 45%, var(--tan)); }
.ev-card--memory .btn-primary { --bg: var(--maroon); --fg: var(--cream); }

/* The sign up's in memory questions, and the private area's note. */
.fr-memory-fields { display: grid; gap: 14px; margin-top: 16px; }
.fr-memory-fields[hidden] { display: none; }
.fr-memory-fields .fr-lead-help { margin: 0; }
.fr-permission { margin-top: 2px; }
.fr-mine__memory-note { margin: 0 0 12px; font-size: 0.92rem; color: var(--slate-soft); }
.fr-mine__memory-note[hidden] { display: none; }

/* ---------- The sign up tidy (Jaimie, 2026-10-03): one question at a time ----------
   assets/js/fundraise-steps.js adds fr-wizard and shows one step (.is-current) at a time, with Back
   and Next under it and a progress bar of stages above. Without the script nothing here applies and
   every question shows. Built from the shared tokens, so it reads as the rest of NBCC: holly green
   for what is done, crimson for where they are, cream and warm hairlines for what is still to come. */
.fr-wizard .give-question.is-off { display: none; }
/* One step at a time: the progress bar does the counting, so no big number, and no rule above. */
.fr-wizard .give-question { padding-left: 0; border-top: 0; padding-top: 4px; }
.fr-wizard .give-question::before { content: none; display: none; }
.fr-wizard .give-question:focus { outline: none; }
.fr-wizard .give-question:focus-visible { outline: 3px solid var(--holly); outline-offset: 6px; border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .fr-wizard .give-question.is-arriving { animation: fr-arrive 0.32s cubic-bezier(0.25, 1, 0.5, 1) both; }
}
.fr-form { scroll-margin-top: calc(var(--nav-h, 78px) + 16px); }

/* The progress bar: a stage each, joined by a line; ticked when done, crimson where they are. */
.fr-progress { margin: 0 0 22px; padding: 18px 18px 14px; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: calc(var(--nav-h, 78px) + 16px); }
.fr-progress__now { margin: 0 0 14px; font-weight: 600; color: var(--maroon); font-size: 1rem; line-height: 1.4; }
.fr-progress__lift { color: var(--crimson); font-family: var(--font-head); font-style: italic; font-weight: 700; }
.fr-progress__list { display: grid; grid-template-columns: repeat(var(--stages, 5), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.fr-progress__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
/* The line from the stage before. */
.fr-progress__stage + .fr-progress__stage::before {
  content: "";
  position: absolute;
  top: 15px;
  right: calc(50% + 18px);
  left: calc(-50% + 18px);
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.fr-progress__stage.is-done + .fr-progress__stage::before,
.fr-progress__stage.is-current::before { background: var(--holly); }
.fr-progress__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--cream);
  color: var(--slate-soft);
  font-weight: 700;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.fr-progress__stage.is-done .fr-progress__dot { background: var(--holly); border-color: var(--holly); color: var(--cream); }
.fr-progress__stage.is-current .fr-progress__dot { background: var(--crimson); border-color: var(--crimson); color: var(--cream); box-shadow: 0 0 0 4px color-mix(in srgb, var(--crimson) 18%, transparent); }
.fr-progress__label { font-size: 0.8rem; line-height: 1.3; color: var(--slate-soft); }
.fr-progress__stage.is-current .fr-progress__label { color: var(--maroon); font-weight: 700; }
.fr-progress__stage.is-done .fr-progress__label { color: var(--holly-dark); }
/* On a phone the names would crowd under the dots: the line above says which stage they are on,
   and the names stay for screen readers. */
@media (max-width: 560px) {
  .fr-progress { padding: 14px 12px 14px; }
  .fr-progress__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Back and Next, under the step showing. Back says where it goes, with its arrow first. */
.fr-step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 0; }
.fr-step-nav.is-first { justify-content: flex-end; }
.fr-step-nav .btn { min-height: 48px; }
.fr-step-nav .btn:active { transform: translateY(1px) scale(0.99); }
.fr-step-back::after { content: none; }
.fr-step-back::before { content: "\2190"; transition: transform 0.2s ease; }
.fr-step-back:hover::before, .fr-step-back:focus-visible::before { transform: translateX(-3px); }
.fr-step-nav [hidden] { display: none; }

/* "Rather do this together?": a friendly tinted panel above the form. */
.fr-together { margin: 0 0 18px; padding: 14px 18px; border-radius: 14px; background: var(--tan-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tan) 45%, transparent); }
.fr-together p { margin: 0; color: var(--slate); line-height: 1.55; }
.fr-together strong { color: var(--maroon); }
.fr-together a { font-weight: 700; color: var(--maroon); white-space: nowrap; }
.fr-one-liner { margin: 14px 0 0; font-weight: 600; color: var(--holly-dark); }

/* "Not decided yet", close under the date it belongs to. */
.fr-date-tbc { margin: -6px 0 14px; }
/* Boxes that open under a choice (their child's name, the business, the funeral director). */
.fr-subfields { margin: 16px 0 0; }
.fr-options.fr-options--three { grid-template-columns: repeat(3, minmax(0, max-content)); gap: 10px; }
@media (max-width: 420px) { .fr-options.fr-options--three { grid-template-columns: minmax(0, 1fr); } }
.fr-legend-label { display: block; margin-bottom: 8px; }
.fr-select { max-width: 320px; }

/* The split, as their page and posters will say it. */
.fr-check-statement { margin: 0 0 16px; padding: 16px 18px; border-left: 4px solid var(--holly); border-radius: 10px; background: var(--holly-soft); color: var(--slate); line-height: 1.6; }
.fr-check-statement b { color: var(--holly-dark); }
.fr-split-money { margin: 4px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--tint); }

/* Check your answers: what they told us, to look over before sending. Wraps, never scrolls. */
.fr-review-heading { margin: 0 0 6px; }
.fr-review { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 8px 18px; margin: 4px 0 22px; padding: 16px 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.fr-review dt { font-size: 0.9rem; color: var(--slate-soft); }
.fr-review dd { margin: 0; font-weight: 600; color: var(--slate); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .fr-review { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fr-review dd { margin-bottom: 8px; }
}
/* ---------- profile pictures (Jaimie, 2026-10-03) ----------
   The organiser's round photo beside their name on their page and their team's page, once staff
   have approved it; the NBCC elf in the same round frame on a team page for anyone without one;
   and "Your photos" in the private area: a preview of the top of their page, and the circle they
   drag a photo around in. Nothing scrolls inside a box; everything wraps at phone width. */
.fr-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line);
}
/* The elf (a small copy made for this frame) on the cream behind it. */
.fr-avatar--elf { object-fit: contain; }
.fr-facts li.fr-facts__by { align-items: center; gap: 10px; }
.fr-team__who { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; min-width: 0; }
.fr-team__who .fr-team__name { margin: 0; min-width: 0; }
.fr-team__organiser { display: flex; align-items: center; gap: 12px; }
.intro-hero .fr-team__organiser { justify-content: center; }

.fr-pics__consent { padding: 12px 16px; border-left: 3px solid var(--holly); border-radius: 8px; background: var(--holly-soft); color: var(--holly-dark); font-size: 0.98rem; line-height: 1.55; }
.fr-picpreview { margin: 4px 0 24px; }
.fr-picpreview__label { margin: 0 0 8px; font-size: 0.95rem; font-weight: 600; color: var(--slate-soft); }
.fr-picpreview__page {
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  text-align: center;
}
.fr-picpreview__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--maroon);
  overflow-wrap: anywhere;
}
.fr-picpreview__by { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--slate); text-align: left; }
.fr-picpreview__avatar { display: inline-flex; flex: none; color: var(--crimson); }
.fr-picpreview__avatar[hidden] { display: none; }
.fr-picpreview__avatar.has-photo {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tint);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line);
}
.fr-picpreview__avatar img { display: block; pointer-events: none; }
.fr-picpreview__photo {
  display: grid;
  place-items: center;
  min-height: 120px;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tint);
  box-shadow: var(--shadow-sm);
}
.fr-picpreview__photo img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; }
.fr-picpreview__photo img[hidden] { display: none; }
.fr-picpreview__empty { padding: 16px; font-size: 0.95rem; color: var(--slate-soft); }
.fr-picpreview__empty[hidden] { display: none; }

.fr-pics__forms { display: grid; gap: clamp(22px, 4vw, 30px); }
.fr-pic { display: grid; gap: 4px; }
.fr-pic[hidden] { display: none; }
.fr-pic + .fr-pic { padding-top: clamp(18px, 3vw, 24px); border-top: 1px dashed var(--line); }
.fr-pic__title { margin: 0 0 4px; font-size: 1.1rem; color: var(--maroon); }
.fr-pic__now:empty { display: none; }
.fr-pic__now .fr-mynews__status { margin: 0 0 4px; }
.fr-pic__note { margin: 0 0 8px; color: var(--slate); }
.fr-pic__crop { margin: 6px 0 10px; }
.fr-pic__crop[hidden] { display: none; }
.fr-crop {
  position: relative;
  width: min(240px, 100%);
  aspect-ratio: 1;
  margin: 8px 0 10px 6px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tint);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--holly);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.fr-crop.is-dragging { cursor: grabbing; }
.fr-crop:focus-visible { outline: 3px solid var(--holly); outline-offset: 8px; }
.fr-crop img { position: absolute; display: block; max-width: none; pointer-events: none; }