/* ============================================================
   attempt.css — sekcje uploadu i widok wyniku /proba/<id>
   Używane przez:
     - public/wyzwanie.php (sekcja .challenge-upload)
     - public/proba.php    (widok wyniku)
   Tokeny i komponenty (.panel, .btn, .chip) z components.css / detail.css.
   ============================================================ */

/* ------------------------------------------------------------
   Sekcja uploadu na /wyzwanie/<id>
   ------------------------------------------------------------ */
.challenge-upload {
    /* Nic specjalnego — dziedziczy po .panel. Ten selector trzymamy
       jako anchor-haczyk dla CTA "Wgraj kolejną próbę" → /wyzwanie/<id>#upload. */
}

.challenge-upload__form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.challenge-upload__form .form__field {
    flex: 1 1 280px;
    margin: 0;
}

.challenge-upload__hint {
    color: var(--color-ink-muted);
    font-size: var(--fs-sm);
    margin: var(--space-sm) 0 0;
}

/* `.upload-split` i `.integration-btn` przeniesione do components.css —
   ten sam układ obsługuje dziś upload do wyzwania i do celu, a strony celów
   nie ładują attempt.css. */

.challenge-upload__closed {
    margin: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-ink-muted);
    font-size: var(--fs-sm);
}

.challenge-upload__guest {
    margin: 0;
    font-size: var(--fs-sm);
}

/* Wejście dla gościa — sekcja uploadu bez zalogowania. Ta sama „szuflada"
   co __closed (surface-2 + 1px ramka), ale z prawdziwym CTA zamiast noty. */
.challenge-upload__cta {
    padding: var(--space-lg);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}

.challenge-upload__cta-lead {
    margin: 0 0 var(--space-md);
    color: var(--color-ink);
    max-inline-size: 52ch;   /* miara wiersza — dłuższa linia gorzej się skanuje */
}

.challenge-upload__cta .form__actions {
    margin: 0;
}

.challenge-upload__cta-alt {
    margin: var(--space-md) 0 0;
    color: var(--color-ink-muted);
    font-size: var(--fs-sm);
}

/* Nota karencji — wyzwanie zakończone, ale w 7-dniowym oknie na dosłanie. */
.challenge-upload__grace {
    margin: 0 0 var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: color-mix(in oklch, var(--color-warning) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-warning) 40%, transparent);
    border-inline-start-width: 3px;
    color: var(--color-ink);
    font-size: var(--fs-sm);
}

.challenge-upload__latest {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: var(--fs-xs);
    color: var(--color-ink-muted);
}

/* ------------------------------------------------------------
   /proba/<id> — nagłówek wyniku (chip + reason)
   ------------------------------------------------------------ */
.attempt-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-block: var(--space-xl) var(--space-sm);
}

.attempt-head__chip {
    /* chip już ma padding/border/font-size z components.css; tu tylko
       trochę większa litera i tracking żeby status czytał się jak z
       tablicy wynikowej. */
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    align-self: flex-start;
}

.attempt-head__reason {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--fs-sm);
    max-width: 60ch;
}

/* Widoczne tylko dla inspektora — czyj przejazd oglądam. */
.attempt-head__author {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--fs-sm);
}

/* Ręczna decyzja moderacji — kto i (opcjonalnie) komunikat dla zawodnika. */
.attempt-head__moderation {
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    max-width: 60ch;
}

.attempt-head__moderation-by {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--fs-sm);
}

.attempt-head__moderation-note {
    margin: var(--space-2xs) 0 0;
    color: var(--color-ink);
    font-size: var(--fs-sm);
    font-style: italic;
}

/* ------------------------------------------------------------
   Headline (Czas + Pokrycie) — duże liczby, mono, 2-col
   ------------------------------------------------------------ */
.attempt-headline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding-block: var(--space-sm) var(--space-xl);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-top: var(--space-md);
    padding-top: var(--space-xl);
}

.attempt-headline__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.attempt-headline__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    font-weight: 500;
}

.attempt-headline__value {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
}

.attempt-headline__unit {
    font-size: 0.5em;
    font-weight: 400;
    color: var(--color-ink-muted);
    margin-inline-start: 0.1em;
}

/* ------------------------------------------------------------
   Secondary grid (4 pola — dystans / przewyższenie / prędkość / data)
   ------------------------------------------------------------ */
.attempt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-xl);
    padding-block: var(--space-lg);
}

@media (min-width: 720px) {
    .attempt-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.attempt-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.attempt-grid__item dt {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    font-weight: 500;
}

.attempt-grid__item dd {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--color-ink);
}

.attempt-grid__item dd .num {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* ------------------------------------------------------------
   Legenda mapy (■ Wzorzec  ▬▬ Twój przejazd)
   ------------------------------------------------------------ */
.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-lg);
    margin: 0;
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--color-ink-muted);
    border-top: 1px solid var(--color-border);
}

.map-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.map-legend__swatch {
    display: inline-block;
    width: 1.5rem;
    height: 3px;
    background: var(--color-accent);
}

.map-legend__swatch--dashed {
    background: linear-gradient(
        to right,
        var(--color-accent) 0,
        var(--color-accent) 40%,
        transparent 40%,
        transparent 60%,
        var(--color-accent) 60%,
        var(--color-accent) 100%
    );
}

/* Kolory odcinków przejazdu — muszą zgadzać się z attempt-detail.js. */
.map-legend__swatch--off {
    background: linear-gradient(
        to right,
        var(--color-danger) 0,
        var(--color-danger) 40%,
        transparent 40%,
        transparent 60%,
        var(--color-danger) 60%,
        var(--color-danger) 100%
    );
}

.map-legend__swatch--outside {
    background: linear-gradient(
        to right,
        var(--color-ink-faint) 0,
        var(--color-ink-faint) 40%,
        transparent 40%,
        transparent 60%,
        var(--color-ink-faint) 60%,
        var(--color-ink-faint) 100%
    );
}

/* Fragment wzorca, którego przejazd nie pokrył — na mapie gruba,
   półprzezroczysta podkładka pod śladem zawodnika. */
.map-legend__swatch--gap {
    height: 7px;
    background: var(--color-danger);
    opacity: 0.35;
}

/* ------------------------------------------------------------
   CTA row
   ------------------------------------------------------------ */
.attempt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-block: var(--space-xl) var(--space-3xl);
}

.attempt-actions .btn {
    flex: 0 1 auto;
}

@media (max-width: 520px) {
    .attempt-actions .btn {
        flex: 1 1 100%;
    }
}