/* First-action education moment.
 *
 * The shell deliberately reuses the approved milestone-modal treatment from
 * `feed page/feed.css` -- overlay scrim, gradient-border card, radial glow,
 * close affordance, entry animation -- so this reads as the same product
 * rather than a second modal language. Values are copied verbatim rather than
 * re-picked; per-surface duplication of a shared component is already this
 * project's convention (.lb-feed-notif__roomIcon lives identically in three
 * stylesheets, and private-rooms.css copies .lb-crush-btn the same way).
 *
 * Deliberately LIGHTER than the Match celebration: smaller card, smaller
 * headline, softer glow. A first Follow is a nice moment, not a Match.
 */

.fam-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 12, .74);
  box-sizing: border-box;
}

/* Same three-point radial language as .lb-milestone-modal__glow, at the
   non-celebrate intensity -- this is the quieter sibling. */
.fam-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,79,191,.16), transparent 55%),
    radial-gradient(circle at 65% 55%, rgba(132,89,255,.14), transparent 58%),
    radial-gradient(circle at 35% 65%, rgba(0,224,211,.12), transparent 58%);
}

/* Gradient hairline border over an opaque fill, exactly as
   .lb-milestone-modal__body. max-width is 340 rather than 380: this moment
   carries less content and should not occupy Match-sized real estate. */
.fam-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 26px 24px 20px;
  border-radius: 22px;
  background:
    linear-gradient(rgba(9,11,18,.98), rgba(9,11,18,.98)) padding-box,
    linear-gradient(135deg, rgba(255,79,191,.55), rgba(132,89,255,.5) 52%, rgba(0,224,211,.5)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  animation: fam-in .32s cubic-bezier(.2,.8,.3,1);
}

@keyframes fam-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fam-card { animation: none; }
}

/* Copied from .lb-milestone-modal__close. */
.fam-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,14,22,.7);
  color: rgba(246,241,255,.85);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

/* ── 1. HERO: the screenshotable half ──────────────────────────────────────
   Everything above the hairline is designed to stand alone in a screenshot:
   brand mark, headline, one celebratory line, and the counterpart where one
   exists. No survey furniture may appear in this region. */
.fam-hero {
  display: grid;
  gap: 6px;
  justify-items: center;
  width: 100%;
  padding: 0 0 2px;
}

/* Sized to be legible in a screenshot rather than decorative. This is the
   only thing in the card that tells a stranger which product they are
   looking at, so it gets real presence -- while staying a signature, not an
   advertisement. Approved wordmark asset, unmodified. */
.fam-brand {
  height: 26px;
  width: auto;
  margin-bottom: 2px;
  opacity: .95;
}

/* 21px rather than the Match modal's 24px -- still the loudest thing in the
   card, without borrowing the weight of a bigger moment. */
.fam-title {
  margin: 0;
  font-family: Quicksand, "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
}

/* The one line that carries the feeling. Brand gradient because this is the
   achievement, not the explanation. */
.fam-celebration {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  background: linear-gradient(105deg, #ff4fbf, #cf57e8 40%, #4f66ff 70%, #00e0d3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The curiosity hook. Plain white rather than gradient so it does not compete
   with the celebration line directly above it. */
.fam-possibility {
  margin: 0;
  max-width: 28ch;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(246,241,255,.82);
}

/* Counterpart identity — public display data only. */
.fam-counterpart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 5px 12px 5px 5px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}

.fam-counterpart__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,.08);
}

.fam-counterpart__name {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(246,241,255,.92);
}

/* ── 2. BODY: education + feedback, deliberately quieter ───────────────────
   The hairline is the line a screenshot naturally crops at. */
.fam-body {
  width: 100%;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: 9px;
  justify-items: center;
}

/* Deliberately quieter and smaller than the hero. Education supports the
   moment; it must never be the reason the card is tall. */
.fam-education {
  margin: 0;
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(246,241,255,.66);
}

/* ── One-shot confetti ─────────────────────────────────────────────────────
   Behind the card (z-index below .fam-card) so it can never sit on top of the
   copy. Runs once — `forwards` with no iteration count — and the element is
   removed after the run, so nothing loops and nothing lingers. */
.fam-confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fam-confetti i {
  position: absolute;
  top: -12px;
  width: 6px;
  height: 10px;
  border-radius: 1px;
  opacity: 0;
  animation: fam-confetti-fall 1.25s cubic-bezier(.25,.7,.4,1) forwards;
}

@keyframes fam-confetti-fall {
  0%   { opacity: 0; transform: translate3d(0,-10px,0) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--fam-drift,0), 300px, 0) rotate(220deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fam-confetti { display: none; }
}

