/* =============================================================================================
   Invite a running buddy (features.invites): the invite sheet (Components/Recruit/InviteSheet), the
   "Send to a friend" link sheet (ShareLinkSheet), the invite nudge (RecruitNudgeHost), the inline
   cards (RecruitCard) and the Inviter chip on profiles. Also the upgrade sheet's body (AccessHost:
   UpgradeSheet on .sw-up). SwSheet draws the sheets' chrome; this is their body.
   Plain CSS on the sw.css tokens (Tailwind does not compile this file, so no app.min.css rebuild is
   needed for it). Linked after sw.css by Supwell/wwwroot/index.html (app) and
   Supwell.Web/Components/App.razor (web). Unlayered, like activation.css and alerts.css, so these
   component classes beat the kit's layered ones and MAUI's css/mobile.css. No motion here: nothing
   for prefers-reduced-motion to switch off.
   ============================================================================================= */

/* ---- sheet body ---------------------------------------------------------------------------- */
.sw-inv { display: flex; flex-direction: column; gap: 14px; color: var(--sw-ink); font-family: var(--sw-font-inter); letter-spacing: var(--sw-tracking); }
.sw-inv__pitch { margin: 0; font: 500 15px/22px var(--sw-font-inter); color: var(--sw-ink); text-wrap: pretty; }
.sw-inv__note { margin: 0; padding: 10px 12px; border-radius: var(--sw-r-md); background: var(--sw-ground-2); font: 500 13px/18px var(--sw-font-inter); color: var(--sw-ink); }
.sw-inv__error { margin: 0; padding: 10px 12px; border-radius: var(--sw-r-md); background: var(--sw-danger-wash); font: 500 13px/18px var(--sw-font-inter); color: var(--sw-danger); }
.sw-inv__ok { margin: 0; padding: 10px 12px; border-radius: var(--sw-r-md); background: var(--sw-go-wash); font: 600 13px/18px var(--sw-font-inter); color: var(--sw-go); }
.sw-inv__hint { margin: -8px 0 0; font: 500 12px/18px var(--sw-font-inter); color: var(--sw-ink-muted); }

