/* Just Mercy · donation
   Split out of the single components.css so concurrent work on different
   areas cannot collide in one file, and so a page can eventually load only
   the CSS its elements need. Tokens come from tokens.css; no literal brand
   hex belongs in here (the page-quality gate's D2 criterion enforces it). */

/* =========================================================================
   JM Donation widget — Figma "Organisms / Donation widget"
   ========================================================================= */

.jm-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.jm-donate__card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                         /* 24 */
  padding: 2rem;                       /* 32 */
  background-color: var(--stone-500);
}

.jm-donate__kicker {
  margin: 0;
  font: 500 var(--text-caption-m)/1.2 var(--font-sans);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--purple-500);
}

.jm-donate__heading {
  margin: 0;
  font: 600 var(--text-heading-l)/1.2 var(--font-sans);
  color: var(--purple-500);
  text-wrap: balance;
}

.jm-donate__step { display: flex; flex-direction: column; gap: 1.5rem; }

/* ---- Frequency toggle (Molecules / Frequency toggle) ---- */

.jm-donate__frequency { display: flex; gap: 0.375rem; }         /* 6 */

.jm-segment {
  flex: 1 0 0;
  min-width: 0;
  min-height: 2.9375rem;               /* 47 */
  padding: 0.5rem 1rem;
  border: 0;
  background-color: var(--purple-100);
  color: var(--purple-400);
  font: 500 var(--text-body)/1.2 var(--font-sans);
  text-align: center;                  /* Figma centres the segment labels */
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-out), color var(--motion-fast) var(--motion-ease-out);
}
.jm-segment.is-selected { background-color: var(--purple-500); color: var(--text-inverse); }
.jm-segment:not(.is-selected):hover { background-color: var(--purple-200); }
.jm-segment:focus-visible { outline: 3px solid var(--purple-500); outline-offset: 2px; }

/* ---- Amount options (Atoms / Amount option) ---- */

.jm-donate__amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Longhand on purpose. Figma re-read 2026-08-31 (Phil, superseding the
     equal-axes note of 2026-08-30): rows sit nearly flush while columns
     keep the drawn 6px. */
  row-gap: 0.1rem;
  column-gap: 0.375rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.jm-amount--other { grid-column: 2 / -1; }

@media (max-width: 30rem) {
  .jm-donate__amounts { grid-template-columns: repeat(2, 1fr); }
  .jm-amount--other { grid-column: 1 / -1; }
}

.jm-amount { display: flex; }

/* The radio stays in the accessibility tree and in the tab order; only its own
   painting is removed. Never display:none a focusable control. */
.jm-amount__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.jm-amount__label {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-height: 3.8125rem;               /* 61 */
  padding: 0.75rem 1rem;
  background-color: var(--stone-100);
  border: 1.5px solid transparent;
  color: var(--purple-500);
  font: 600 var(--text-body-m)/1.2 var(--font-sans);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-out), border-color var(--motion-fast) var(--motion-ease-out);
}
.jm-amount__label:hover { background-color: var(--stone-200); }
.jm-amount__input:checked + .jm-amount__label {
  border-color: var(--purple-500);
  background-color: var(--purple-50);
}
.jm-amount__input:focus-visible + .jm-amount__label {
  outline: 3px solid var(--purple-500);
  outline-offset: 2px;
}

/* The `hidden` attribute sets display:none in the UA stylesheet, and any author
   `display` rule beats it. Both the label and the field carry a display value, so
   both need this — without it the label stays visible NEXT TO the input instead of
   being replaced by it. */
.jm-amount__label[hidden] { display: none; }

/* ---- "Other amount": the tile becomes the input ----
   Same box, same border treatment, same height. The field replaces the label in
   place rather than appearing elsewhere on the page, so the grid never moves. */

.jm-amount--other { position: relative; }

.jm-amount__field {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 0.125rem;
  min-height: 3.8125rem;               /* 61 — identical to a tile */
  padding: 0.75rem 1.25rem;            /* 20 sides, matching the text field */
  background-color: var(--purple-50);
  border: 1.5px solid var(--purple-500);
}
.jm-amount__field[hidden] { display: none; }

.jm-amount__prefix {
  flex: 0 0 auto;
  /* A little air between the $ and the figure — they were set hard against each
     other and read as one crammed token rather than a currency and an amount. */
  margin-right: 0.375rem;              /* 6 */
  font: 600 var(--text-body-m)/1.2 var(--font-sans);
  color: var(--purple-500);
}

