/**
 * /me — "My profile" page for logged-in users.
 * Same design system as the landing (tokens.css): white surfaces, honey-gold
 * accent, Outfit + Plus Jakarta type. Inline-editable forms with autosave;
 * Profile settings: site header (same as landing) + .site-nav__settings.
 */

.me-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

/* Header — same shell as landing, but no Discover/Safety nav: identity + actions */
.site-nav.site-nav--me {
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  gap: clamp(var(--space-3), 3vw, var(--space-6));
}

.me-header__identity {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-left: var(--space-5);
}

.me-header__identity[hidden] {
  display: none !important;
}

.me-header__avatar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border-radius: 50%;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 200ms var(--ease-spring);
}

.me-header__avatar-link:hover {
  border-color: rgba(15, 23, 42, 0.12);
}

.me-header__avatar-link:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.25);
}

.me-header__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-subtle);
  border: 0;
}

.me-header__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.me-header__avatar[hidden] {
  display: none !important;
}

.me-header__avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink);
  background: linear-gradient(135deg, #fbe4c8 0%, #f3d49d 100%);
  line-height: 1;
}

.me-header__avatar-fallback[hidden] {
  display: none !important;
}

/* Email removed from the header per redesign — kept the class so any
   stale references degrade silently instead of throwing layout. */
.me-header__email {
  display: none !important;
}

/* Kebab + dropdown */
.me-header__menu {
  position: relative;
}

.me-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.me-header__menu-btn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--color-ink);
}

.me-header__menu-btn[aria-expanded="true"] {
  background: rgba(15, 23, 42, 0.08);
  color: var(--color-ink);
}

.me-header__menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.3);
}

.me-header__menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow:
    0 12px 32px -10px rgba(15, 23, 42, 0.22),
    0 4px 10px -4px rgba(15, 23, 42, 0.12);
  z-index: 60;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 140ms ease, transform 160ms var(--ease-spring);
}

.me-header__menu-panel:not([hidden]) {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.me-header__menu-panel[hidden] {
  display: block;
}

.me-header__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font: 500 0.9rem/1.2 var(--font-sans), system-ui, sans-serif;
  color: var(--color-ink);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

.me-header__menu-item:hover,
.me-header__menu-item:focus-visible {
  background: rgba(200, 164, 92, 0.12);
  color: var(--color-ink);
  outline: none;
}

.me-header__menu-item svg {
  flex: none;
  color: var(--color-ink-muted);
  transition: color 140ms ease;
}

.me-header__menu-item:hover svg,
.me-header__menu-item:focus-visible svg {
  color: var(--color-accent-deep);
}

.me-header__menu-item--danger {
  color: #b91c1c;
}

.me-header__menu-item--danger svg {
  color: #b91c1c;
}

.me-header__menu-item--danger:hover,
.me-header__menu-item--danger:focus-visible {
  background: rgba(220, 38, 38, 0.1);
  color: #991b1b;
}

.me-header__menu-item--danger:hover svg,
.me-header__menu-item--danger:focus-visible svg {
  color: #991b1b;
}

@media (max-width: 520px) {
  .me-header__menu-panel {
    min-width: 180px;
  }
}

/* On phones the discover-nav-pills are hidden, so the 20px left margin
   that normally separates the identity cluster from the pills just
   pushes the avatar right while leaves a visible gap between it and
   the kebab. Tighten the identity stack against the right edge. */
@media (max-width: 640px) {
  .me-header__identity {
    margin-left: 0;
    gap: 0;
  }
  .me-header__menu-btn {
    width: 32px;
    height: 32px;
  }
}

/* Pin the kebab dots flush to the right edge of the page container.
   Logged-in members never see the Sign in / Join buttons inside
   .site-nav__actions, so the empty flex container + 8px nav gap was
   just leaving a fixed 12-15px sliver between the kebab dots and the
   container's right edge. Drop the empty actions wrapper on
   data-auth-state="in" so the kebab becomes the true last child. */
.me-page[data-auth-state="in"] .site-nav__actions {
  display: none !important;
}

/* Hide redundant Join / Sign in chrome on logged-in members — the new
   identity + kebab menu owns these affordances now. The Sign-in CTA
   stays visible only when the body lands in [data-auth-state="out"]
   (auth-state.js sets that), so guests on /u still see it. */
.me-page[data-auth-state="in"] .site-nav__actions .btn[data-auth="sign-in"],
.me-page[data-auth-state="in"] .me-page__header-auth-extra,
.me-page[data-auth-state="in"] .site-nav__settings {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Main wrapper / loading / error
   ────────────────────────────────────────────────────────────────────── */

.me-main {
  flex: 1 0 auto;
  width: min(100% - var(--space-6), var(--content-max));
  margin-inline: auto;
  padding: var(--space-10) var(--space-4) var(--space-16);
}

.me-loading {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.me-content[hidden] + .me-loading,
.me-loading[hidden] {
  display: none;
}

.me-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--color-line-strong);
  border-top-color: var(--color-accent-deep);
  animation: me-spin 0.9s linear infinite;
}

.me-loading__text {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 0.95rem;
}

@keyframes me-spin {
  to { transform: rotate(360deg); }
}

.me-error {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: #fff1f1;
  border: 1px solid #ffd1d1;
  color: #8a1a1a;
  font-size: 0.9rem;
}

/* ──────────────────────────────────────────────────────────────────────
   Hero card
   ────────────────────────────────────────────────────────────────────── */

.me-hero {
  position: relative;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  align-items: center;
  overflow: hidden;
}

.me-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--color-accent-soft), transparent 65%);
  pointer-events: none;
  opacity: 0.9;
  z-index: 0;
}