/* The link (and the code) in a sunken well: the input language, read-only. */
.sw-inv__box {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px;
  border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-ground-2);
}
.sw-inv__url { min-width: 0; font: 500 14px/20px var(--sw-font-inter); color: var(--sw-ink); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
/* A run's or listing's link carries a long signature: one line, cut at the end. */
.sw-inv__url--one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
.sw-inv__coderow { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 8px; border-top: .5px solid var(--sw-line-2); }
.sw-inv__code { font: 700 16px/20px var(--sw-font-mono); letter-spacing: .08em; color: var(--sw-olive); font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; }

/* N runners joined, and the Inviter chip. */
.sw-inv__stats { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.sw-inv__joined { min-width: 0; font: 600 14px/20px var(--sw-font-inter); color: var(--sw-ink); font-variant-numeric: tabular-nums; }
.sw-inv__chip { flex: none; }
.sw-inv__chip.is-locked { background: transparent; border-color: var(--sw-line); color: var(--sw-ink-muted); border-style: dashed; }

/* The earned chip on a member's profile (UserProfile, under the "Joined" line), shown to everyone. It
   takes the height and top gap of the "Follows you" tag (21px, 6px), so the two share one row. */
.sw-inv-badge { min-height: 21px; margin: 6px 6px 0 0; padding: 0 8px 0 6px; gap: 4px; vertical-align: top; }

/* "Invited by someone? Enter their code" */
.sw-inv__claim { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding-top: 14px; border-top: .5px solid var(--sw-line-2); }
.sw-inv__claimrow { display: flex; align-items: stretch; gap: 8px; }
.sw-inv__input { flex: 1 1 auto; min-width: 0; font-family: var(--sw-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.sw-inv__input::placeholder { text-transform: none; letter-spacing: .06em; }
.sw-inv__claimrow .sw-btn { flex: none; }

/* ---- the invite nudge (Components/Recruit/RecruitNudgeHost): after a sale or a faster PR -------- */
.sw-rn { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 2px 4px 4px; text-align: center; color: var(--sw-ink); }
/* A person is a circle (avatars), so the invite glyph sits in one. */
.sw-rn__glyph { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sw-olive-wash); color: var(--sw-olive); }
.sw-rn__t { margin: 4px 0 0; font: 400 24px/28px var(--sw-font-serif); font-synthesis: none; letter-spacing: -.01em; color: var(--sw-olive); text-wrap: balance; }
.sw-rn__s { margin: 0; font: 500 14px/20px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink-muted); text-wrap: pretty; }

/* ---- the upgrade sheet (Access/UpgradeSheet): MJ's "Membership upsell" frames ------------------
   A Guest on a Member action. Eyebrow, Space Grotesk headline, the line for what was tapped, the
   benefits card with the price, then Join Us over Not Now in the footer. The brand olive (--sw-olive, which
   took over MJ's olive) for the headline, the card and the price; small grey copy on the AA muted token. */
.sw-sheet--upsell .sw-sheet__head { border-bottom: 0; padding-bottom: 0; }
.sw-sheet--upsell .sw-sheet__foot { border-top: 0; padding-top: 4px; }
.sw-up { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 4px; text-align: center; color: var(--sw-ink); }
.sw-up__eyebrow { margin: 0; font: 500 14px/20px var(--sw-font-inter); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink-muted); }
.sw-up__t { margin: 14px 0 0; max-width: 260px; font: 700 26px/32px var(--sw-font-head); letter-spacing: -.01em; color: var(--sw-olive); text-wrap: balance; }
.sw-up__s { margin: 12px 0 0; max-width: 280px; font: 400 14px/18px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink-muted); text-wrap: pretty; }
.sw-up__card { align-self: stretch; margin-top: 20px; padding: 16px 16px 14px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card); text-align: left; }
.sw-up__card-t { margin: 0; font: 700 15px/20px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-olive); }
.sw-up__list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font: 400 15px/20px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-olive); }
.sw-up__list > li::before { content: "\2192\00a0"; }
.sw-up__price { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--sw-olive); color: var(--sw-olive); }
.sw-up__amount { font: 700 56px/1 var(--sw-font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sw-up__per { font: 500 15px/20px var(--sw-font-inter); color: var(--sw-ink-muted); }
.sw-up__renews { margin: 10px 0 0; font: 400 12px/16px var(--sw-font-inter); color: var(--sw-ink-muted); }
.sw-up__actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
.sw-up__actions > .sw-btn--primary { border-radius: 14px; }
.sw-up__later {
  min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 500 15px/20px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink-muted);
}
.sw-up__later:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; border-radius: var(--sw-r-md); }

/* ---- inline cards (RecruitCard): RunDetails' great-run card and the Members directory card -------
   The run page's visibility row (.sw-vis on .sw-surface) with a glyph in front and a close disc at
   the end. At 375px the line wraps to two lines and the buttons keep their size. */
.sw-rcard { gap: 10px; padding: 8px 4px 8px 12px; }
.sw-rcard__glyph { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sw-olive-wash); color: var(--sw-olive); }
.sw-rcard .sw-vis__t { text-wrap: pretty; }
.sw-rcard__close {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: -4px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--sw-ink-muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sw-rcard__close:focus-visible, .sw-rcard .sw-vis__btn:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
/* Members: between the sort control and the count row, as wide as the search field above it (28rem on
   the web's desktop, Members.razor desk:max-w-md; the app's field spans its column at every width). */
.sw-rcard--members { margin-top: 12px; }
@media (min-width: 1024px) { :where(html:not(.sw-app)) .sw-rcard--members { max-width: 28rem; } }