/* SHARED SOCIAL STYLES (10 Sep 2026, the social wave — FE-A). Three things
   every social surface draws the same way, so a person looks like the same
   person on the leaderboard, in a notification, on a friend tile and on the
   plate:
     .soc-av    the avatar circle — the uploaded picture, else the chosen
                card's art, else the initial on the name-hashed colour
                (friends.js avColour, the same palette leaderboard.js uses)
     .soc-clan  the clan badge chip — the badge image and the tag, clickable
                into the clan page (clan.js CLAN.open) when that module is in
     .fr-tile   a person tile: avatar, name, clan chip
   Colours are the sheet's own tokens (style.css :root); nothing new. */

.soc-av{display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:2px solid var(--key);overflow:hidden;background:#3FA9F5;color:#fff;font:900 15px/1 var(--display);vertical-align:middle;box-sizing:border-box}
.soc-av img{display:block;width:100%;height:100%;object-fit:cover}
/* a card as the picture: zoom past the slab's label to the art, the plate's own rule (profile.css .pf-av__img) */
.soc-av img.soc-av__card{object-position:50% 58%;transform:scale(1.6);transform-origin:50% 58%}

.soc-clan{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 3px;border:2px solid var(--key);border-radius:999px;background:#fff;color:var(--key);font:900 12px/1 var(--display);font-style:italic;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;cursor:pointer;white-space:nowrap;box-sizing:border-box}
.soc-clan img{width:20px;height:20px;object-fit:contain;display:block}
.soc-clan:hover{background:var(--yellow,#FFFE9A)}
.soc-clan--lg{gap:7px;padding:3px 11px 3px 4px;font-size:15px}
.soc-clan--lg img{width:32px;height:32px}
/* on a dark ground (the notification popover, the phone sheet) the chip stays white so the badge reads */
.soc-name{font-weight:inherit}

/* the friend tile: on the profile's FRIENDS shelf and in the view */
.fr-tile{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;background:rgba(255,255,255,.92);border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);padding:10px 6px 9px;text-align:center;font:inherit;color:inherit;cursor:pointer}
.fr-tile:hover{background:#fff}
.fr-tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}
.fr-tile .soc-av{width:56px;height:56px;font-size:22px}
.fr-tile__n{display:block;width:100%;font:800 13px/1.2 var(--ui);color:var(--key);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-tile .soc-clan{font-size:11px;padding:1px 7px 1px 2px}
.fr-tile .soc-clan img{width:16px;height:16px}
.fr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}

/* the header avatar wearing a picture: the letter privy-auth.js keeps writing
   into it goes transparent and the picture is the ground. #id beats
   stage.css's html[data-layout] .avatar fill. */
#acctAv[data-pic="1"]{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent!important;-webkit-text-stroke:0}
/* the phone PROFILE sheet's who-block, the same way */
.avatar.avatar--pic{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent!important}
/* the leaderboard's avatar slot already accepts an <img class="lbav lbav--pic"> */
.lbav.lbav--pic{object-position:center}
/* a card as the board picture: the img IS the circle, so no transform (it
   would scale the ring too); cover with the art's band in view, not the label */
.lbav.lbav--card{object-fit:cover;object-position:50% 40%}
/* a clan badge after a name on the boards */
.lbrow__u .soc-clan,.lbp__u .soc-clan{margin-left:8px;font-size:11px;padding:1px 7px 1px 2px;vertical-align:2px}
.lbrow__u .soc-clan img,.lbp__u .soc-clan img{width:18px;height:18px}
.lbp__u .soc-clan{margin-left:6px}
/* CLAN.badge() hands back a .cl-chip when clan.js is in; give it the same breathing room after the name (lead, 10 Sep) */
.lbrow__u .cl-chip{margin-left:8px;--cl-h:20px;vertical-align:2px}
.lbp__u .cl-chip{margin-left:6px;--cl-h:20px;vertical-align:2px}

@media (max-width:1023px){
  .fr-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .fr-tile__n{font-size:14px}
}

/* A18 (LEAD-DECISIONS-R2 §13): the drawn row chevron of the phone PROFILE
   sheet — mobile.js paintProfile() CHEV and notify.js CHEV paint this one
   mark on every row that used to type a U+203A. `.mrow svg` (style.css:1206)
   sizes the row's leading icon at 21px, so this needs the extra class to
   win; the colour is the row value's own --ink-faint through currentColor. */
.mrow .mrow__chev{display:block;width:8px;height:14px;flex:0 0 auto}

/* ── FIND A PLAYER ────────────────────────────────────────────────────
   Luke, 16 Sep: "is there any way to search a username? to see if ye can find
   a friend?" … "friends page... and a search thing in leaders page."
   One component (SOCIAL.find, site/friends.js), two mounts: the full box at the
   top of your own friends list, and .fd--compact in the board's tab head.
   The rows are .fr-row (profile.css) — a result and a friend read alike.

   SIXTEEN PIXELS, NOT FIFTEEN. iOS Safari zooms the page on focus for any input
   under 16px, and .cl-in (clan.css:87) is 15px — so the clans box jumps the
   whole board on a phone. This one does not. (The clan box still does; it is
   one number in clan.css and not this change's to make.) */
.fd{position:relative}
.fd__box{position:relative;display:flex;align-items:center}
.fd__g{width:20px;height:20px;flex:0 0 auto;color:var(--key)}
.fd__box .fd__g{position:absolute;left:11px;pointer-events:none}
.fd__in{width:100%;min-width:0;padding:11px 12px 11px 38px;border:2px solid var(--key);border-radius:12px;
  background:#fff;font:700 16px var(--ui);color:var(--key);outline:0;-webkit-appearance:none;appearance:none}
.fd__in::placeholder{color:#7A8395;font-weight:600}
.fd__in:focus{box-shadow:0 0 0 3px rgba(216,73,141,.35)}
.fd__in::-webkit-search-decoration,.fd__in::-webkit-search-results-button{display:none}
/* the status line is the component's whole voice: too short, searching, empty,
   a count. It is aria-live, so a screen reader hears each one. */
.fd__s{margin:8px 2px;font:700 13.5px var(--ui);color:var(--ink-dim,#3A4354);min-height:1em}
.fd__r{margin-bottom:4px}
.fd__r:empty{display:none}
/* while a query is live, your own list gets out of the way (friends.js lift) */
.pf-view--friends.is-finding > .fr-list,
.pf-view--friends.is-finding > .pf-note,
.pf-view--friends.is-finding > .pf-state{display:none}
.fd .fr-act--go{background:var(--yellow,#FFFE9A)}
.fd .fr-act--go:hover{background:#fff}

/* THE BOARD'S HEAD DOES NOT GROW. .lbhead__r is the period strip's row; the
   glass sits at the end of it and the field slides over the strip on a tap, so
   the board below never moves. z-index clears .otabs (style.css:811, z-index 2). */
/* the head out-ranks the sticky podium (z-index 4) only while the box is open,
   or the top three sit on top of the results and swallow the taps */
.lbhead.is-finding{z-index:9}
.lbhead__r{display:flex;align-items:center;gap:8px;min-width:0}
.lbhead__r .otabs{flex:1 1 auto;min-width:0}
/* THE FIELD FLOATS, IT DOES NOT PUSH. As a flex sibling it squeezed the period
   strip to 10px on a 390px phone and its tabs stacked, taking the head from
   200px to 243px — the opposite of the point. Absolute, anchored to the left of
   the glass, it lies OVER the strip instead and the row keeps its height. */
/* AND IT HAS TO BE ON TOP OF THE STRIP IT FLOATS OVER. .otabs is
   position:relative z-index:2 (style.css:811), so an un-layered field lying
   over it was painted UNDER it: the strip's own box ate every click on the
   input, and the only reason typing worked at all was that the glass focuses
   the field in script. Measured with elementFromPoint at the middle of the
   input: "otabs lbtabs--sub". (Luke, 16 Sep: "it doesnt let me click the
   search box anymore".) */
.fd--compact{position:relative;z-index:5;flex:0 0 auto;display:flex;align-items:center}
.fd--compact .fd__box{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);
  width:0;overflow:hidden;opacity:0;transition:width .18s ease-out,opacity .12s ease-out}
.fd--compact.is-open .fd__box{width:min(300px,52vw);opacity:1}
.fd--compact .fd__box .fd__g{display:none}          /* the glass is the toggle out here */
.fd--compact .fd__in{padding:7px 10px;font-size:16px;border-radius:10px;box-shadow:0 2px 0 var(--key)}
.fd__t{display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto;
  width:34px;height:34px;padding:0;border:2px solid var(--key);border-radius:10px;background:#fff;
  box-shadow:0 2px 0 var(--key);color:var(--key);cursor:pointer}
.fd__t:hover{background:var(--yellow,#FFFE9A)}
.fd__t:active{transform:translateY(2px);box-shadow:0 0 0 var(--key)}
/* 34px of ink, 46px of target: the row keeps its height and the thumb still
   lands (min 44pt). The strip scrolls under it, so the slop cannot be padding. */
.fd__t::after{content:"";position:absolute;inset:-6px}
.fd--compact.is-open .fd__t{background:var(--yellow,#FFFE9A)}
.fd--compact .fd__pop{position:absolute;z-index:6;top:calc(100% + 8px);right:0;width:min(420px,86vw);
  max-height:min(56vh,420px);overflow:auto;padding:10px 12px 4px;background:#fff;
  border:2px solid var(--key);border-radius:14px;box-shadow:0 6px 0 rgba(11,15,24,.18)}
.fd--compact .fd__s{margin-top:0}

@media (max-width:1023px){
  /* every action in a result row is a thumb target, whatever .fr-act does
     elsewhere (profile.css:470 leaves it at 36px) */
  .fd .fr-act{min-height:44px}

  /* THE PHONE GETS A FIELD, NOT A GLASS — because the row has no room to hide
     one in. Measured on the untouched build: the period strip is 302px wide at
     390 and its three stickers end at 276, so 26px is all the slack there is,
     and .otabs WRAPS in stage layout rather than scrolling (stage.css:1414) —
     the 34px toggle pushed "This week" onto a second line and took the head
     from 157px to 200px with the box still shut. At 360 that strip already
     wraps on its own.
     So the phone spends one line on purpose and gets the better half of the
     trade: a field you can see instead of a glass you have to know about. */
  .lbhead__r{flex-wrap:wrap}
  .fd--compact{width:100%;order:3;margin-top:6px}
  .fd--compact .fd__t{display:none}
  .fd--compact .fd__box{position:static;transform:none;width:100%;opacity:1}
  .fd--compact .fd__box .fd__g{display:block}
  .fd--compact .fd__in{padding:11px 12px 11px 38px;border-radius:12px}
  .fd--compact .fd__pop{width:100%;right:0;top:calc(100% + 6px)}
}

/* the tabs and the §3.5 note step aside with the list while a query is live
   (PLAN-FOLLOWERS): ten results stacked under three tabs and a warning is four
   competing headers over one list. */
.pf-view--friends.is-finding > .fr-tabs{display:none}