/* ==========================================================
   StarCards — v3 "Electric Plum & Gold" — AUTH PAGES (LIVE)
   Styles the Ultimate Member login (form_id 107, /login/) and
   register (form_id 108, /register-2/) forms to match the v3
   dashboard design system (see starcards-v3.css + preview-v3.html).

   This file RESTYLES Ultimate Member's REAL markup — it does NOT
   invent any classes. UM outputs:
     .um .um-<mode> .um-<form_id>        (form wrapper)
       > .um-form > form
           .um-field.um-field-<type>     (one row per field, has data-key)
             .um-field-label > label
             .um-field-area (or .um-field-area-password)
               input.um-form-field (+ .um-long when the field is full-width)
               .um-toggle-password > i.um-icon-eye
           .um-field-error               (per-field validation error)
       .um-col-alt                       (submit/links block)
         .um-center | .um-left .um-half | .um-right .um-half
           input.um-button#um-submit-btn (primary submit)
           a.um-button.um-alt            (secondary link button)
       p.um-notice / p.um-notice.err     (form-level notices)

   Everything is SCOPED under body.sc-auth-page (added via the
   theme's body_class filter) so it cannot leak to other pages.
   Login/register-only tweaks hang off body.sc-auth-login /
   body.sc-auth-register.

   Accessibility: low-contrast v3 tones are darkened to WCAG AA
   (muted ~#57536b, gold-ink #7a5500). A prefers-reduced-motion
   guard at the bottom disables the decorative NFC tap-tag ping.
   ========================================================== */

/* Design tokens (--sc-v3-*) moved to the shared starcards-v3-tokens.css,
   enqueued as a dependency of this stylesheet (see functions.php). */

/* ==========================================================
   Page canvas — full-height plum-tinted background.
   We strip GeneratePress chrome (header / nav / footer) so the
   auth card sits on a clean centered stage, like the comp.
   ========================================================== */
body.sc-auth-page {
  background:
    radial-gradient(120% 80% at 8% -10%, rgba(109, 40, 217, 0.20), transparent 55%),
    radial-gradient(90% 70% at 100% 110%, rgba(245, 179, 1, 0.10), transparent 55%),
    var(--sc-v3-bg) !important;
  color: var(--sc-v3-text);
  font-family: var(--sc-v3-body);
  min-height: 100vh;
}

/* Hide duplicated GeneratePress chrome on auth pages. */
body.sc-auth-page .inside-navigation,
body.sc-auth-page header.site-header,
body.sc-auth-page .site-info,
body.sc-auth-page .site-footer,
body.sc-auth-page .entry-title,
body.sc-auth-page .entry-header,
body.sc-auth-page .page-header {
  display: none !important;
}

/* Make the content stage own the viewport and center the card. */
body.sc-auth-page .site-content,
body.sc-auth-page #content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: clamp(1.2rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
  margin: 0 auto;
}

body.sc-auth-page .content-area,
body.sc-auth-page #primary {
  width: 100%;
  max-width: 460px;
  float: none;
  margin: 0 auto;
  padding: 0;
}

body.sc-auth-register .content-area,
body.sc-auth-register #primary {
  /* the register form is taller / has more fields — give it room */
  max-width: 480px;
}

/* Neutralise the default article card so our card is the only frame. */
body.sc-auth-page .inside-article,
body.sc-auth-page article,
body.sc-auth-page .entry-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.sc-auth-page ::selection {
  background: var(--sc-v3-primary);
  color: #fff;
}

