/* ===========================================================================
   pd.cash auth — art pass                                     2026-08-20

   The auth pages had drifted into the default dark-fintech look: a floating
   fake "$1,250.00 received" receipt, a headline with one accented word, three
   icon-and-sentence bullets, a row of three decorative glyphs, and a padlock
   trust line. Every one of those is a stock device, and together they read as
   generic regardless of how well they are executed.

   What replaces them:
     - the fake receipt  ->  the real create-payment-link request/response,
                             field names taken from api/v1/endpoints/
     - icon bullets      ->  a mono-labelled definition list
     - decorative glyphs ->  removed outright
     - Font Awesome mark ->  a drawn bolt, same silhouette, real geometry
     - float + shine     ->  removed; one 240ms entrance, nothing looping

   Type does the work instead of ornament: JetBrains Mono (already in the
   design system) carries the technical register, Inter carries the prose.
   Loads after auth-refine.css.
   =========================================================================== */

/* ---- brand mark ---------------------------------------------------------- */
body.merchant-auth .auth-hero__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--auth-green, #36d240);
  color: #041007;
}
body.merchant-auth .auth-hero__logo svg { width: 17px; height: 17px; display: block; }

/* ---- headline ------------------------------------------------------------
   Tighter tracking and a hard measure so the line breaks land deliberately
   rather than wherever the column happens to end. */
body.merchant-auth .auth-hero__title {
  letter-spacing: -0.028em !important;
  max-width: 24ch;   /* 19ch broke the line three ways and orphaned the accent */
  text-wrap: balance;
}
body.merchant-auth .auth-hero__sub {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.52) !important;
}

/* ---- the snippet ---------------------------------------------------------
   This is the product, stated in the product's own vocabulary. Real endpoint,
   real field names, real response keys — nothing invented for decoration. */
body.merchant-auth .pd-snippet {
  margin: 26px 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.36);
  overflow: hidden;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}
body.merchant-auth .pd-snippet__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.022);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
body.merchant-auth .pd-snippet__bar--res {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
body.merchant-auth .pd-snippet__verb {
  color: var(--auth-green, #36d240);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
}
body.merchant-auth .pd-snippet__code-200 {
  color: var(--auth-green, #36d240);
  font-weight: 700;
  font-size: 10px;
}
body.merchant-auth .pd-snippet__code {
  margin: 0;
  padding: 11px 12px;
  font-size: 11.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.72);
  white-space: pre;
  overflow-x: auto;
}
body.merchant-auth .pd-snippet__code .c-k { color: rgba(255, 255, 255, 0.44); }  /* keys   */
body.merchant-auth .pd-snippet__code .c-s { color: #7fe08a; }                    /* string */
body.merchant-auth .pd-snippet__code .c-n { color: #d7e37f; }                    /* number */
body.merchant-auth .pd-snippet__code .c-p { color: rgba(255, 255, 255, 0.24); }  /* punct  */

/* ---- facts list ----------------------------------------------------------
   Was three <li> each led by a Font Awesome glyph. A mono label carries the
   category instead: no icon has to stand in for a word it cannot express, and
   "Risk" reads as a heading rather than as a shield-shaped decoration. */
body.merchant-auth .pd-facts { margin: 0; display: grid; gap: 12px; }
body.merchant-auth .pd-facts > div {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  align-items: baseline;
}
body.merchant-auth .pd-facts dt {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--auth-green, #36d240);
  opacity: 0.85;
}
body.merchant-auth .pd-facts dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- foot ----------------------------------------------------------------
   The three link/code/bank glyphs are gone from the markup. What is left is
   the sentence, which was the only part carrying meaning. */
body.merchant-auth .auth-hero__foot {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
}
body.merchant-auth .auth-hero__trust {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.34);
}
body.merchant-auth .auth-hero__trust i { display: none; }

/* ---- motion --------------------------------------------------------------
   lgFloat looped forever and lgShine swept the button on every hover. Both
   deleted. One entrance, fast enough to feel like the page arriving rather
   than like an animation playing. */
body.merchant-auth .lg-demo,
body.merchant-auth .auth-hero__badges { display: none !important; }

body.merchant-auth .auth-hero__main > * {
  animation: pdAuthIn 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
body.merchant-auth .auth-hero__main > *:nth-child(2) { animation-delay: 40ms; }
body.merchant-auth .auth-hero__main > *:nth-child(3) { animation-delay: 80ms; }
body.merchant-auth .auth-hero__main > *:nth-child(4) { animation-delay: 120ms; }
@keyframes pdAuthIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.merchant-auth .auth-hero__main > * { animation: none !important; }
}

/* ---- decorative glyphs -----------------------------------------------------
   What is left of Font Awesome on these pages is now only what carries meaning:
   the field glyphs (mail / user / lock), the password eye, and the merchant tile
   in the card header. These four were pure decoration — a key beside the words
   "Forgot Password?", a paper plane beside "Resend Email", an ⓘ beside "NEED
   HELP?", a headset beside "Support". Each one restates the label it sits next
   to, which is the tell that it is there to fill space. The brand mark is drawn,
   not a glyph, so nothing here touches it. */
body.merchant-auth .auth-card .login-recovery-icon,
body.merchant-auth .auth-card .login-resend-link i,
body.merchant-auth .auth-card .fa-circle-info,
body.merchant-auth .auth-card .fa-info-circle,
body.merchant-auth .auth-pd-support-link i {
  display: none !important;
}
/* The key sat in a styled circle wrapper, so hiding only the glyph left an
   empty grey dot beside "Forgot Password?" — the wrapper has to go too. */
body.merchant-auth .auth-card .login-recovery-link { gap: 0 !important; }

/* The primary action reads better as a verb alone. An arrow-into-door beside
   "Sign In to Merchant Portal", or a shopfront beside "Create account", adds a
   second thing to parse for no gain. */
body.merchant-auth .auth-card button[type="submit"] > i:first-child {
  display: none !important;
}