/* Article reading meter — visible, fixed mid-right, responsive */
.article-reading-meter{
  --reading-progress:0%;
  position:fixed;
  right:clamp(14px,2vw,28px);
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  z-index:120;
  width:108px;
  height:108px;
  pointer-events:none;
  filter:drop-shadow(0 14px 34px rgba(31,31,28,.14));
}
.article-reading-meter__ring{
  width:100%;
  height:100%;
  padding:7px;
  border-radius:50%;
  background:conic-gradient(var(--color-primary,#4B583F) var(--reading-progress),rgba(75,88,63,.14) 0);
  box-shadow:0 0 0 1px rgba(75,88,63,.08);
  transition:background .12s linear;
}
.article-reading-meter__inner{
  width:100%;
  height:100%;
  display:grid;
  place-content:center;
  gap:2px;
  border:1px solid rgba(75,88,63,.12);
  border-radius:50%;
  background:rgba(255,253,248,.96);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
}
.article-reading-meter strong{
  display:block;
  color:var(--color-primary,#4B583F);
  font-family:"IRANYekanX",Tahoma,sans-serif;
  font-size:1.68rem;
  font-weight:400;
  line-height:.92;
  letter-spacing:-.015em;
  direction:rtl;
  font-variant-numeric:proportional-nums;
  text-rendering:optimizeLegibility;
}
.article-reading-meter span{
  display:block;
  margin-top:5px;
  color:#6f6a62;
  font-size:.74rem;
  font-weight:850;
  line-height:1;
}
.article-reading-meter.is-complete .article-reading-meter__ring{
  background:conic-gradient(var(--color-primary,#4B583F) 100%,var(--color-primary,#4B583F) 0);
}
@media(max-width:900px){
  .article-reading-meter{
    right:12px;
    top:50%;
    bottom:auto;
    width:88px;
    height:88px;
  }
  .article-reading-meter__ring{padding:6px}
  .article-reading-meter strong{font-size:1.38rem;font-weight:400;letter-spacing:-.01em}
  .article-reading-meter span{font-size:.66rem}
}
@media(max-width:480px){
  .article-reading-meter{
    width:78px;
    height:78px;
    right:8px;
    top:54%;
    bottom:auto;
  }
  .article-reading-meter__ring{padding:5px}
  .article-reading-meter strong{font-size:1.18rem;font-weight:400;letter-spacing:0}
  .article-reading-meter span{font-size:.61rem}
}
@media(prefers-reduced-motion:reduce){
  .article-reading-meter__ring{transition:none}
}