/* ==========================================================
   REGISTER welcome hero (REFINEMENT 1)
   ----------------------------------------------------------
   Unlike /login/, /register-2/ has GeneratePress' per-page
   "disable title" OFF and carries real welcome copy authored
   into the page's .entry-content. On this install the welcome
   region renders as DIRECT children of .entry-content, in this
   exact source order, ABOVE the UM card:

     .entry-content
       > p > img  (PLATE-1.png) ............ duplicate StarCards
                                             brand graphic
       > h2 > strong "Witamy w StarCards" .. the welcome heading
       > p (empty)  ........................ spacer
       > p "Przy pierwszym skanie…"  ....... intro line 1
       > p "W każdej chwili…"  ............. intro line 2
       > p "Stwórz swoje konto teraz:"  .... intro line 3
       > .um.um-register.um-107  ........... the v3 card (kept)

   (Note: header.site-header / .entry-header / .entry-title are
   already hidden by the shared rule above — the GeneratePress
   logo bar therefore no longer paints. The remaining duplicate
   brand is the PLATE-1.png image inside .entry-content, hidden
   below.)

   DECISION: keep the welcome message, but lift it onto the plum
   stage as polished v3 hero copy sitting above the card — NOT
   raw theme chrome. We:
     1. hide the duplicate StarCards brand image (the card already
        shows the gold ★ + "StarCards" lockup);
     2. restyle the "Witamy w StarCards" h2 into a centered v3
        display heading (Sora, --sc-v3-text);
     3. restyle the intro paragraphs into centered v3 muted body
        copy (DM Sans, --sc-v3-muted), with sensible measure/space.

   Form fields live inside `.um` (never as `.entry-content > p`),
   so targeting `.entry-content > h2/p` touches ONLY the welcome.
   All scoped to body.sc-auth-register — login is untouched.
   ========================================================== */

/* the register stage stacks: [hero copy] then [card], centered */
body.sc-auth-register .entry-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 1. hide the duplicate StarCards brand image (PLATE-1.png).
      It's the only <img> that is a descendant of a direct
      `.entry-content > p`; the card's gold ★ + wordmark already
      carry the brand. */
body.sc-auth-register .entry-content > p:has(img),
body.sc-auth-register .entry-content > p > img {
  display: none !important;
}

/* 2. "Witamy w StarCards" heading -> centered v3 display hero */
body.sc-auth-register .entry-content > h2 {
  order: -2; /* keep above any reflowed welcome paragraphs */
  width: 100%;
  max-width: 30ch;
  text-align: center;
  font-family: var(--sc-v3-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.55rem, 4vw, 1.95rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  color: var(--sc-v3-text) !important;
  margin: 0 auto 0.55rem !important;
  padding: 0 !important;
}

/* the author wrapped the heading text in <strong>; keep it as the
   heading weight (not an extra-bold lump) so it reads as one line */
body.sc-auth-register .entry-content > h2 strong {
  font-weight: 700;
  color: inherit;
}

/* 3. intro paragraphs -> centered v3 muted body copy.
      Direct `.entry-content > p` are only the welcome lines
      (fields are inside `.um`). The empty spacer <p> collapses. */
body.sc-auth-register .entry-content > p {
  order: -1;
  width: 100%;
  max-width: 42ch;
  text-align: center;
  font-family: var(--sc-v3-body) !important;
  font-size: clamp(0.92rem, 2.6vw, 1rem) !important;
  line-height: 1.55 !important;
  color: var(--sc-v3-muted) !important;
  margin: 0 auto 0.4rem !important;
  padding: 0 !important;
}

/* collapse the empty spacer <p> the editor left between heading
   and intro so it doesn't add a stray gap */
body.sc-auth-register .entry-content > p:empty {
  display: none !important;
}

/* breathing room between the hero block and the v3 card */
body.sc-auth-register .entry-content > p:last-of-type {
  margin-bottom: 1.6rem !important;
}

/* links inside the intro copy follow the v3 link colour */
body.sc-auth-register .entry-content > p a {
  color: var(--sc-v3-primary);
  text-decoration: none;
}

body.sc-auth-register .entry-content > p a:hover,
body.sc-auth-register .entry-content > p a:focus {
  color: var(--sc-v3-primary-deep);
  text-decoration: underline;
}

/* the card stays last in the stage flow, full width of the column */
body.sc-auth-register .entry-content > .um {
  order: 0;
  width: 100%;
}

/* ==========================================================
   Card chrome — the Ultimate Member wrapper (.um) IS the white
   v3 card. We cannot add DOM, so the StarCards brand lockup is
   rendered with pseudo-elements on stable, always-present hosts:
     .um::before        -> top plum→gold accent bar
     .um-form::before   -> the gold ★ mark tile (line 1, centered)
     .um-form::after    -> the "StarCards" wordmark (line 2)
     form::before       -> the login/register sub-headline (line 3)
   The form's own fields follow in normal flow beneath them.
   ========================================================== */
body.sc-auth-page .um {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto !important;
  background: var(--sc-v3-surface);
  border: 1px solid var(--sc-v3-line);
  border-radius: var(--sc-v3-r-lg);
  box-shadow: var(--sc-v3-shadow);
  padding: clamp(1.8rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.2rem) clamp(1.6rem, 4vw, 2.2rem);
  overflow: hidden;
}

body.sc-auth-register .um {
  max-width: 480px;
}

/* top plum→gold accent bar (decorative, echoes the v3 brand) */
body.sc-auth-page .um::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sc-v3-primary), var(--sc-v3-star));
  z-index: 2;
}

