/* Student Progress reuses Project Evaluation's whole visual language
   (assets/06_project_evaluation.css — infobar, layout grid, sidebar,
   cards, panes, widgets) on purpose; the two pages are meant to be the
   same interface over different data. Only what is genuinely new here
   lives in this file: the round legend and the round-coloured card bits. */

/* ── Round legend (info bar) ─────────────────────────────────────────── */
.sp-rounds {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.sp-round-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 220px;
}

.sp-round-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Baseline-aligned text next to a round dot leaves the dot sitting too
       high; nudged down rather than switching the row to center alignment,
       which would misalign the two text spans against each other. */
    transform: translateY(1px);
}

.sp-round-label {
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
}

.sp-round-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-round-empty {
    font-style: italic;
}

/* ── Average chain ───────────────────────────────────────────────────── */
/* "3.40 → 3.50 → 2.10" on a card and in a pane header. Each value carries
   its own round's colour as an inline style (see average_chain in
   pages/analysis_student_progress.py) — only weight and spacing here. */
.sp-chain-value {
    font-weight: 700;
}

.sp-chain-arrow {
    margin: 0 2px;
    color: var(--color-text-muted);
}

.sp-chain-missing {
    color: var(--color-text-muted);
}

/* ── Multi-round label badge ─────────────────────────────────────────── */
/* The gradient itself is an inline style (built per label from the rounds
   it occurred in). This only supplies the text treatment it needs: the
   round palette runs from deep purple to amber, so no single flat text
   colour is readable across all of it — white plus a soft shadow is,
   including in dark mode, where the badge keeps its own background. */
.pe-badge--multi {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}