.jm-amount__value {
  flex: 1 0 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--purple-500);
  font: 600 var(--text-body-m)/1.2 var(--font-sans);
  /* Left, against the $ — an amount reads as one unit with its currency mark, and
     a centred caret floating in the middle of the tile looks like a search box. */
  text-align: left;
}
.jm-amount__value::placeholder { color: var(--purple-300); }
.jm-amount__value:focus { outline: none; }
.jm-amount__field:focus-within {
  outline: 3px solid var(--purple-500);
  outline-offset: 2px;
}

/* Amber error pattern, per the Figma spec — feedback/error is a dark gold, not a
   red. Colour is never the only signal: the message text carries it too. */
.jm-amount__value.has-error { color: var(--feedback-error); }
.jm-amount__field:has(.has-error) { border-color: var(--feedback-error); }

.jm-field__error {
  margin: 0;
  font: 500 var(--text-body-s)/1.3 var(--font-sans);
  color: var(--feedback-error);
}
.jm-field__error[hidden] { display: none; }

/* ---- Consent checkbox (Atoms / Input / Checkbox) ---- */

.jm-choice { display: flex; align-items: flex-start; gap: 0.625rem; }

.jm-choice__input {
  flex: 0 0 auto;
  width: 1.25rem; height: 1.25rem;     /* 20 */
  margin: 0.125rem 0 0;
  accent-color: var(--purple-500);
}
.jm-choice__input:focus-visible { outline: 3px solid var(--purple-500); outline-offset: 2px; }

.jm-choice__label {
  font: 400 var(--text-body-s)/1.4 var(--font-sans);
  color: var(--purple-700);
  cursor: pointer;
}

/* ---- Footer copy ---- */

.jm-donate__submit { width: 100%; }

.jm-donate__hint:empty { display: none; }
.jm-donate__hint {
  margin: 0;
  font: 500 var(--text-body-s)/1.4 var(--font-sans);
  color: var(--purple-400);
}

.jm-donate__fine-print,
.jm-donate__notice {
  margin: 0;
  font: 400 var(--text-caption)/1.4 var(--font-sans);
  color: var(--purple-400);
}

/* ---- Steps 2 to 5 ----
   Measured off the Figma states: Details (584:3605), Payment/Card (575:3520),
   Payment/Bank transfer (581:4172), Thank you (575:4185). */

.jm-donate__step[hidden] { display: none; }

/* "Your gift: $100, one-off" with its Edit amount control. */
.jm-donate__gift {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;                        /* 12 */
  margin: 0;
  font: 600 var(--text-body-m)/1.2 var(--font-sans);   /* 18 SemiBold */
  color: var(--purple-500);
}

.jm-donate__edit {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--purple-500);
  font: 500 var(--text-label)/1.2 var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.jm-donate__edit:focus-visible { outline: 3px solid var(--purple-500); outline-offset: 2px; }

/* Two-up field rows: first/surname and organisation/phone. */
.jm-donate__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;                           /* 16 */
}
@media (max-width: 30rem) {
  .jm-donate__grid { grid-template-columns: minmax(0, 1fr); }
}

.jm-donate__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.jm-donate__actions .jm-button { width: 100%; }

.jm-donate__subheading {
  margin: 0;
  font: 600 var(--text-body-m)/1.2 var(--font-sans);
  color: var(--purple-500);
}

.jm-donate__note {
  margin: 0;
  font: 400 var(--text-body-s)/1.5 var(--font-sans);
  color: var(--purple-400);
  text-wrap: pretty;
}

.jm-donate__body {
  margin: 0;
  font: 400 var(--text-body)/1.5 var(--font-sans);
  color: var(--purple-700);
  text-wrap: pretty;
}

/* The Stripe Payment Element renders itself. Reserve height so mounting it does
   not shove the buttons down the page. */
/* .jm-donate__stripe removed 2026-09-01: the reserved Payment Element mount
   drew a dead 140px gap — Checkout is Stripe-hosted, nothing mounts here. */

[data-jm-method-panel][hidden] { display: none; }

/* ---- The security label and its tooltip ----

   The payment notice used to stand permanently under the form, which gave a
   sentence about card storage the same weight as the form itself. It answers a
   question now instead of pre-empting one. */

.jm-donate__tip-wrap { position: relative; display: inline-block; }

.jm-donate__tip-trigger {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  cursor: help;
}

.jm-donate__tip-trigger:hover { text-decoration-style: solid; }
.jm-donate__tip-trigger:focus-visible {
  outline: 3px solid var(--purple-500);
  outline-offset: 2px;
}