/* ==========================================================
   Brand lockup — gold ★ tile + "StarCards" wordmark + sub-copy,
   stacked centered above the form via flex order on .um-form.
   ========================================================== */
body.sc-auth-page .um-form {
  position: relative;
  z-index: 1;
  max-width: none !important;
  display: flex;
  flex-direction: column;
}

/* line 1 — gold star mark tile (echoes .brand .mark in preview-v3) */
body.sc-auth-page .um-form::before {
  content: "★";
  order: -3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--sc-v3-primary), var(--sc-v3-primary-deep));
  color: var(--sc-v3-star);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 12px 26px -14px rgba(76, 29, 149, 0.8);
  margin-bottom: 0.65rem;
}

/* line 2 — the "StarCards" wordmark */
body.sc-auth-page .um-form::after {
  content: "StarCards";
  order: -2;
  align-self: center;
  font-family: var(--sc-v3-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--sc-v3-text);
  line-height: 1.1;
}

/* line 3 — the login/register sub-headline (hosted on <form>::before
   so it stacks under the wordmark and above the first field) */
body.sc-auth-page .um-form form {
  margin: 0;
  display: flex;
  flex-direction: column;
}

body.sc-auth-page .um-form form::before {
  order: -1;
  align-self: center;
  text-align: center;
  font-size: 0.92rem;
  color: var(--sc-v3-muted);
  margin: 0.4rem auto 1.7rem;
  max-width: 32ch;
}

body.sc-auth-login .um-form form::before {
  content: "Zaloguj się, aby zarządzać swoimi kartami StarCards.";
}

body.sc-auth-register .um-form form::before {
  content: "Załóż konto i zacznij zbierać opinie kartami StarCards.";
}

/* ==========================================================
   Field rows
   ========================================================== */

/* one row per field */
body.sc-auth-page .um-field {
  position: relative;
  margin: 0 0 1rem;
  padding: 0;
  clear: both;
}

/* labels (.um-field-label label) */
body.sc-auth-page .um-field-label {
  margin-bottom: 0.4rem;
}

body.sc-auth-page .um-field-label label {
  display: block;
  font-family: var(--sc-v3-body);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--sc-v3-text);
  margin: 0;
  padding: 0;
}

body.sc-auth-page .um-field-label-icon {
  display: none; /* keep labels clean; UM icon fonts may be absent */
}

/* input area */
body.sc-auth-page .um-field-area {
  position: relative;
}

/* text / email / password inputs */
body.sc-auth-page .um input.um-form-field,
body.sc-auth-page .um input[type='text'],
body.sc-auth-page .um input[type='email'],
body.sc-auth-page .um input[type='password'],
body.sc-auth-page .um input[type='tel'],
body.sc-auth-page .um input[type='url'],
body.sc-auth-page .um input.um-long {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sc-v3-body);
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--sc-v3-text);
  background: var(--sc-v3-bg);
  border: 1px solid var(--sc-v3-line);
  border-radius: var(--sc-v3-r);
  padding: 0.72rem 0.9rem;
  height: auto;
  box-shadow: none;
  transition: border-color 0.18s var(--sc-v3-ease), box-shadow 0.18s var(--sc-v3-ease),
    background 0.18s var(--sc-v3-ease);
}

