/* Article engagement UI: reading time + favorite star, share bar, AI-summarize bar.
   Hand-written (not run through the Tailwind build) since it's injected via JS into
   markup Tailwind's content scanner never sees. Loaded site-wide; no-ops via JS guard
   on non-article pages, so the extra ~2KB here is the only cost elsewhere. */

.pp-meta-bar {
  margin-top: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: #4C6577;
}

.pp-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  border: 1px solid #C7D2D9;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2B4557;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  line-height: 1;
}
.pp-fav-btn:hover { border-color: #E08A62; color: #C05A34; }
.pp-fav-btn:focus-visible { outline: 2px solid #C05A34; outline-offset: 2px; }
.pp-fav-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.pp-fav-btn[aria-pressed="true"] { border-color: #C98A3E; background: #F1E0C3; color: #A8722F; }
.pp-fav-btn[aria-pressed="true"] svg { fill: #C98A3E; stroke: #C98A3E; }
.pp-fav-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; }

.pp-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  white-space: nowrap;
}
.pp-reading-time svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.pp-engage-bar {
  margin: 2rem 0;
  padding: 0.875rem 1.125rem;
  background: #F5EEE1;
  border-radius: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
}

.pp-engage-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pp-engage-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4C6577;
  white-space: nowrap;
  margin-right: 0.125rem;
}

.pp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #C7D2D9;
  background: #FFFFFF;
  color: #2B4557;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.pp-share-btn svg { width: 16px; height: 16px; }
.pp-share-btn:hover { background: #E08A62; border-color: #E08A62; color: #FFFFFF; transform: translateY(-1px); }
.pp-share-btn:focus-visible { outline: 2px solid #C05A34; outline-offset: 2px; }

.pp-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #C7D2D9;
  background: #FFFFFF;
  color: #1F3241;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.pp-ai-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.pp-ai-btn:hover { background: #1F3241; border-color: #1F3241; color: #FFFFFF; transform: translateY(-1px); }
.pp-ai-btn:focus-visible { outline: 2px solid #C05A34; outline-offset: 2px; }

@media (max-width: 640px) {
  .pp-engage-bar { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0.875rem; }
  .pp-engage-group { justify-content: flex-start; }
}