/* =============================================================================
   102-profile-slot-actions.css — v16.174
   THE PROFILE'S CENTRED ACTION SHEET. ONE OWNER, TWO CALLERS.

   WHAT THIS IS
   With the profile's edit MODE retired (js/15), your own profile is always
   editable — so a tap has to ask what you meant. This is the small centred
   modal that answers that: Open / Edit / Remove for a showcase poster
   (js/50 openProfileSlotActions) and for a social link (js/15
   openProfileLinkActions).

   ONE stylesheet for both on purpose. They are the same decision about two
   kinds of thing, and the moment each had its own CSS they would start to
   differ in corner radius, button order or animation for no reason a user
   could name.

   ---------------------------------------------------------------------------
   WHY CENTRED AND NOT A BOTTOM SHEET

   The app's other sheets (the games refine sheet, the shelf log composer) rise
   from the bottom edge because they are TASKS — long, scrollable, and you stay
   in them. This is a fork in the road with three short answers, and the thing
   it is asking about is the poster you just touched. A centred dialog keeps the
   question next to its subject and reads as momentary; a bottom sheet would
   promise more than four buttons.

   ---------------------------------------------------------------------------
   THE SURFACE IS THE GAMES SHEET'S, DELIBERATELY

   Same neutral ramp, same borders, same pill radius as
   15-universal-discovery-search.css: #15171b ground, #292c32 raised control,
   rgba(255,255,255,0.10) hairline, 999px pills. Editorial Dark, single lavender
   accent, no second palette invented for one modal.
   ============================================================================= */

.psa-overlay {
  position: fixed;
  inset: 0;
  z-index: 12800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 200ms ease;
  /* The backdrop is the tap-to-dismiss target (js checks event.target === el),
     so it must remain hit-testable while the sheet animates. */
  -webkit-tap-highlight-color: transparent;
}
.psa-overlay.is-open { opacity: 1; }

.psa-sheet {
  width: min(340px, 100%);
  border-radius: 20px;
  background: #15171b;
  border: 1px solid rgba(196, 181, 253, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  padding: 18px 18px max(18px, env(safe-area-inset-bottom, 0px));
  /* Scale + opacity only — no layout property is animated, so the whole
     entrance is a compositor job and holds 120Hz on ProMotion. */
  transform: scale(0.94);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
  will-change: transform;
}
.psa-overlay.is-open .psa-sheet {
  transform: scale(1);
  opacity: 1;
}

/* ------------------------------------------------------------------ THE HEAD
   The subject of the question, so the sheet never reads as a generic menu:
   which poster, or which link. */
.psa-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
}
.psa-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 64px;
  border-radius: 6px;
  background-color: #23262c;
  background-size: cover;
  background-position: center;
  border: 0.9px solid rgba(255, 255, 255, 0.18);
}
/* A social link has an icon, not a poster — square, and it sits ON the surface
   rather than being cropped to it. */
.psa-thumb-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.psa-thumb-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.psa-head-copy { min-width: 0; }
.psa-title {
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(15.5 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0.00em;
  color: #ffffff;
  line-height: 1.25;
  /* Two lines then ellipsis: a long film title should wrap once, not push the
     buttons down the screen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.psa-sub {
  margin-top: 3px;
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0.00em;
  color: rgba(231, 226, 244, 0.46);
}
/* A URL is long and low-value past the domain — one line, clipped. */
.psa-sub-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

/* --------------------------------------------------------------- THE ACTIONS
   Stacked full-width rather than a row: three-to-four labels of different
   lengths in a row give uneven targets, and vertical order is what makes
   "Remove" reliably the one furthest from the thumb. */
.psa-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.psa-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #292c32;
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0.00em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), background 140ms ease, border-color 140ms ease;
}
.psa-btn:active { transform: scale(0.97); }

/* Edit is the primary action — it is why the sheet exists — so it carries the
   app's single lavender accent and nothing else does. */
.psa-edit {
  background: rgba(139, 92, 246, 0.32);
  border-color: rgba(196, 181, 253, 0.38);
}
/* Destructive, but not shouting: a muted red text on the same neutral surface.
   A filled red button next to a lavender one would read as the louder of the
   two, which is backwards for the action you least often want. */
.psa-remove { color: #ff6b6b; }
/* Cancel recedes — it is the default outcome of tapping the backdrop anyway. */
.psa-cancel {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(231, 226, 244, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .psa-overlay,
  .psa-overlay .psa-sheet { transition: none; }
  .psa-overlay .psa-sheet { transform: none; }
}