/* ============================================
   WritingNepal — Full Catch (single post) reading page
   Extends style.css + profile.css tokens.
   Typography here is the whole point: generous measure,
   comfortable line-height, real reading rhythm.
   ============================================ */

.post-shell{ max-width:720px; margin:0 auto; padding:32px 0 80px; }

.post-crumb{ font-size:.82rem; color:var(--ink-soft); margin-bottom:24px; }
.post-crumb a{ color:var(--ink-soft); }

/* ---- cover image — same soft-fade treatment as the feed + profile cover,
   so the photo eases into the page instead of ending on a hard edge ---- */
.post-cover-image{
  margin:16px 0; position:relative; overflow:hidden; border-radius:12px;
}
.post-cover-image img{ width:100%; display:block; max-height:460px; object-fit:cover; }
.post-cover-image::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--paper) 100%);
  pointer-events:none;
}
.post-cover-caption{
  margin:-4px 0 20px; font-size:.8rem; font-style:italic; color:var(--ink-soft);
  text-align:center;
}

/* ---- reading stats rail — word count + read time, parked in the
   margin next to the article on wide screens so it doesn't compete with
   the byline. Fixed positioning so it stays in view as you scroll
   through a long Catch, centered on the viewport height like a margin
   note. Hidden below ~1200px since there's no margin to put it in — the
   byline's existing "X min read" already covers narrower screens.
   NOTE: classes are prefixed .rstat- deliberately — the theme already
   has an unrelated global .stat component (homepage stats strip) with
   its own background/box-shadow/hover styles, and reusing that name
   here caused this rail to inherit those styles by accident. ---- */
.post-stats-rail{
  display:none;
  position:fixed;
  top:50%;
  left:calc(50% - 534px);
  width:150px;
  transform:translateY(-50%);
  z-index:6;
  transition:opacity .25s ease;
}
.post-stats-inner{
  display:flex; flex-direction:column; gap:8px;
}
.rstat{
  display:flex; align-items:baseline; justify-content:center; gap:6px;
  background:var(--white); border:1.5px solid var(--line); border-radius:999px;
  padding:8px 14px; white-space:nowrap; overflow:hidden;
}
.rstat-num{
  font-family:'Fraunces',serif; font-weight:800; font-size:.98rem; color:var(--gold-deep);
  transition:opacity .15s ease;
}
.rstat-label{ font-size:.66rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em; }
@media (min-width:1200px){
  .post-stats-rail{ display:block; }
}