/* ── 3. Feedback: clearly optional, visually quieter again ─────────────── */
/* No border of its own. .fam-body already draws the single hairline that
   separates the celebration from everything beneath it; a second rule here
   stacked two dividers a few pixels apart and was a large part of why the
   card read as a receipt rather than a card. */
.fam-feedback {
  width: 100%;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.fam-feedback[hidden] { display: none; }

.fam-feedback__q {
  margin: 0;
  font-size: 12.5px;
  color: rgba(246,241,255,.62);
}

.fam-ratings {
  display: flex;
  gap: 8px;
}

.fam-rating {
  width: 44px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}

.fam-rating:hover { transform: translateY(-1px); }

/* Selection is carried by the brand gradient border rather than a fill, so a
   chosen face still reads as itself. */
.fam-rating.is-selected {
  border-color: transparent;
  background:
    linear-gradient(rgba(18,14,28,.96), rgba(18,14,28,.96)) padding-box,
    linear-gradient(105deg, #ff4fbf, #cf57e8, #4f66ff, #00e0d3) border-box;
  transform: translateY(-1px);
}

.fam-rating:focus-visible {
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}

.fam-noteToggle {
  border: 0;
  background: none;
  padding: 0;
  color: rgba(246,241,255,.5);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.fam-noteToggle[hidden] { display: none; }
.fam-noteWrap[hidden] { display: none; }

/* The counter used to be right-aligned while the textarea filled the width,
   which read as lopsided even though the box itself was centred. Both are now
   centred on the same axis as everything else in the card, and the field is
   inset slightly so it does not run wall-to-wall against the card padding. */
.fam-noteWrap {
  width: 100%;
  max-width: 268px;
  margin: 0 auto;
  display: grid;
  gap: 4px;
  justify-items: center;
}

.fam-note {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: #f4f2f8;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
}

.fam-note:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 1px;
}

.fam-noteCount {
  font-size: 10.5px;
  color: rgba(246,241,255,.38);
}

.fam-noteCount.is-near { color: #ff8fa8; }

.fam-thanks {
  margin: 8px 0 2px;
  font-size: 13.5px;
  color: rgba(246,241,255,.82);
}

/* ── Actions ───────────────────────────────────────────────────────────── */
.fam-actions { width: 100%; display: flex; justify-content: center; }
.fam-actions[hidden] { display: none; }

/* Canonical forward-action button, copied VERBATIM from
   `feed page/feed.css` (.lb-crush-btn / --primary). Not re-picked by eye.
   The shimmer variant is omitted: it is a one-shot celebration reveal for the
   Match modal, and this moment is deliberately quieter. */
.lb-crush-btn {
  margin-top: 8px;
  width: 100%;
  max-width: 280px;
  height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}

.lb-crush-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}

.lb-crush-btn--primary {
  position: relative;
  overflow: hidden;
  border: none;
  background: linear-gradient(105deg, #ff4fbf, #cf57e8 40%, #4f66ff 70%, #00e0d3);
  color: #fff;
}

.lb-crush-btn--primary:hover:not(:disabled) { filter: brightness(1.06); }
.lb-crush-btn--primary:active:not(:disabled) { transform: translateY(1px); }

.fam-primary { height: 42px; font-size: 14px; }

/* ── 4. Learn more: quiet tertiary, only rendered when a real destination
       is configured ─────────────────────────────────────────────────────── */
.fam-learn {
  margin-top: 2px;
  color: rgba(246,241,255,.5);
  font-size: 12px;
  text-decoration: none;
}

.fam-learn:hover { color: rgba(246,241,255,.75); }

/* ── First Crush in the real Crush host ───────────────────────────────────
   Uses the approved First Action visual system above, but without launching
   .fam-overlay or .fam-card. The existing Crush/Match modal remains the host;
   these rules only make the frozen milestone treatment fit inside it. */
.lb-first-crush-host {
  width: 100%;
  display: grid;
  justify-items: center;
  text-align: center;
}

.lb-first-crush-host [hidden] { display: none !important; }

.lb-first-crush-host .fam-hero {
  padding: 0;
  gap: 7px;
}

.lb-first-crush-host .fam-brand {
  margin-bottom: 3px;
}

.lb-first-crush-host .fam-body {
  margin-top: 12px;
}

.lb-first-crush-host .fam-actions {
  margin-top: 2px;
}

.lb-first-crush-host--match {
  margin-top: 8px;
}

.lb-first-crush-host--match .fam-body {
  margin-top: 8px;
  padding-top: 10px;
}

.lb-first-crush-host--match .fam-education {
  max-width: 36ch;
}