/*
 * munchterm plus: joining pages (join, join_return). Owned by the JOIN flow agent.
 *
 * Linked on every page after base.css (app/root.tsx), so every class in here is prefixed
 * `join-` to keep it from touching another flow's pages. Anything a second flow needs belongs
 * in base.css (raise it with the orchestrator). Tokens, buttons, forms, notices, cards, the pass,
 * chips, tiles, rails, menus and the action bar are all in base.css already.
 *
 * Markup: app/components/join/JoinPage.tsx (/join) and app/components/CheckoutReturnScreen.tsx
 * (/join/return, and /account/payment/return). Mobile first: base rules are the phone.
 */

/* === /join ================================================================================= */

/* Calm is the brief. Three parts in order (your drops, what you're paying, before you pay), each
   opened by a hairline and a heading of one size. Ink, greys and white throughout; the pay button
   is the only colour on the page. The summary and the consent share one surface, `.join-panel`. */

.join-page .stepper {
  margin-top: var(--s2);
}

.join-form {
  display: grid;
  gap: var(--s6);
  margin-top: var(--s3);
}

.join-intro h1 {
  margin-bottom: var(--s2);
}

.join-intro .lede {
  color: var(--ink-muted);
}

/* A part of the sequence: a hairline above, then its heading. */
.join-part {
  padding-top: var(--s5);
  border-top: 1px solid var(--line-strong);
}

/* One heading size for every part, legend included. */
.join-block__title {
  margin: 0 0 var(--s3);
  font-size: var(--size-h3);
}

.join-persona .join-block__title {
  margin-bottom: var(--s1);
}

.join-persona__error {
  margin-bottom: var(--s3);
}

/* The one surface: white, a grey hairline. Used by the summary and the consent, nothing else. */
.join-panel {
  padding: var(--s5) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
}

/* --- what you're paying ------------------------------------------------------------------------ */

.join-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.join-summary__name {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
}

.join-summary__price {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
}

.join-summary__per {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-small);
  letter-spacing: 0;
}

.join-summary__benefits {
  margin-bottom: var(--s4);
}

/* Ticks in ink here: the pay button keeps the page's only colour. */
.join-summary .ticks .icon {
  color: var(--ink);
}

.join-summary__facts {
  border-top: 1px solid var(--line);
}

.join-summary__facts > div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}

.join-summary__facts > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.join-summary__facts dt {
  color: var(--ink-muted);
  font-size: var(--size-small);
  line-height: 1.6;
}

.join-summary__facts dd {
  color: var(--ink);
}

/* --- before you pay (the words are code-owned; this only lays them out) ---------------------- */

.join-consent__terms {
  color: var(--ink-body);
  font-size: var(--size-small);
}

.join-consent__terms p {
  margin-bottom: var(--s2);
}

/* The tick box, under a hairline inside the panel: the whole row is the tap target, unticked
   until they tick it. An ink box, like the persona ticks. */
.join-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  min-height: var(--tap-min);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.5;
  cursor: pointer;
}

.join-check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.join-check:has(input:focus-visible) {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}

.join-check input[aria-invalid="true"] {
  outline: 2px solid var(--critical);
  outline-offset: 2px;
}

.join-consent .error {
  margin-top: var(--s3);
}

/* --- pay ------------------------------------------------------------------------------------- */

.join-pay {
  display: grid;
  gap: var(--s3);
}

/* On a phone the bar is the shared stacked ActionBar (base.css): what you pay today, then the
   one button. It sits in the middle of the form (it must be inside it, see JoinPage.tsx), and
   base.css makes the room it covers under the footer, not where it is rendered. */

.join-small {
  color: var(--ink-muted);
  font-size: var(--size-small);
}

.join-small p {
  margin-bottom: var(--s3);
}

.join-banner {
  margin: 0;
}

.join-banner img {
  width: 100%;
}

/* === /join/return =========================================================================== */

.join-return {
  text-align: center;
}

.join-return__status {
  padding-top: var(--s6);
}

.join-return h1 {
  margin-bottom: var(--s3);
}

.join-return p {
  max-width: 38ch;
  margin-inline: auto;
}

.join-return__icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--s5);
  background: var(--surface-sunk);
  color: var(--ink);
}

.join-return__icon--ok {
  background: var(--pink);
  color: var(--on-pink);
}

.join-return__icon--bad {
  background: var(--critical-wash);
  color: var(--critical);
}

/* Quiet progress: a thin line under the words. Under reduced motion base.css shows it as a still,
   faint full line, and the dots stop. */
.join-return__progress {
  max-width: 240px;
  margin: var(--s5) auto;
}

/* The order of events: payment sent, confirming, then the membership. Nothing is ticked while we
   wait: "sent" is neutral (an arrow, ink text), because we do not know yet whether it was paid. */
.join-return__events {
  display: inline-grid;
  gap: var(--s2);
  margin: 0 auto var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
}

.join-return__event {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--ink-muted);
  font-size: var(--size-small);
}

/* The mark is the icon's own 24px box. Its outline is an inset ring, not a border, so the
   24px icon fills it without being squeezed and the drawing clears the ring. */
.join-return__event-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: var(--surface);
}

.join-return__event--done .join-return__event-mark {
  background: var(--ink);
  box-shadow: none;
  color: #fff;
}

.join-return__event--sent {
  color: var(--ink-body);
}

.join-return__event--sent .join-return__event-mark {
  color: var(--ink-muted);
}

.join-return__event--current {
  color: var(--ink);
  font-weight: 700;
}

.join-return__event--current .join-return__event-mark {
  box-shadow: inset 0 0 0 1px var(--pink);
  background: var(--pink-wash);
}

.join-return__event--current .join-return__event-mark::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--pink);
}

.join-return__slow {
  color: var(--ink);
}

.join-return__refresh {
  margin-top: var(--s4);
}

.join-return__actions {
  max-width: 360px;
  margin: var(--s5) auto 0;
}

/* --- the welcome moment ----------------------------------------------------------------------- */

.join-return__art {
  margin: var(--s2) 0 var(--s6);
  animation: join-arrive var(--slow) var(--ease) both;
}

.join-return__art img {
  width: 100%;
}

.join-return--welcome .join-return__head {
  animation: join-arrive var(--slow) var(--ease) 80ms both;
}

.join-return--welcome .join-return__head:first-child {
  padding-top: var(--s6);
}

.join-return__card {
  display: flex;
  gap: var(--s4);
  margin-top: var(--s5);
  padding: var(--s5) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pink);
  text-align: left;
}

.join-return__card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--pink-wash);
  color: var(--pink);
}

.join-return__card-title {
  margin: 0 0 var(--s1);
  font-size: var(--size-h3);
}

.join-return__card p {
  max-width: none;
  margin: 0;
  color: var(--ink-muted);
}

/* Opacity and transform only, short, and off under reduced motion (base.css). */
@keyframes join-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- wider screens ---------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .join-panel {
    padding-inline: var(--s5);
  }
}

@media (min-width: 900px) {
  .join-return__status {
    padding-top: var(--s7);
  }
}