/* ============================================================
   PhD Square — "Found this helpful" button + count styles
   ------------------------------------------------------------
   Loaded on post pages (interactive button) and on the section
   landing pages + homepage (read-only counts). Reuses the site's
   existing CSS variables, with hard-coded fallbacks just in case.
   ============================================================ */

/* ---- Interactive button (post pages) ---- */
.helpful {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border-soft, #e8dfc8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.helpful-prompt {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink, #1a1611);
  margin: 0;
  letter-spacing: -0.01em;
}
.helpful-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.25rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent, #2d5f3f);
  background: var(--bg-elev, #fbf7ec);
  border: 1px solid var(--accent, #2d5f3f);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.helpful-btn:hover { background: var(--accent, #2d5f3f); color: #fff; }
.helpful-btn:active { transform: scale(0.97); }
.helpful-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.helpful-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding-left: 0.55rem;
  margin-left: 0.15rem;
  border-left: 1px solid currentColor;
}

/* Voted state — locks the button visually after a vote */
.helpful-btn.voted,
.helpful-btn.voted:hover {
  background: var(--accent, #2d5f3f);
  color: #fff;
  cursor: default;
}
.helpful-btn:disabled { opacity: 1; }

/* ---- Read-only stat (section landing pages + homepage) ---- */
.helpful-stat {
  display: none;                 /* stays hidden until JS confirms count > 0 */
  align-items: center;
  font-size: inherit;
  color: var(--ink-4, #a3957c);
  font-weight: 600;
}
.helpful-stat.is-visible { display: inline-flex; }
.helpful-stat::before {
  content: '\00B7';              /* middot separator, matches the site style */
  margin: 0 0.45rem;
  color: var(--ink-4, #a3957c);
  font-weight: 400;
}