.me-hero > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  .me-hero {
    grid-template-columns: 220px 1fr;
  }
}

@media (min-width: 960px) {
  .me-hero {
    grid-template-columns: 260px 1fr;
  }
}

/* Photo */

.me-hero__photo {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-bg-subtle), #ececee);
  box-shadow: none;
  isolation: isolate;
}

.me-hero__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.me-hero__photo-img[hidden] {
  display: none;
}

.me-hero__photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.me-hero__photo-empty span:first-child {
  font-size: 2rem;
  letter-spacing: 0;
  color: var(--color-accent-deep);
}

.me-hero__photo-empty[hidden] {
  display: none;
}

.me-hero__photo-edit {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(18, 18, 18, 0.12);
  transition:
    transform 0.18s var(--ease-spring),
    background 0.18s var(--ease-out),
    color 0.18s var(--ease-out);
}

.me-hero__photo-edit:hover {
  background: #fff;
  color: var(--color-accent-deep);
}

.me-hero__photo-edit:active {
  transform: scale(0.96);
}

.me-hero__photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-ink-muted);
  font-size: 0.85rem;
  z-index: 2;
}

.me-hero__photo-overlay[hidden] {
  display: none;
}

.me-hero__photo-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--color-line-strong);
  border-top-color: var(--color-accent-deep);
  animation: me-spin 0.9s linear infinite;
}

/* Hero text side */

.me-hero__main {
  min-width: 0;
}

.me-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  background: var(--color-accent-soft);
}

.me-hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(200, 164, 92, 0.18);
}

/* Lucide shield-check icon inside the eyebrow pill. Same gold tone as
   the eyebrow text so the whole pill reads as one mark. */
.me-hero__eyebrow-icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--color-accent-deep);
}

.me-hero__name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}


.me-hero__location {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-5);
  padding: 0.25rem 0.7rem 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.me-hero__location::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") no-repeat center / contain;
}

.me-hero__location[hidden] {
  display: none;
}

