/* ==========================================================================
   Start a conversation — the modal journey (inc/jm-conversation.php,
   conversation.js).

   Dark theatre (Phil, 2026-08-30): Purple/700 ground, generous air, and
   restrained micro motion — each step fades up on the enter curve, the
   active meter dot grows, topic cards lift a breath on hover. Desktop is a
   centred dialog; mobile is a bottom sheet rising on the same curve as the
   site menu. All motion rides the tokens and dies under reduced motion.

   The contact page's in-place confirmation (.jm-convo__page-done) sits on
   the PAGE's light ground, so every dark-ground colour in here is scoped
   under .jm-convo, the dialog root.
   ========================================================================== */

.jm-convo {
  width: min(38rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(52rem, 92dvh);
  margin: auto;
  padding: 3rem;
  border: 0;
  background: var(--purple-700);
  color: var(--stone-100);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.jm-convo::backdrop {
  background: rgb(10 0 32 / 0.6);
}

/* Every ragged edge in the modal wraps pretty, same as the site's body copy
   (Phil, 2026-08-30). */
.jm-convo p,
.jm-convo legend,
.jm-convo label,
.jm-convo .jm-convo__topic-label,
.jm-convo .jm-convo__topic-sub,
.jm-convo a {
  text-wrap: pretty;
}

.jm-convo[open] {
  animation: jm-convo-in var(--motion-base) var(--motion-ease-enter);
}
@keyframes jm-convo-in {
  from { opacity: 0; transform: translateY(0.75rem); }
}

/* The phone gets the sheet: full width, pinned to the bottom, rising in. */
@media (max-width: 47.99rem) {
  .jm-convo {
    width: 100vw;
    max-width: none;
    max-height: 94dvh;
    margin: auto 0 0;
    padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  }
  .jm-convo[open] { animation: jm-convo-up var(--motion-slow) var(--motion-ease-enter); }
  @keyframes jm-convo-up {
    from { transform: translateY(100%); }
  }
}

/* ---- head ---- */

.jm-convo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.jm-convo__kicker {
  margin: 0;
  font: 600 var(--text-label-s)/1.2 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.jm-convo__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(2.75rem, 44px);
  height: max(2.75rem, 44px);
  margin: -0.625rem -0.625rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* The X is the burger-bars component in its crossed state (chrome.css), so
   it matches the mobile menu's close exactly. */
.jm-convo__close .jm-burger__bars span {
  transition: background-color var(--motion-fast) var(--motion-ease-out);
}
.jm-convo__close:hover .jm-burger__bars span { background-color: var(--gold-500); }
.jm-convo__close:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

/* ---- progress: a meter line and three dots that jump after step one ---- */

.jm-convo__meter {
  margin: 0 0 0.625rem;
  font: 500 var(--text-label-s)/1.2 var(--font-sans);
  color: rgb(255 255 255 / 0.68);
}
.jm-convo__meter:empty { display: none; }

.jm-convo__dots {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.jm-convo__dot {
  width: 2rem;
  height: 0.25rem;
  background: rgb(255 255 255 / 0.18);
  transition: background-color var(--motion-base) var(--motion-ease-out),
              width var(--motion-base) var(--motion-ease-enter);
}
.jm-convo__dot.is-active { width: 2.75rem; background: var(--stone-100); }
.jm-convo__dot.is-done { background: var(--gold-500); }

/* ---- steps ---- */

.jm-convo__step {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  /* Each step swipes in subtly as it arrives (Phil, 2026-08-30): forward
     steps slide in from the right, going back slides in from the left —
     display:none to flex restarts the animation, so one keyframe pair
     serves every transition. conversation.js sets is-nav-back. */
  animation: jm-convo-step-fwd var(--motion-base) var(--motion-ease-enter);
}
.jm-convo.is-nav-back .jm-convo__step {
  animation-name: jm-convo-step-back;
}
@keyframes jm-convo-step-fwd {
  from { opacity: 0; transform: translateX(1.5rem); }
}
@keyframes jm-convo-step-back {
  from { opacity: 0; transform: translateX(-1.5rem); }
}

/* The display rules above would silently defeat the hidden attribute
   (author styles always beat the UA sheet) — the collapse-panel trap. */
.jm-convo__step[hidden],
.jm-convo__form[hidden],
.jm-convo__done[hidden] { display: none; }

.jm-convo__title {
  /* A legend sits outside the fieldset's flex gap, so the space below the
     title is its own margin, not the gap (Phil, 2026-08-30). */
  margin: 0 0 1rem;
  padding: 0;
  font: 600 var(--text-body-lead)/1.25 var(--font-sans);
  color: var(--stone-100);
}

.jm-convo__note {
  margin: 0;
  font: 400 var(--text-body)/1.5 var(--font-sans);
  color: rgb(255 255 255 / 0.72);
}

/* Topic cards: the whole first step is one tap. */
.jm-convo__topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 30rem) {
  .jm-convo__topics { grid-template-columns: minmax(0, 1fr); }
}

/* Solid surfaces, no outlines (Phil, 2026-08-30: bordered boxes are not on
   brand) — Purple/500 blocks on the Purple/700 ground, the same layering
   the menu and the stuck bar already use; gold when chosen, like every
   primary action on the site. */
.jm-convo__topic {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.375rem;
  border: 0;
  background: var(--purple-500);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-out),
              transform var(--motion-fast) var(--motion-ease-out);
}
.jm-convo__topic:hover {
  background: var(--purple-400);
  transform: translateY(-2px);
}
.jm-convo__topic.is-selected { background: var(--gold-500); }
.jm-convo__topic.is-selected .jm-convo__topic-label,
.jm-convo__topic.is-selected .jm-convo__topic-sub { color: var(--purple-700); }
.jm-convo__topic:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

.jm-convo__topic-label {
  font: 600 var(--text-body-m)/1.3 var(--font-sans);
  color: var(--stone-100);
  transition: color var(--motion-fast) var(--motion-ease-out);
}
.jm-convo__topic-sub {
  font: 400 var(--text-label-s)/1.4 var(--font-sans);
  color: rgb(255 255 255 / 0.68);
  transition: color var(--motion-fast) var(--motion-ease-out);
}

/* ---- the give path's funding-opportunity asks ---- */

.jm-convo__asks { display: flex; flex-direction: column; gap: 0.625rem; }
.jm-convo__asks[hidden] { display: none; }

.jm-convo__asks-label {
  margin: 0;
  font: 600 var(--text-label-s)/1.2 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
}

.jm-convo__asks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.jm-convo__ask {
  padding: 0.625rem 0.875rem;
  border: 0;
  background: var(--purple-500);
  font: 500 var(--text-label-s)/1.3 var(--font-sans);
  color: var(--stone-100);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-out),
              color var(--motion-fast) var(--motion-ease-out),
              transform var(--motion-fast) var(--motion-ease-out);
}
.jm-convo__ask:hover { background: var(--purple-400); transform: translateY(-1px); }
.jm-convo__ask.is-selected { background: var(--gold-500); color: var(--purple-700); }
.jm-convo__ask:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

/* ---- fields on the dark ground ---- */

.jm-convo .jm-field__label { color: var(--stone-100); }
.jm-convo .jm-field__helper { color: rgb(255 255 255 / 0.62); }
.jm-convo .jm-field__required { color: var(--gold-500); }

/* ---- navigation row ---- */

.jm-convo__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.jm-convo__back {
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  font: 500 var(--text-body)/1.2 var(--font-sans);
  color: rgb(255 255 255 / 0.75);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease-out);
}
.jm-convo__back:hover { color: var(--stone-100); }
.jm-convo__back:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

