/* Rankings */
.rk-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.rk-card { margin: 0; }
.rk-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rk-card-head h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.rk-meta, .rk-note, .rk-empty { color: var(--ls-tertiary); font-size: 12px; line-height: 1.5; }
.rk-note, .rk-empty { margin: 8px 0 0; }
.rk-notice { margin: 0 0 12px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--ls-warning) 45%, var(--ls-rule)); border-radius: 7px; background: color-mix(in srgb, var(--ls-warning) 9%, transparent); color: var(--ls-ink); font-size: 12.5px; }
.rk-notice[hidden] { display: none; }
.rk-link { border: 0; background: transparent; color: var(--ls-accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0; white-space: nowrap; }
.rk-link:hover { text-decoration: underline; }
.rk-icon { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--ls-tertiary); font-size: 17px; line-height: 1; cursor: pointer; }
.rk-icon:hover:not(:disabled) { background: color-mix(in srgb, var(--ls-decline) 14%, transparent); color: var(--ls-decline); }

.rk-universe { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rk-field { display: grid; gap: 5px; font-size: 11px; color: var(--ls-secondary); min-width: 150px; }
.rk-field[hidden], .rk-universe .outline[hidden] { display: none; }
.rk-size-row { display: flex; gap: 6px; }
.rk-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ls-secondary); padding-bottom: 8px; }
.rk-field select, .rk-col select, .rk-inline select, .rk-sortbar select, .rk-more select, .rk-search, .rk-size-row select {
  box-sizing: border-box; border: 1px solid var(--ls-strong-rule); border-radius: 6px; background: var(--ls-input); color: var(--ls-ink); font: inherit; font-size: 12.5px; padding: 8px 10px;
}
.rk-field select:focus-visible, .rk-col select:focus-visible, .rk-search:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 1px; }
.rk-danger:hover { border-color: var(--ls-decline); color: var(--ls-decline); }

.rk-col { padding: 8px 0; }
.rk-col + .rk-col { border-top: 1px dashed var(--ls-rule); }
.rk-col-main { display: grid; grid-template-columns: 92px minmax(200px, 1.3fr) minmax(220px, 1fr) 28px; gap: 8px; align-items: center; }
.rk-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ls-accent) 16%, transparent); color: var(--ls-accent); font-size: 11px; font-weight: 600; text-align: center; }
.rk-metric .metric-picker { width: 100%; }
.rk-col-meta { display: block; margin: 4px 0 0 100px; color: var(--ls-tertiary); font-size: 11px; }
.rk-add-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.rk-options { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ls-rule); }
.rk-show { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ls-secondary); }
.rk-show > span { color: var(--ls-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.rk-chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--ls-rule); border-radius: 999px; font-size: 12px; cursor: pointer; }
.rk-chip-check:has(input:checked) { border-color: var(--ls-accent); background: color-mix(in srgb, var(--ls-accent) 8%, transparent); color: var(--ls-ink); }
.rk-inline { display: inline-flex; align-items: center; gap: 7px; }