/* placeholder darkened for AA on the faint-violet field bg */
body.sc-auth-page .um input.um-form-field::placeholder,
body.sc-auth-page .um input::placeholder {
  color: #6f6a85;
  opacity: 1;
}

body.sc-auth-page .um input.um-form-field:focus,
body.sc-auth-page .um input[type='text']:focus,
body.sc-auth-page .um input[type='email']:focus,
body.sc-auth-page .um input[type='password']:focus {
  outline: none;
  background: var(--sc-v3-surface);
  border-color: var(--sc-v3-primary);
  box-shadow: var(--sc-v3-ring);
}

/* error state on the input (UM adds .um-error to the field input) */
body.sc-auth-page .um input.um-error,
body.sc-auth-page .um input.um-form-field.um-error {
  border-color: var(--sc-v3-danger);
}

/* password field has a show/hide toggle inside .um-field-area-password */
body.sc-auth-page .um-field-area-password {
  position: relative;
}

body.sc-auth-page .um-field-area-password input {
  padding-right: 2.8rem;
}

body.sc-auth-page .um-toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.8rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--sc-v3-muted);
  background: transparent;
  border: 0;
  border-radius: 0 var(--sc-v3-r) var(--sc-v3-r) 0;
  transition: color 0.18s var(--sc-v3-ease);
}

body.sc-auth-page .um-toggle-password:hover {
  color: var(--sc-v3-primary);
}

/* ==========================================================
   "Keep me signed in" checkbox (UM renders .um-field-checkbox)
   ========================================================== */
body.sc-auth-page .um-field-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--sc-v3-muted);
  margin: 0;
  font-weight: 500;
}

body.sc-auth-page .um-field-checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

body.sc-auth-page .um-field-checkbox-state {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid var(--sc-v3-line);
  border-radius: 6px;
  background: var(--sc-v3-bg);
  color: transparent;
  font-size: 0.85rem;
  line-height: 1;
  transition: all 0.16s var(--sc-v3-ease);
}

body.sc-auth-page .um-field-checkbox.active .um-field-checkbox-state {
  background: var(--sc-v3-primary);
  border-color: var(--sc-v3-primary);
  color: #fff;
}

body.sc-auth-page .um-field-checkbox-option {
  line-height: 1.2;
}

/* ==========================================================
   Submit + secondary-link block (.um-col-alt)
   ========================================================== */
body.sc-auth-page .um-col-alt {
  margin-top: 1.1rem;
}

body.sc-auth-page .um-center {
  text-align: center;
}

/* clearfix helper UM uses */
body.sc-auth-page .um-clear {
  clear: both;
}

/* split button row (submit left / link right) -> stack full-width */
body.sc-auth-page .um-col-alt .um-left.um-half,
body.sc-auth-page .um-col-alt .um-right.um-half {
  float: none;
  width: 100%;
  display: block;
}

body.sc-auth-page .um-col-alt .um-left.um-half {
  margin-bottom: 0.7rem;
}

/* PRIMARY submit -> v3 .btn-primary (pill, plum, hover lift, tap ripple) */
body.sc-auth-page .um input.um-button,
body.sc-auth-page .um a.um-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sc-v3-body);
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.2;
  padding: 0.82rem 1.4rem;
  border-radius: var(--sc-v3-pill);
  border: 1px solid var(--sc-v3-primary);
  background: var(--sc-v3-primary);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 12px 26px -12px rgba(109, 40, 217, 0.8);
  transition: transform 0.18s var(--sc-v3-ease), box-shadow 0.18s var(--sc-v3-ease),
    background 0.18s var(--sc-v3-ease), color 0.18s var(--sc-v3-ease);
}

body.sc-auth-page .um input.um-button:hover,
body.sc-auth-page .um input.um-button:focus,
body.sc-auth-page .um a.um-button:not(.um-alt):hover,
body.sc-auth-page .um a.um-button:not(.um-alt):focus {
  transform: translateY(-2px);
  background: var(--sc-v3-primary-deep);
  border-color: var(--sc-v3-primary-deep);
  color: #fff;
}