.me-hero__bio {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-soft);
  color: var(--color-ink-soft);
  font-size: 0.97rem;
  line-height: 1.65;
  max-width: 60ch;
  /* Truncation is done in JS (renderHero → truncateBio) so we can land
     the cut on a word boundary and append a real ellipsis. */
}

.me-hero__bio[hidden] {
  display: none;
}

.me-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ──────────────────────────────────────────────────────────────────────
   Tabs (anchor pills)
   ────────────────────────────────────────────────────────────────────── */

.me-tabs {
  margin: var(--space-10) 0 var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.me-tabs::-webkit-scrollbar { display: none; }

.me-tab {
  flex: 0 0 auto;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.me-tab:hover {
  background: var(--color-bg-subtle);
  color: var(--color-ink);
}

/* ──────────────────────────────────────────────────────────────────────
   Sections + fields
   ────────────────────────────────────────────────────────────────────── */

.me-section {
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
  padding: var(--space-8) 0;
}

.me-section + .me-section {
  border-top: 1px solid var(--color-line);
}

.me-section__header {
  margin-bottom: var(--space-6);
  max-width: 56ch;
}

.me-section__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}

.me-section__lede {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 0.95rem;
}

/* Privacy promise that lives under the Contact section lede. No fill,
   no border — same typography as a normal lede, just slightly muted. */
.me-section__lede--trust {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  opacity: 0.85;
}
.me-section__lede--trust strong { color: var(--color-ink); font-weight: 600; }

.me-section__body {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 720px) {
  .me-section__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .me-section__body > .me-field--wide {
    grid-column: 1 / -1;
  }

  /* Travel section uses its own internal card grid (.travel-grid), so the
     outer body must stay single-column at all widths — otherwise the
     card grid is confined to one of the two field columns and only one
     card fits per row on desktop. */
  .me-section__body--travel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Travel availability flags — two toggle pills sitting between the
   section header and the destination grid. Same visual rhythm as the
   lifestyle chip rail elsewhere in /me: pill border, hairline divider,
   accent-coloured fill when checked. */
.me-travel-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  margin: var(--space-4, 16px) 0 var(--space-5, 20px);
}
.me-travel-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--color-line, rgba(15, 23, 42, 0.1));
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font: 500 0.875rem/1.2 var(--font-sans), system-ui, sans-serif;
  color: var(--color-ink, #0f172a);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.me-travel-flag:hover { border-color: rgba(15, 23, 42, 0.25); }
.me-travel-flag input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid rgba(15, 23, 42, 0.3);
  border-radius: 4px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.me-travel-flag input[type="checkbox"]:checked {
  background: var(--color-accent, #c8a45c);
  border-color: var(--color-accent, #c8a45c);
}
/* SVG-like check via background-image so we don't need an extra DOM
   node per flag. */
.me-travel-flag input[type="checkbox"]:checked::after {
  content: "";
  width: 9px;
  height: 9px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8 L7 12 L13 4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.me-travel-flag input[type="checkbox"]:disabled { opacity: 0.5; cursor: progress; }

.me-section__empty {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
}

@media (min-width: 720px) {
  .me-section__empty {
    grid-column: 1 / -1;
  }
}

/* Field card */

.me-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.2s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
  min-width: 0;
}

.me-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 18px;
}

.me-field__label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.me-field__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: transparent;
  transition: color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
  opacity: 0;
}

.me-field__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.me-field__status[data-state="saving"] {
  color: var(--color-ink-soft);
  opacity: 1;
}

.me-field__status[data-state="saved"] {
  color: #1f9658;
  opacity: 1;
}

.me-field__status[data-state="error"] {
  color: #d23838;
  opacity: 1;
}

/* Right-aligned cluster inside .me-field__head — holds the per-field
   visibility picker plus the autosave status chip, so the row stays
   visually balanced even on narrow breakpoints. */
.me-field__tail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* Inline visibility picker — custom dropdown. Pill trigger (eye +
   label + caret), clean white panel. Matches the page's design
   system: thin lines, no shadows, no gradients. */
.me-vis {
  position: relative;
  display: inline-block;
}

.me-vis__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.6rem 0.3rem 0.55rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-ink-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease-out),
    color 0.18s var(--ease-out),
    background 0.18s var(--ease-out);
}

