/* ==========================================================================
   Progress tab — mastery, quiz history, activity and the card pipeline for a
   single space. Tokens only. Every rule is namespaced .st-prog-*.
   ========================================================================== */

/* The tab repaints in place as the board's notes arrive, so its body lives in
   a wrapper. The wrapper must not become a layout box of its own. */
.st-prog-host { display: contents; }

.st-prog { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.st-prog--empty .st-card--pad-lg { padding: 48px 32px; }
.st-prog-empty__note { max-width: 52ch; margin: 18px auto 0; text-align: center; }

/* Summary row ----------------------------------------------------------- */

.st-prog-summary {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.st-prog-mastery { display: flex; align-items: center; gap: 16px; padding: 16px; min-width: 0; }
.st-prog-mastery__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-prog-mastery__label { font-size: 15px; font-weight: 700; }
.st-prog-tile { min-width: 0; }
.st-prog-tile__note { font-size: 12px; color: var(--st-ink-4); line-height: 1.35; }

/* Columns --------------------------------------------------------------- */

.st-prog-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--st-rail-w);
    gap: 24px;
    align-items: start;
}
.st-prog-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.st-prog-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-prog-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-prog-panel__head--wrap { flex-wrap: wrap; }
.st-prog-panel__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-prog-none { font-size: 13px; color: var(--st-ink-2); line-height: 1.5; }
.st-prog-none__action { align-self: flex-start; }

/* Mastery by concept ---------------------------------------------------- */

.st-prog-search { max-width: 320px; }
.st-prog-concepts { display: flex; flex-direction: column; }
.st-prog-concept {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 200px) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--st-border-soft);
    border-radius: 8px;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.st-prog-concept:last-child { border-bottom: 0; }
.st-prog-concept.is-target {
    background: var(--st-accent-soft);
    box-shadow: inset 3px 0 0 var(--st-accent);
    padding-left: 10px;
    padding-right: 10px;
}
.st-prog-concept__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-prog-concept__name { font-size: 14px; font-weight: 700; }

/* Openable row: the whole row is a pointer target, and the concept name is the
   real link inside it. Hover is a hint only — the row still works without it
   (touch), and the focus ring rides the link so keyboard users see the target
   rather than a highlighted block with no obvious action. */
.st-prog-concept.is-openable { cursor: pointer; }
.st-prog-concept.is-openable:hover { background: var(--st-bg-soft, rgba(127, 127, 127, 0.06)); }
.st-prog-concept__open {
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    min-width: 0;
}
.st-prog-concept__open:hover .st-prog-concept__name { text-decoration: underline; }
.st-prog-concept__open:focus-visible {
    outline: 2px solid var(--st-accent);
    outline-offset: 3px;
}
/* The row's own actions keep the default cursor so they do not read as part of
   the row-wide target. */
.st-prog-concept.is-openable .st-btn { cursor: pointer; }
.st-prog-concept__meter { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-prog-pct {
    font-size: 12px;
    font-weight: 700;
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--st-ink-2);
}
.st-prog-pct[data-tone="danger"] { color: var(--st-danger-ink); }
.st-prog-pct[data-tone="warm"] { color: var(--st-warm-ink); }
.st-prog-pct[data-tone="accent"] { color: var(--st-accent); }
.st-prog-pct[data-tone="green"] { color: var(--st-green-ink); }

/* Quiz history ---------------------------------------------------------- */

.st-prog-attempts { display: flex; flex-direction: column; }
.st-prog-attempt { border-bottom: 1px solid var(--st-border-soft); }
.st-prog-attempt:last-child { border-bottom: 0; }
.st-prog-attempt__head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 10px 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--st-ink);
}
.st-prog-attempt__head:hover { color: var(--st-accent); }
.st-prog-attempt__chevron { display: flex; color: var(--st-ink-4); transition: transform 0.14s ease; }
.st-prog-attempt__head[aria-expanded="true"] .st-prog-attempt__chevron { transform: rotate(90deg); }
.st-prog-attempt__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; font-size: 13px; }
.st-prog-attempt__score { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.st-prog-attempt__panel { display: flex; flex-direction: column; gap: 10px; padding: 0 0 14px 28px; }
.st-prog-attempt__panel[hidden] { display: none; }
.st-prog-attempt__missed { font-size: 13px; font-weight: 700; color: var(--st-danger-ink); }

.st-prog-answers { display: flex; flex-direction: column; gap: 10px; }
.st-prog-answer { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; }
.st-prog-answer__mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--st-green-soft);
    color: var(--st-green-ink);
}
.st-prog-answer.is-wrong .st-prog-answer__mark { background: var(--st-danger-soft); color: var(--st-danger-ink); }
.st-prog-answer__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Study activity -------------------------------------------------------- */

.st-prog-week__bars { display: flex; align-items: flex-end; gap: 6px; height: 92px; }
.st-prog-week__col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.st-prog-week__bar { display: block; width: 100%; border-radius: 3px; background: var(--st-accent); }
.st-prog-week__col.is-empty .st-prog-week__bar { background: var(--st-fill); }
.st-prog-week__col.is-today .st-prog-week__bar { background: var(--st-warm); }
.st-prog-week__label { font-size: 11px; color: var(--st-ink-4); }
.st-prog-week__col.is-today .st-prog-week__label { color: var(--st-ink); font-weight: 700; }
.st-prog-week__summary { font-size: 13px; color: var(--st-ink); }

/* Card pipeline --------------------------------------------------------- */

.st-prog-pipe {
    display: flex;
    gap: 2px;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--st-fill);
}
.st-prog-pipe__seg { display: block; height: 100%; min-width: 3px; }
.st-prog-pipe__seg--accent { background: var(--st-accent); }
.st-prog-pipe__seg--warm { background: var(--st-warm); }
.st-prog-pipe__seg--green { background: var(--st-green); }
.st-prog-pipe__seg--fill { background: var(--st-border-strong); }
.st-prog-pipe__keys { gap: 6px; }
.st-prog-pipe__key { background: var(--st-surface-2); color: var(--st-ink-2); }
.st-prog-pipe__swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--st-fill); }
.st-prog-pipe__key--accent .st-prog-pipe__swatch { background: var(--st-accent); }
.st-prog-pipe__key--warm .st-prog-pipe__swatch { background: var(--st-warm); }
.st-prog-pipe__key--green .st-prog-pipe__swatch { background: var(--st-green); }
.st-prog-pipe__key--fill .st-prog-pipe__swatch { background: var(--st-border-strong); }
.st-prog-pipe__note { font-size: 13px; color: var(--st-ink-2); line-height: 1.5; }

/* Exam countdown -------------------------------------------------------- */

.st-prog-exam .st-card__title { display: flex; align-items: center; gap: 8px; }
.st-prog-exam__icon { display: flex; color: var(--st-warm-ink); }
.st-prog-exam__count { display: flex; align-items: baseline; gap: 10px; }
.st-prog-exam__count strong { font-size: 34px; line-height: 1; }
.st-prog-exam__plan { font-size: 13px; color: var(--st-ink-2); line-height: 1.5; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1100px) {
    .st-prog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .st-prog-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .st-prog-summary { grid-template-columns: minmax(0, 1fr); }
    .st-prog-search { max-width: none; width: 100%; }
    .st-prog-concept {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px 0;
    }
    .st-prog-concept .st-btn { align-self: flex-start; }
    .st-prog-attempt__head { align-items: flex-start; flex-wrap: wrap; }
    .st-prog-attempt__panel { padding-left: 0; }
    .st-prog-exam__count strong { font-size: 30px; }
}