/* Shared public indexes: rankings are a data reference; contests are a
   workflow index. Keep hierarchy in typography and dividers, not small cards.

   Every rule for the leaderboard lives in this file. This sheet is pushed to
   `final_styles`, so it is the last stylesheet the layout loads and a
   selector here beats the same selector in an earlier sheet. The route's
   rules used to be spread across this file, frontend-polish.css,
   frontend-polish-round.css and metadata-system.css, and the copies did not
   agree: the stray `margin-top` on the surface stacked on this file's grid
   gap, and the table cells lost to a higher-specificity rule that padded
   them 12px instead of 20px. Both are gone now that only one file speaks. */
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-page {
    display: grid;
    gap: 20px;
    width: min(100%, 1120px);
    margin: 0 auto;
}

/* The page head draws its own boundary below the lead; the surface starts
   one grid gap under it and must not add a second one of its own. */
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-surface {
    overflow: hidden;
    border: 1px solid var(--border, rgba(148, 163, 184, .22));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface, #fff);
}

/* "My ranks": a signed-in reader's own three numbers. The rank is the only
   part worth weight — 未上榜 is the absence of a rank, so it stays as quiet
   as the label it follows. */
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-self-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    color: var(--ink-muted, #7e8fa8);
    font-size: .875rem;
    border: 0;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-self-summary > strong {
    color: var(--ink, #0c1222);
    font-size: .94rem;
    font-weight: 650;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-self-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-self-label {
    color: var(--ink-muted, #7e8fa8);
    font-size: .82rem;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-self-rank {
    color: var(--accent, #2563eb);
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-self-none {
    color: var(--ink-muted, #7e8fa8);
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-tabs {
    display: flex;
    gap: 20px;
    align-items: center;
    min-height: 52px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border, rgba(148, 163, 184, .22));
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-tabs .text-tab {
    min-height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ink-muted, #7e8fa8);
    font: inherit;
    font-size: .9rem;
    font-weight: 650;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-tabs .text-tab:hover,
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-tabs .text-tab:focus-visible {
    color: var(--accent, #2563eb);
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-tabs .text-tab[aria-selected="true"] {
    border-bottom-color: var(--accent, #2563eb);
    background: transparent;
    color: var(--accent, #2563eb);
    box-shadow: none;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-tabs .text-tab:active {
    transform: scale(.98);
}

/* The pane carries no horizontal padding: its cells own the inset instead.
   That lands the first column on the same 24px line as the tab strip above
   it, and lets each row's divider run the full width of the surface. */
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-data-pane {
    padding: 18px 0 14px;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-surface .df-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: inherit;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table :is(th, td) {
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--border, rgba(148, 163, 184, .22));
    text-align: left;
    vertical-align: middle;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table :is(th, td):first-child {
    padding-left: 24px;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table :is(th, td):last-child {
    padding-right: 24px;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table th {
    color: var(--ink-muted, #7e8fa8);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .01em;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table tbody tr:last-child td {
    border-bottom: 0;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table tbody tr.is-current-user td {
    background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent);
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table .leaderboard-col-rank {
    width: 1%;
    white-space: nowrap;
}

/* The name column is the only one that grows, so the three narrow columns
   collapse onto the right edge and the numbers sit under their own headers
   instead of drifting apart — auto layout was spreading the slack across
   all four, which opened a gap between 用户 and 解出小题 wide enough to
   read as a missing column. */
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table .leaderboard-col-person {
    width: 100%;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-rank-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ink-muted, #7e8fa8);
    font-size: .86rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* The top three are the only ranks a reader can name from memory, so they
   are the only ones that get a mark: a filled disc for the leader and a
   ring for second and third. The marks differ in weight, not in kind, so
   the column still reads as one run of numbers — three cards would repeat
   the surface the table already is. */
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-rank-mark.is-top {
    border-color: color-mix(in srgb, var(--accent, #2563eb) 40%, transparent);
    color: var(--accent, #2563eb);
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-rank-mark.is-first {
    border-color: var(--accent, #2563eb);
    background: var(--accent, #2563eb);
    color: var(--canvas, #fff);
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-person {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-person-name {
    color: var(--ink, #0c1222);
    font-weight: 600;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table tbody tr.is-current-user .leaderboard-person-name {
    font-weight: 700;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-person-handle {
    color: var(--ink-muted, #7e8fa8);
    font-size: .86rem;
    font-weight: 400;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-person-you {
    color: var(--accent, #2563eb);
    font-size: .72rem;
    font-weight: 650;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table .leaderboard-col-count,
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table .leaderboard-col-score {
    width: 1%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-count {
    color: var(--ink-muted, #7e8fa8);
    font-size: .875rem;
}

/* A fixed one-em box holds the unit so the numerals, not the 题, carry the
   alignment: without it a two-digit count and a three-digit count agree on
   their last digit and disagree on every other one. */
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-count-unit {
    display: inline-block;
    width: 1em;
    text-align: left;
}

/* The score is the ranking key — the one number on this page allowed to be
   loud, and the only cell that outranks the name. The extra left padding
   keeps the two numeric columns from reading as one wide column: they sit
   next to each other and both grow from the right. */
body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table .leaderboard-col-score {
    padding-left: 28px;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-score {
    color: var(--ink, #0c1222);
    font-size: .95rem;
    font-weight: 700;
}

body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-data-pane .df-pagination {
    padding: 6px 24px 0;
}

/* The solved count is the first column to go when the table runs out of
   room: it explains the score, it is not the ranking. Selected by class
   rather than by `:nth-child(3)`, because the period boards have only three
   columns and the positional rule hid their points column instead. */
@media (max-width: 760px) {
    body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table :is(th, td).leaderboard-col-count {
        display: none;
    }

    body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table :is(th, td) {
        padding: 10px 10px;
    }

    body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table :is(th, td):first-child {
        padding-left: 16px;
    }

    body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-table :is(th, td):last-child {
        padding-right: 16px;
    }
}

@media (max-width: 640px) {
    body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-page { gap: 16px; }
    body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-index-tabs { gap: 16px; padding-inline: 16px; }
    body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-data-pane { padding: 14px 0 12px; }
    body[data-theme-area="frontend"].route-leaderboard-index .leaderboard-data-pane .df-pagination { padding-inline: 16px; }
}

/* --- Contests: rows are siblings in one archive surface --- */
body[data-theme-area="frontend"] .contest-archive .contest-package-line {
    transition: background-color 160ms ease;
}

body[data-theme-area="frontend"] .contest-archive .contest-package-line:hover {
    background: var(--surface-alt, rgba(148, 163, 184, .05));
}

body[data-theme-area="frontend"] .contest-archive .package-start-link {
    transition: transform 140ms ease-out, background-color 160ms ease, border-color 160ms ease;
}

body[data-theme-area="frontend"] .contest-archive .package-start-link:active {
    transform: scale(.98);
}