.me-vis__btn:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

.me-vis__btn:focus-visible {
  outline: none;
  border-color: var(--color-accent-deep);
  color: var(--color-ink);
}

.me-vis[data-open="true"] .me-vis__btn {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.me-vis__eye,
.me-vis__caret {
  flex-shrink: 0;
}

.me-vis__caret {
  margin-left: 0.1rem;
  color: var(--color-ink-soft);
  transition: transform 0.18s var(--ease-out);
}

.me-vis[data-open="true"] .me-vis__caret {
  transform: rotate(180deg);
}

.me-vis__current {
  white-space: nowrap;
}

.me-vis__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
}

.me-vis__menu[hidden] {
  display: none;
}

.me-vis__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--color-ink);
  cursor: pointer;
  user-select: none;
}

.me-vis__item:hover {
  background: var(--color-bg-subtle);
}

.me-vis__item-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  opacity: 0;
  transition: opacity 0.12s var(--ease-out);
}

.me-vis__item[aria-selected="true"] .me-vis__item-check {
  opacity: 1;
}

.me-vis__item[aria-selected="true"] {
  color: var(--color-ink);
  font-weight: 600;
}

.me-field__input,
.me-field__textarea,
.me-field__select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  min-height: 46px;
  transition:
    border-color 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out),
    background 0.18s var(--ease-out);
  appearance: none;
}

.me-field__input::placeholder,
.me-field__textarea::placeholder {
  color: var(--color-ink-soft);
}

.me-field__input:hover,
.me-field__textarea:hover,
.me-field__select:hover {
  border-color: var(--color-ink-muted);
}

.me-field__input:focus,
.me-field__textarea:focus,
.me-field__select:focus {
  outline: none;
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

/* ── Autocomplete combobox (country / city) ────────────────────────────
   The input keeps its existing .me-field__input look; the popup floats
   directly under it via the relative wrap. Keep this scoped to .me-field
   so we don't accidentally style other menus. */
.me-ac-wrap {
  display: block;
  position: relative;
}

.me-ac {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 30;
  max-height: min(320px, 60vh);
  overflow-y: auto;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform-origin: top center;
  animation: meAcIn 0.16s var(--ease-out);
}

.me-ac[hidden] { display: none; }

@keyframes meAcIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.me-ac__item {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: calc(var(--radius-md) - 8px);
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background 0.14s var(--ease-out),
    color 0.14s var(--ease-out);
}

.me-ac__item + .me-ac__item { margin-top: 1px; }

.me-ac__item:hover,
.me-ac__item.is-active {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

.me-ac__hit {
  background: transparent;
  color: var(--color-accent-deep);
  font-weight: 600;
}

/* When the autocomplete is open, the popup needs to sit above the next
   field's label without being clipped by the form card overflow. */
.me-section__body { overflow: visible; }
.me-field         { overflow: visible; }

.me-field__textarea {
  min-height: 110px;
  resize: vertical;
  font-family: inherit;
}

.me-field__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 14px 14px;
  padding-inline-end: 2.4rem;
}

/* Custom field dropdown — full-width trigger + scrollable panel.
   Replaces native <select> on /me for a consistent, premium feel. */
.me-sel {
  position: relative;
  width: 100%;
}

.me-sel__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  min-height: 46px;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out),
    background 0.18s var(--ease-out);
}

.me-sel__btn.is-placeholder {
  color: var(--color-ink-soft);
}

.me-sel__btn:hover {
  border-color: var(--color-ink-muted);
}

