/* Shared social components (SOCIAL §13; BUILD_PLAN_SOCIAL SK3). base.html loads this file only
   while a social feature is on (SOCIAL_ENABLED, NOTIFY_UI_ENABLED or ACCOUNT_TOOLS_ENABLED), so
   the live site's pages are unchanged until then. Feature pages add their own files (trades.css,
   messages.css, feed.css); everything here is shared by the extension-point sections and the
   macros of templates/social/_macros.html. Mobile first: one column at 375 px, 16 px gutters,
   44 px targets; one breakpoint (880 px), as app.css. Tokens are app.css's :root. */

/* an account as a viewer may see it: user_chip(label) */
.user-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;max-width:100%;vertical-align:middle;
  font-family:'Bebas Neue',sans-serif;letter-spacing:1px;font-size:16px;color:var(--parch)}
.user-chip>a,.user-chip>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip a{color:var(--gold)}
.user-chip-av{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:linear-gradient(#3a2850,#1c1228);border:1px solid var(--line);
  color:var(--gold);font-size:15px;line-height:1}
.user-chip-av.anon{background:#140d1c;color:transparent}
.user-chip.is-you a{color:var(--parch)}

/* a row of actions: the action slots' wrapper (profile, copy page, copy rows, collection header) */
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0}
.actions>.btn,.actions>form>.btn,.actions>a{width:auto;min-height:44px}
.actions>.btn,.actions>form>.btn{padding:11px 20px;font-size:16px}
.actions>a:not(.btn){display:inline-flex;align-items:center;font-family:'Bebas Neue',sans-serif;
  letter-spacing:1.2px;font-size:15px;color:var(--gold)}
.actions form{display:inline}
.actions .linkbtn{min-height:44px;font-size:14px;color:#b7a886}
.uprof-actions{justify-content:center}
.coll-head-actions{justify-content:center}
.coll-copy-actions{flex-basis:100%;margin-top:8px}

/* a count bubble (bell, inbox, tabs): <span class="badge count">3</span>; app.css's plain .badge
   (the home page's pill) is untouched */
.badge.count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin:0;
  padding:0 5px;border:0;border-radius:9px;background:var(--crash);color:#fff;font:700 11px/1 'JetBrains Mono',monospace;
  letter-spacing:0}
.badge.count[hidden]{display:none}

/* app bar icons (inbox, bell): a 24 px SVG in a 44 px hit area, classes only, no ids */
.ab-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--gold);border-radius:50%}
.ab-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round}
.ab-icon .badge.count{position:absolute;top:4px;right:2px}

/* a composer that sticks above the tab bar in threads (messages, comments) */
.composer{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:10;display:flex;
  gap:10px;align-items:flex-end;padding:10px 16px;background:rgba(13,9,21,.95);backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.composer textarea{flex:1;min-height:44px;max-height:40vh;resize:vertical;padding:11px 14px;border-radius:12px;
  border:1px solid #4a3a26;background:#0c0812;color:#fff;font:16px/1.4 'Spectral',serif}
.composer textarea:focus{outline:none;border-color:var(--gold)}
.composer .btn{width:auto;min-height:44px;padding:11px 18px}
.composer .count{font:11px 'JetBrains Mono',monospace;color:var(--mut)}

/* a scrolling row of small art tiles (wants, for trade, posts' cards) */
.tile-row{display:flex;gap:10px;overflow-x:auto;padding:4px 0 10px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch}
.tile-row>*{flex:none;width:96px;scroll-snap-align:start}
.tile-row img{display:block;width:100%;aspect-ratio:63/88;object-fit:cover;border-radius:8px;
  border:1px solid var(--line)}
.tile-row .serial{display:block;margin-top:4px;font-size:11px;color:var(--mut);text-align:center}

/* REPORT as a small disclosure: report_link(kind, target, next) */
.report-link{display:inline-block}
.report-link>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;list-style:none;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;color:#b7a886;
  text-decoration:underline;text-underline-offset:3px}
.report-link>summary::-webkit-details-marker{display:none}
.report-link[open]{display:block;width:100%;margin-top:8px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--ink2)}

/* a safety note (no jokes here: SCAN §23.1) */
.safety-note{margin:12px 0;padding:10px 14px;border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  background:#1c1508;color:#f3e2b0;font-size:14px;line-height:1.5}

@media (min-width: 880px){
  /* the app bar's icons stay on desktop; the handle link (.ab-user) is hidden there by app.css */
  .ab-right{display:flex}
  .actions>.btn,.actions>form>.btn{font-size:17px}
}