.jm-donate__tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: min(22rem, 80vw);
  padding: 0.75rem 1rem;               /* 12 / 16 */
  background-color: var(--purple-700);
  color: var(--stone-100);
  font: 400 var(--text-label-s)/1.4 var(--font-sans);
  text-align: left;
}

/* The pointer. A square rotated 45deg rather than a border triangle, so it takes
   the tooltip's own background token and cannot drift out of step with it. */
.jm-donate__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 1.25rem;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: -0.3125rem;
  background-color: var(--purple-700);
  transform: rotate(45deg);
}

.jm-donate__tooltip[hidden] { display: none; }

/* Micro animation: the tooltip fades and rises the last few pixels into place, so
   it reads as having been summoned by the press rather than simply appearing.
   Short enough to feel like response time, not an effect. */
@keyframes jm-donate-tip-in {
  from { opacity: 0; transform: translateY(0.375rem); }
  to   { opacity: 1; transform: none; }
}

.jm-donate__tooltip:not([hidden]) {
  animation: jm-donate-tip-in var(--motion-fast) var(--motion-ease-enter);
}

/* The dotted underline thickens on hover, so the label answers the pointer before
   it is pressed. */
.jm-donate__tip-trigger {
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--motion-fast) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .jm-donate__tooltip:not([hidden]) { animation: none; }
  .jm-donate__tip-trigger { transition: none; }
}

.jm-donate__sep { margin: 0 0.375rem; }

/* ---- Billing address: lookup + manual expansion (Phil, 2026-08-31) ---- */

.jm-address { position: relative; }

.jm-address__list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 2px);
  z-index: 30;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--stone-100);
  border: 1px solid var(--purple-100);
  box-shadow: 0 8px 20px rgb(27 0 86 / 0.12);
  max-height: 14rem;
  overflow: auto;
}
.jm-address__list[hidden] { display: none; }

.jm-address__option {
  padding: 0.625rem 0.875rem;
  font: 400 var(--text-body-s)/1.35 var(--font-sans);
  color: var(--purple-500);
  cursor: pointer;
}
.jm-address__option:hover { background: var(--purple-50); }

.jm-address__manual {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  font: 500 var(--text-body-s)/1.2 var(--font-sans);
  color: var(--purple-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.jm-address__manual:hover { color: var(--purple-700); }

.jm-address__fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}
.jm-address__fields[hidden] { display: none; }

/* ---- Monthly nudge on the payment step (Phil, 2026-09-01) ---- */
.jm-donate__nudge {
  margin: 0;
  font: 400 var(--text-body-s)/1.5 var(--font-sans);
  color: var(--purple-400);
  text-wrap: pretty;
}
.jm-donate__nudge[hidden] { display: none; }

.jm-donate__nudge-link {
  padding: 0;
  border: 0;
  background: none;
  font: 600 var(--text-body-s)/1.5 var(--font-sans);
  color: var(--purple-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.jm-donate__nudge-link:hover { color: var(--purple-700); }

/* ---- Thank-you state (Phil, 2026-09-01) ---- */

/* The step headings receive PROGRAMMATIC focus so screen readers land on the
   new step; a focus ring on a non-interactive heading is just noise (the
   "broken blue border" on the thank-you card). Keyboard-focusable controls
   keep their rings — this touches only script-focused targets. */
.jm-donate__card [tabindex="-1"]:focus { outline: none; }

/* Gratitude owns the page: on the thank-you state the card's own kicker and
   headline (the ask) hide. Direct children only — the thank-you step's own
   heading stays. */
.jm-donate__card.jm-donate--complete > .jm-donate__kicker,
.jm-donate__card.jm-donate--complete > .jm-donate__heading { display: none; }

/* Quiet after-actions under the thank-you CTA. */
.jm-donate__after {
  margin: 0;
  display: flex;
  gap: 0.625rem;
  align-items: center;
  font: 400 var(--text-body-s)/1.4 var(--font-sans);
  color: var(--purple-400);
}
.jm-donate__after-link {
  padding: 0;
  border: 0;
  background: none;
  font: 500 var(--text-body-s)/1.4 var(--font-sans);
  color: var(--purple-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.jm-donate__after-link:hover { color: var(--purple-700); }

/* Back / Pay by card / Bank transfer share the payment step's action row:
   Back hugs its label, card (the preferred path) takes the widest track.
   Stacks on narrow screens. */
.jm-donate__actions--methods { grid-template-columns: auto 1fr 1.2fr; }
@media (max-width: 30rem) {
  .jm-donate__actions--methods { grid-template-columns: 1fr; }
}