.rk-examples { margin-top: 14px; border-top: 1px solid var(--ls-rule); padding-top: 12px; }
.rk-examples > summary { cursor: pointer; font-size: 12.5px; color: var(--ls-secondary); }
.rk-example-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.rk-example-tabs button { padding: 6px 12px; border: 1px solid var(--ls-rule); border-radius: 999px; background: transparent; color: var(--ls-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.rk-example-tabs button[aria-selected="true"] { border-color: var(--ls-accent); background: color-mix(in srgb, var(--ls-accent) 10%, transparent); color: var(--ls-ink); }
.rk-example-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.rk-example { display: grid; gap: 5px; text-align: left; padding: 12px 14px; border: 1px solid var(--ls-strong-rule); border-radius: 9px; background: var(--ls-card); color: var(--ls-ink); font: inherit; cursor: pointer; transition: border-color var(--ls-motion), transform var(--ls-motion); }
.rk-example:hover { border-color: var(--ls-accent); transform: translateY(-1px); }
.rk-example strong { font-size: 13px; }
.rk-example span { color: var(--ls-secondary); font-size: 12px; line-height: 1.45; }
.rk-example small { color: var(--ls-tertiary); font-size: 11px; text-transform: capitalize; }

.rk-summary p { margin: 0 0 10px; font-size: 14px; }
.rk-dist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); gap: 18px; align-items: center; margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--ls-rule); border-radius: 9px; background: color-mix(in srgb, var(--ls-stone) 60%, transparent); }
.rk-dist-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rk-dist-stats div { display: grid; gap: 3px; min-width: 0; }
.rk-dist-stats span { color: var(--ls-tertiary); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.rk-dist-stats strong { font-size: 14px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.rk-dist-chart small { display: block; margin-top: 6px; color: var(--ls-tertiary); font-size: 11px; line-height: 1.4; }
.rk-hist { display: block; width: 100%; height: 56px; }
.rk-hist-bars rect { fill: color-mix(in srgb, var(--ls-accent) 55%, transparent); }
.rk-hist-q, .rk-hist-m { stroke: var(--ls-ink); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .45; stroke-dasharray: 3 3; }
.rk-hist-m { opacity: .9; stroke-dasharray: none; }

.rk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 16px; }
.rk-card-top { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--ls-strong-rule); border-radius: 9px; color: var(--ls-ink); text-decoration: none; background: var(--ls-card); transition: border-color var(--ls-motion); }
.rk-card-top:hover { border-color: var(--ls-accent); }
.rk-rank-big { color: var(--ls-accent); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.rk-card-top strong { font-size: 14px; }
.rk-card-top b { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rk-card-top small { color: var(--ls-tertiary); font-size: 11px; }

.rk-toolbar { display: grid; gap: 10px; margin-bottom: 10px; }
.rk-views { display: flex; gap: 6px; flex-wrap: wrap; }
.rk-view { padding: 6px 11px; border: 1px solid var(--ls-rule); border-radius: 999px; background: transparent; color: var(--ls-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.rk-view:hover { border-color: var(--ls-accent); color: var(--ls-ink); }
.rk-view.active { border-color: var(--ls-accent); background: color-mix(in srgb, var(--ls-accent) 12%, transparent); color: var(--ls-ink); }
.rk-sortbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ls-secondary); }
.rk-search { min-width: 220px; margin-left: auto; }
.rk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; align-items: center; }
.rk-actions a.outline { display: inline-flex; align-items: center; text-decoration: none; }
.rk-actions a.outline.disabled, .rk-actions summary.disabled { opacity: .48; pointer-events: none; }
.rk-export { position: relative; }
.rk-export > summary, .rk-saved > summary { list-style: none; cursor: pointer; }
.rk-export > summary::-webkit-details-marker, .rk-saved > summary::-webkit-details-marker { display: none; }
.rk-saved { position: relative; }
.rk-pop { position: absolute; z-index: 50; right: 0; top: calc(100% + 6px); width: min(380px, 86vw); max-height: 60vh; overflow: auto; padding: 8px; border: 1px solid var(--ls-strong-rule); border-radius: 10px; background: var(--ls-card); box-shadow: var(--ls-shadow); }
.rk-export-pop { left: 0; right: auto; width: 220px; display: grid; gap: 2px; }
.rk-export-pop button { padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ls-ink); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.rk-export-pop button:hover { background: var(--ls-stone); }
.rk-saved-item { display: flex; align-items: center; gap: 4px; border-radius: 7px; }
.rk-saved-item.active { background: color-mix(in srgb, var(--ls-accent) 10%, transparent); }
.rk-saved-open { flex: 1; display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 0; background: transparent; color: var(--ls-ink); font: inherit; cursor: pointer; border-radius: 7px; min-width: 0; }
.rk-saved-open:hover { background: var(--ls-stone); }
.rk-saved-open small { color: var(--ls-tertiary); font-size: 11px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; }

.rk-table-wrap { max-height: 72vh; overflow: auto; border: 1px solid var(--ls-rule); border-radius: 8px; }
.rk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rk-table th, .rk-table td { padding: 9px 12px; border-bottom: 1px solid var(--ls-rule); text-align: left; white-space: nowrap; background: var(--ls-card); }
.rk-table thead th { position: sticky; top: 0; z-index: 2; vertical-align: bottom; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--ls-secondary); border-bottom: 1px solid var(--ls-strong-rule); }
.rk-table thead th small { display: block; margin-top: 2px; font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--ls-tertiary); }
.rk-table thead th.sorted { color: var(--ls-ink); }
.rk-table .num { text-align: right; }
.rk-table .rk-sticky { position: sticky; left: 0; z-index: 1; font-weight: 600; box-shadow: 1px 0 0 var(--ls-rule); }
.rk-table thead .rk-sticky { z-index: 3; }
.rk-table .rk-check { width: 34px; padding-right: 0; }
.rk-table tbody tr:hover td, .rk-table tbody tr:hover th { background: var(--ls-stone); }
.rk-table tbody tr.selected td, .rk-table tbody tr.selected th { background: color-mix(in srgb, var(--ls-accent) 10%, var(--ls-card)); }
.rk-table tbody th a { color: inherit; text-decoration: none; }
.rk-table tbody th a:hover { color: var(--ls-accent); text-decoration: underline; }
.rk-table .sort-button { cursor: pointer; text-transform: inherit; }
.rk-arrow { margin-left: 4px; color: var(--ls-accent); }
.rk-arrow sup { font-size: 9px; }
.rk-rank strong { display: block; font-size: 13px; }
.rk-move { display: block; font-size: 10px; color: var(--ls-tertiary); }
.rk-move.up { color: var(--ls-success); }
.rk-move.down { color: var(--ls-decline); }
.rk-primary { font-weight: 600; }
.rk-table td.hl-high { background: color-mix(in srgb, var(--ls-accent) 15%, var(--ls-card)); }
.rk-table td.hl-low { background: color-mix(in srgb, var(--ls-warning) 16%, var(--ls-card)); }
.rk-table td.hl-b1 { background: color-mix(in srgb, var(--ls-accent) 3%, var(--ls-card)); }
.rk-table td.hl-b2 { background: color-mix(in srgb, var(--ls-accent) 8%, var(--ls-card)); }
.rk-table td.hl-b3 { background: color-mix(in srgb, var(--ls-accent) 14%, var(--ls-card)); }
.rk-table td.hl-b4 { background: color-mix(in srgb, var(--ls-accent) 22%, var(--ls-card)); }
.rk-more { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ls-secondary); }
.rk-more label { margin-left: auto; display: flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
  .rk-dist { grid-template-columns: minmax(0, 1fr); }
  .rk-dist-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rk-col-main { grid-template-columns: minmax(0, 1fr) 28px; }
  .rk-col-main .rk-badge, .rk-col-main .rk-link, .rk-col-main .rk-metric, .rk-col-main select { grid-column: 1; }
  .rk-col-main .rk-icon { grid-column: 2; grid-row: 1; }
  .rk-col-main .rk-badge, .rk-col-main .rk-link { justify-self: start; }
  .rk-col-meta { margin-left: 0; }
  .rk-universe { display: grid; grid-template-columns: minmax(0, 1fr); }
  .rk-search { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rk-example, .rk-card-top { transition: none; } }