.rank-lab{padding:1.2rem;margin:1.5rem 0;border:1px solid #9aa9b5;border-radius:12px;font:1rem/1.6 system-ui,sans-serif;color:inherit;max-width:100%}.rank-lab label{display:inline-flex;flex-direction:column;gap:.25rem;margin:0 1rem 1rem 0}.rank-lab input,.rank-lab select,.rank-lab button{font:inherit;padding:.5rem;border:1px solid #8496a5;border-radius:6px;background:#fff;color:#172c3a}.rank-lab button{cursor:pointer;margin:.3rem}.rank-lab button[aria-pressed=true]{background:#164e63;color:white}.rank-lab ul{padding-left:1.2rem}.rank-lab li{margin:.8rem 0}.rank-lab small{display:block}.rank-lab svg{display:block;width:100%;height:auto;background:#f5f9fc;border-radius:8px}.rank-lab .rank-scroll{overflow-x:auto}.rank-lab table{border-collapse:collapse;width:100%;font-size:.9rem}.rank-lab th,.rank-lab td{text-align:left;border-bottom:1px solid #aab9c4;padding:.4rem}.rank-lab a{overflow-wrap:anywhere}.rank-nav{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0}.rank-nav a{padding:.6rem .9rem;border:1px solid #8496a5;border-radius:8px}
/* Allow native date/select controls and long labels to shrink on phones. */
@media (max-width: 768px) {
  .rank-lab { box-sizing: border-box; padding: 12px; }
  .rank-lab label { display: flex; min-width: 0; width: 100%; margin: 0 0 16px; }
  .rank-lab input, .rank-lab select, .rank-lab button {
    box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 44px; font-size: 16px;
  }
  .rank-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rank-nav a { display: flex; align-items: center; box-sizing: border-box; min-height: 48px; padding: 10px; font-size: .9rem; }
}

@media (min-width: 769px) {
  .rank-lab { box-sizing: border-box; padding: 24px; background: var(--bg-card); border-color: var(--border-color); }
  .rank-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 20px; }
  .rank-lab .rank-filters label { display: flex; min-width: 0; margin: 0; }
  .rank-filters input, .rank-filters select { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; }
  .rank-lab li { padding: 16px 8px; border-bottom: 1px solid var(--border-color); }
  .rank-lab li:hover { background: var(--bg-search); }
  .rank-lab th, .rank-lab td { padding: 10px 14px; font-variant-numeric: tabular-nums; }
  .rank-lab tbody tr:hover { background: var(--bg-search); }
  .rank-lab svg { max-width: 880px; margin-inline: auto; }
  .rank-nav a:hover, .rank-nav a:focus-visible { background: var(--bg-search); border-color: var(--accent-color); }
}
@media (min-width: 1025px) {
  .rank-filters { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
}