/* Article sharing, compact engagement summary and custom line-art reactions. */
.inner-post-meta-row { flex-wrap:wrap; gap:10px 16px; }
.article-share { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-left:auto; position:relative; }
.article-share-label { margin-right:5px; color:var(--muted); font-size:11px; font-weight:600; }
.article-share-button { width:38px; height:38px; padding:9px; display:inline-flex; justify-content:center; align-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--soft); cursor:pointer; text-decoration:none; transition:background .18s, border-color .18s, transform .18s; }
.article-share-button svg { display:block; width:18px; height:18px; }
.article-share-button.share-viber { color:#7960bd; }
.article-share-button.share-facebook { color:#2670bd; }
.article-share-button.share-x { color:var(--text); }
.article-share-button.share-email { color:#39796e; }
.article-share-button:hover { background:var(--brand-soft); border-color:var(--brand); transform:translateY(-1px); }
.article-share-button:focus-visible, .article-engagement-values a:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.article-share-button[hidden] { display:none; }
.article-share-status { position:absolute; right:0; top:calc(100% + 6px); z-index:3; width:max-content; max-width:270px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--text); font-size:12px; box-shadow:var(--shadow-soft); }
.article-share-status:empty { display:none; }
.article-share-fallback { flex:1 0 100%; min-width:0; padding:9px; border:1px solid var(--brand); border-radius:7px; background:var(--paper); color:var(--text); font:inherit; font-size:12px; }
.inner-post-header .article-data-bar { display:grid; grid-template-columns:max-content minmax(90px,1fr) max-content; gap:0; align-items:start; }
.inner-post-header .article-data-bar > span { display:grid; min-width:0; padding:0 18px; border-left:1px solid var(--line); }
.inner-post-header .article-data-bar > span:first-child { padding-left:0; border:0; }
.inner-post-header .article-data-bar > span:last-child { padding-right:0; }
.article-data-bar .article-engagement-values { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-height:26px; }
.article-engagement-values a { display:inline-flex; align-items:center; gap:5px; min-height:26px; color:var(--text); text-decoration:none; border-radius:4px; }
.article-engagement-values a:hover strong { color:var(--brand-dark); }
.article-reaction-summary [data-summary-icon]:empty { display:none; }
.article-reaction-summary [data-summary-icon] { display:inline-flex; }
.article-reaction-summary svg { width:23px; height:23px; }
.article-comment-summary { padding-left:10px;  }
.article-comment-summary:first-child { padding-left:0; border:0; }
.article-comment-summary svg { width:17px; height:17px; color:var(--muted); }
.article-data-bar .article-engagement-values strong { font-size:12px; white-space:nowrap; }
.article-data-bar .article-view-data strong { min-height:26px; display:flex; flex-wrap:wrap; align-items:center; gap:3px; }
.article-data-bar time { display:flex; align-items:center; min-height:26px; }
.suzivo-face { display:block; width:100%; height:100%; }
.suzivo-face .reaction-face-disc { fill:currentColor; fill-opacity:.07; }
.suzivo-face-happy { color:#368869; }
.suzivo-face-neutral { color:#7385a1; }
.suzivo-face-surprised { color:#bb903b; }
.suzivo-face-worried { color:#b88342; }
.suzivo-face-sad { color:#578cc3; }
.suzivo-face-angry { color:#bf6464; }
.reaction-tear { fill:var(--paper); }
.suzivo-reaction-panel { margin-top:24px; padding:25px 22px 16px; scroll-margin-top:110px; }
.suzivo-reaction-panel .suzivo-reaction-title { color:var(--text); font-size:clamp(18px,2vw,22px); font-weight:600; letter-spacing:-.025em; margin:0; padding:0; }
.suzivo-reaction-help { margin:8px 0 20px; color:var(--muted); font-size:13px; line-height:1.45; }
.suzivo-reaction-panel .suzivo-reaction-buttons { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.suzivo-reaction-panel .suzivo-reaction-btn { min-width:0; display:flex; flex-direction:column; gap:9px; padding:15px 4px 11px; border:1px solid transparent; border-radius:12px; background:transparent; box-shadow:none; font-weight:600; }
.suzivo-reaction-panel .reaction-icon { width:42px; height:42px; background:none; border-radius:0; transition:transform .18s; }
.suzivo-reaction-panel .reaction-label { font-size:11px; line-height:1.3; font-weight:600; white-space:nowrap; }
.suzivo-reaction-panel .reaction-count { min-width:25px; border-radius:20px; padding:3px 7px; background:var(--bg); color:var(--soft); font-size:12px; line-height:1.2; }
.suzivo-reaction-panel .suzivo-reaction-btn:hover, .suzivo-reaction-panel .suzivo-reaction-btn.is-active { background:var(--brand-soft); border-color:var(--line); box-shadow:none; transform:none; }
.suzivo-reaction-panel .suzivo-reaction-btn:hover .reaction-icon { transform:translateY(-2px); }
.suzivo-reaction-panel .suzivo-reaction-btn.is-active { border-color:var(--brand); }
.suzivo-reaction-panel .suzivo-reaction-btn.is-active .reaction-count { background:var(--brand-dark); color:#fff; }
.suzivo-reaction-clear { margin-top:15px; padding:7px 10px; border:0; border-radius:6px; background:transparent; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.suzivo-reaction-clear[hidden] { display:none; }
.suzivo-reaction-message { min-height:16px; font-size:12px; }
.suzivo-comments-panel { scroll-margin-top:110px; }
body.dark .article-share-button { background:transparent; }
body.dark .suzivo-face .reaction-face-disc { fill-opacity:.12; }
body.dark .suzivo-face-happy { color:#6bb99c; }
body.dark .suzivo-face-neutral { color:#a0afc6; }
body.dark .suzivo-face-surprised { color:#ddbb73; }
body.dark .suzivo-face-worried { color:#d7ab77; }
body.dark .suzivo-face-sad { color:#82b0de; }
body.dark .suzivo-face-angry { color:#e49898; }
body.dark .article-share-button.share-viber { color:#b39ada; }
body.dark .article-share-button.share-facebook { color:#82b0de; }
body.dark .article-share-button.share-email { color:#6bb99c; }
@media (max-width:900px) {
  .suzivo-reaction-panel .suzivo-reaction-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .article-share { gap:4px; }
  .article-share-label { display:none; }
  .article-share-button { width:36px; height:38px; padding:8px; border-radius:9px; }
  .inner-post-header .article-data-bar { grid-template-columns:repeat(3,max-content); justify-content:space-between; gap:0; }
  .inner-post-header .article-data-bar > span, .inner-post-header .article-data-bar > span:first-child { padding:0 7px; border-bottom:0; }
  .inner-post-header .article-data-bar > span:first-child { padding-left:0; }
  .inner-post-header .article-data-bar > span:last-child { padding-right:0; }
  .article-data-bar small { font-size:7px; letter-spacing:.07em; }
  .article-data-bar time { font-size:10px; letter-spacing:-.025em; }
  .article-data-bar .article-engagement-values { flex-wrap:nowrap; gap:5px; }
  .article-engagement-values a { gap:3px; }
  .article-comment-summary { padding-left:5px; }
  .article-reaction-summary svg { width:20px; height:20px; }
  .article-comment-summary svg { width:15px; height:15px; }
  .article-data-bar .article-engagement-values strong { font-size:10px; }
  .article-data-bar .article-view-data strong { font-size:10px; }
  .article-data-bar .article-view-data .suzivo-view-group { font-size:10px; flex-wrap:nowrap; gap:3px; white-space:nowrap; }
  .article-data-bar .suzivo-view-group > span.suzivo-live-count { flex:0 0 auto; width:auto; }
  .article-data-bar .suzivo-view-group > span.suzivo-live-count:not([data-live-active="true"]) { display:none; }
  .article-data-bar .view-count { gap:3px; }
  .article-data-bar .view-count svg { width:11px; height:11px; }
  .suzivo-reaction-panel { padding:21px 13px 12px; }
  .suzivo-reaction-panel .suzivo-reaction-buttons { gap:7px; }
  .suzivo-reaction-panel .suzivo-reaction-btn { padding:12px 4px 10px; }
  .suzivo-reaction-panel .reaction-icon { width:40px; height:40px; }
  .suzivo-reaction-panel .reaction-label { font-size:12px; }
}
@media (max-width:420px) {
  .inner-post-meta-row { column-gap:8px; }
  .inner-post-header .article-data-bar > span, .inner-post-header .article-data-bar > span:first-child { padding-right:5px; padding-left:5px; }
  .inner-post-header .article-data-bar > span:first-child { padding-left:0; }
  .inner-post-header .article-data-bar > span:last-child { padding-right:0; }
  .inner-post-header .article-data-bar > span.article-view-data { border-left:1px solid var(--line); }
}
@media (max-width:360px) {
  .article-data-bar time, .article-data-bar .article-engagement-values strong, .article-data-bar .article-view-data strong, .article-data-bar .article-view-data .suzivo-view-group { font-size:9px; }
  .article-data-bar .article-engagement-values { gap:4px; }
  .article-reaction-summary svg { width:18px; height:18px; }
  .article-comment-summary svg { width:13px; height:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .article-share-button, .suzivo-reaction-panel .reaction-icon { transition:none; }
}