/**
 * Report Row — the shared PDF-report list.
 *
 * One component, two surfaces: the server-rendered /archive/ event pages
 * (Jinja macro, zero JS) and the 107Live Reports tab (report-list.js). The
 * markup they emit is identical, so this file is the only styling either one
 * needs. Spec: DESIGN.md §5 "Report Row".
 *
 * The mark geometry is generated from scripts/report_marks.py and carries no
 * color at all — only semantic rm-* classes, assigned below from --t7-*
 * tokens. Presentation-attribute var() is unreliable across engines, the
 * dark-mode lift then lives in exactly one place, and lint_tokens.py sees no
 * hex literals.
 */

.report-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.5rem;
    list-style: none;
    padding: 0;
}

.report-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--t7-surface);
    border: 1px solid var(--t7-border);
    border-radius: var(--t7-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Flat at rest. No border-left accent: DESIGN.md forbids side-stripe borders,
   and hover moves to result-blue rather than athletic-orange (the orange
   belongs to the brand, not to link surfaces). */
.report-row:hover,
.report-row:focus-visible {
    border-color: var(--t7-result-blue);
    box-shadow: 0 2px 8px var(--t7-shadow);
    color: inherit;
}

.report-row:focus-visible {
    outline: 2px solid var(--t7-result-blue);
    outline-offset: 2px;
}

.report-row__mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.report-row__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.report-row__title {
    font-family: var(--t7-font-display);
    font-weight: 600;
    color: var(--t7-text);
    line-height: 1.3;
}

/* Prose by default. The mono variant is for meta that is a raw identifier —
   the archive shows the raw Drive filename, which is the only distinguisher
   when one event carries two reports of the same type. A description sentence
   set in mono reads as code (DESIGN.md §3: mono is for code and identifiers,
   never for a number — that is the numeric token's job). */
.report-row__meta {
    font-family: var(--t7-font-body);
    font-size: 0.8rem;
    color: var(--t7-text-muted);
    word-break: break-word;
}

.report-row__meta--mono {
    font-family: var(--t7-font-mono);
    font-size: 0.72rem;
}

.report-row__pill {
    flex-shrink: 0;
    font-family: var(--t7-font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t7-text-muted);
    border: 1px solid var(--t7-border);
    border-radius: var(--t7-radius-sm);
    padding: 0.15rem 0.45rem;
}

/* Announced, not published yet (archive only, server-rendered as a div with
   no href). Quieter than a live row and inert on hover — there is nothing to
   click — but the same geometry, so the list keeps its shape when the file
   lands. */
.report-row--pending {
    opacity: 0.72;
    cursor: default;
}

.report-row--pending:hover {
    border-color: var(--t7-border);
    box-shadow: none;
}

/* Per-row failure (gated fetch could not produce the PDF). JS-only state. */
.report-row__error {
    font-size: 0.78rem;
    color: var(--t7-behind-red);
}

.report-row__error:empty {
    display: none;
}

.report-list__empty {
    color: var(--t7-text-muted);
    font-size: 0.95rem;
    padding: 1.5rem 0;
}

/* --- Marks ---------------------------------------------------------------
   viewBox 0 0 48 32 rendered at exactly 48x32 CSS px, so 1 user unit = 1 px
   and every stroke lands on a whole pixel. */

.report-mark {
    width: 48px;
    height: 32px;
    display: block;

    --rm-behind: var(--t7-behind-red);
    --rm-ahead: var(--t7-ahead-green);
    --rm-forecast: var(--t7-forecast-amber);
    --rm-distance: var(--t7-distance-purple);
    --rm-standings: var(--t7-standings-blue);
    --rm-structure: var(--t7-border-strong);
    --rm-muted: var(--t7-text-muted);
}

/* Dark-mode lift. The accent tokens have no [data-theme="dark"] variant, and
   distance-purple and ahead-green sit near the 3:1 non-text contrast floor on
   the dark surface. Mixing toward white keeps them recognisably the same hue
   and introduces no hex literal (same technique as ranking-link.css). */
[data-theme="dark"] .report-mark {
    --rm-ahead: color-mix(in srgb, var(--t7-ahead-green) 70%, white);
    --rm-distance: color-mix(in srgb, var(--t7-distance-purple) 55%, white);
    --rm-forecast: color-mix(in srgb, var(--t7-forecast-amber) 75%, white);
    --rm-standings: color-mix(in srgb, var(--t7-standings-blue) 85%, white);
}

/* compare-pb: bidirectional gap bars about a centre divider. */
.rm-behind { fill: var(--rm-behind); }
.rm-ahead { fill: var(--rm-ahead); }
.rm-divider { stroke: var(--rm-structure); stroke-width: 1; }

/* forecast: measured trend, then the projection past the last node. */
.rm-line {
    stroke: var(--rm-forecast);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rm-projection {
    stroke: var(--rm-forecast);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 3;
}
.rm-node { fill: var(--rm-forecast); }

/* last-run: neutral lanes, one target tick each. */
.rm-lane { stroke: var(--rm-structure); stroke-width: 1; }
.rm-tick { stroke: var(--rm-distance); stroke-width: 2; stroke-linecap: round; }

/* event-by-event: one bar per event on a baseline. */
.rm-bar { fill: var(--rm-standings); }
.rm-base { stroke: var(--t7-border); stroke-width: 1; }

/* document: neutral fallback for an unrecognised report type. */
.rm-page { stroke: var(--rm-muted); stroke-width: 1; }
.rm-rule { stroke: var(--rm-muted); stroke-width: 1; }

@media (max-width: 480px) {
    .report-row {
        gap: 0.75rem;
        padding: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .report-row { transition: none; }
}