/* v38 friends: the people and their replies come before the scoreboards. */
.friends-v38 {
  --experience-accent: #d9bea4;
  --experience-rgb: 217, 190, 164;
  --friends-accent: #dbbf98;
  --friends-muted: #bcb3a4;
  --friends-line: rgba(219,191,152,.18);
}
.friends-v38 .experience-heading { max-width: 1000px; justify-content: flex-start; }
.friends-v38 .friends-mark { border: 0; background: none; }
.friends-v38 .friends-mark svg { width: 65px; height: 65px; stroke-width: 1.15; }
.friends-v38 .experience-heading h1 { color: #eee0c4; }
.friends-v38 .friends-app { max-width: 1000px; margin: 0 auto; }
.friends-v38 .xj-muted, .friends-v38 .xj-empty { color: var(--friends-muted); }
.friends-v38 :is(button,a,summary,input,select,textarea):focus-visible { outline: 2px solid #e1c281; outline-offset: 3px; }
.friends-v38 #friends-app :is(button,.btn,summary) { min-height: 44px; }
.friends-v38 #friends-app button { font-family: var(--font-sans); }
.friends-v38 #friends-app :is(input,textarea,select) { font-size: 16px; min-height: 46px; }
.friends-v38 #friends-app [hidden] { display: none !important; }
.friends-v38 #friends-app .xj-inline-btn { border-radius: 9px; padding: .5rem .8rem; font-size: .82rem; line-height: 1.4; }
.friends-v38 #friends-app button:disabled { cursor: default; opacity: .55; }
.friends-v38 #friends-app .xj-link { display: inline-flex; align-items: center; min-height: 44px; }
.friends-v38 .xj-social-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 1rem; }
.friends-v38 .xj-social-toolbar > div { min-width: 0; }
.friends-v38 .xj-social-toolbar h2 { margin: 0 0 .15rem; font-family: var(--font-serif); font-size: 1.23rem; font-weight: 500; color: #eee0c4; }
.friends-v38 .xj-social-toolbar p { margin: 0; font-size: .83rem; color: var(--friends-muted); }
.friends-v38 #xj-add-friend { white-space: nowrap; flex-shrink: 0; border-radius: 10px; padding-inline: 1.15rem; }
.friends-v38 .xj-social-layout { max-width: none; margin: 0 0 2.5rem; display: grid; grid-template-columns: minmax(0,1fr) 255px; gap: 1.5rem; }
.friends-v38 .xj-social-main { min-width: 0; gap: 1rem; }
.friends-v38 .xj-social-main > .xj-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
.friends-v38 .xj-social-side { min-width: 0; }
.friends-v38 .xj-social-side .xj-card { padding: 1rem; background: rgba(27,23,18,.72); border-color: var(--friends-line); border-radius: 14px; box-shadow: none; }
.friends-v38 .xj-tabs { display: flex; align-items: center; flex-wrap: nowrap; gap: .1rem; margin-bottom: 1.15rem; padding: 0 0 .15rem; border-color: var(--friends-line); min-width: 0; }
.friends-v38 .xj-tab { min-width: 0; padding: .65rem .8rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--friends-muted); line-height: 1.3; white-space: nowrap; }
.friends-v38 .xj-tab.on { color: #f0dcae; background: transparent; border-bottom-color: #d7b467; }
.friends-v38 .xj-tab:hover { color: #f0dcae; background: rgba(219,191,152,.045); }
.friends-v38 .xj-nav-more { position: relative; margin-left: auto; flex-shrink: 0; }
.friends-v38 .xj-nav-more > summary { padding: .65rem .5rem; cursor: pointer; color: var(--friends-muted); font-size: .83rem; display: flex; align-items: center; gap: .3rem; list-style: none; }
.friends-v38 .xj-nav-more > summary::-webkit-details-marker { display: none; }
.friends-v38 .xj-nav-more > summary::after { content: '⌄'; font-size: .85rem; }
.friends-v38 .xj-nav-more[open] > summary { color: #f0dcae; }
.friends-v38 .xj-nav-more > :not(summary) { background: #221c14; }
.friends-v38 .xj-nav-more > div { position: absolute; right: 0; top: calc(100% + .3rem); width: 180px; padding: .4rem; border: 1px solid var(--friends-line); border-radius: 10px; box-shadow: 0 10px 24px #0009; z-index: 12; }
.friends-v38 .xj-nav-more > div > .xj-tab { display: block; text-align: left; width: 100%; border: 0; padding-inline: .8rem; border-radius: 6px; }
.friends-v38 .xj-todaycard { padding: 1.1rem 1.15rem; margin: 0 0 1.2rem; border: 1px solid rgba(211,177,130,.27); border-radius: 16px; background: radial-gradient(ellipse at 0 0,rgba(213,170,114,.1),transparent 80%), #191510; box-shadow: none; }
.friends-v38 .xj-todaycard h2 { margin: 0 0 .2rem; font-family: var(--font-serif); font-size: 1.08rem; color: #e9d4ac; font-weight: 500; }
.friends-v38 .xj-todaycard > p { color: var(--friends-muted); font-size: .82rem; margin: .2rem 0 .7rem; line-height: 1.6; }
.friends-v38 .xj-todos { display: grid; gap: 0; }
.friends-v38 .xj-todo { display: flex; width: 100%; align-items: center; gap: .7rem; white-space: normal; text-align: left; padding: .8rem 0; border: 0; border-top: 1px solid var(--friends-line); border-radius: 0; background: none; color: #e8dfcf; font-size: .9rem; font-family: var(--font-sans); line-height: 1.5; }
.friends-v38 button.xj-todo { cursor: pointer; }
.friends-v38 button.xj-todo:hover { background: rgba(219,191,152,.035); }
.friends-v38 .xj-todo > span { min-width: 0; }
.friends-v38 .xj-todo strong, .friends-v38 .xj-todo b { font-weight: 500; color: #f0e4cc; }
.friends-v38 .xj-todo small { display: block; font-size: .77rem; color: var(--friends-muted); line-height: 1.55; margin-top: .12rem; }
.friends-v38 .xj-todo em { margin-left: auto; color: #dcc08a; font-size: .78rem; font-style: normal; flex-shrink: 0; }
.friends-v38 .xj-todo .xj-todo-action { margin-left: auto; color: #dcc08a; font-size: .78rem; flex-shrink: 0; }
.friends-v38 .xj-todo .xj-avatar { width: 36px; height: 36px; border-color: rgba(219,191,152,.45); }
.friends-v38 .xj-todo.ok { color: #c8d1ba; }
.friends-v38 .xj-friends-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin: 0 0 .8rem; }
.friends-v38 .xj-friends-tools > h2, .friends-v38 .xj-friends-tools > h3 { font-size: 1.07rem; margin: 0; flex: 1; font-weight: 500; }
.friends-v38 #xj-friend-filter-input { width: 100%; min-width: 0; padding: .65rem .8rem; border: 1px solid var(--friends-line); border-radius: 10px; background: #100e0b; color: #eee5d5; font-family: var(--font-sans); letter-spacing: 0; }
.friends-v38 #xj-friend-filter-input::placeholder { color: #9f978a; }
.friends-v38 .xj-filter-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.friends-v38 .xj-filter-group button { padding: .5rem .8rem; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--friends-muted); font-size: .83rem; cursor: pointer; }
.friends-v38 .xj-filter-group button.on, .friends-v38 .xj-filter-group button[aria-pressed="true"] { background: #272116; color: #edd7ac; border-color: rgba(219,191,152,.2); }
.friends-v38 .xj-list { gap: .7rem; }
.friends-v38 .xj-friend-card { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: .3rem .85rem; padding: 1rem; border: 1px solid var(--friends-line); border-radius: 14px; background: rgba(22,19,14,.8); cursor: default; box-shadow: none; }
.friends-v38 .xj-friend-card > .xj-avatar { width: 46px; height: 46px; border-color: rgba(219,191,152,.55); grid-column: 1; }
.friends-v38 .xj-friend-main { min-width: 0; grid-column: 2; }
.friends-v38 .xj-friend-main .name { display: flex; align-items: center; gap: .35rem; min-width: 0; color: #eee4d0; font-size: 1rem; line-height: 1.5; }
.friends-v38 .xj-friend-main .name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-v38 .xj-friend-status { color: var(--friends-muted); font-size: .81rem; line-height: 1.55; margin-top: .18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-v38 .xj-friend-main .meta { color: #ada394; font-size: .77rem; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-v38 .xj-friend-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .65rem 0 .2rem; }
.friends-v38 .xj-friend-actions [data-act="chat"] { color: #dfc592; border-color: rgba(219,191,152,.3); background: rgba(219,191,152,.04); }
.friends-v38 .xj-friend-actions .gold, .friends-v38 .xj-friend-actions .xj-primary-action { background: rgba(209,167,95,.14); border-color: rgba(221,185,117,.35); color: #f0d59c; }
.friends-v38 .xj-friend-card .xj-interactions { margin-top: .15rem; }
.friends-v38 .xj-interactions > summary, .friends-v38 .xj-friend-more > summary { display: flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; color: #bcb3a4; font-size: .8rem; padding: .45rem 0; width: fit-content; }
.friends-v38 .xj-interactions > summary::after, .friends-v38 .xj-friend-more > summary::after { content: '⌄'; }
.friends-v38 :is(.xj-interactions,.xj-friend-more) > summary::-webkit-details-marker { display: none; }
.friends-v38 .xj-interactions[open] > summary { color: #e6c790; }
.friends-v38 .xj-interaction-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding: .2rem 0 .65rem; }
.friends-v38 .xj-interactions .xj-friend-tags { gap: .4rem; margin-top: .3rem; }
.friends-v38 .xj-interactions :is(.xj-pill,.xj-q-tag,.xj-fate-lv) { border-radius: 5px; font-size: .7rem; }
.friends-v38 .xj-interactions .xj-fate-mini { margin-top: .6rem; }
.friends-v38 .xj-friend-more { grid-column: 2; border-top: 1px solid var(--friends-line); margin-top: .25rem; }
.friends-v38 .xj-friend-more > summary { color: #a99f8e; }
.friends-v38 .xj-friend-more > div { display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: .4rem; }
.friends-v38 .xj-progress-details { margin-top: .85rem; border-top: 1px solid var(--friends-line); color: var(--friends-muted); }
.friends-v38 .xj-progress-details > summary, .friends-v38 .xj-profile-details > summary { cursor: pointer; color: var(--friends-muted); font-size: .84rem; padding: .7rem 0; line-height: 1.5; list-style-position: inside; }
.friends-v38 .xj-progress-details .xj-quest { margin-top: .3rem; margin-bottom: 0; padding: .7rem 0 0; border: 0; background: none; }
.friends-v38 .xj-progress-details .xj-quest-tiles { gap: .4rem; }
.friends-v38 .xj-progress-details .xj-quest-tile { padding: .4rem .5rem; min-height: 44px; display: inline-flex; align-items: center; }
.friends-v38 .xj-side-me { text-align: left; }
.friends-v38 .xj-side-me .xj-code { font-size: 1.1rem; }
.friends-v38 .xj-profile-details { width: 100%; }
.friends-v38 .xj-profile-details > summary { font-family: var(--font-serif); color: #d3c5ad; font-size: .94rem; }
.friends-v38 .xj-profile-details .xj-status-box { text-align: left; margin-top: .5rem; }
.friends-v38 .xj-profile-details .xj-status-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.friends-v38 .xj-profile-details .xj-status-row input { width: 100%; flex: 1 1 135px; min-width: 0; color: #eee4d0; }
.friends-v38 .xj-ach-head { flex-wrap: wrap; gap: .4rem; }
.friends-v38 .xj-ach-row small { font-size: .76rem; color: #b2a999; }
.friends-v38 .xj-empty { padding: 1.75rem 1rem; border: 1px dashed rgba(219,191,152,.27); border-radius: 14px; background: rgba(219,191,152,.025); }
.friends-v38 .xj-empty h2, .friends-v38 .xj-empty h3 { color: #e8d2ac; font-family: var(--font-serif); font-size: 1.15rem; margin: .4rem 0; }
.friends-v38 .xj-empty p { max-width: 27rem; margin: .4rem auto .9rem; line-height: 1.7; font-size: .85rem; }
.friends-v38 .xj-empty .xj-row { justify-content: center; margin-top: .8rem; }
.friends-v38 .modal-backdrop { padding: 1rem; }
.friends-v38 #friends-app .modal { width: 100%; max-width: 560px; max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; padding: 1.5rem; border-color: rgba(219,191,152,.35); }
.friends-v38 #friends-app .modal h2, .friends-v38 #friends-app .modal h3 { padding-right: 2.5rem; color: #ead5ac; text-align: left; font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: .75rem; }
.friends-v38 #friends-app .modal p { text-align: left; margin: .5rem 0 .9rem; line-height: 1.65; color: #c1b6a4; }
.friends-v38 #friends-app .modal-close { min-width: 44px; width: 44px; height: 44px; top: .55rem; right: .55rem; display: grid; place-items: center; }
.friends-v38 .xj-add-modal .xj-search { margin-top: .5rem; }
.friends-v38 .xj-add-modal .xj-search input { letter-spacing: .02em; padding-inline: .7rem; }
.friends-v38 .xj-add-modal .xj-search .btn { padding-inline: 1rem; }
.friends-v38 .xj-add-modal .xj-invite { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--friends-line); }
.friends-v38 .xj-add-modal #xj-invite-link { font-size: 16px; }
.friends-v38 .xj-add-modal .xj-invite-fold { display: grid; }
.friends-v38 .xj-add-modal .xj-invite-toggle { display: none; }
.friends-v38 .xj-add-modal label { display: block; font-size: .86rem; color: #e2cfae; margin-bottom: .4rem; }
.friends-v38 .xj-add-modal #xj-search-result:empty { display: none; }
.friends-v38 .xj-add-modal #xj-search-result .xj-item { grid-template-columns: auto minmax(0,1fr); }
.friends-v38 .xj-add-modal #xj-search-result .side { grid-column: 2; justify-items: start; text-align: left; }
.friends-v38 .xj-add-modal #xj-search-result input { width: 100%; min-width: 0; }
.friends-v38 #xj-tab-body > .xj-item, .friends-v38 #xj-tab-body .xj-list > .xj-item:not(.xj-friend-card) { cursor: default; }
.friends-v38 .xj-feed-item { border-radius: 11px; padding: .85rem; }
.friends-v38 .xj-feed-text { font-size: .86rem; }
.friends-v38 .xj-match-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.friends-v38 .xj-match { border-radius: 14px; }
@media (max-width: 900px) {
  .friends-v38 .xj-social-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.15rem; }
  .friends-v38 .xj-social-main { order: 0; width: 100%; }
  .friends-v38 .xj-social-side { order: 1; width: 100%; }
  .friends-v38 .xj-social-side .xj-card { padding-block: .55rem; }
  .friends-v38 .xj-profile-details > summary { padding-block: .75rem; }
}
@media (max-width: 600px) {
  .friends-v38.experience-page .page-hero { padding: 1.15rem 0 1rem; }
  .friends-v38 .experience-heading { gap: .65rem; }
  .friends-v38 .friends-mark { flex-basis: 46px; width: 46px; height: 46px; }
  .friends-v38 .friends-mark svg { width: 47px; height: 47px; }
  .friends-v38 .experience-heading p:not(.experience-kicker) { font-size: .81rem; line-height: 1.6; }
  .friends-v38 .xj-social-toolbar { margin-top: 1.1rem; gap: .6rem; }
  .friends-v38 .xj-social-toolbar h2 { font-size: 1.13rem; }
  .friends-v38 #xj-add-friend { padding-inline: .85rem; font-size: .85rem; }
  .friends-v38 .xj-tabs { gap: 0; margin-bottom: .9rem; }
  .friends-v38 .xj-tab { padding: .65rem .65rem; font-size: .81rem; }
  .friends-v38 .xj-nav-more > summary { font-size: .79rem; padding-inline: .4rem; }
  .friends-v38 .xj-todaycard { padding: .9rem; }
  .friends-v38 .xj-todo { padding: .8rem 0; gap: .5rem; font-size: .84rem; }
  .friends-v38 .xj-todo em, .friends-v38 .xj-todo .xj-todo-action { font-size: .72rem; }
  .friends-v38 .xj-friend-card { padding: .85rem; gap: .2rem .7rem; grid-template-columns: 42px minmax(0,1fr); }
  .friends-v38 .xj-friend-card > .xj-avatar { width: 42px; height: 42px; }
  .friends-v38 .xj-friend-actions { margin-top: .6rem; }
  .friends-v38 .xj-friend-actions .xj-inline-btn { padding-inline: .7rem; font-size: .8rem; }
  .friends-v38 .xj-interaction-actions { margin-left: 0; }
  .friends-v38 #friends-app .modal { padding: 1.2rem; border-radius: 15px; }
  .friends-v38 #friends-app .modal h2, .friends-v38 #friends-app .modal h3 { font-size: 1.12rem; }
  .friends-v38 .xj-match-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .friends-v38 .xj-match { padding: .85rem .6rem; }
  .friends-v38 #xj-tab-body .xj-list > .xj-item:not(.xj-friend-card) { grid-template-columns: auto minmax(0,1fr); }
  .friends-v38 #xj-tab-body .xj-list > .xj-item:not(.xj-friend-card) > .side { grid-column: 2; justify-items: start; text-align: left; }
}
@media (max-width: 359px) {
  .friends-v38 .xj-tab { padding-inline: .43rem; font-size: .75rem; }
  .friends-v38 .xj-nav-more > summary { font-size: .75rem; padding-inline: .2rem; }
  .friends-v38 .xj-todo { flex-wrap: wrap; gap: .25rem .5rem; }
  .friends-v38 .xj-todo > span:not(.xj-todo-action) { flex: 1 1 150px; }
  .friends-v38 .xj-todo em, .friends-v38 .xj-todo .xj-todo-action { margin-left: auto; }
  .friends-v38 .xj-match-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .friends-v38 *, .friends-v38 *::before, .friends-v38 *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* The rendered friend list keeps secondary controls close, without adding rows. */
.friends-v38 .xj-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin: 1.1rem 0 .75rem; }
.friends-v38 .xj-list-heading h2 { margin: 0; font-family: var(--font-serif); font-size: 1.12rem; font-weight: 500; color: #eadcc3; }
.friends-v38 .xj-friend-search-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.friends-v38 .xj-friend-card { position: relative; }
.friends-v38 .xj-friend-main .name { padding-right: 2rem; min-height: 30px; }
.friends-v38 .xj-friend-main .name > a { color: #eee4d0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-v38 .xj-friend-more { position: absolute; top: .45rem; right: .5rem; border: 0; margin: 0; z-index: 1; }
.friends-v38 .xj-friend-more[open] { z-index: 4; }
.friends-v38 .xj-friend-more > summary { width: 44px; height: 44px; justify-content: center; padding: 0; font-size: 1rem; }
.friends-v38 .xj-friend-more > summary::after { content: none; }
.friends-v38 .xj-friend-more > div { position: absolute; right: 0; top: 44px; display: grid; width: 155px; padding: .4rem; background: #241d14; border: 1px solid #685232; border-radius: 10px; box-shadow: 0 10px 20px #0008; }
.friends-v38 .xj-friend-more > div .xj-inline-btn { text-align: left; border: 0; }
.friends-v38 .xj-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.friends-v38 #friends-app .xj-dialog-heading h3 { margin: 0; padding: 0; }
.friends-v38 .xj-dialog-heading > button { flex-shrink: 0; }
.friends-v38 .xj-add-modal .xj-invite { display: block; }
.friends-v38 .xj-add-modal .xj-invite > summary { display: flex; align-items: center; gap: .5rem; padding: .65rem 0; cursor: pointer; color: #dec38f; font-size: .92rem; list-style: none; }
.friends-v38 .xj-add-modal .xj-invite > summary::after { content: '⌄'; margin-left: auto; }
.friends-v38 .xj-add-modal .xj-invite > summary::-webkit-details-marker { display: none; }
.friends-v38 .xj-add-modal .xj-invite[open] > summary { margin-bottom: .6rem; }
.friends-v38 .xj-add-modal #xj-copy-link { margin-top: .6rem; width: 100%; }
.friends-v38 .xj-social-feedback { padding: .75rem 1rem; margin: 0 0 1rem; border-left: 2px solid #d6b06c; border-radius: 0 7px 7px 0; background: rgba(210,179,115,.07); color: #e7d4ae; font-size: .86rem; }
.friends-v38 .xj-empty-friends .btn-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }
.friends-v38 .xj-todo-copy { flex: 1; }
@media (max-width: 600px) {
  .friends-v38 .xj-todo-action { max-width: 5.5rem; text-align: right; }
}
/* Compact the daily queue while preserving readable names and touch areas. */
.friends-v38 .xj-todo { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; padding-block: .6rem; gap: .55rem; }
.friends-v38 .xj-todo .xj-avatar { width: 32px; height: 32px; }
.friends-v38 .xj-todo-copy { min-width: 0; }
.friends-v38 .xj-todo .xj-todo-action { max-width: 6rem; white-space: normal; line-height: 1.45; text-align: right; }
.friends-v38 .xj-progress-details { margin-top: .35rem; }
.friends-v38 .xj-progress-details > summary { padding-block: .6rem; }
.friends-v38 .xj-todaycard h2 { margin-bottom: .4rem; }
.friends-v38 .xj-friends-tools { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem; }
.friends-v38 #xj-friend-filter-input { grid-column: 1; }
.friends-v38 .xj-filter-group { grid-column: 2; gap: .15rem; }
.friends-v38 #friends-app .xj-filter-group button { padding-inline: .65rem; font-size: .78rem; }
.friends-v38 .xj-todaycard { margin-bottom: .8rem; }
.friends-v38 .xj-list-heading { margin-top: .8rem; }
@media (max-width: 600px) {
  .friends-v38.experience-page .page-hero { padding-block: .85rem; }
  .friends-v38 .experience-heading p:not(.experience-kicker) { max-width: 20rem; font-size: .78rem; }
  .friends-v38 .xj-social-toolbar { margin: .8rem 0 .5rem; }
  .friends-v38 .xj-social-toolbar h2 { display: inline; margin-right: .6rem; }
  .friends-v38 #xj-friend-count { font-size: .75rem; }
  .friends-v38 .xj-social-toolbar > div { display: flex; flex-direction: column; gap: 0; }
  .friends-v38 .xj-tabs { margin-bottom: .7rem; }
  .friends-v38 .xj-todaycard { padding: .75rem .85rem .25rem; }
  .friends-v38 .xj-todo .xj-todo-action { max-width: 4.5rem; }
  .friends-v38 .xj-todo small { font-size: .74rem; line-height: 1.45; }
  .friends-v38 #xj-friend-filter-input { grid-column: 1 / -1; }
  .friends-v38 .xj-friends-tools { gap: .25rem; }
  .friends-v38 .xj-filter-group { grid-column: 1 / -1; }
  .friends-v38 .xj-friend-actions { margin-top: .4rem; }
  .friends-v38 .xj-friend-main .name { min-height: 26px; }
}
@media (max-width: 359px) {
  .friends-v38 .experience-heading p:not(.experience-kicker) { font-size: .75rem; }
  .friends-v38 .xj-todo { grid-template-columns: 28px minmax(0,1fr) 4.5rem; gap: .4rem; }
  .friends-v38 .xj-todo .xj-avatar { width: 28px; height: 28px; }
  .friends-v38 .xj-todo > span:not(.xj-todo-action) { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .friends-v38 #friends-app .modal { animation: none !important; }
}
.friends-v38 .xj-list-section { position: relative; }
@media (max-width: 600px) {
  .friends-v38 .xj-list-heading { align-items: center; min-height: 44px; margin: .7rem 0 .5rem; padding-right: 10rem; }
  .friends-v38 .xj-list-heading h2 { font-size: 1rem; white-space: nowrap; }
  .friends-v38 #xj-list-count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .friends-v38 .xj-filter-group { position: absolute; top: 0; right: 0; }
  .friends-v38 .xj-friends-tools { display: block; }
}
/* Intrinsic widths of collapsed details must not enlarge the grid track. */
.friends-v38 .xj-social-main > .xj-card { min-width: 0; max-width: 100%; }
.friends-v38 :is(.xj-todaycard,.xj-list-section,.xj-friend-main,.xj-quest,.xj-quest-tiles) { min-width: 0; }
.friends-v38 .xj-interactions > summary { min-width: 44px; }
@media (max-width: 359px) {
  .friends-v38 .xj-tabs { display: grid; grid-template-columns: .95fr .95fr 1.2fr 1fr 44px; width: 100%; gap: 0; }
  .friends-v38 .xj-tab { padding-inline: .1rem; font-size: .73rem; text-align: center; }
  .friends-v38 .xj-nav-more { margin-left: 0; }
  .friends-v38 .xj-nav-more > summary { min-width: 44px; justify-content: flex-end; padding-inline: .1rem; font-size: .73rem; }
  .friends-v38 .xj-tab .xj-badge { min-width: 14px; padding-inline: 3px; margin-left: 1px; font-size: .6rem; }
  .friends-v38 .xj-quest-tiles { flex-wrap: wrap; }
}
.friends-v38 .xj-tabs > .xj-tab { min-width: 44px; }
.friends-v38 .xj-nav-more > summary { min-width: 44px; }