/* Friends uses the journal's paper surfaces, with comfortable phone controls. */
/* Pending requests stay visible in shared navigation and the Requests tab. */
.meso-header .primary-navigation [data-view="friends"]{position:relative;}
.friends-request-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;padding:0 4px;border:1px solid #e2c58b;border-radius:10px;background:#925737;color:#fff7e5;font:700 11px/1 var(--sans);white-space:nowrap;}
.friends-request-badge[hidden]{display:none;}
.friends-request-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#friends-content .social-connection-tabs [data-friend-tab="incoming"].has-incoming-requests{border-color:#ba945c;box-shadow:inset 0 0 0 1px #ba945c;}
#friends-content .social-connection-tabs .has-incoming-requests .social-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;padding:1px 5px;border-radius:10px;background:#925737;color:#fff7e5;font-size:12px;font-weight:700;}
#friends-content .social-person-actions .social-request-accept,#friends-content #request-found-friend{background:#4c5841;border:1px solid #a98e55;color:#fff7e5;font-weight:600;}
#friends-content .social-person-actions .social-request-accept:hover,#friends-content #request-found-friend:hover{background:#3e4d36;border-color:#ba945c;}
@media(max-width:380px){.friends-request-badge{min-width:16px;height:16px;margin-left:3px;padding-inline:3px;font-size:10px;}}
.friends-heading { grid-template-columns:minmax(0,1fr); }
.friends-heading h1 { min-height:0; }
#friends-content .social-main-column,#friends-content .social-request-column { display:flex; flex-direction:column; gap:0; min-width:0; align-self:start; }
#friends-content .social-main-column>.social-panel+.social-panel,#friends-content .social-request-column>.social-panel+.social-panel { margin-top:24px; }
#friends-content .social-panel { height:auto; min-height:0; flex:0 0 auto; margin:0; }
.social-panel .secondary-button { background:var(--ink); color:var(--on-ink); border-color:#526655; }
.social-panel .secondary-button:hover { background:#49564c; }
.social-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.social-panel { background:var(--card); border:1px solid var(--sand-rule); border-radius:10px; padding:24px; min-width:0; }
.social-panel h2 { font-size:27px; overflow-wrap:anywhere; }
.social-panel p:last-child { margin-bottom:0; }
.social-section-heading { display:flex; gap:16px; align-items:start; justify-content:space-between; }
.social-rosters { display:flex; gap:8px; margin:16px 0; }
.social-rosters button { flex:1; min-height:44px; }
.social-rosters button[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:var(--on-ink); }
.social-date { font-weight:600; }
.social-help,.social-username-form .social-help { font-size:14px; line-height:1.65; margin:0 0 12px; color:var(--muted); }
.social-username-form input,.social-copy-link,#friend-username { background:#f5f1e7; font-size:16px; width:100%; min-width:0; }
.social-copy-link { min-height:48px; padding:12px; border:1px solid var(--sand-rule); border-radius:6px; }
.social-profile-edit { margin-top:18px; }
.social-profile-heading { display:flex; align-items:center; gap:18px; margin-bottom:22px; min-width:0; }
.social-profile-heading>div { min-width:0; }
.social-profile-heading h2 { margin:0; }
.social-profile-heading .social-profile-link { display:inline-flex; align-items:center; min-height:44px; margin:0; padding:6px 0; border:0; background:transparent; color:var(--rust); font:14px var(--sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.social-profile-heading .social-profile-link:hover { color:#743d25; }
.social-profile-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.social-profile-actions button { width:100%; min-width:0; min-height:44px; padding:10px 8px; }
.social-profile .social-avatar-large { width:72px; height:72px; flex-basis:72px; }
#friend-search { margin-bottom:0; }
#friend-search-result:empty { display:none; }
#friend-search-result:not(:empty) { margin-top:16px; }
#cancel-username-change { margin-top:16px; }
.avatar-beta-option { display:flex; align-items:center; gap:12px; margin:18px 0 6px; font-weight:600; cursor:pointer; min-height:44px; }
.avatar-beta-option input { width:20px; height:20px; flex:0 0 20px; margin:0; accent-color:var(--rust); }
.social-person-name,.social-player { display:flex; align-items:center; gap:16px; min-width:0; }
.social-player-name { min-width:0; overflow-wrap:anywhere; }
.social-avatar { --avatar-radius:10px; --beta-outset:5px; --beta-sprig-size:20px; --beta-sprig-offset:-7px; --avatar-glow:#637257; display:inline-grid; place-items:center; position:relative; isolation:isolate; flex:0 0 44px; width:44px; height:44px; overflow:visible; border-radius:var(--avatar-radius); background:radial-gradient(ellipse at 28% 8%,var(--avatar-glow),transparent 76%),linear-gradient(145deg,#354b3c,#1e3027); color:#eadfc3; border:1px solid #71806c; box-shadow:0 2px 4px #18281d33,inset 0 0 0 1px #17291f88; vertical-align:middle; }
.avatar-beta-ornament { position:absolute; inset:calc(0px - var(--beta-outset)); border:1px solid #d7b65b; border-radius:calc(var(--avatar-radius) + var(--beta-outset)); box-shadow:0 0 0 1px #74561e66; color:#dfbd65; pointer-events:none; z-index:4; }
.social-avatar .avatar-beta-ornament .avatar-beta-sprig { visibility:visible; position:absolute; width:var(--beta-sprig-size); height:var(--beta-sprig-size); top:var(--beta-sprig-offset); left:var(--beta-sprig-offset); filter:drop-shadow(0 1px 0 #6f512b); }
.social-avatar .avatar-beta-ornament .avatar-beta-sprig:last-child { top:auto; left:auto; right:var(--beta-sprig-offset); bottom:var(--beta-sprig-offset); transform:rotate(180deg); }
.social-avatar[data-profile-symbol=carnivore] { --avatar-glow:#70624b; }
.social-avatar[data-profile-symbol=omnivore] { --avatar-glow:#4c7166; }
.social-avatar::before { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; background:url('textures/matte-ink-v1.png') center/128px; opacity:.36; mix-blend-mode:soft-light; pointer-events:none; }
.social-avatar::after { content:""; position:absolute; inset:4px; z-index:3; border:1px solid #a9b19a66; border-radius:calc(var(--avatar-radius) - 4px); box-shadow:0 1px 0 #10221999,inset 0 1px 0 #e7dabe22; pointer-events:none; }
.social-avatar .avatar-symbol { width:90%; height:90%; position:relative; z-index:1; }
.social-avatar .avatar-impression-shadow { color:#14251b; opacity:.8; }
.social-avatar .avatar-impression { filter:drop-shadow(0 -0.35px 0 #fff4d650); }
.social-avatar .avatar-cut { fill:none; stroke:#344a39; stroke-width:1.2; }
.social-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:calc(var(--avatar-radius) - 1px); opacity:0; }
.social-avatar.has-picture img { opacity:1; }
.social-avatar.has-picture .avatar-symbol { visibility:hidden; }
.social-avatar.has-picture::before { opacity:0; }
.social-avatar-large { width:88px; height:88px; flex-basis:88px; --avatar-radius:16px; }
.social-table .social-avatar { width:36px; height:36px; flex-basis:36px; --avatar-radius:8px; --beta-outset:2px; --beta-sprig-size:12px; --beta-sprig-offset:-4px; }
.social-table .avatar-beta-ornament { box-shadow:none; }
.social-table .social-player { gap:12px; }
.avatar-preview { display:flex; justify-content:center; margin:22px 0; }
.avatar-preview .social-avatar { width:120px; height:120px; flex-basis:120px; }
.avatar-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:22px; }
.avatar-preset { display:flex; align-items:center; flex-direction:column; gap:9px; padding:14px 7px; min-width:0; border:1px solid var(--sand-rule); border-radius:8px; background:var(--sand-input); color:var(--ink); font:13px var(--sans); }
.avatar-preset[aria-pressed=true] { border:2px solid var(--ink); padding:13px 6px; background:#f5f1e7; }
.avatar-preset:hover { background:#f5f1e7; }
.avatar-upload-label { display:block; margin-bottom:10px; font-weight:600; }
#avatar-file { width:100%; min-width:0; margin:0 0 12px; color:var(--ink); }
#avatar-file::file-selector-button { min-height:44px; margin-right:10px; padding:8px 12px; border:1px solid var(--sand-rule); border-radius:6px; background:#f5f1e7; color:var(--ink); }
#friends-action-message:empty { display:none; }
.social-profile-edit summary,.social-panel details>summary,.account-social summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.social-people { list-style:none; padding:0; margin:12px 0 0; }
.social-panel>.social-people { max-height:380px; overflow:auto; padding-left:12px; padding-right:16px; padding-bottom:12px; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--rust) var(--sand-input); overscroll-behavior:contain; }
.social-panel>.social-people::-webkit-scrollbar { width:8px; height:8px; }
.social-panel>.social-people::-webkit-scrollbar-button { display:none; width:0; height:0; }
.social-panel>.social-people::-webkit-scrollbar-track { background:var(--sand-input); border-radius:8px; }
.social-panel>.social-people::-webkit-scrollbar-thumb { background:var(--rust); border:2px solid var(--sand-input); border-radius:8px; }
.social-panel>.social-people::-webkit-scrollbar-thumb:hover { background:#743d25; }
.social-people li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--sand-rule); }
.social-people li:last-child { border-bottom:0; padding-bottom:0; }
.social-people strong { overflow-wrap:anywhere; min-width:0; }
.social-person-actions { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.social-person-actions button { min-height:44px; padding:8px 12px; }
.social-count { font:14px var(--sans); padding:3px 7px; background:var(--sand-input); border-radius:5px; }
.social-table-wrap { width:100%; overflow-x:auto; margin:20px 0; }
.social-table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; }
.social-table th,.social-table td { padding:14px 10px; border-bottom:1px solid var(--sand-rule); vertical-align:middle; }
.social-table thead th { font-size:12px; font-weight:500; }
.social-table tbody th { max-width:22ch; overflow-wrap:anywhere; }
.social-table small { display:block; font-weight:400; font-size:12px; margin-top:4px; }
.social-self { background:var(--sand-input); }
.social-you { font-size:11px; font-weight:400; display:inline-block; margin-left:4px; }
.social-result { margin:14px 0 0; font-size:12px; }
.social-result .action-link { font-size:13px; min-height:44px; }
.account-social { border-top:1px solid var(--sand-rule); padding-top:14px; margin-top:20px; }
.social-message:not(:empty),#friends-action-message:not(:empty) { border-left:3px solid var(--rust); padding-left:12px; }
.social-leading { background:var(--ink); border-color:#526655; color:var(--on-ink); }
.social-leading h2,.social-leading label,.social-leading .action-link { color:var(--on-ink); }
.social-leading p,.social-leading .eyebrow,.social-leading .social-help,.social-leading .social-username-form .social-help { color:var(--muted-on-ink); }
.social-leading input { color:var(--ink); }
.social-leading .social-message:not(:empty) { border-color:var(--map-gold); color:var(--on-ink); }
.social-leading .social-rosters button { background:#354039; border-color:#929a85; color:var(--on-ink); }
.social-leading .social-rosters button[aria-pressed=true] { background:#49564c; border-color:var(--map-gold); }
.social-leading #refresh-friends { background:var(--sand-input); border-color:#b3a37c; color:var(--ink); }
.social-leading #refresh-friends:hover { background:#f1e5cc; }
.social-leading .social-table th,.social-leading .social-table td { border-color:#b8aa8755; }
.social-leading .social-self { background:#3b4540; }
@media(max-width:760px){ .social-layout { grid-template-columns:minmax(0,1fr); } .social-panel { padding:20px; } }
@media(max-width:440px){ .social-people li { align-items:start; flex-direction:column; } .social-person-actions { width:100%; } .social-person-actions button { flex:1; } .social-table th,.social-table td { padding:12px 6px; } .social-table { font-size:13px; } }


/* Society and beta are independent rewards; only the selected frame is worn.
   Keep the uploaded image inside its original rounded boundary. */
.avatar-frame-choices { margin:18px 0 12px; padding:0; min-width:0; border:0; }
.avatar-frame-choices label { display:block; margin-bottom:8px; font-weight:600; }
.avatar-frame-choices select { display:block; width:100%; min-height:44px; padding:10px 12px; border:1px solid #9c895b; border-radius:6px; background:#f2e9d9; color:#19252b; font:16px var(--sans); }
.avatar-frame-choices select:focus-visible { outline:2px solid var(--focus-ring,#edddb7); outline-offset:3px; }
.social-avatar .avatar-society-ornament { position:absolute; inset:calc(0px - var(--beta-outset)); z-index:4; border:2px solid #19252b; border-radius:calc(var(--avatar-radius) + var(--beta-outset)); box-shadow:0 0 0 1px #ba945c,inset 0 0 0 1px #ba945c; color:#d0ae78; pointer-events:none; }
.social-avatar .avatar-society-ornament .avatar-society-moth { position:absolute; visibility:visible; width:45%; max-width:30px; height:auto; aspect-ratio:960 / 450; bottom:-5px; left:50%; transform:translateX(-50%); box-sizing:content-box; padding:2px 3px; border:1px solid #ba945c; border-radius:3px; background:#19252b; }