/* Address ranking page — layered on public.css and links.css (hero, breadcrumb, sheet, other-links). */

/* Ranking table columns: widths sit on the header cells (no colgroup) so the category column can drop out on phones. */
.rank-sheet .w-no { width: 70px; }
.rank-sheet .w-name { width: 22%; }
.rank-sheet .w-cat { width: 22%; }
.rank-sheet .w-count { width: 14%; }
.rank-sheet .w-link { width: 22%; }
.rank-sheet .cell-no.is-top { color: var(--accent-dark); font-size: calc(13px + var(--font-size-step)); font-weight: 800; }
.rank-sheet .cell-cat a { color: #5f5a6c; text-decoration: underline; text-decoration-color: #d8cfe6; text-underline-offset: 4px; }
.rank-sheet .cell-cat a:hover { color: var(--accent-dark); }
#rank-sheet .sheet-heading h2 { word-break: keep-all; }
.cell-count { color: var(--accent-dark); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Per-category top three */
.rank-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rank-card { display: flex; flex-direction: column; min-width: 0; padding: 22px 24px; border-radius: 18px; background: var(--card-bg); }
.rank-card h3 { display: flex; align-items: center; gap: 10px; font-size: calc(15px + var(--font-size-step)); letter-spacing: -.025em; }
.rank-card h3 svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--card-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rank-card ol { margin: 14px 0 14px; padding: 0; list-style: none; }
.rank-card li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #ffffffa6; }
.rank-place { width: 20px; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-card li a { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.rank-card li a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }
.rank-card li small { color: var(--muted); font-size: calc(10px + var(--font-size-step)); white-space: nowrap; }
.rank-empty { color: var(--muted); }
.rank-more { margin-top: auto; color: var(--accent-dark); font-size: calc(11px + var(--font-size-step)); font-weight: 600; }
.rank-more:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width:1000px) {
  .rank-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width:700px) {
  .rank-sheet .w-no { width: 44px; }
  .rank-sheet .w-name { width: auto; }
  .rank-sheet .w-count { width: 64px; }
  .rank-sheet .w-link { width: 96px; }
  .rank-sheet .cell-cat { display: none; }
  #rank-sheet .sheet-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rank-cards { grid-template-columns: 1fr; gap: 12px; }
}