/* profile.css — the small set of rules profile.html needs that nothing
   shared already provides. Everything else on this page (cards, chips, the
   ledger, saved-item grids, the notification list, the tab bar inside "Your
   marketplace") reuses site.css / blm.css / demand.css / market.css classes
   on purpose — this file exists for the little that is genuinely new to
   this page's own layout, not to start a second design system.
*/

/* #fs-inbox and #fs-mkt are both real in-page anchor targets now (the Inbox
   card links to "Your marketplace" and back; a marketplace-message
   notification's own link is profile.html?thread=<id>, and profile.js
   scrolls #fs-mkt into view for that case). .fs-hd is position:sticky, so
   without this a jump lands the section's own heading straight under the
   header. */
#fs-inbox, #fs-mkt { scroll-margin-top: 96px; }

/* A notification about an opportunity response opens the private conversation
   in the same Inbox card. These are deliberately small profile-local rules;
   the organisation dashboard has its own conversation vocabulary. */
.pf-response{ border-top:1px solid var(--line); padding-top:14px; }
.pf-response h4{ margin:0; color:var(--navy); font-size:16px; }
.pf-response-sub{ margin:4px 0 12px; font-size:13px; color:var(--ink-60); }
.pf-response-messages{ display:flex; flex-direction:column; gap:9px; margin:0 0 12px; }
.pf-response-message{ max-width:86%; padding:10px 12px; border-radius:10px; background:var(--line-2); font-size:14px; white-space:pre-wrap; }
.pf-response-message.is-mine{ align-self:flex-end; background:#E4F3F2; }
.pf-response-message small{ display:block; margin-top:4px; color:var(--ink-40); }
.pf-response-form textarea{ width:100%; min-height:88px; resize:vertical; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font:inherit; }
.pf-response-actions{ display:flex; align-items:center; gap:10px; margin-top:9px; }
.pf-response-error{ margin:0; font-size:13px; color:#8A1B2B; }

/* The two calls to action under "Your marketplace" — a primary button
   (matches profile.js's own dashboard-link pattern, .btn.btn-navy.btn-sm)
   plus a plain secondary link, wrapping cleanly on narrow screens rather
   than the flex row's default nowrap. */
.fs-mkt-links{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.fs-mkt-more{
  font-size:13.5px; font-weight:700; color:var(--cyan-text);
}
.fs-mkt-more:hover{ color:var(--navy); }