/* Top downloads (top.html): ranked top 10, then the rest as regular app rows */
@layer pages {
  .top-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 2.5rem;
    padding-block: 1.25rem 3rem;
    @media (width >= 640px) { padding-block-start: 1.5rem; }
    & .breadcrumb { margin-block-end: 1rem; }
  }

  .top-head {
    & h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; @media (width >= 640px) { font-size: 1.875rem; } }
    & p { margin-block-start: .25rem; font-size: .875rem; color: var(--muted-foreground); }
  }

  .top-section h2 {
    margin-block-end: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.025em;
    @media (width >= 640px) { font-size: 1.25rem; }
  }

  /* ───────── Ranked top 10 ───────── */
  .ranked {
    display: grid;
    gap: .25rem 1.5rem;
    @media (width >= 768px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .ranked-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .875rem .75rem;
    border-radius: .75rem;
    transition: background-color .15s var(--ease);
    @media (width >= 640px) { padding-inline: 1rem; }
    &:hover, &:focus-visible { background: var(--accent); outline: none; }
    &:hover .app-icon { scale: 1.03; }

    & .app-icon { inline-size: 72px; border-radius: 1.125rem; font-size: 30px; }
    & .body { flex: 1; min-inline-size: 0; }
    & h3 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 1.0625rem;
      font-weight: 600;
      letter-spacing: -.025em;
      @media (width >= 640px) { font-size: 1.125rem; }
    }
    & .n { margin-inline-end: .25rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
    li:nth-child(-n + 3) > & .n { color: var(--brand); }   /* top three by list position */
    & .blurb {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      margin-block-start: .125rem;
      font-size: .8125rem;
      line-height: 1.5;
      color: var(--muted-foreground);
    }
    & .app-meta { margin-block-start: .375rem; }
  }

  /* ───────── The rest ───────── */
  .more-grid {
    display: grid;
    gap: .25rem 1.5rem;
    @media (width >= 640px)  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (width >= 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .end-note { padding-block: 1.5rem 0; text-align: center; font-size: .75rem; color: var(--muted-foreground); }

  /* ───────── Filter tabs (template .tab) ───────── */
  .top-tabs {
    margin-block-start: 1.25rem;
    border-block-end: 1px solid var(--border);
    scrollbar-width: none;
    & .tab:first-child { margin-inline-start: -.75rem; }
    & .count:empty { display: none; }
  }
  .top-page:has(.top-tabs) { row-gap: 1.5rem; }
  .top-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block-start: 0; }

  /* ───────── Toolbar: category chips + sort ───────── */
  .top-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-block-start: 1rem;
    &[hidden] { display: none; }
    & .chips { flex: 1; min-inline-size: 0; margin-block: 0; scrollbar-width: none; }
    & .select-wrap { flex-shrink: 0; inline-size: 11rem; }
    @media (width < 640px) {
      flex-direction: column;
      align-items: stretch;
      & .select-wrap { inline-size: 100%; }
    }
  }
  .chip-n { color: var(--muted-foreground); font-weight: 400; [aria-pressed="true"] > & { color: inherit; opacity: .7; } }

  /* ═════════ Top ten: one left-aligned grid — four on top (larger icon + rank badge),
     six below in three columns. Same row anatomy everywhere: icon, name, one line. ═════════ */
  .podium, .ranked { display: grid; gap: .25rem 1rem; }
  .podium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-end: .75rem;
    padding-block-end: .75rem;
    border-block-end: 1px solid var(--border);
    &:empty { display: none; }
    @media (width >= 1024px) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .ranked {
    grid-template-columns: minmax(0, 1fr);
    @media (width >= 640px)  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (width >= 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .podium-item, .ranked-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-inline-size: 0;
    padding: .5rem;
    border-radius: .75rem;
    transition: background-color .15s var(--ease);
    &:hover, &:focus-visible { background: var(--accent); outline: none; }
    &:hover .app-icon { scale: 1.03; }
    & .body { flex: 1; min-inline-size: 0; }
    & h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 600; letter-spacing: -.02em; }
    & p { display: flex; align-items: center; gap: .375rem; margin-block-start: .125rem; overflow: hidden; white-space: nowrap; font-size: .75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  }
  /* The detail text truncates; the movement badge after it always stays whole */
  :is(.podium-item, .ranked-item) p { & .t { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } & .trend { flex-shrink: 0; } }
  .podium-item .app-icon { inline-size: 56px; border-radius: 1rem; font-size: 22px; }
  .ranked-item .app-icon { inline-size: 44px; border-radius: .75rem; font-size: 18px; }
  .ranked-item .n { display: none; }
  @media (width < 640px) { .podium-item .kw { display: none; } }   /* two narrow columns on phones: "6.1M" is enough */

  /* 1–4: rank badge on the icon corner (as on the home page) */
  .podium-item .rank {
    position: absolute;
    inset-block-start: .25rem;
    inset-inline-start: .25rem;
    z-index: 1;
    display: grid; place-items: center;
    min-inline-size: 1.25rem; block-size: 1.25rem; padding-inline: .25rem;
    border: 2px solid var(--background);
    border-radius: 99px;
    background: var(--brand);
    color: var(--background);
    font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  }

  /* 5–10: quiet number column */
  .rank-col, .ranked-item:not(:has(.rank-col))::before {
    flex-shrink: 0;
    inline-size: 1.25rem;
    text-align: center;
    font-size: .875rem;
    font-weight: 600;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
  }
  /* Without JavaScript the authored list still gets a number column */
  .ranked { counter-reset: rank; }
  .ranked > li { counter-increment: rank; }
  .ranked-item:not(:has(.rank-col))::before { content: counter(rank); }

  /* Movement: rendered only when notable, and kept small */
  .trend {
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1;
    &.up { color: var(--success); }
    &.down { color: var(--destructive); }
    &.new { color: var(--brand); }
  }

  /* ───────── More: live count and a Show more button ───────── */
  .more-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
    & h2 { margin-block-end: 0; }
  }
  .more-count { flex-shrink: 0; font-size: .8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .more-foot {
    display: grid;
    justify-items: center;
    padding-block-start: 1.5rem;
    & .btn[hidden], & .end-note[hidden] { display: none; }
    & .more-sentinel { block-size: 1px; }
    & .end-note { padding-block: 0; }
  }
}