/* Best Articles — isolated styles */
.best-articles-tabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.article-card .article-copy{
  position:relative;
}

.article-feature-star{
  position:absolute;
  z-index:2;
  inset-block-start:16px;
  inset-inline-end:16px;
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:var(--muted);
  font:inherit;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(17,45,37,.05);
  transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
.article-card:has(.article-feature-star) .article-meta{
  padding-inline-end:38px;
}
.article-feature-star:hover,
.article-feature-star:focus-visible{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  color:var(--accent);
  outline:0;
  transform:translateY(-1px);
}
.article-feature-star.active{
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
  background:color-mix(in srgb,var(--accent) 10%,var(--card));
  color:var(--accent);
}
.article-feature-star:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
}

@media(max-width:760px){
  .best-articles-tabs{
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .best-articles-tabs::-webkit-scrollbar{display:none}
  .best-articles-tabs button{flex:0 0 auto}

  .article-feature-star{
    inset-block-start:13px;
    inset-inline-end:13px;
    width:30px;
    height:30px;
    font-size:17px;
  }
  .article-card:has(.article-feature-star) .article-meta{
    padding-inline-end:36px;
  }
}