/* ----------------------------------------------------------
   PRIMARY CTA colour lock -> PLUM, not gold (REFINEMENT 2).
   The child theme's style.css ships a GOLD gradient on the
   submit button with BOTH !important and an ID selector:
     #um-submit-btn, .um input[type='submit'].um-button {
       background: linear-gradient(135deg,#f5b932,#d49a1f) !important;
       color:#0b0f17 !important; border:none !important; ... }
   That out-specifies our plain class rule above, so the button
   was rendering amber. To win the cascade we MATCH its ID
   specificity (include #um-submit-btn) AND use !important here.
   `background-image: none` clears the inherited gold gradient
   (the `background` shorthand alone could be re-layered by other
   UM rules, so we null the image explicitly). Gold (--sc-v3-star)
   is now reserved ONLY for the ★ brand mark + top accent bar.
   White text on #6D28D9 passes WCAG AA (contrast ~5.3:1).
   ---------------------------------------------------------- */
body.sc-auth-page .um input[type='submit'].um-button,
body.sc-auth-page .um input.um-button#um-submit-btn,
body.sc-auth-page #um-submit-btn {
  background: var(--sc-v3-primary) !important;
  background-image: none !important;
  border: 1px solid var(--sc-v3-primary) !important;
  color: #fff !important;
  border-radius: var(--sc-v3-pill) !important;
}

body.sc-auth-page .um input[type='submit'].um-button:hover,
body.sc-auth-page .um input[type='submit'].um-button:focus,
body.sc-auth-page .um input.um-button#um-submit-btn:hover,
body.sc-auth-page .um input.um-button#um-submit-btn:focus,
body.sc-auth-page #um-submit-btn:hover,
body.sc-auth-page #um-submit-btn:focus {
  background: var(--sc-v3-primary-deep) !important;
  background-image: none !important;
  border-color: var(--sc-v3-primary-deep) !important;
  color: #fff !important;
}

/* tap-wave ripple echo of the NFC motif, on the primary action */
body.sc-auth-page .um input.um-button {
  position: relative;
}

body.sc-auth-page .um input.um-button::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--sc-v3-primary);
  opacity: 0;
  pointer-events: none;
}

body.sc-auth-page .um input.um-button:hover::after {
  animation: sc-auth-tap-ripple 1.1s var(--sc-v3-ease) infinite;
}

@keyframes sc-auth-tap-ripple {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* SECONDARY button (.um-button.um-alt) -> quiet outline pill */
body.sc-auth-page .um a.um-button.um-alt {
  background: var(--sc-v3-surface);
  border: 1px solid var(--sc-v3-line);
  color: var(--sc-v3-text);
  box-shadow: none;
}

body.sc-auth-page .um a.um-button.um-alt:hover,
body.sc-auth-page .um a.um-button.um-alt:focus {
  transform: translateY(-2px);
  background: var(--sc-v3-bg-2);
  border-color: var(--sc-v3-primary);
  color: var(--sc-v3-primary);
}

/* ==========================================================
   Social login buttons (.um-button.um-icon-* / .um-social)
   ========================================================== */
body.sc-auth-page .um-social {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

body.sc-auth-page .um .um-button[class*='um-icon-'] {
  background: var(--sc-v3-surface);
  border: 1px solid var(--sc-v3-line);
  color: var(--sc-v3-text);
  box-shadow: none;
}

body.sc-auth-page .um .um-button[class*='um-icon-']:hover {
  transform: translateY(-2px);
  border-color: var(--sc-v3-primary);
  color: var(--sc-v3-primary);
  background: var(--sc-v3-bg-2);
}

/* ==========================================================
   Helper / secondary text links (links inside .um-col-alt etc.)
   ========================================================== */
body.sc-auth-page .um a {
  color: var(--sc-v3-primary);
  text-decoration: none;
  transition: color 0.18s var(--sc-v3-ease);
}

body.sc-auth-page .um a:not(.um-button):hover,
body.sc-auth-page .um a:not(.um-button):focus {
  color: var(--sc-v3-primary-deep);
  text-decoration: underline;
}

/* UM's small alt links row (e.g. "Forgot your password?") */
body.sc-auth-page .um-col-alt-b,
body.sc-auth-page .um-col-alt .um-link-alt {
  text-align: center;
  font-size: 0.88rem;
  color: var(--sc-v3-muted);
}

/* ==========================================================
   Notices / errors
   ========================================================== */
body.sc-auth-page .um-notice {
  border-radius: var(--sc-v3-r);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid var(--sc-v3-line);
  background: var(--sc-v3-bg-2);
  color: var(--sc-v3-text);
}

body.sc-auth-page .um-notice.err {
  background: var(--sc-v3-danger-wash);
  border-color: var(--sc-v3-danger);
  color: var(--sc-v3-danger-ink);
}

body.sc-auth-page .um-notice.success {
  background: var(--sc-v3-success-wash);
  border-color: var(--sc-v3-success);
  color: var(--sc-v3-success);
}

/* the inline close glyph UM injects in notices */
body.sc-auth-page .um-notice i {
  cursor: pointer;
  margin-right: 0.4rem;
  opacity: 0.7;
}

/* per-field validation errors (.um-field-error) */
body.sc-auth-page .um-field-error {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sc-v3-danger-ink);
  background: transparent;
  border: 0;
  padding: 0;
}

body.sc-auth-page .um-field-error .um-field-arrow {
  display: none; /* drop UM's caret-up glyph; keep clean inline text */
}

/* informational field notices */
body.sc-auth-page .um-field-notice {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--sc-v3-muted);
}

