/* Friendly village scenery, isolated to the member directory. */
body[data-view="friends"] { isolation:isolate; background:#f2f5ed; }
body[data-view="friends"]::before {
  content:''; position:fixed; inset:0; bottom:auto; height:100vh; height:100lvh;
  z-index:-1; pointer-events:none;
  background-image:linear-gradient(130deg,#f8f3e4df,#edf5eddf 55%,#edf1f7dc),url('/assets/page-art/feed_following.webp');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
body[data-view="friends"] .col-left { background:#fffdf8e8; border-radius:15px; padding-left:8px; }
.friends-page { --friends-green:#45765e; --friends-ink:#475a4f; --friends-line:#dce6d8; }
.friends-page .friends-welcome { position:relative; isolation:isolate; overflow:hidden; padding:0; min-height:230px; border-radius:21px; background:#fff5de; border:1px solid #fff8e9; box-shadow:0 6px 22px #6d704413; }
.friends-welcome-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 50%; z-index:-2; }
.friends-welcome::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#fff9eafa 0%,#fff9eaf0 34%,#fff9ea87 63%,#fff9ea0d 100%); }
.friends-welcome-copy { padding:27px; }
.friends-page .friends-welcome-sign { display:inline-flex; align-items:center; gap:5px; border:1px solid #d6be8c; border-radius:7px; padding:4px 9px; background:#fffcef; color:#8a692e; font-size:10px; font-weight:600; transform:rotate(-2deg); }
.friends-welcome-sign .ui-icon { width:13px; height:13px; }
.friends-page .friends-intro h1 { color:#67512e; font-size:32px; margin:13px 0 8px; letter-spacing:.05em; }
.friends-page .friends-intro h1 .ui-icon { width:26px; height:26px; color:#8f743e; }
.friends-page .friends-intro p { margin:0; color:#74654e; font-size:12px; line-height:1.9; }
.friends-welcome-links { display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
.friends-page .friends-welcome-links .btn { font-size:11px; background:#fffaf0; color:#7f6637; border-color:#d8c6a1; }
.friends-page .friends-welcome-links .btn-primary { background:var(--friends-green); border-color:var(--friends-green); color:#fff; }
.friends-page .friends-filters { background:#fffdf7; border:1px solid #d9e1ce; border-radius:14px; box-shadow:0 4px 16px #51704a12; scroll-margin-top:calc(var(--friend-header-height,68px) + 12px); }
.friends-page .friend-filter-heading strong { color:#56704c; }
.friends-page .friend-filter-heading strong::before { content:'✦'; color:#b09655; margin-right:5px; }
.friends-page .friend-filter-total,.friends-page .friend-group-count { color:#47705d; }
.friends-page .friend-filter-help { color:#898271; }
.friends-page .friend-filter-group { border-color:#e7e6d9; }
.friends-page .friend-filter-group summary { color:#657151; }
.friends-page .friend-filter-group:nth-of-type(2) summary { color:#98754c; }
.friends-page .friend-filter-group:nth-of-type(3) summary { color:#7c6397; }
.friends-page .friend-filter-group:nth-of-type(4) summary { color:#4c7c91; }
.friends-page .friend-filter-pill { background:#f5f8ee; border-color:#dfe5d3; color:#607348; }
.friends-page .friend-filter-group:nth-of-type(2) .friend-filter-pill { background:#fff6e9; border-color:#eadbc3; color:#927446; }
.friends-page .friend-filter-group:nth-of-type(3) .friend-filter-pill { background:#f7f0fc; border-color:#e2d6ee; color:#7b6193; }
.friends-page .friend-filter-group:nth-of-type(4) .friend-filter-pill { background:#eef7fc; border-color:#d4e5ee; color:#567f94; }
.friends-page .friend-filter-group .friend-filter-pill.is-selected { color:#fff; background:#5f8668; border-color:#45694f; box-shadow:inset 0 0 0 1px #45694f; }
.friends-page .friend-filter-group:nth-of-type(2) .friend-filter-pill.is-selected { background:#9b7949; border-color:#836439; box-shadow:inset 0 0 0 1px #836439; }
.friends-page .friend-filter-group:nth-of-type(3) .friend-filter-pill.is-selected { background:#8a6ea2; border-color:#74598c; box-shadow:inset 0 0 0 1px #74598c; }
.friends-page .friend-filter-group:nth-of-type(4) .friend-filter-pill.is-selected { background:#5c879b; border-color:#486f82; box-shadow:inset 0 0 0 1px #486f82; }
.friends-page .friend-filter-clear { background:#fcf6e9; border-color:#e8dbbd; color:#8c744b; }
.friends-neighbors-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:21px 0 13px; }
.friends-section-sign { display:flex; align-items:center; gap:5px; color:#8c835f; font-size:9px; letter-spacing:.06em; }
.friends-section-sign .ui-icon { width:12px; height:12px; }
.friends-neighbors-heading h2 { margin:6px 0 0; color:#52705c; font-size:15px; font-weight:650; }
.friends-neighbors-heading>p { margin:0; color:#889183; font-size:10px; }
.friends-page .friend-card { position:relative; overflow:hidden; border:1px solid #e5dcc6; border-radius:14px; background:#fffdf5; box-shadow:0 3px 9px #685f3c08; }
.friends-page .friend-card::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background:#e1cd9d; }
.friends-page .friend-card:nth-child(5n+2) { background:#f6fcf8; border-color:#d5e4db; }
.friends-page .friend-card:nth-child(5n+2)::before { background:#b3d7c3; }
.friends-page .friend-card:nth-child(5n+3) { background:#fcf8ff; border-color:#e4d7ee; }
.friends-page .friend-card:nth-child(5n+3)::before { background:#d6bee6; }
.friends-page .friend-card:nth-child(5n+4) { background:#f5fbff; border-color:#d6e5ee; }
.friends-page .friend-card:nth-child(5n+4)::before { background:#b9d9e9; }
.friends-page .friend-card:nth-child(5n+5) { background:#fff8f6; border-color:#eddbd4; }
.friends-page .friend-card:nth-child(5n+5)::before { background:#eac8bb; }
.friends-page .friend-avatar { border:2px solid #fff; box-shadow:0 0 0 1px #ded8c9,0 4px 9px #69704a13; }
.friends-page .friend-profile h2 { color:#526458; }
.friends-page .friend-labels .chip { background:#f1eddf; color:#8a7b56; }
.friends-page .friend-stats { border-top-color:#e7e5d9; }
.friends-page .friend-stats dt { color:#8a9084; }
.friends-page .friend-stats dd { color:#5e7665; }
.friends-page .friend-card .friend-actions .btn { background:#fffefa; color:#6d7d61; border-color:#dce2d2; }
.friends-page .friend-card .friend-actions .btn-primary { color:#fff; background:#64856b; border-color:#64856b; }
.friends-page .friend-dialog { background:#fffdf7; border-color:#d5deca; border-radius:17px; }
.friends-page .friend-dialog h2 { color:#55705c; }
.friends-page .friend-dialog .btn-primary { background:#557e60; border-color:#557e60; }
.friends-page :is(a,button,summary,textarea):focus-visible { outline:2px solid #5b8866; outline-offset:3px; }
@media(max-width:600px) {
  .friends-page .friends-welcome { min-height:215px; border-radius:17px; }
  .friends-welcome-copy { padding:22px 19px; }
  .friends-page .friends-intro h1 { font-size:28px; }
  .friends-welcome-art { object-position:70% 50%; }
  .friends-welcome::after { background:linear-gradient(90deg,#fff9eafc 0%,#fff9eae0 43%,#fff9ea75 77%,#fff9ea25); }
  .friends-neighbors-heading { margin-top:18px; }
  .friends-neighbors-heading h2 { font-size:14px; }
  body[data-view="friends"] .col-left { padding-left:20px; }
}
@media(prefers-reduced-transparency:reduce) { body[data-view="friends"]::before { background-image:linear-gradient(#f4f7eef2,#f4f7eef2),url('/assets/page-art/feed_following.webp'); } }
@media(prefers-contrast:more) { body[data-view="friends"]::before { background-image:none; background-color:#f3f5ed; } .friends-welcome::after { background:linear-gradient(90deg,#fffaf1 0%,#fffaf1f2 68%,#fffaf160); } .friends-page .friend-card { background:#fff; } }

/* Mobile friends welcome banner uses the same full-bleed placement as village hall. */
@media (max-width: 720px) {
  body[data-view="friends"] .shell { margin-top: 0; }
  body[data-view="friends"] .topbar { border-bottom: 0; box-shadow: none; }
  body[data-view="friends"] .friends-page .friends-welcome {
    width: calc(100% + 24px);
    margin: 0 -12px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}