/*
 * Member profile photo styles.
 *
 * A file of its own rather than part of globalbs4.css because profile photos
 * appear on two page families that load different stylesheets: the member and
 * staff pages, which get the full house style through GlobalAsset, and the
 * in-club dashboard screens, whose DashboardAsset deliberately skips it.
 * globalbs4.css restyles bare body/a/h1-h6, so pulling it onto the dashboard to
 * pick up six rules would repaint every dashboard screen.
 *
 * Registered by frontend\assets\ProfilePhotoAsset, which both of those bundles
 * depend on, so these rules reach every screen a photo can appear on and are
 * still written down exactly once. Colours come from brand.css.
 */

/* .pp-avatar is the photo itself, at whatever size the size class sets; the
   -empty variant is the dashed initials placeholder shown when a member has not
   uploaded one. Initials rather than a silhouette so the fallback still
   identifies the row, and reads the same for colourblind staff. */
.pp-avatar {display: inline-block;object-fit: cover;border-radius: 6px;border: 2px solid var(--buzz-green);background-color: var(--buzz-panel);vertical-align: middle;}
.pp-avatar-empty {display: inline-flex;align-items: center;justify-content: center;border-style: dashed;border-color: var(--buzz-avatar-placeholder-border);color: var(--buzz-avatar-placeholder-text);font-weight: 700;letter-spacing: 1px;text-transform: uppercase;}

/* Sizes. Anywhere a photo appears at a one-off size sets width/height inline
   instead; these two are the repeated ones. */
.pp-entry-photo {width: 44px;height: 44px;font-size: 15px;}
.pp-mod-photo {width: 90px;height: 90px;}

/* The in-browser cropper on /user/profile-photo. The :before padding holds the
   stage square without aspect-ratio, which older phone browsers lack, and
   touch-action stops a drag scrolling the page under it. */
.pp-stage {position: relative;width: 100%;max-width: 320px;margin: 0 auto;border: 2px solid var(--buzz-green);border-radius: 6px;overflow: hidden;background-color: #000;touch-action: none;cursor: grab;}
.pp-stage:before {content: "";display: block;padding-top: 100%;}
.pp-stage.pp-dragging {cursor: grabbing;}
.pp-stage-inner {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.pp-stage-inner canvas {display: block;width: 100%;height: 100%;}
.pp-controls {max-width: 320px;margin: 0 auto;}