/* ── Progress view (streak + quick stats) ───────────────────────────────
   James 2026-07-26. Third top-level Study tab alongside Study Sets and
   Review: your library, your practice, how you're doing.

   The numbers are rendered by public/js/study/study-dashboard.js. That
   module was written for the narrow #sidebarWidgets strip, whose markup no
   longer exists in study.html, so its output had nowhere to land. Rather
   than fork the JS, this stylesheet re-scales its output at page size —
   renderDashStreak() hardcodes .sb-streak-day on every day cell, so those
   are overridden under #view-progress below.

   Everything here uses the --study-* tokens so it follows Khio Study's own
   accent and flips with the theme. No viewport-class rules: the layout is
   fluid (max-width + auto-fit grid), so it doesn't need the
   khio-laptop-scale / khio-desktop-wide split documented in
   study-themes.css. */

.prog-wrap {
    /* .study-view.active is a COLUMN flex container, where `margin: 0 auto`
       on the cross axis cancels the default stretch and collapses the child
       to fit-content. width:100% restores full width so max-width can cap it
       and the auto margins can centre it. */
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 28px 48px;
}
.prog-title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--study-text);
    margin: 0 0 6px;
}
.prog-sub {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--study-text-secondary);
    margin: 0 0 26px;
    max-width: 460px;
}

/* ── Streak card ── */
.prog-card {
    background: var(--study-bg-tertiary);
    border: 1px solid var(--study-border);
    border-radius: 16px;
    padding: 22px 24px 24px;
    margin-bottom: 18px;
}
.prog-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--study-text-tertiary);
    margin-bottom: 16px;
}
.prog-card-head i { width: 14px; height: 14px; }
.prog-streak-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
}
.prog-streak-count {
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    color: var(--study-accent);
}
.prog-streak-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--study-text-tertiary);
}

/* Day cells come from renderDashStreak(), which emits .sb-streak-day sized
   for the old 200px-wide sidebar. Re-scale them for a full-width card. */
#view-progress .sb-streak-days { display: flex; gap: 8px; }
#view-progress .sb-streak-day {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--study-text-tertiary);
    background: var(--study-bg-secondary, rgba(127, 127, 127, 0.08));
    border: 1px solid var(--study-border);
}
#view-progress .sb-streak-day.active {
    background: var(--study-accent);
    border-color: var(--study-accent);
    color: var(--study-accent-text, #fff);
    font-weight: 800;
}
#view-progress .sb-streak-day.today {
    border-color: var(--study-accent);
    color: var(--study-accent);
    background: var(--study-accent-dim, transparent);
}
/* A day that is both today and already studied keeps the filled treatment —
   .today's softer background would otherwise win on source order. */
#view-progress .sb-streak-day.active.today {
    background: var(--study-accent);
    color: var(--study-accent-text, #fff);
}

/* ── Quick stats ── */
.prog-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.prog-stat {
    background: var(--study-bg-tertiary);
    border: 1px solid var(--study-border);
    border-radius: 14px;
    padding: 18px 18px 16px;
}
.prog-stat-val {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--study-text);
    margin-bottom: 4px;
}
.prog-stat-key {
    font-size: 12px;
    font-weight: 600;
    color: var(--study-text-tertiary);
}