/* View Results Card Layout — shared between live/results.html and the four
   ranking results.html pages (alltimes, alltimes_fin, seasonbest, seasonbest_fin).
   Rendered by frontend/common/js/view-results.js. */

.viewresults-cards-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.viewresults-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--calc-border);
    background-color: var(--calc-bg);
    transition: all 0.2s ease;
}

.viewresults-card:hover {
    background-color: var(--calc-hover);
    box-shadow: 0 2px 8px var(--calc-shadow);
}

.viewresults-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    grid-column: 1 / -1;
}

.viewresults-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--calc-text);
    line-height: 1.3;
}

.viewresults-card-title-points {
    color: var(--calc-text);
    font-weight: 800;
}

.viewresults-card-title-nationality {
    font-weight: 400;
    color: var(--calc-text-secondary);
    white-space: nowrap;
}

.viewresults-card-events {
    grid-column: 1;
}

.viewresults-event-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.viewresults-event-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    min-width: 3.5rem;
}

.viewresults-event-name {
    font-size: 0.625rem;
    font-weight: 500;
    white-space: nowrap;
}

.viewresults-event-result {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--calc-text);
}

.viewresults-dot-completed {
    background: rgba(148, 163, 184, 0.15);
    color: #3b82f6;
}

.viewresults-dot-pending {
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
}

/* Always-visible disclosure chip (see competitions/results.html): quiet ring at
   rest, fills with the action color and nudges on hover/focus. */
.viewresults-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 1px solid var(--calc-border);
    color: var(--calc-text-secondary);
    background-color: transparent;
    transition: color 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease;
}

.viewresults-card:hover .viewresults-card-arrow,
.viewresults-card:focus-within .viewresults-card-arrow {
    color: var(--calc-primary);
    border-color: var(--calc-primary);
    background-color: rgba(37, 99, 235, 0.1);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .viewresults-card-arrow { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
    .viewresults-card:hover .viewresults-card-arrow,
    .viewresults-card:focus-within .viewresults-card-arrow { transform: none; }
}

.viewresults-events-loading {
    font-size: 0.75rem;
    color: var(--calc-text-secondary);
}

/* Mobile responsive */
@media (max-width: 640px) {
    .viewresults-card-title {
        font-size: 1rem;
    }
}