/* ---- newsletter + error ---- */

.jm-convo__news {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font: 400 var(--text-body)/1.5 var(--font-sans);
  color: rgb(255 255 255 / 0.72);
  cursor: pointer;
}
.jm-convo__news input { margin-top: 0.25em; accent-color: var(--gold-500); }

.jm-convo .jm-convo__error {
  margin: 0;
  font: 500 var(--text-body)/1.5 var(--font-sans);
  color: #ffb3ad;
}

/* ---- the confirmation ---- */

.jm-convo__done {
  outline: none;
  animation: jm-convo-step-fwd var(--motion-base) var(--motion-ease-enter);
}
.jm-convo__done .jm-convo__note { margin-top: 1rem; }

.jm-convo__done-link {
  display: inline-block;
  margin-top: 1.5rem;
  font: 500 var(--text-body)/1.5 var(--font-sans);
  color: var(--gold-500);
  text-underline-offset: 0.2em;
  transition: color var(--motion-fast) var(--motion-ease-out);
}
.jm-convo__done-link:hover { color: var(--stone-100); }

/* The contact page's in-place confirmation lives on the LIGHT page ground. */
.jm-convo__page-done { outline: none; }
.jm-convo__page-done .jm-convo__title { color: var(--purple-700); }
.jm-convo__page-done p {
  margin: 0.75rem 0 0;
  font: 400 var(--text-body)/1.5 var(--font-sans);
  color: var(--purple-400);
}

/* The contact page form's error note is on the light ground too. */
form[data-jm-form] .jm-convo__error {
  margin: 0;
  font: 500 var(--text-body)/1.5 var(--font-sans);
  color: #a4262c;
}

/* ---- trust footer ---- */

.jm-convo__foot {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  font: 400 var(--text-label-s)/1.5 var(--font-sans);
  color: rgb(255 255 255 / 0.62);
}
.jm-convo__foot-charity {
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
}

/* ---- reduced motion: everything lands instantly ---- */

@media (prefers-reduced-motion: reduce) {
  .jm-convo[open],
  .jm-convo__step,
  .jm-convo__done { animation: none; }
  .jm-convo__dot,
  .jm-convo__topic { transition: none; }
}