/* ==========================================================================
   PULSE V2.2 — utility.css · "ION ATMOSPHERE"
   Small functional pages: thanks.html · purchase-success.html ·
   support.html · status.html · discord.html. Requires tokens.css + base.css
   first. The thanks/purchase pages run verbatim v1 JS (thanks-page.js,
   purchase-success-page.js, version-badge.js, nav-auth.js) — every class
   that JS toggles (.hidden) or fills (#user-email …) is styled here,
   never renamed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Stage — quiet aurora section, single centered column
   -------------------------------------------------------------------------- */
.util-stage {
  display: grid;
  align-content: start;
  min-height: 60vh;
  padding-block: var(--sp-9) var(--sp-9);
}
.util-col {
  width: min(36rem, 100% - 2 * var(--gutter));
  margin-inline: auto;
  text-align: center;
}
.util-col h1 { margin-top: var(--sp-4); }

/* JS show/hide contract (purchase-success-page.js uses classList) */
.hidden { display: none !important; }

/* base.css caps every <p> at 68ch; in these centered contexts the capped
   box must itself be centered or the text sits off-axis. */
.util-col p,
.more-links p,
.support-note p,
.support-hero p,
.bridge p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Loading state
   -------------------------------------------------------------------------- */
.loading {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-9) var(--sp-4);
}
.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--viz-track);
  border-top-color: var(--accent);
  border-radius: 50%;
}
html.anim .spinner { animation: util-spin 0.9s linear infinite; }
@keyframes util-spin { to { transform: rotate(360deg); } }
.loading-text {
  font: 700 var(--fs-micro) / 1 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   Success / confirmation anatomy (thanks + purchase-success)
   -------------------------------------------------------------------------- */
.check {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--accent-tint-2);
  border: 1px solid var(--accent-line);
  box-shadow: var(--glow-accent);
  color: var(--accent-bright);
}
.check svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sub {
  margin-top: var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}
.sub a { color: var(--accent-bright); }

.sub-email {
  display: none; /* JS contract: revealed via el.style.display='block' */
  margin-top: var(--sp-3);
  font: 400 var(--fs-body-sm) / 1.4 var(--font-mono);
  color: var(--text-3);
}

.util-meta {
  margin-top: var(--sp-3);
  font: 400 var(--fs-micro) / 1.6 var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--text-3);
}

.info-box {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
  background: var(--panel-tint-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}
.info-box p + p { margin-top: var(--sp-3); }

.btn-home { margin-top: var(--sp-6); }

.email-note {
  margin-top: var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-micro);
}

/* Error state (purchase-success without a valid transaction) */
.error-wrap { display: grid; justify-items: center; }
.error-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-5);
  border-radius: 50%;
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  color: var(--danger);
}
.error-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.error-title { font-size: var(--fs-h2); }
.error-wrap .error-msg {
  margin-top: var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-body);
}
.error-link,
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  color: var(--text-3);
  font-size: var(--fs-body-sm);
  text-decoration: none;
  transition: color var(--dur-1) ease;
}
.error-link:hover, .error-link:focus-visible,
.back-link:hover, .back-link:focus-visible { color: var(--text-1); }

/* --------------------------------------------------------------------------
   Getting-started stepper (thanks)
   -------------------------------------------------------------------------- */
.steps {
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-align: start;
  background: var(--panel-tint-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
}
.steps h2 {
  font: 700 var(--fs-micro) / 1 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}
.step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
}
.step + .step { border-top: 1px solid var(--line-0); }
.step-num {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--accent-tint-2);
  color: var(--accent-bright);
  font: 700 var(--fs-micro) / 1 var(--font-mono);
}
.step-text {
  color: var(--text-3);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}
.step-text strong { color: var(--text-1); }

/* --------------------------------------------------------------------------
   Support page — contact instrument cards
   -------------------------------------------------------------------------- */
.support-hero { padding-block: var(--sp-9) var(--sp-6); text-align: center; }
.support-hero h1 { margin-top: var(--sp-3); }
.support-hero .section-sub { margin-inline: auto; }

.contact-grid {
  display: grid;
  gap: var(--sp-4);
  width: min(64rem, 100% - 2 * var(--gutter));
  margin: 0 auto;
}
@media (min-width: 48em) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}

.contact-card {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background-color: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-glide);
}
.contact-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.contact-card h2 { font-size: var(--fs-h4); }
.contact-card p { color: var(--text-3); font-size: var(--fs-body-sm); line-height: var(--lh-body); }

.contact-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-md);
  background: var(--accent-tint-2);
  border: 1px solid var(--line-1);
  color: var(--accent-bright);
}
.contact-icon svg { width: 1.3rem; height: 1.3rem; }

.contact-link {
  justify-self: start;
  color: var(--accent-bright);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-link:hover,
.contact-link:focus-visible { text-decoration: underline; }

.more-links {
  margin-top: var(--sp-7);
  text-align: center;
}
.more-label {
  font: 700 var(--fs-micro) / 1 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}
.more-links nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}
.more-links nav a {
  color: var(--text-2);
  font-size: var(--fs-body-sm);
  text-decoration: none;
}
.more-links nav a:hover,
.more-links nav a:focus-visible { color: var(--accent-bright); }

.support-note {
  margin-top: var(--sp-7);
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-body-sm);
}
.support-note .util-meta { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   Refund page promise card (page loads legal.css first; this rides on it)
   -------------------------------------------------------------------------- */
.promise-card {
  margin-bottom: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  background: var(--accent-tint-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.promise-card strong { color: var(--accent-bright); }

/* --------------------------------------------------------------------------
   Redirect bridges (status + discord) — no JS, instant meta refresh;
   a calm centered line in the void for the ~0s it is visible.
   -------------------------------------------------------------------------- */
.bridge {
  display: grid;
  place-items: center;
  min-height: 70svh;
  padding: var(--sp-8) var(--gutter);
  text-align: center;
}
.bridge p { color: var(--text-2); font-size: var(--fs-lead); }
.bridge a { color: var(--accent-bright); }

/* Auth-aware nav cluster (.nav-auth-link / .nav-user-pill) + the
   centered-links overlap fallback now live in base.css (§8) — shared by
   every shell page and driven by motion.js's measurement guard. */