.me-sel__btn:focus-visible {
  outline: none;
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.me-sel[data-open="true"] {
  z-index: 30;
}

.me-sel[data-open="true"] .me-sel__btn {
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.me-sel__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-sel__caret {
  flex-shrink: 0;
  color: var(--color-ink-soft);
  transition: transform 0.18s var(--ease-out);
}

.me-sel[data-open="true"] .me-sel__caret {
  transform: rotate(180deg);
}

.me-sel__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: min(280px, 50vh);
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.22);
  scrollbar-width: thin;
  scrollbar-color: var(--color-line-strong) transparent;
}

.me-sel__menu[hidden] {
  display: none;
}

.me-sel__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.62rem 0.75rem;
  border-radius: 8px;
  font-size: 0.94rem;
  line-height: 1.35;
  color: var(--color-ink);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s var(--ease-out);
}

.me-sel__item:hover,
.me-sel__item:focus-visible {
  outline: none;
  background: var(--color-bg-subtle);
}

.me-sel__item-label {
  flex: 1;
  min-width: 0;
}

.me-sel__item-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent-deep);
  opacity: 0;
  transition: opacity 0.12s var(--ease-out);
}

.me-sel__item[aria-selected="true"] {
  font-weight: 500;
  background: color-mix(in srgb, var(--color-accent-soft) 55%, transparent);
}

.me-sel__item[aria-selected="true"] .me-sel__item-check {
  opacity: 1;
}

.me-sel.is-disabled {
  opacity: 0.62;
  pointer-events: none;
}

.me-sel.is-disabled .me-sel__btn {
  cursor: not-allowed;
  background: var(--color-bg-subtle);
}

.me-field__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.me-field__readonly {
  font-size: 1rem;
  color: var(--color-ink);
  padding: 0.7rem 0.9rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  min-height: 46px;
  display: flex;
  align-items: center;
}

.me-field__readonly--empty {
  color: var(--color-ink-soft);
  font-style: italic;
}

/* ── Inline chip toggle group (checkbox-typed fields on /me) ─────
   Visual language mirrors the discover-drawer chips: soft outlined
   pill in idle state, ink-on-paper inverted state when selected.
   Lives directly under .me-field__head, replaces the old read-only
   "Manage in settings" deflection. */
.me-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.me-chip {
  --me-chip-bd: var(--color-line);
  --me-chip-bg: transparent;
  --me-chip-fg: var(--color-ink);
  appearance: none;
  -webkit-appearance: none;
  background: var(--me-chip-bg);
  color: var(--me-chip-fg);
  border: 1px solid var(--me-chip-bd);
  border-radius: 999px;
  padding: 7px 13px;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease,
    border-color 120ms ease,
    transform 120ms ease;
}

.me-chip:hover {
  --me-chip-bd: var(--color-ink-soft, #6b6b6b);
  --me-chip-bg: var(--color-bg-subtle);
}

.me-chip:focus-visible {
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 2px;
}

.me-chip--on {
  --me-chip-bg: var(--color-ink);
  --me-chip-fg: #fff;
  --me-chip-bd: var(--color-ink);
}

.me-chip--on:hover {
  --me-chip-bg: var(--color-ink);
  --me-chip-fg: #fff;
}

.me-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Radio-style variant — used for short numeric / mutually-exclusive
   pickers (currently: Children count). Visually identical to the
   multi-select chip; the JS enforces single-select semantics so the
   role="radio" + aria-checked carries the actual meaning. */
.me-chips--radio {
  gap: 8px;
}

.me-chip--count {
  min-width: 48px;
  padding: 8px 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ── Personality summary card (read-only with retake CTA) ─────────
   Composes on top of .me-field__readonly — adds an inline type-code
   chip + supplementary note (e.g. "Based on 70 answers"). */
.me-field__personality {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.me-field__personality-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}

.me-field__personality-note {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* Wide field (textarea / about) */
.me-field--wide .me-field__textarea {
  min-height: 130px;
}

/* Photo gallery thumbs */
.me-field--gallery {
  gap: var(--space-3);
}

/* Private gallery shares the exact look of every other field card on
   the page — no badge, no accent border, no shadow. The owner already
   sees the gallery is gated via the visibility picker in the head row;
   we don't need a second visual marker that breaks the rhythm of the
   layout. */

.me-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-2);
}

.me-gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  transition:
    border-color 0.18s var(--ease-out),
    box-shadow 0.2s var(--ease-out),
    transform 0.22s var(--ease-spring);
}

