/**
 * Ranking card — the shared hub card (shell, header, badges, body, top-3 preview).
 *
 * Canonical source for every surface that renders a `.ranking-card`:
 *   /toplists/        (frontend/top-list/)          — top-3 preview
 *   /championships/   (+ /championships/national)   — top-3 preview
 *   /107live/         (frontend/107live/)           — top-3 preview + progress strip
 *   /live2/           (frontend/live2/)             — top-3 preview + progress strip
 *   /tracker/         (frontend/tracker/)           — header + CTAs only, no body
 *
 * These rules previously existed as five near-identical copies (three page
 * stylesheets plus two inline <style> blocks in the live hubs) and had drifted:
 * the preview radius, the badge radius, the points color and the tabular-numeral
 * setting all disagreed, and live2's badge block was stale enough that the
 * per-type discipline tints live-card.js emits rendered unstyled. Those copies
 * are gone — change the card here, once.
 *
 * The CTA footer (`.ranking-card-footer` + `.ranking-link`) lives in its sibling
 * /common/css/ranking-link.css, which owns the CTA-hierarchy rule.
 *
 * `.rankings-grid` is deliberately NOT here: the surfaces genuinely differ
 * (auto-fit vs auto-fill, `align-items: start` on the tracker), so each page
 * keeps its own grid rule.
 *
 * Density note (DESIGN.md §5 "Ranking Card"): card text sets its own
 * line-height from the §3 Hierarchy role — title 1.2, meta 1.4, preview rows
 * 1.3–1.35. It must never inherit the `body { line-height: 1.6 }` prose value;
 * that inheritance was the single largest source of dead vertical space in the
 * cards, and re-introducing it undoes most of this file.
 *
 * Consuming pages must define the usual local aliases (--surface, --surface-alt,
 * --border, --text, --text-muted, --accent, --shadow), exactly as they already
 * do for ranking-link.css.
 */

/* --- Shell --- */

.ranking-card {
    background: var(--surface-alt);
    border: 2px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.ranking-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px var(--shadow);
    border-color: var(--accent);
}

/* --- Header --- */

/* The divider assumes a body follows. /tracker/ builds body-less cards
   (header + footer only) and overrides `border-bottom: none` locally, so its
   header rule doesn't stack a second 2px line on the footer's `border-top`. */
.ranking-card-header {
    padding: 1.25rem;
    border-bottom: 2px solid var(--border);
    background: linear-gradient(135deg, var(--surface-alt) 0%, var(--surface) 100%);
}

/* Badge GEOMETRY ONLY.
 *
 * The badge palette is deliberately NOT shared. The surfaces diverge on
 * purpose: /tracker/ and /107live/ render the quiet chip (transparent base,
 * per-type discipline tints), while /toplists/, /championships/ and /live2/
 * still render the older solid pill (--primary fill, white text). Unifying
 * them is a palette decision, not a density one — each page keeps its own
 * `background`/`color`/`border` rules for `.ranking-badge` and its variants
 * (.venue, .event-type[.type-*], .indoor, .open).
 *
 * Anything that affects the card's height lives here so every surface gets
 * the same rhythm.
 */
.ranking-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: var(--t7-radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.ranking-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 0.15rem;
    letter-spacing: -0.02em;
}

.ranking-card-location {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
    font-variant-numeric: tabular-nums;
}

.ranking-card-subtitle {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Sponsor credit / open-access note under the subtitle. */
.ranking-card-note {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* --- Live-hub header extras (emitted by common/js/live-card.js) --- */

.live-pane-header-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.live-pane-type {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-muted);
    margin: 0.15rem 0 0.35rem;
}

.live-pane-category {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin-top: 0.15rem;
    font-weight: 500;
}

/* --- Body --- */

.ranking-card-body {
    padding: 1.25rem;
    flex: 1;
}

.live-pane-progress {
    margin-bottom: 0.875rem;
}

/* --- Top-3 preview ---
   Always the last child of the body, so it carries no bottom margin: the
   body's own padding closes the box. */

.ranking-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--t7-radius-lg);
    padding: 0.75rem;
    margin-bottom: 0;
}

.ranking-preview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-family: var(--t7-font-display);
    font-size: 0.85rem;
    line-height: 1.35;
}

.ranking-preview-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

/* Rank and points are data, not voice: numeric face + tabular figures so the
   three rows align down the column (DESIGN.md §3 "The Numeric Face Rule"). */
.preview-rank {
    font-family: var(--t7-font-numeric);
    font-weight: 700;
    color: var(--accent);
    width: 20px;
    font-variant-numeric: tabular-nums;
}

.preview-athlete {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    text-align: left;
}

.athlete-name {
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    font-size: 0.9rem;
}

.athlete-country {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-muted);
    font-weight: 500;
}

.preview-points {
    font-family: var(--t7-font-numeric);
    font-weight: 700;
    color: var(--accent);
    min-width: 45px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Projected-total line under an athlete on the live hubs. */
.live-forecast-line {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--accent);
    font-weight: 600;
    font-style: italic;
}

/* --- Preview error / empty states (top-list + championships) --- */

.ranking-preview-item.error {
    justify-content: center;
    padding: 0.5rem 0;
    gap: 0.5rem;
}

.ranking-preview-item.error .preview-error-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.ranking-preview-item.error .preview-retry-btn {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--action);
    background: transparent;
    border: 1px solid var(--action);
    border-radius: 6px;
    padding: 0.25rem 0.65rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ranking-preview-item.error .preview-retry-btn:hover {
    background: var(--action);
    color: white;
}

.ranking-preview-item.error .preview-retry-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

@media (max-width: 768px) {
    .ranking-card-header,
    .ranking-card-body {
        padding: 1rem;
    }
}