/* ============================================================
   30 — POPULAR ARTICLES
   Scope: .supa*
   ============================================================ */

.supa__head {
  display: grid;
  gap: var(--s-5);
  margin-block-end: var(--s-7);
}

@media (min-width: 52em) {
  .supa__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--s-8);
  }
}

.supa__headline { max-width: 56ch; }

.supa__title { font-size: var(--fs-h2); }

.supa__note {
  margin-block-start: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-body);
}
/* --c-brand is 4.45:1 on --surface-alt; the pressed tint clears AA at 15px. */
.supa__note a { color: var(--c-brand-press); }
.supa__note a:hover { color: var(--c-brand); }

/* Count and reset share a baseline with the heading's last line. */
.supa__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* --text-muted lands at 4.0:1 on --surface-alt, so every 13px label on this
   page uses --text-body and lets size and weight carry the hierarchy. */
.supa__count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.supa__reset {
  min-height: calc(var(--s-9) - var(--s-1));
  padding-inline: var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--c-brand-press);
  letter-spacing: var(--tracking-snug);
  transition: color var(--t-fast) var(--ease-out);
}
.supa__reset:hover { color: var(--c-brand); }
.supa__reset[hidden] { display: none; }

/* ---------------- The index ---------------- */

.supa__list { border-block-start: 1px solid var(--border); }

.supa__item {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-6);
  border-block-end: 1px solid var(--border);
}
/* .supa__item is display:grid, which would beat the UA rule for [hidden]. */
.supa__item[hidden] { display: none; }

@media (min-width: 52em) {
  .supa__item {
    grid-template-columns: minmax(0, 1fr) 14rem;
    column-gap: var(--s-9);
    align-items: baseline;
  }
}

.supa__q {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  text-wrap: pretty;
}

.supa__a {
  margin-block-start: var(--s-2);
  max-width: 68ch;
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.supa__a code {
  padding: 0 var(--s-1);
  border-radius: var(--r-xs);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-xs);
  color: var(--c-brand-press);
  /* Long identifiers must never widen the row at 360px. */
  overflow-wrap: anywhere;
}

.supa__tag {
  font-size: var(--fs-xs);
  color: var(--text-body);
  letter-spacing: var(--tracking-snug);
}

@media (min-width: 52em) {
  .supa__tag { text-align: end; }
}

/* ---------------- Empty state ---------------- */

.supa__empty {
  max-width: 46ch;
  margin-block-start: var(--s-10);
  padding-block-end: var(--s-4);
}
.supa__empty[hidden] { display: none; }

.supa__empty-ico {
  width: var(--s-7);
  height: var(--s-7);
  color: var(--text-muted);
  margin-block-end: var(--s-5);
}

.supa__empty-t {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  overflow-wrap: anywhere;
}

.supa__empty-q { color: var(--c-brand); }

.supa__empty-b {
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.supa__empty-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
/* .btn is display:inline-flex, which outranks the UA rule for [hidden]. */
.supa__empty-row [hidden] { display: none; }