.me-gallery-thumb:hover {
  border-color: var(--color-accent-deep);
  transform: translateY(-2px);
}

.me-gallery-thumb:focus-visible {
  outline: none;
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.me-gallery-thumb img,
.me-gallery-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.me-gallery-thumb {
  position: relative;
}

.me-gallery-thumb__play {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.72);
  color: #fff;
  pointer-events: none;
}

.me-gallery-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* Inline "Add photo" tile inside the gallery grid — same footprint as a
   thumb so the grid stays uniform, dashed border to read as "drop zone"
   without the heaviness of an actual button. */
.me-gallery-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-line-strong);
  color: var(--color-ink-muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease-out),
    color 0.18s var(--ease-out),
    background 0.18s var(--ease-out),
    box-shadow 0.2s var(--ease-out),
    transform 0.22s var(--ease-spring);
}

.me-gallery-add:hover {
  border-color: var(--color-accent-deep);
  color: var(--color-accent-deep);
  background: var(--color-bg);
  transform: translateY(-2px);
}

.me-gallery-add:focus-visible {
  outline: none;
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.me-gallery-add.is-busy {
  cursor: progress;
  border-style: solid;
  border-color: var(--color-accent-deep);
  color: var(--color-accent-deep);
}

.me-gallery-add__plus {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0;
}

.me-gallery-add__label {
  line-height: 1.1;
  text-align: center;
}

.me-field__cta {
  align-self: flex-start;
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-accent-deep);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed currentColor;
}

.me-field__cta:hover { color: var(--color-ink); }

/* btn--sm helper (already defined in welcome.css; redeclare here to keep me.html standalone) */
.btn--sm {
  min-height: 36px;
  padding: 0 var(--space-4);
  font-size: 0.875rem;
}

/* ──────────────────────────────────────────────────────────────────────
   Fullscreen lightbox — same visual as UserProfile custom.css
   (.up-lightbox): warm light mesh backdrop, white pill controls, honey-
   gold active thumb. NOT the default dark lightbox.css from the microservice.
   ────────────────────────────────────────────────────────────────────── */

.me-lightbox {
  padding: 0;
  border: none;
  background: transparent;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  inset: 0;
  overflow: hidden;
  color: var(--color-ink);
}

.me-lightbox::backdrop {
  background:
    radial-gradient(60vw 50vw at 0% 0%, rgba(255, 248, 232, 0.92), transparent 60%),
    radial-gradient(50vw 40vw at 100% 10%, rgba(255, 238, 245, 0.85), transparent 65%),
    radial-gradient(45vw 40vw at 30% 100%, rgba(238, 246, 255, 0.85), transparent 70%),
    rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

.me-lightbox__shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.me-lightbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.2rem;
  gap: 1rem;
}

