
/* Article engagement module — isolated from the existing site stylesheet. */
.article-engagement-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:20px 0 28px;padding:12px 0;border-top:1px solid rgba(14,84,54,.13);border-bottom:1px solid rgba(14,84,54,.13)}
.article-engagement-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.article-action,.article-stat{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 12px;border:1px solid rgba(14,84,54,.18);border-radius:10px;background:#fff;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.article-action:hover{border-color:#11834f;background:#f3fbf7}.article-action.active{color:#0f8450;border-color:#0f8450;background:#effaf4}.article-action svg,.article-stat svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.article-rating{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid rgba(14,84,54,.18);border-radius:10px;background:#fff}.article-rating button{border:0;background:transparent;padding:2px;cursor:pointer;font-size:19px;color:#c7c7c7;line-height:1}.article-rating button.on,.article-rating button:hover{color:#f6b800}.article-comments-box{margin-top:34px;padding-top:24px;border-top:1px solid rgba(14,84,54,.13)}.article-comment-form textarea{width:100%;min-height:110px;resize:vertical}.article-comments-list{display:grid;gap:12px;margin-top:20px}.article-comment{padding:14px 16px;border:1px solid rgba(14,84,54,.14);border-radius:12px;background:#fff}.article-comment-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}.article-comment p{margin:0;white-space:pre-wrap}.article-login-note{padding:12px 14px;border-radius:10px;background:#f3faf6}.article-share-menu{position:relative}.article-share-options{position:absolute;z-index:20;top:calc(100% + 8px);inset-inline-end:0;display:none;min-width:190px;padding:8px;border:1px solid rgba(14,84,54,.16);border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(15,60,40,.12)}.article-share-menu.open .article-share-options{display:grid}.article-share-options a,.article-share-options button{display:block;width:100%;padding:9px 10px;text-align:start;border:0;border-radius:8px;background:transparent;color:inherit;text-decoration:none;cursor:pointer}.article-share-options a:hover,.article-share-options button:hover{background:#f3faf6}@media(max-width:700px){.article-engagement-bar{align-items:stretch}.article-engagement-group{width:100%}.article-action,.article-stat{flex:1;justify-content:center}.article-rating{width:100%;justify-content:center}}

/* Dark mode — keep article actions consistent with the rest of the interface. */
html[data-theme="dark"] .article-engagement-bar{
  border-color:rgba(255,255,255,.11);
}
html[data-theme="dark"] .article-action,
html[data-theme="dark"] .article-stat,
html[data-theme="dark"] .article-rating{
  background:#0b0f0d;
  border-color:#31473d;
  color:#eef7f2;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
html[data-theme="dark"] .article-action svg,
html[data-theme="dark"] .article-stat svg{
  color:#eef7f2;
  stroke:#eef7f2;
}
html[data-theme="dark"] .article-action:hover{
  background:#141d19;
  border-color:#4c7964;
  color:#fff;
  transform:translateY(-1px);
}
html[data-theme="dark"] .article-action:hover svg{
  stroke:#fff;
}
html[data-theme="dark"] .article-action.active{
  background:#113324;
  border-color:#2b8f60;
  color:#8ce0b5;
}
html[data-theme="dark"] .article-action.active svg{
  stroke:#8ce0b5;
}
html[data-theme="dark"] .article-rating button{
  color:#65736c;
}
html[data-theme="dark"] .article-rating button.on,
html[data-theme="dark"] .article-rating button:hover{
  color:#f4bd3f;
}
html[data-theme="dark"] .article-share-options{
  background:#0b0f0d;
  border-color:#31473d;
  box-shadow:0 18px 42px rgba(0,0,0,.38);
}
html[data-theme="dark"] .article-share-options a,
html[data-theme="dark"] .article-share-options button{
  color:#eef7f2;
}
html[data-theme="dark"] .article-share-options a:hover,
html[data-theme="dark"] .article-share-options button:hover{
  background:#17231d;
  color:#8ce0b5;
}
html[data-theme="dark"] .article-comments-box{
  border-color:#294038;
}
html[data-theme="dark"] .article-comment{
  background:#0b0f0d;
  border-color:#31473d;
  color:#eef7f2;
}
html[data-theme="dark"] .article-login-note{
  background:#121f19;
  border:1px solid #294038;
  color:#c9d9d0;
}

.article-comment-head>div:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.article-comment-actions{display:flex;align-items:center;gap:6px}.article-comment-actions form{margin:0}.article-comment-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(14,84,54,.18);border-radius:9px;background:#f7fbf9;color:#0f8450;cursor:pointer}.article-comment-icon:hover{background:#eaf7f0;border-color:#11834f}.article-comment-icon.danger{color:#c53939}.article-comment-icon.danger:hover{background:#fff0f0;border-color:#d85a5a}.article-comment-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.article-comment-edit-form{margin-top:12px}.article-comment-edit-form textarea{width:100%;min-height:90px;resize:vertical}.article-comment-edit-form>div{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
html[data-theme="dark"] .article-comment-icon{background:#121f19;border-color:#31473d;color:#8ce0b5}html[data-theme="dark"] .article-comment-icon:hover{background:#193326;border-color:#4c7964}html[data-theme="dark"] .article-comment-icon.danger{color:#ff8c8c}html[data-theme="dark"] .article-comment-icon.danger:hover{background:#321818;border-color:#8d4545}
