/* ══════════════════════════════════════════════════════════════════════
   FakeDono — shared link style
   ──────────────────────────────────────────────────────────────────────
   Every standalone link on the public pages (back links, "open app",
   "go to login", nav sign-in / sign-up, ban appeal, …) uses this one
   component so the whole site matches the app's button language
   (custom.css .btn / .btn-ghost / .btn-primary and #page-settings .s-tabs).

   Usage
     <a class="fd-link">← Back to Sign In</a>              ghost pill (default)
     <a class="fd-link fd-link--primary">Sign Up Free</a>  purple pill (main CTA)
     <a class="fd-link fd-link--sm">…</a>                  smaller
     <a class="fd-link fd-link--lg">…</a>                  larger
     <a class="fd-link fd-link--sm fd-link--center">…</a>  centred under a card

   Loaded AFTER each page's inline <style>, so it also wins the
   specificity tie against page rules such as `.nav-links a`.
   ══════════════════════════════════════════════════════════════════════ */

@import url("/motion.css");

a.fd-link,
button.fd-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--b1, #2A2A3C);
  background: transparent;
  color: var(--t2, #B0B0CC);
  font-family: var(--font, 'Outfit', system-ui, -apple-system, sans-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}

a.fd-link:hover,
button.fd-link:hover {
  background: var(--s2, #1A1A24);
  border-color: var(--primary, #9146FF);
  color: var(--t1, #EEEEF5);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--primary-dim, rgba(145, 70, 255, .2));
}

a.fd-link:active,
button.fd-link:active {
  transform: translateY(0);
  box-shadow: none;
}

a.fd-link:focus-visible,
button.fd-link:focus-visible {
  outline: 2px solid var(--primary, #9146FF);
  outline-offset: 2px;
}

/* ── Primary variant — the one call-to-action on the page ─────────── */
a.fd-link--primary,
button.fd-link--primary {
  background: var(--primary, #9146FF);
  border-color: var(--primary, #9146FF);
  color: #fff;
  box-shadow: 2px 2px 0 var(--primary-glow, rgba(145, 70, 255, .35));
}

a.fd-link--primary:hover,
button.fd-link--primary:hover {
  background: var(--primary-h, #7C3AED);
  border-color: var(--primary-h, #7C3AED);
  color: #fff;
  box-shadow: 4px 4px 0 var(--primary-glow, rgba(145, 70, 255, .4));
}

/* ── Sizes ──────────────────────────────────────────────────────────
   Type-qualified so they out-rank the base a.fd-link / button.fd-link
   rule above (same specificity, later in source). */
a.fd-link--lg, button.fd-link--lg { padding: 12px 24px; font-size: 14px; }
a.fd-link--sm, button.fd-link--sm { padding: 7px 14px; font-size: 12.5px; }

/* ── Centred on its own line (e.g. under a card) ──────────────────── */
a.fd-link--center, button.fd-link--center {
  display: flex;
  width: fit-content;
  margin: 20px auto 0;
}

/* ── Arrows inside the pill ───────────────────────────────────────── */
a.fd-link svg,
button.fd-link svg { flex-shrink: 0; }

@media (max-width: 600px) {
  a.fd-link,
  button.fd-link { padding: 8px 14px; font-size: 12.5px; }
  a.fd-link--lg, button.fd-link--lg { padding: 11px 20px; font-size: 13.5px; }
  a.fd-link--center, button.fd-link--center { margin-top: 16px; }
}