.me-lightbox__counter {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.me-lightbox__close {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.me-lightbox__close:hover {
  background: #ffffff;
  border-color: var(--color-accent-deep);
  color: var(--color-accent-deep);
  transform: scale(1.05);
}

.me-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.2rem;
  min-height: 0;
}

.me-lightbox__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.me-lightbox__media {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(92vw, 1400px);
  max-height: min(78vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(18, 18, 18, 0.18);
  background: #ffffff;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.me-lightbox__loading {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  border-radius: 50%;
  border: 2px solid rgba(18, 18, 18, 0.12);
  border-top-color: var(--color-accent-deep);
  animation: me-lb-spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes me-lb-spin {
  to { transform: rotate(360deg); }
}

.me-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.me-lightbox__nav:hover {
  background: #ffffff;
  border-color: var(--color-accent-deep);
  color: var(--color-accent-deep);
  transform: translateY(-50%) scale(1.06);
}

.me-lightbox__nav:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--color-line);
  color: var(--color-ink-soft);
  transform: translateY(-50%) scale(1);
}

.me-lightbox__nav--prev { left: 1.2rem; }
.me-lightbox__nav--next { right: 1.2rem; }
html[dir="rtl"] .me-lightbox__nav--prev { left: auto; right: 1.2rem; }
html[dir="rtl"] .me-lightbox__nav--next { right: auto; left: 1.2rem; }

.me-lightbox__nav[hidden],
.me-lightbox__counter[hidden],
.me-lightbox__thumbs[hidden] {
  display: none !important;
}

.me-lightbox__thumbs {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  justify-content: center;
}

.me-lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.me-lightbox__thumbs::-webkit-scrollbar-thumb {
  background: var(--color-line-strong);
  border-radius: 999px;
}

.me-lightbox__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--color-bg-subtle);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.7;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.me-lightbox__thumb:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.me-lightbox__thumb img,
.me-lightbox__thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-lightbox__thumb--active {
  opacity: 1;
  border-color: var(--color-accent-deep);
}

@media (max-width: 600px) {
  .me-lightbox__nav { width: 2.6rem; height: 2.6rem; }
  .me-lightbox__nav--prev { left: 0.5rem; }
  .me-lightbox__nav--next { right: 0.5rem; }
  html[dir="rtl"] .me-lightbox__nav--prev { right: 0.5rem; }
  html[dir="rtl"] .me-lightbox__nav--next { left: 0.5rem; }
  .me-lightbox__thumb { width: 44px; height: 44px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Membership card  (sits between the hero and the section tabs)

   Visual idiom mirrors the hero + section headers — Ivy Presto display
   for the tier name, the same gold eyebrow pill the hero already uses,
   and the page's "card on cream" surface tokens. The whole strip is a
   single elevated card with one obvious upgrade CTA on the right.

   Hidden by default; me.js flips [hidden] off once it knows the tier
   (and keeps it hidden entirely for the silent-free segment).
   ────────────────────────────────────────────────────────────────────── */

.me-membership {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-7);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Subtle gold wash on the left edge so the card reads as a "premium"
   surface without resorting to a heavy gradient or border treatment. */
.me-membership::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
  opacity: 0.85;
}

.me-membership[data-tier="elite"]::before {
  background: linear-gradient(180deg, #1c1c1e 0%, #000 100%);
  opacity: 1;
}

@media (min-width: 760px) {
  .me-membership {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    padding: var(--space-7) var(--space-8);
  }
}

.me-membership__head {
  min-width: 0;
}

.me-membership__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  background: var(--color-accent-soft);
}

.me-membership__eyebrow-icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--color-accent-deep);
}

.me-membership__tier-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}

.me-membership__tier {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.me-membership__price {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  letter-spacing: 0.005em;
}

.me-membership__tagline {
  margin: 0;
  max-width: 56ch;
  color: var(--color-ink-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.me-membership__perks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  grid-column: 1 / -1;
}

.me-membership__perks li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
}

.me-membership__perks li::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background-color: var(--color-accent-deep);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.me-membership__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  justify-self: start;
}

@media (min-width: 760px) {
  .me-membership__actions {
    justify-self: end;
  }
}

.me-membership__upgrade {
  white-space: nowrap;
}

.me-membership__upgrade[hidden] {
  display: none;
}

.me-membership__manage {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line-strong);
  padding-bottom: 1px;
  transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}

.me-membership__manage:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

@media (prefers-reduced-motion: reduce) {
  .me-spinner,
  .me-hero__photo-spinner {
    animation: none;
  }
  .me-lightbox__loading { animation: none; }
}