/* Scribe — Invite friends.
 *
 * Loaded after billing.css: the dialog is one of billing's (.billing-dialog),
 * with its backdrop, scroll lock, heading and close button, so this file adds
 * only the link and the rules, and narrows the dialog to them. Built from
 * styles.css's tokens, like billing.css and archive.css. Everything here is
 * created by lib/referrals.js. */

/* A link and a few lines: narrower than the archive. */
.billing-dialog.referrals-dialog { width: min(560px, calc(100vw - 32px)); }
.referrals-lead { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.referrals-status { margin: 18px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.referrals-status.bad { color: var(--danger-text); }
.referrals-status button { margin-left: 6px; font-size: 12px; padding: 5px 12px; }

.referrals-content { margin-top: 18px; }
/* The link and its buttons on one line; the link takes what the buttons leave. */
.referrals-link { display: flex; align-items: center; gap: 6px; }
/* Two classes, to outrank styles.css's input[type="text"] (its 150px basis, 12px and panel fill). */
.referrals-link .referrals-input { flex: 1 1 auto; min-width: 0; font-size: 13px; background: var(--bg); }
.referrals-link button { font-size: 12px; padding: 9px 14px; white-space: nowrap; }
/* "Copied" is longer than "Copy": a minimum width keeps the button from jumping. */
.referrals-link .primary { min-width: 82px; }
/* How to copy by hand, in the voice of the sign-in notice. */
.referrals-copy-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 12px; }

.referrals-rules { margin-top: 16px; }
.referrals-rules .referrals-heading:first-child { margin-top: 0; }
.referrals-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.referrals-list li { margin: 0 0 4px; }
.referrals-heading { margin: 18px 0 0; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
/* Why bonus assignments earned aren't left, at an address the Free plan isn't for. */
.referrals-bonus-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
/* Heard, not seen: "Link copied" for a screen reader (tour.css's .tour-live). */
.referrals-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.referrals-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.referrals-foot button { font-size: 12px; }
.referrals-terms { color: var(--accent); font-size: 12px; font-weight: 550; text-underline-offset: 3px; }

/* The invite banner at the top of the main column: billing.css's banner, built by
   lib/referrals.js (createReferralBanner) with billing's classes. */
.referrals-banner .billing-banner-actions button { white-space: nowrap; }

/* On a phone the buttons go under the link and share its width. */
@media (max-width: 740px) {
  .referrals-link { flex-wrap: wrap; }
  .referrals-link .referrals-input { flex-basis: 100%; }
  .referrals-link button { flex: 1 1 auto; }
}