/* ============================================================
   WritingNepal — Profile Wall ("The Margin") + right rail
   ============================================================
   Enqueued ONLY on the /profile/ page (see the page_styles map in
   functions.php). Extends the tokens from style.css and profile.css
   but is kept in its own file rather than added to profile.css, so
   the existing profile styles stay exactly as they were and this new
   layout is easy to isolate/revert on its own.

   Deliberately does not touch anything in catch.css or the main
   feed's own styling — the activity line described further down is
   spliced INSIDE wn_render_catch_card()'s own returned HTML string
   (see wn_render_wall_item() in inc/profile-wall.php), not achieved
   by editing that function itself.
   ============================================================ */

/* ---- two-column layout: Wall (left) + rail (right) ---- */
.profile-body{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:32px;
  align-items:start;
  margin-top:8px;
}

.wall-column{ grid-column:1; min-width:0; }

/* About / My Publication / My Books / Following / Follower all live in
   the same left column as the Wall, swapped in via JS — same pattern
   the old .tab-panel/.tab-panel.active toggle used, just renamed
   (.panel/.panel.active) since these are no longer tied to a top tab
   bar. Kept as a distinct class rather than reusing .tab-panel so
   nothing that still targets .tab-panel elsewhere in the theme
   (book-detail.css, page-catch.php's side-book-list) can be affected
   by anything here. */
.panel{ grid-column:1; min-width:0; display:none; }
.panel.active{ display:block; animation:wall-step-in .3s var(--bounce); }

@keyframes wall-step-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* My Publication reuses wn_render_catch_card() same as before — this
   carries forward the exact spacing fix profile.css already had for
   that tab (feed cards had zero gap between them without it). */
.panel[data-panel="pub"].active{
  display:flex; flex-direction:column; gap:16px;
}

/* ---- The Margin: wall head + composer ---- */
.wall-head{ margin-bottom:12px; }
.wall-head h3{ font-family:'Fraunces',serif; font-size:1.5rem; margin:0; }

.wall-composer{
  background:var(--white); border:1.5px dashed var(--line); border-radius:var(--radius);
  padding:14px 20px; margin:16px 0 22px; font-size:.87rem; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* ---- Wall feed: authored + engagement items, one merged stream ---- */
.wall-feed{ display:flex; flex-direction:column; gap:16px; }

/* .wall-activity-line and .wall-comment-text now live in catch.css
   (loaded sitewide) rather than here — the main Catch feed needs the
   exact same styling for its own viewer-relative activity line (see
   inc/feed-activity.php), so a single shared definition there avoids
   two copies quietly drifting apart from each other. */

/* A saved item's own card still shows a Save toggle from
   wn_render_catch_card() — leaving that as-is (it's correct: the
   owner CAN unsave it right from their own Wall) rather than hiding
   any part of that card's normal actions. */

/* Belt-and-suspenders avatar fix, carried forward from profile.css's
   old ".tab-panel .feed-card-head .avatar-sm" rule (see that file's
   comment for the original story — a cascade conflict made these
   avatars render at full/natural size instead of the correct 40px
   circle). That rule was scoped to .tab-panel, which no longer exists
   in the DOM on this page now that the tabs are gone — reapplying the
   same fix here under the new .panel / .wall-feed scope so the bug it
   fixed doesn't quietly come back for My Publication or the new Wall. */
.panel .feed-card-head .avatar-sm,
.wall-feed .feed-card-head .avatar-sm{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  flex:none !important;
  object-fit:cover !important;
}

/* ---- pagination (mirrors .cloud-pagination from catch-cloud.css,
   which isn't loaded on this page — kept as its own copy here rather
   than pulling in an unrelated stylesheet just for this one rule) ---- */
.cloud-pagination{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:24px 0 8px;
}
.cloud-pagination-status{ font-size:.82rem; color:var(--ink-soft); }
.cloud-pagination .btn.disabled{ opacity:.4; pointer-events:none; cursor:default; }

/* ---- right rail ---- */
.rail{
  grid-column:2;
  grid-row:1 / span 2; /* sits alongside both the Wall column and any swapped-in panel below it */
  position:sticky;
  /* Same fix as .feed-sidebar in catch.css: .site-header is ALSO
     position:sticky (top:0, 84px tall, tracked in --header-h in
     style.css) and sits at a higher z-index. A flat top:20px here put
     the rail's own top edge — and the "Snapshot" card's title with it
     — underneath the header once you scrolled past it, since 20px
     isn't enough clearance to stay below an 84px header. Anchoring off
     --header-h instead keeps the rail sticking just under the header,
     not behind it, at any scroll position. */
  top:calc(var(--header-h) + 20px);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.rail-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px;
}
.rail-card h4{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); font-family:'Work Sans',sans-serif; font-weight:800; margin:0 0 12px;
}
.rail-bio{ font-size:.85rem; line-height:1.5; color:var(--ink-soft); margin-bottom:12px; }
.rail-bio em{ color:var(--ink-soft); }
.rail-stats{ display:flex; gap:18px; font-size:.82rem; color:var(--ink-soft); }
.rail-stats b{ display:block; font-family:'Fraunces',serif; font-size:1.15rem; color:var(--ink); font-weight:600; }

.rail-nav{ display:flex; flex-direction:column; gap:2px; }
.rail-nav button{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; background:none; border:none; border-radius:9px;
  padding:11px 12px; font-family:'Work Sans',sans-serif; font-size:.88rem; font-weight:700;
  color:var(--ink-soft); cursor:pointer; transition:background .15s ease, color .15s ease;
}
.rail-nav button:hover{ background:var(--paper-deep); color:var(--ink); }
.rail-nav button.active{ background:var(--ink); color:var(--gold); }
.rail-nav button .count{ font-size:.72rem; font-weight:600; opacity:.75; }

.rail-nav .wall-btn{ border:1.5px solid var(--gold-deep); margin-bottom:6px; }
.rail-nav .wall-btn.active{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

/* ---- responsive: stack to a single column, rail moves above the Wall ---- */
@media (max-width: 860px){
  .profile-body{ grid-template-columns:1fr; }
  .rail{
    grid-column:1; grid-row:auto;
    position:static;
    order:-1;
  }
}