/* ---------------- Round 13: Public profile overlay ----------------
   Styles for js/public-profile.js's markup only. Reuses the app's existing shared classes
   wherever possible (.fullscreen-overlay/.ep-bar/.ep-title/.ep-body from main.css/exam.css,
   .student-card* from id-card.css, .btn/.btn-black/.btn-outline from auth.css, .course-card/
   .card-name/.tag/.tag-yellow/.tag-blue/.exam-grid from components.css/exam.css,
   .mkt-market-cover/.mkt-market-price/.mkt-price-strike/.mkt-loading/.mkt-empty-state from
   marketplace.css) — this file only adds what's genuinely new: the stats row, the follow
   button's own accent, the activity timeline, and the clickable-seller-name affordance used
   from js/marketplace.js. */

/* .fullscreen-overlay (main.css) only sets the shared show/hide + open/close animation — it's
   deliberately transparent by default, since each popup sets its own opaque background here
   (same "each popup's own stylesheet sets its own background/layout" split as #profile-overlay
   in profile.css / #pricing-overlay in payment.css / #exam-player-overlay in exam.css). Missing
   this rule is exactly what let the marketplace grid behind show through around/behind the
   card in the first pass of this file. */
#public-profile-overlay{background:var(--paper); display:flex; flex-direction:column;}
#public-profile-panel{flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}

.pubp-stats-row{
  display:flex; gap:0; margin-top:16px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card);
}
.pubp-stat{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px;
}
.pubp-stat + .pubp-stat{ border-left:1px solid var(--line); }
.pubp-stat b{ font-size:var(--fs-xl); font-weight:800; color:var(--ink); line-height:1.1; }
.pubp-stat span{ font-size:var(--fs-2xs); color:var(--muted); font-weight:600; letter-spacing:0.02em; }

.pubp-follow-btn{ width:100%; margin-top:12px; padding:12px 20px; transition:transform 120ms ease; }
.pubp-follow-btn:active{ transform:scale(0.97); }
.pubp-follow-btn svg{ margin-right:6px; }
/* Once already following, the button falls back to .btn-outline's plain black outline — no
   extra accent needed there, since "already following" is a calmer, already-done state and
   shouldn't visually compete with the black "ติดตาม" CTA someone hasn't pressed yet. A quick pop
   plays the moment js/public-profile.js adds .pubp-just-followed right after a successful follow
   click, then the class can be left in place — the animation only plays once regardless, since
   it's not a loop. */
.pubp-follow-btn.pubp-just-followed{ animation:motionPop 320ms var(--ease-pop); }
@media (prefers-reduced-motion:reduce){ .pubp-follow-btn.pubp-just-followed{ animation:none; } }

.pubp-activity-list{
  display:flex; flex-direction:column; gap:2px; margin-top:8px; border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden;
}
.pubp-activity-row{
  display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:var(--fs-sm); color:var(--ink);
  animation:motionFadeUp 280ms cubic-bezier(.2,.8,.3,1) both;
}
.pubp-activity-list .pubp-activity-row:nth-child(1){ animation-delay:0ms; }
.pubp-activity-list .pubp-activity-row:nth-child(2){ animation-delay:30ms; }
.pubp-activity-list .pubp-activity-row:nth-child(3){ animation-delay:60ms; }
.pubp-activity-list .pubp-activity-row:nth-child(n+4){ animation-delay:90ms; }
@media (prefers-reduced-motion:reduce){ .pubp-activity-row{ animation:none; } }
.pubp-activity-row + .pubp-activity-row{ border-top:1px dashed var(--line); }
.pubp-activity-dot{ width:7px; height:7px; border-radius:50%; background:var(--yellow-deep); flex:none; }
.pubp-activity-text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pubp-activity-time{ font-size:var(--fs-2xs); color:var(--muted); flex:none; }

#pubp-listing-grid{ margin-top:8px; }

/* Clickable seller name — used inside marketplace grid cards and the listing detail hero (see
   js/marketplace.js's sellerLinkHtml()). Underline-on-hover instead of always-on so it still
   reads as plain label text at rest, matching the rest of the card's quiet typography, and
   only announces itself as a link on intent (hover) or via the visible cursor on tap-to-click
   devices where hover doesn't apply. */
.pubp-seller-link{
  cursor:pointer; text-decoration-line:underline; text-decoration-color:transparent; text-underline-offset:2px;
  transition:text-decoration-color 120ms ease;
}
.pubp-seller-link:hover, .pubp-seller-link:active{ text-decoration-color:currentColor; }