/* ==========================================================
   Decorative NFC tap-tag (the v3 signature), floated beside the
   card on wide screens. Rendered purely via body pseudo-elements
   so NO plugin markup is touched. Carries no text the user must
   read and no interaction -> decorative only.
   ========================================================== */
@media (min-width: 1100px) {
  /* the violet tap-tag body with a gold ★ + faint contactless ring */
  body.sc-auth-page::before {
    content: "★";
    position: fixed;
    top: 50%;
    left: clamp(2rem, 11vw, 11rem);
    transform: translateY(-50%) rotate(-6deg);
    width: 230px;
    height: 145px;
    border-radius: 18px;
    padding: 1rem 1.1rem;
    box-sizing: border-box;
    background:
      radial-gradient(46px 46px at calc(100% - 30px) 30px, transparent 20px, rgba(255, 255, 255, 0.5) 21px, transparent 22px),
      linear-gradient(145deg, var(--sc-v3-primary), var(--sc-v3-primary-deep));
    box-shadow: 0 26px 50px -22px rgba(76, 29, 149, 0.7);
    color: var(--sc-v3-star);
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
  }

  /* the tap-tag wordmark, anchored to the tag's lower-left */
  body.sc-auth-page::after {
    content: "StarCards";
    position: fixed;
    top: calc(50% + 2.4rem);
    left: clamp(3.1rem, 12.1vw, 12.1rem);
    transform: rotate(-6deg);
    font-family: var(--sc-v3-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: #fff;
    pointer-events: none;
    z-index: 1;
  }
}

/* ==========================================================
   Mobile / small screens
   ========================================================== */
@media (max-width: 520px) {
  body.sc-auth-page .um {
    padding: 1.5rem 1.15rem 1.6rem;
    border-radius: var(--sc-v3-r);
  }
}

/* ==========================================================
   Keyboard focus visibility — WCAG
   ========================================================== */
body.sc-auth-page .um a:focus-visible,
body.sc-auth-page .um input:focus-visible,
body.sc-auth-page .um .um-button:focus-visible,
body.sc-auth-page .um .um-toggle-password:focus-visible {
  outline: 3px solid var(--sc-v3-primary);
  outline-offset: 2px;
}

/* ==========================================================
   prefers-reduced-motion guard (disables the button ripple +
   any transitions on this page)
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  body.sc-auth-page *,
  body.sc-auth-page *::before,
  body.sc-auth-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Hide UM's per-field "?" tooltip bubble — it just repeats the field label and
   reads as an orphaned grey circle under the label in the v3 layout. */
body.sc-auth-page .um .um-tip,
body.sc-auth-page .um .um-field-label .um-tip,
body.sc-auth-page .um span.um-tip-w {
  display: none !important;
}