/* Article engagement row: a quiet editorial detail under the article meta, not a dashboard. */
.engage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); }
.engage-stats { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; }
.engage-stats > span:not([hidden]) + span::before { content: '·'; margin: 0 10px; color: var(--line-strong); }
.engage-views[hidden] { display: none; }
.engage-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.engage-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; transition: box-shadow var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out); }
.engage-btn[hidden] { display: none; }
.engage-btn .icon { width: 18px; height: 18px; stroke-width: 1.75; }
.engage-btn:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.engage-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.engage-btn[aria-pressed='true'] { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.engage-btn[aria-pressed='true'] .icon path { fill: currentColor; fill-opacity: .18; }
.engage-btn[aria-busy='true'] { opacity: .6; cursor: progress; }
.engage-btn[data-done] { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.engage-n:empty { display: none; }
.engage-n { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.engage-btn[aria-pressed='true'] .engage-n { color: var(--accent); }
.engage-link { flex-basis: 100%; margin: 0; }
.engage-link[hidden] { display: none; }
.engage-link input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-field); font: inherit; color: var(--ink); background: var(--surface); }
.engage-about { flex-basis: 100%; font-size: var(--fs-micro); }
.engage-about > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.engage-about > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.engage-about p { max-width: 70ch; margin-top: 4px; line-height: 1.65; }
@media (max-width: 600px) { .engage-actions { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .engage-btn { transition: none; } }
@media print { .engage-actions, .engage-about, .engage-link { display: none !important; } }