/* ---- article header ---- */
.post-kicker{
  display:inline-block; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:4px 12px; border-radius:999px; margin-bottom:16px;
}
.post-kicker.essay{ background:#E4EFF9; color:var(--sky-deep); }
.post-header h1{ font-size:2.3rem; line-height:1.15; margin-bottom:20px; }
.post-byline{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.post-byline .avatar-sm{ width:44px; height:44px; border-radius:50%; flex:none; background:linear-gradient(155deg,var(--gold),var(--clay-deep)); }
.post-byline .who{ flex:1; }
.post-byline .who .name{ font-weight:700; font-size:.95rem; }
.post-byline .who .name a{ color:var(--ink); }
.post-byline .who .meta{ font-size:.8rem; color:var(--ink-soft); }
.post-byline .btn{ padding:7px 16px; font-size:.8rem; flex:none; }

/* ---- engagement bar ---- */
.post-engage{
  display:flex; align-items:center; gap:20px;
  padding:14px 0; margin:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:.86rem; color:var(--ink-soft);
}
.post-engage button{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-weight:600; padding:6px 12px; border-radius:999px; transition:background .15s ease, color .15s ease; }
.post-engage button:hover{ color:var(--clay-deep); }
.post-engage button.liked{ background:var(--ink); color:var(--gold); }
.post-engage .spacer{ flex:1; }

/* ---- body typography ---- */
.post-body{ font-size:1.22rem; line-height:1.85; color:var(--ink); }
.post-body p{ margin:0 0 26px; }
.post-body p.dev{ line-height:2.05; font-size:1.12rem; }
/* Headings/quote/footnotes from the write-page toolbar (bold/italic/
   underline/lists/links already inherit sane defaults from the
   browser, but these need their own rules to match the editor). */
.post-body h2{ font-family:'Fraunces',serif; font-size:1.5rem; margin:32px 0 14px; color:var(--ink); }
.post-body h3{ font-family:'Fraunces',serif; font-size:1.22rem; margin:26px 0 10px; color:var(--ink); }
.post-body blockquote{
  border-left:4px solid var(--gold); margin:24px 0; padding:2px 0 2px 20px;
  font-family:'Fraunces',serif; font-style:italic; color:var(--ink-soft);
}
.post-body sup, .post-body sub{ font-size:.72em; }
.post-body sup.wn-fn-ref a{ text-decoration:none; color:var(--clay-deep); font-weight:700; }
.post-body .wn-footnotes{ margin-top:36px; font-size:.86rem; color:var(--ink-soft); }
.post-body .wn-footnotes hr{ border:none; border-top:1px solid var(--line); margin-bottom:16px; }
.post-body .wn-footnotes ol{ padding-left:20px; margin:0; }
.post-body .wn-footnotes li{ margin-bottom:8px; }
.post-body .wn-footnotes li a{ color:var(--clay-deep); text-decoration:none; }
.post-body img{ max-width:100%; height:auto; border-radius:8px; margin:20px 0; display:block; }
.post-body p.drop-cap::first-letter{
  font-family:'Fraunces',serif; font-weight:800; font-size:3.6rem; line-height:.8;
  float:left; margin:6px 10px 0 0; color:var(--clay-deep);
}
.post-pull{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:1.5rem; line-height:1.5;
  color:var(--ink); border-left:4px solid var(--gold); padding:4px 0 4px 24px; margin:36px 0;
}

/* ---- paywall gate ---- */
.paywall-wrap{ position:relative; }
.paywall-fade{
  position:absolute; bottom:0; left:0; right:0; height:220px;
  background:linear-gradient(to bottom, rgba(251,248,242,0) 0%, var(--paper) 85%);
  pointer-events:none;
}
.paywall-gate{
  background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-lg);
  box-shadow:6px 6px 0 var(--gold); padding:32px; text-align:center; margin:20px 0 40px;
}
.paywall-gate .icon{ font-size:2rem; margin-bottom:10px; }
.paywall-gate h3{ font-size:1.3rem; margin-bottom:8px; }
.paywall-gate p{ color:var(--ink-soft); font-size:.92rem; max-width:44ch; margin:0 auto 20px; }
.paywall-price{ font-family:'Fraunces',serif; font-weight:900; font-size:1.6rem; margin-bottom:18px; }
.paywall-price .rs{ font-size:1rem; font-weight:700; color:var(--ink-soft); }
.pay-methods{ display:flex; justify-content:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.pay-methods span{ font-size:.76rem; font-weight:700; color:var(--ink-soft); background:var(--paper-deep); padding:5px 12px; border-radius:999px; }

.akshar-divider{
  display:flex; align-items:center; gap:12px; margin:24px 0 18px;
  color:var(--ink-soft); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.akshar-divider::before, .akshar-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.akshar-redeem{
  background:var(--paper-deep); border:1.5px dashed var(--gold-deep); border-radius:14px; padding:20px;
}
.akshar-redeem-head{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:.95rem; margin-bottom:8px; }
.akshar-beta{ background:var(--ink); color:var(--gold); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:999px; }
.akshar-balance{ font-size:.86rem; color:var(--ink-soft); margin-bottom:14px; }
.akshar-balance strong{ color:var(--gold-deep); font-family:'Fraunces',serif; }
.akshar-footnote{ font-size:.74rem; color:var(--ink-soft); margin-top:12px; }
.akshar-footnote a{ color:var(--clay-deep); font-weight:700; }
.akshar-redeem #aksharBtn:disabled{ opacity:0.5; cursor:not-allowed; }

.unlocked-badge{
  display:none; align-items:center; gap:8px; background:#E6F2E9; color:var(--leaf-deep);
  font-size:.82rem; font-weight:700; padding:8px 16px; border-radius:999px; margin-bottom:20px;
}
.unlocked-badge.show{ display:inline-flex; animation:step-in .3s var(--bounce); }

/* ---- author card + comments (reuse book-detail-ish patterns) ---- */
.post-author-card{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  margin:48px 0;
}
.post-author-card .avatar-sm{ width:52px; height:52px; border-radius:50%; flex:none; background:linear-gradient(155deg,var(--gold),var(--clay-deep)); }
.post-author-card h5{ font-size:1.05rem; margin:0 0 4px; }
.post-author-card p{ font-size:.86rem; color:var(--ink-soft); margin:0 0 10px; }

.post-comments h3{ font-size:1.2rem; margin-bottom:18px; }
.post-comment-row{ display:flex; flex-wrap:wrap; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); list-style:none; }
.post-comment-row .avatar-sm{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:block; background-size:cover; background-position:center;
  background-color:var(--paper-deep,#F1EADD);
}
a.post-comment-row .avatar-sm,
.post-comment-row a.avatar-sm{ text-decoration:none; }
.post-comment-row .cname{ font-weight:700; font-size:.88rem; color:var(--ink); text-decoration:none; }
a.post-comment-row .cname:hover,
.post-comment-row a.cname:hover{ color:var(--clay-deep); }
.post-comment-row .cmeta{ font-size:.74rem; color:var(--ink-soft); margin-left:8px; }
.post-comment-row .comment-pending{ color:var(--clay-deep,#C64F1E); font-weight:600; }
.post-comment-row .comment-reply-link a{ color:var(--ink-soft); text-decoration:none; font-weight:600; }
.post-comment-row .comment-reply-link a:hover{ color:var(--clay-deep); }
.post-comment-row .comment-edit-link a{ color:var(--ink-soft); text-decoration:none; font-weight:600; }
.post-comment-row .comment-edit-link a:hover{ color:var(--clay-deep); }
.post-comment-row p{ font-size:.88rem; margin:4px 0 0; line-height:1.5; }

/* Threaded replies: WordPress nests them in a "children" wrapper —
   indent + a light connecting rule so the hierarchy is legible without
   turning into a full sub-thread UI.
   WordPress's comment walker inserts this <ul class="children"> as a
   third DIRECT CHILD of .post-comment-row itself (alongside the avatar
   and the content <div>), not nested inside the content div — since
   .post-comment-row is display:flex, that made replies render as a
   third flex item sitting to the RIGHT of the original comment instead
   of nested below it. flex-basis:100% forces it onto its own row
   (flex-wrap above lets it actually wrap there), and the left margin is
   sized to line up under the comment TEXT rather than the avatar. */
.post-comment-row > .children{
  flex-basis:100%;
  list-style:none; margin:14px 0 0 48px; padding-left:16px;
  border-left:2px solid var(--line);
}
.post-comment-row.comment-unapproved{ opacity:.7; }

.no-comments-yet{ font-size:.88rem; color:var(--ink-soft); padding:10px 0; }

.comment-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:.84rem; }
.comment-nav a{ color:var(--clay-deep); font-weight:600; text-decoration:none; }
.comment-nav a:hover{ text-decoration:underline; }

.comments-closed{ font-size:.85rem; color:var(--ink-soft); margin-top:14px; }

/* The real comment form's textarea/submit-button styling already comes
   from the higher-specificity "#comments .comment-form ..." rules in
   style.css (ID selector beats a class here regardless of load order),
   so this file intentionally leaves that alone rather than fighting it
   with a second, weaker set of rules. .post-comment-form itself keeps
   its original flex-row layout below for the design-mock's plain
   single-line <input> case (page-full-catch.php) and for the optional
   guest author/email fields in the real form.
   */
.post-comment-form{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.post-comment-form input{ flex:1; border:1.5px solid var(--line); border-radius:999px; padding:10px 16px; font-family:inherit; font-size:.88rem; background:var(--paper); }
.post-comment-form input:focus{ outline:none; border-color:var(--clay); }
/* Was completely unstyled — only .post-comment-form input above had any
   rule, so the textarea (the actual "Add a comment" box) fell back to
   the browser's tiny default size instead of matching the rest of the
   site's spacious, full-width composer boxes. */
.post-comment-form textarea{
  width:100%; min-height:110px; border:1.5px solid var(--line); border-radius:14px;
  padding:14px 16px; font-family:inherit; font-size:.92rem; background:var(--paper);
  resize:vertical; box-sizing:border-box;
}
.post-comment-form textarea:focus{ outline:none; border-color:var(--clay); }
.post-comment-form .form-submit{ align-self:flex-end; margin:0; }

/* ---- reply indicator + inline error (AJAX comment JS) ---- */
.wn-reply-indicator{
  font-size:.82rem; color:var(--ink-soft); background:var(--paper-deep);
  border-radius:10px; padding:8px 14px;
}
.wn-reply-indicator strong{ color:var(--ink); }
.wn-reply-indicator a{ color:var(--clay-deep); font-weight:700; text-decoration:none; }
.wn-reply-indicator a:hover{ text-decoration:underline; }
.wn-comment-error{
  font-size:.82rem; color:var(--rose-deep); margin:0;
}
.wn-comment-error.wn-comment-notice{ color:var(--leaf-deep); }

@media (max-width: 640px){
  .post-header h1{ font-size:1.7rem; }
  .post-body{ font-size:1.1rem; }
  .paywall-gate{ padding:22px; }
  .post-engage{ flex-wrap:wrap; gap:10px 16px; }
  .post-engage .spacer{ display:none; }
}

/* ---- share confirmation toast ---- */
.wn-toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--gold); font-size:.86rem; font-weight:700;
  padding:12px 22px; border-radius:999px; box-shadow:0 6px 18px rgba(18,10,8,0.25);
  opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:9999; pointer-events:none;
}
.wn-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.full-catch h1 {
  margin: 20px 0 16px;
  font-size: 2.2rem;
}

.full-catch .feed-card-head {
  margin-bottom: 24px;
}

/* ---- status-card parity fix ----
   single-status.php reuses wn_render_catch_card() — the exact same
   function/markup the main feed uses — so a status looks identical
   whether you're scrolling the feed or viewing it on its own permalink.
   The problem: catch-post.css never actually had the base .feed-card
   rules, only the one margin override above. Without them the card's
   avatar rendered at full native size instead of a small circle, and
   the name/time/menu row had no flex layout so it stacked vertically —
   exactly the "messy" look. These are copied straight from catch.css
   so a standalone status renders pixel-identical to its feed version. */
.feed-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 20px;
}
.feed-card[data-permalink]{ cursor:pointer; }
.feed-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.feed-card-head .avatar-sm{ width:40px; height:40px; border-radius:50%; flex:none; }
.feed-card-head .who{ flex:1; }
.feed-card-head .who h5{ margin:0; font-size:.92rem; }
.feed-card-head .who .meta{ font-size:.76rem; color:var(--ink-soft); }
.feed-card-head .who .meta a:hover{ text-decoration:underline !important; }
.feed-kind{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:999px; flex:none;
  display:inline-flex; align-items:center; gap:4px;
}
.feed-kind.status{ background:var(--paper-deep); color:var(--ink-soft); }
.feed-kind.catch{ background:#E4EFF9; color:var(--sky-deep); }
.feed-kind.book{ background:#FDECC8; color:var(--gold-deep); }
.feed-kind.ad{ background:#FCE4E9; color:var(--rose-deep); }
.feed-card[data-type="catch"]{ border-left:4px solid var(--sky); }
.feed-card[data-type="book"]{ border-left:4px solid var(--gold); }
.feed-card[data-type="ad"]{ border-left:4px solid var(--rose); }
.feed-card .body-text{ font-size:1rem; color:var(--ink); line-height:1.65; white-space:pre-line; }
.feed-card .body-text.dev{ line-height:1.9; }
.feed-card h4{ font-size:1.15rem; margin:2px 0 8px; }
.feed-actions{
  display:flex; gap:18px; margin-top:12px; margin-bottom:10px;
  font-size:.82rem; color:var(--ink-soft);
}
.feed-actions span{ display:inline-flex; align-items:center; gap:5px; }

/* like icon + "N likes" text as two separate click targets — same as
   catch.css, duplicated here so it also works on the single-status
   permalink page (see the .feed-card / .inline-comment / .status-menu
   blocks above for why this file needs its own copy of everything
   wn_render_catch_card() can output). */
.like-cluster{ display:inline-flex; align-items:center; gap:2px; position:relative; }
.like-cluster .like-toggle{ padding-right:0; }
.like-cluster .like-count-link{ padding-left:2px; }
.like-cluster .like-count-link:hover{ text-decoration:underline; }
.likers-popover{
  position:absolute; top:100%; left:0; z-index:30; margin-top:6px;
  background:var(--white); border:1.5px solid var(--ink); border-radius:12px;
  box-shadow:3px 3px 0 var(--gold); min-width:200px; max-height:280px;
  overflow-y:auto; padding:6px;
}
.likers-loading, .likers-empty{ padding:10px 12px; font-size:.85rem; color:var(--ink-soft); margin:0; }
.likers-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  text-decoration:none; color:var(--ink); font-size:.85rem; font-weight:600;
}
.likers-row:hover{ background:var(--paper-deep); }
.likers-row .avatar-sm{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; }

/* ---- hover card (name in feed) — same as catch.css ---- */
.wn-hovercard{
  position:absolute; top:100%; left:0; z-index:30; margin-top:6px;
  background:var(--white); border:1.5px solid var(--ink); border-radius:12px;
  box-shadow:3px 3px 0 var(--gold); width:260px; padding:14px;
  cursor:default;
}
.wn-hovercard-loading{ font-size:.85rem; color:var(--ink-soft); margin:0; padding:4px 0; }
.wn-hovercard-head{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  margin-bottom:8px;
}
.wn-hovercard-head .avatar-sm{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.wn-hovercard-head strong{ display:block; font-size:.92rem; }
.wn-hovercard-handle{ display:block; font-size:.78rem; color:var(--ink-soft); font-weight:400; }
.wn-hovercard-bio{ font-size:.82rem; color:var(--ink); line-height:1.5; margin:0 0 8px; }
.wn-hovercard-followers{ font-size:.78rem; color:var(--ink-soft); margin:0 0 10px; }
.wn-hovercard-follow-btn{ width:100%; padding:7px 0; font-size:.82rem; }

/* ---- repost preview — same as catch.css ---- */
.repost-preview{
  display:block; margin:10px auto 0; text-decoration:none; color:inherit;
  border-radius:14px; overflow:hidden; border:1.5px solid var(--line);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  max-width:440px;
  box-shadow:0 0 36px 14px rgba(251,201,139,0.22);
}
.repost-preview:hover{ border-color:var(--gold-deep); transform:translateY(-1px); box-shadow:0 0 36px 14px rgba(251,201,139,0.34); }

/* -- image variant (real cover image available) -- */
.repost-preview-image{
  height:220px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.repost-preview-image img{ width:100% !important; height:100% !important; object-fit:cover; display:block; }
.repost-preview-caption{
  display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--white);
  padding:12px 14px;
}
.repost-preview-avatar{
  width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;
  border:1.5px solid rgba(255,255,255,.25);
}
.repost-preview-caption-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.repost-preview-author{ font-size:.74rem; color:var(--gold); font-weight:700; }
.repost-preview-title{
  font-size:.86rem; line-height:1.3; color:var(--white);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.repost-preview-kind{
  flex:none; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink); background:var(--gold); padding:3px 8px; border-radius:999px;
  align-self:flex-start;
}

/* -- quote variant (no image — every status, or a coverless Catch) -- */
.repost-preview-quote-variant{
  background:linear-gradient(155deg, #FBE0C6, #F6C98B);
  padding:18px 20px 16px;
  position:relative;
  border-radius:16px;
}
.repost-preview-quote-variant:hover{
  transform:translateY(-2px) rotate(-0.6deg);
}
.repost-preview-quote-variant::before{
  content:'\201C';
  position:absolute; top:-6px; right:14px;
  font-family:'Fraunces',serif; font-size:3.6rem; font-weight:900;
  color:rgba(18,10,8,0.14); line-height:1; pointer-events:none;
}
.repost-preview-quote-head{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.repost-preview-quote-head .repost-preview-avatar{
  border-color:rgba(18,10,8,0.15);
}
.repost-preview-quote-head .repost-preview-author{ color:var(--ink); font-size:.8rem; }
.repost-preview-quote-head .repost-preview-kind{
  margin-left:auto; color:var(--white); background:var(--ink);
}
.repost-preview-quote-text{
  margin:0; font-family:'Fraunces',serif; font-size:1rem; font-style:italic;
  line-height:1.45; color:var(--ink); position:relative; z-index:1;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.repost-preview-quote-text::before{ content:'\201C'; }
.repost-preview-quote-text::after{ content:'\201D'; }

/* ---- push-to-wall modal — same as catch.css ---- */
.push-modal-overlay{
  position:fixed; inset:0; z-index:9998;
  background:rgba(18,10,8,.5);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.push-modal-box{
  background:var(--white); border:1.5px solid var(--ink); border-radius:16px;
  box-shadow:5px 5px 0 var(--gold); padding:22px; max-width:420px; width:100%;
}
.push-modal-box h4{ margin:0 0 14px; }
.push-modal-box .repost-preview{ margin-top:0; margin-bottom:14px; }
.push-modal-box textarea{
  width:100%; min-height:70px; border:1.5px solid var(--line); border-radius:10px;
  padding:10px 14px; font-family:inherit; font-size:.9rem; margin-bottom:14px; resize:vertical;
}
.push-modal-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.push-modal-actions .btn{ flex:1 1 auto; padding:9px 14px; font-size:.85rem; white-space:nowrap; }
.push-modal-msg{ font-size:.82rem; margin-top:10px; min-height:1.2em; }
.push-modal-msg.err{ color:var(--rose-deep); }
.push-modal-msg.ok{ color:var(--leaf-deep); }
.push-modal-social{ margin-top:14px; padding-top:14px; border-top:1px solid var(--paper-deep); }
.push-modal-social-label{ font-size:.78rem; color:var(--ink-soft); margin:0 0 8px; }
.push-modal-social-row{ display:flex; gap:8px; flex-wrap:wrap; }
.push-social-btn{
  flex:1 1 auto;
  padding:8px 12px;
  font-size:.8rem;
  font-weight:600;
  border:1.5px solid var(--ink);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.push-social-btn:hover{ background:var(--ink); color:var(--gold); }
.feed-actions .like-toggle, .feed-actions .comment-link{
  background:none; border:none; padding:0; margin:0; font:inherit; color:inherit;
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  transition:color .15s ease, background .15s ease, padding .15s ease, border-radius .15s ease;
}
.feed-actions .like-toggle:hover, .feed-actions .comment-link:hover{ color:var(--clay-deep); }
.feed-actions .like-toggle.liked{
  background:var(--ink); color:var(--gold); font-weight:700;
  padding:3px 10px; border-radius:999px; margin:-3px 0;
}

/* ---- comment thread parity fix ----
   Same story as the .feed-card block above: single-status.php's full
   comment thread reuses the .inline-comment markup from the feed's
   quick-glance panel, but that styling also only ever existed in
   catch.css. Without it every comment avatar rendered at full native
   size stacked above the text instead of a small circle beside it.
   Copied straight from catch.css, including the one rule that WAS
   already meant for this page (.single-status-page override) but
   could never take effect sitting in a stylesheet this page doesn't
   load. */
.inline-comments{ padding:12px 16px; border-top:1px solid var(--line); }
.inline-comments-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; max-height:280px; overflow-y:auto; }
.inline-comment{ display:flex; gap:8px; align-items:flex-start; }
.inline-comment img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; }
.inline-comment .body{ background:var(--paper-deep); border-radius:10px; padding:6px 10px; font-size:.85rem; }
.inline-comment .body p{ margin:2px 0 0; }
.inline-comment-actions{ display:flex; align-items:center; gap:14px; margin-top:4px; }
.inline-comment-like-btn{
  display:inline-flex; align-items:center; gap:4px; background:none; border:none; padding:0;
  font:inherit; font-size:.78rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.inline-comment-like-btn:hover, .inline-comment-like-btn.liked{ color:var(--clay-deep); }
.inline-comment-reply-btn{
  background:none; border:none; padding:0; font:inherit; font-size:.78rem; font-weight:600;
  color:var(--ink-soft); cursor:pointer;
}
.inline-comment-reply-btn:hover{ color:var(--clay-deep); }
.inline-reply-indicator{
  font-size:.8rem; color:var(--ink-soft); padding:6px 12px; margin-bottom:6px;
  background:var(--paper-deep); border-radius:999px;
}
.inline-reply-indicator a{ color:var(--clay-deep); font-weight:600; }
.inline-comment-form{ display:flex; gap:8px; }
.inline-comment-input{ flex:1; padding:8px 12px; border:1px solid var(--line); border-radius:999px; font-size:.85rem; }
.inline-comment-submit{ padding:8px 16px; font-size:.82rem; }
.single-status-page .inline-comments-list{ max-height:none; overflow-y:visible; }

/* ---- status card "..." menu (Edit / Report / Block) ----
   Same gap as the .feed-card and .inline-comment blocks above: this
   page renders the exact same status-menu markup wn_render_catch_card()
   outputs everywhere else, but had none of the positioning rules that
   make it behave like a dropdown. Without position:relative on the
   trigger and position:absolute on the dropdown, the menu just sat
   inline in normal document flow next to the "..." button instead of
   floating below it — copied straight from catch.css. */
.status-menu{ position:relative; margin-left:auto; }
.status-menu-btn{
  background:none; border:none; cursor:pointer; font-size:1.1rem; line-height:1;
  color:var(--ink-soft); padding:4px 8px; border-radius:8px;
}
.status-menu-btn:hover{ background:var(--paper-deep); color:var(--ink); }
.status-menu-dropdown{
  position:absolute; top:100%; right:0; z-index:20; margin-top:4px;
  background:var(--white); border:1.5px solid var(--ink); border-radius:12px;
  box-shadow:3px 3px 0 var(--gold); min-width:160px; overflow:hidden;
}
.status-menu-dropdown[hidden]{ display:none; }
.status-menu-dropdown button{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:10px 14px; font-size:.85rem; font-family:inherit; color:var(--ink);
}
.status-menu-dropdown button:hover{ background:var(--paper-deep); }
.status-menu-dropdown .status-menu-report,
.status-menu-dropdown .status-menu-block,
.status-menu-dropdown .status-menu-delete{ color:var(--rose-deep); }