/* Bring the header flag toward close while preserving two separate 44px targets. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay) :is(.profile-modal-header-controls, .profile-titlebar-controls) {
  width: 88px !important;
  grid-template-columns: repeat(2, 44px) !important;
  gap: 0 !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay) :is(.profile-modal-header-controls, .profile-titlebar-controls) .profile-header-report-action > svg {
  transform: translateX(8px) !important;
}

/* Desktop has room for identity and metrics beside each other. Reset the
 * legacy fixed-height identity rows so they cannot overflow above the modal. */
@media (min-width: 760px) {
  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-summary {
    min-height: 104px !important;
    padding: 16px 112px 16px 16px !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-person {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-avatar-column {
    grid-template-rows: 72px !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-avatar {
    width: 72px !important;
    height: 72px !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .modal-identity-stack {
    height: auto !important;
    grid-template: auto / fit-content(160px) minmax(240px, 288px) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 16px !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .modal-identity {
    grid-area: 1 / 1 !important;
    min-width: 120px !important;
    width: 100% !important;
    max-width: none !important;
    grid-template: auto auto / minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-name-row {
    padding: 0 !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal #modalName {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-city-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal #modalCity {
    width: auto !important;
    max-width: 100% !important;
    min-height: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    transform: none !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-header-metrics {
    grid-area: 1 / 2 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-header-metrics .profile-activity-metrics {
    margin: 0 !important;
    column-gap: 12px !important;
    background: transparent !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-header-metrics .profile-activity-metrics > div {
    display: grid !important;
    grid-template: auto auto / minmax(0, 1fr) !important;
    align-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-header-metrics dd {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-header-metrics dt {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  body.dancr-button-system #profileBackdrop #profileModal .profile-modal-header-controls {
    top: 16px !important;
    right: 14px !important;
  }
}

/* Shared profile-only layout. The explicit scope wins over legacy mobile
 * circle styles without changing buttons elsewhere or the Club Deal card. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact {
  --profile-action-height: 44px;
  --profile-action-face-inset: 3px;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: min(100%, 480px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Dancer actions use full-height faces so Share is visibly square, with the
 * same quiet fill and rounded corners for Follow, Share, and venue attendance. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay) :is(.modal-actions, .live-actions).profile-actions-compact {
  --profile-action-face-inset: 0px;
  --profile-utility-background: #15151b;
  --profile-utility-border: #2b2b34;
  --profile-utility-radius: 12px;
  --profile-utility-hover-background: #1e1e26;
  --profile-utility-hover-border: #454550;
  --profile-action-selected-border: #666670;
  --profile-action-selected-background: #24242c linear-gradient(#24242c, #24242c);
  --profile-action-selected-shadow: none;
  gap: 6px !important;
}

/* Reduce extra space below Follow/Share; venue attendance keeps its own
 * zero margin inside the card. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay)
  :is(.modal-actions, .live-actions).profile-actions-compact:not(.profile-venue-actions) {
  margin-block: 0 2px !important;
}

/* Attendance belongs with the venue. Beside an available offer it shares one
 * compact row, leaving Free Entry as the wider primary action. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell)
  .profile-tonight-card > .profile-venue-actions.profile-actions-compact {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: center !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell)
  .profile-tonight-card.has-club-deal:has(> .profile-venue-actions) {
  grid-template-columns: minmax(0, 1fr) minmax(104px, .65fr) !important;
  column-gap: 8px !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell)
  .profile-tonight-card.has-club-deal:has(> .profile-venue-actions)
  :is(.profile-club-deal-qr-button, .club-deal-profile-action) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell)
  .profile-tonight-card.has-club-deal > .profile-venue-actions.profile-actions-compact {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact > button.profile-action-icon-control {
  flex: 1 1 0 !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact .profile-action-icon-control {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--profile-action-height) !important;
  min-height: var(--profile-action-height) !important;
  max-height: var(--profile-action-height) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 8px !important;
  position: relative !important;
  isolation: isolate;
  transform: none !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact > button.profile-share-action,
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact > .profile-action-share-slot {
  flex: 0 0 var(--profile-action-height) !important;
  width: var(--profile-action-height) !important;
  min-width: 0 !important;
  height: var(--profile-action-height) !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact .profile-action-share-slot > .profile-share {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: var(--profile-action-height) !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact .profile-action-main {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  gap: 5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact .profile-action-main > span:last-child {
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact .profile-action-icon-control :is(.action-icon, .profile-action-icon-frame) {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact .profile-action-icon-control :is(.action-icon, .profile-action-icon-frame) > svg {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none !important;
}

/* Follow now uses an outlined person/check on club and dancer profiles. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) .profile-actions-compact .profile-action-icon-control svg > :is(path, circle, rect) {
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* Keep the existing accessible Share text, but display only its icon. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(.profile-share-action, .profile-action-share-slot) .profile-action-main > span:last-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact .profile-action-status {
  flex: 0 0 100% !important;
}

/* Neutral materials are intentionally quieter than the primary deal action.
 * IDs in :is() only raise specificity against old per-button/platform rules. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control) {
  appearance: none !important;
  -webkit-appearance: none !important;
  --profile-action-border: var(--profile-utility-border, #34343c);
  --profile-action-background: var(--profile-utility-background, #15151b);
  --profile-action-shadow: none;
  border: 0 !important;
  border-radius: var(--profile-utility-radius, 8px) !important;
  color: #FFFFFF !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 120ms ease;
}

/* Keep the visible face within its hit area; dancer rows use the full height. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: var(--profile-action-face-inset) 0 !important;
  width: auto !important;
  height: auto !important;
  box-sizing: border-box !important;
  border: 1px solid var(--profile-action-border) !important;
  border-radius: inherit !important;
  background: var(--profile-action-background) !important;
  box-shadow: var(--profile-action-shadow) !important;
  transform: none !important;
  z-index: -1;
  pointer-events: none !important;
  transition: background-color 120ms ease, border-color 120ms ease;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control)::after {
  content: none !important;
  display: none !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control) :is(.profile-action-main, .action-icon, .profile-action-icon-frame, svg, .profile-action-main > span) {
  color: var(--profile-action-icon-color, inherit) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control):focus-visible {
  outline: 2px solid #c4b5fd !important;
  outline-offset: 2px !important;
}

@media (hover: hover) {
  body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control):hover:where(:not(:disabled)) {
    --profile-action-background: var(--profile-utility-hover-background, #303030);
    --profile-action-border: var(--profile-utility-hover-border, #666666);
  }
}

/* Inactive profile actions share the club utilities' neutral border. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control)[aria-pressed]:not(:disabled):not([aria-disabled="true"]) {
  --profile-action-border: var(--profile-utility-border, #34343c);
  --profile-action-background: var(--profile-utility-background, #17131e);
}

@media (hover: hover) {
  body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control)[aria-pressed]:not(:disabled):not([aria-disabled="true"]):hover {
    --profile-action-border: var(--profile-utility-hover-border, #666666);
    --profile-action-background: var(--profile-utility-hover-background, #231b2e);
  }
}

/* Existing aria-pressed states are the single source of selected styling. */
body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control)[aria-pressed="true"] {
  --profile-action-border: var(--profile-action-selected-border, var(--dancr-color-avatar-ring-violet)) !important;
  --profile-action-background: var(--profile-action-selected-background, linear-gradient(145deg, var(--dancr-color-brand-primary), var(--dancr-color-brand-primary-deep))) !important;
  --profile-action-shadow: var(--profile-action-selected-shadow, 0 0 12px rgba(139, 92, 246, .2));
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control)[aria-pressed="true"] :is(.action-icon, .profile-action-icon-frame) > svg {
  color: var(--profile-action-icon-color, #FFFFFF) !important;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control):active:not(:disabled) {
  --profile-action-background: #444444;
  --profile-action-border: #929292;
}

body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control):disabled {
  color: #8A8A8A !important;
  --profile-action-background: #141414;
  --profile-action-border: #292929;
  opacity: 1 !important;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control),
  body.dancr-button-system :is(#profileBackdrop #profileModal, .public-profile-shell, .dancer-profile-preview-overlay, #results.venue-profile-overlay .venue-detail) :is(.modal-actions, .live-actions, .venue-secondary-actions).profile-actions-compact :is(#followBtn, #goingBtn, .profile-action-icon-control)::before {
    transition: none !important;
  }
}