/* ==========================================================================
   Progress dashboard
   Desktop is primary: a 2x2 grid whose 2px gutters read as seams against the
   ground. Mobile collapses to one column. Signal over decoration — no gauges,
   no gradients, no shadows on chart elements.
   ========================================================================== */

.gg-progress__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gg-s4);
    flex-wrap: wrap;
    margin-bottom: var(--gg-s6);
}

.gg-progress__ranges { flex: 0 0 auto; }
.gg-progress__ranges .gg-segments__cell { min-width: 52px; min-height: var(--gg-tap-chip); }

.gg-progress__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    background: var(--gg-row);   /* shows through the gaps as seams */
}

.gg-panel {
    display: flex;
    flex-direction: column;
    gap: var(--gg-s3);
    padding: var(--gg-s4);
    background: var(--gg-ground);
}

.gg-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gg-s3);
    flex-wrap: wrap;
}

.gg-panel__empty { color: var(--gg-dim); }
.gg-panel__note { color: var(--gg-dim); font-size: 12px; padding-top: var(--gg-s2); }

.gg-panel__headline { display: flex; align-items: baseline; gap: var(--gg-s2); font-size: 22px; font-weight: 800; }

.gg-panel__legend { display: flex; flex-wrap: wrap; gap: var(--gg-s3); }

.gg-panel__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--gg-muted);
}

.gg-bullet { width: 10px; height: 10px; background: var(--gg-muted); }
.gg-bullet.is-focus { background: var(--gg-accent); }
.gg-bullet.is-second { background: var(--gg-ink); }
.gg-bullet.is-third { background: var(--gg-muted); }

/* --- Charts --- */
.gg-panel__chart { height: 110px; }
.gg-panel__chart--tall { height: 150px; }

.gg-chart { width: 100%; height: 100%; display: block; }

.gg-chart__grid { stroke: var(--gg-row); stroke-width: 1; }

.gg-chart__line {
    fill: none;
    stroke: var(--gg-muted);
    stroke-width: 2.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;   /* preserveAspectRatio=none must not smear strokes */
}

.gg-chart__line.is-focus { stroke: var(--gg-accent); stroke-width: 3; }
.gg-chart__line.is-second { stroke: var(--gg-ink); }
.gg-chart__line.is-third { stroke: var(--gg-muted); }

.gg-chart__line--daily { stroke: var(--gg-divider); stroke-width: 1.5; }
.gg-chart__line--mean { stroke: var(--gg-ink); stroke-width: 3; }

.gg-chart__dot { fill: var(--gg-accent); }
.gg-chart__dot--mean { fill: var(--gg-ink); }

/* --- Stat cells under the e1RM chart --- */
.gg-statcells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }

.gg-statcell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--gg-s3);
    background: var(--gg-surface);
}

.gg-statcell__value { font-size: 22px; font-weight: 800; }
.gg-statcell__delta { font-size: 11px; font-weight: 800; }

/* --- Weekly volume bars --- */
.gg-volume { display: flex; flex-direction: column; gap: var(--gg-s2); }

.gg-volume__row {
    display: grid;
    grid-template-columns: 74px 1fr 52px;
    align-items: center;
    gap: var(--gg-s3);
}

.gg-volume__label {
    font-size: 11px;
    color: var(--gg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gg-volume__bar { height: 20px; background: var(--gg-divider); }
.gg-volume__fill { height: 100%; background: var(--gg-good); }
.gg-volume__fill.is-good { background: var(--gg-good); }
.gg-volume__fill.is-under { background: var(--gg-accent); }
.gg-volume__fill.is-none { background: var(--gg-dim); }

.gg-volume__value { font-size: 12px; font-weight: 800; text-align: right; }

/* --- Records --- */
.gg-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-s3);
    min-height: 50px;
    border-top: 1px solid var(--gg-divider);
}

.gg-record:first-of-type { border-top: none; }

.gg-record__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gg-record__name { font-size: 14px; font-weight: 800; }
.gg-record__date { font-size: 10.5px; color: var(--gg-dim); }

.gg-record__values { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.gg-record__lift { font-size: 16px; font-weight: 800; }
.gg-record__e1rm { font-size: 10.5px; color: var(--gg-dim); }

/* --- Training frequency --- */
.gg-adherence__headline { display: flex; align-items: baseline; gap: var(--gg-s2); }
.gg-adherence__value { font-size: 42px; font-weight: 800; line-height: 1; }

.gg-adherence { display: flex; flex-direction: column; gap: var(--gg-s3); }

.gg-adherence__grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 18px);
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gg-adherence__grid::-webkit-scrollbar { display: none; }

.gg-adherence__cell { width: 18px; height: 18px; display: inline-block; }
.gg-adherence__cell.is-trained { background: var(--gg-good); }
.gg-adherence__cell.is-rest { background: var(--gg-divider); }
.gg-adherence__cell.is-today { background: var(--gg-accent); }
.gg-adherence__cell.is-upcoming { background: var(--gg-row); border: 1px solid var(--gg-divider); }

.gg-adherence__legend { display: flex; flex-wrap: wrap; gap: var(--gg-s3); }

.gg-adherence__key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gg-dim);
}

.gg-adherence__key .gg-adherence__cell { width: 10px; height: 10px; }

/* --- Cardio picker --- */
/* One cell per (movement, metric), so this can run past a single row — unlike the e1RM
   lift picker, which is capped at three. It is also the only way to change the cardio
   series, so it must survive on desktop where .gg-progress__lifts is hidden. */
.gg-progress__cardio-picker { flex-wrap: wrap; }

.gg-progress__cardio-picker .gg-segments__cell {
    flex: 1 0 auto;
    gap: 6px;
    padding: 0 var(--gg-s3);
}

.gg-segments__tag {
    font-size: 10px;
    letter-spacing: .1em;
    opacity: .65;
}

/* --- Desktop: 2x2, and the pieces mobile does without --- */
@media (min-width: 1024px) {
    .gg-progress__grid { grid-template-columns: 1fr 1fr; }

    .gg-panel--split { flex-direction: row; gap: var(--gg-s6); }
    .gg-panel__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gg-s3); }

    /* Five panels into two columns leaves a hole on the last row. The split panel already
       carries two columns of its own, so it is the one that spans. */
    .gg-panel--split { grid-column: 1 / -1; }

    /* The lift selector is a mobile affordance — the desktop legend already names them. */
    .gg-progress__lifts { display: none; }
}

/* --- Mobile: single column, no cell grid --- */
@media (max-width: 1023px) {
    .gg-panel__chart--tall { height: 110px; }
    .gg-statcells { grid-template-columns: 1fr; }

    /* The adherence grid doesn't survive the width; the headline and sentence carry it. */
    .gg-progress__adherence-grid { display: none; }

    .gg-progress__ranges .gg-segments__cell { min-height: 44px; }
}