/* Прогресс. Только токены из app.css. */
.v-progress > * + * { margin-top: 20px; }
.v-progress .p-num { font-size: var(--t-xl); margin: 6px 0 4px; }
.v-progress .p-tile .row svg { color: var(--ink-3); }

/* тепловая карта */
.v-progress .p-hm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.v-progress .p-wd { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; margin-top: 18px; font: 500 10px var(--f-mono); color: var(--ink-3); align-items: center; }
.v-progress .p-months { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 3px; height: 14px; margin-bottom: 4px; font: 500 10px var(--f-mono); color: var(--ink-3); }
.v-progress .p-months span { white-space: nowrap; }
.v-progress .p-grid { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 3px; }
.v-progress .p-cell { display: block; aspect-ratio: 1; min-width: 0; border-radius: 2px; background: var(--sunk); }
.v-progress .p-cell.l1 { background: color-mix(in srgb, var(--blue) 28%, var(--sunk)); }
.v-progress .p-cell.l2 { background: color-mix(in srgb, var(--blue) 52%, var(--sunk)); }
.v-progress .p-cell.l3 { background: color-mix(in srgb, var(--blue) 78%, var(--sunk)); }
.v-progress .p-cell.l4 { background: var(--blue); }
.v-progress .p-cell.is-future { visibility: hidden; }
.v-progress .p-cell.is-today { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.v-progress .p-grid .p-cell:not(.is-future) { cursor: pointer; }
.v-progress .p-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; }
.v-progress .p-legend .p-cell { width: 12px; }
.v-progress .p-legend-note { flex-basis: 100%; }
.v-progress .p-info { margin-top: 8px; min-height: 2.9em; }
@media (max-width: 480px) {
  .v-progress .p-hm { grid-template-columns: minmax(0, 1fr); }
  .v-progress .p-wd { display: none; }
}

/* 30 дней */
.v-progress .p-plot { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; height: 120px; align-items: end; border-bottom: 1px solid var(--line-2); }
.v-progress .p-col { height: 100%; display: flex; align-items: flex-end; cursor: pointer; }
.v-progress .p-bar { display: block; width: 100%; min-height: 3px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--blue) 45%, var(--sunk)); }
.v-progress .p-bar.is-today { background: var(--blue); }
.v-progress .p-bar.is-goal { background: var(--good); }
.v-progress .p-bar.is-zero { background: var(--line-2); }
.v-progress .p-goal { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--ink-3); pointer-events: none; }
.v-progress .p-axis { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-3); }

/* колода */
.v-progress .p-stack { display: flex; height: 14px; gap: 2px; border-radius: 999px; overflow: hidden; background: var(--sunk); }
.v-progress .p-stack i { display: block; min-width: 4px; }
.v-progress .p-stack i.new, .v-progress .p-dot.new { background: var(--line-2); }
.v-progress .p-stack i.learning, .v-progress .p-dot.learning { background: var(--marker); }
.v-progress .p-stack i.young, .v-progress .p-dot.young { background: color-mix(in srgb, var(--blue) 55%, var(--sunk)); }
.v-progress .p-stack i.mature, .v-progress .p-dot.mature { background: var(--good); }
.v-progress .p-leg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: var(--t-sm); }
.v-progress .p-leg li { display: flex; align-items: center; gap: 8px; }
.v-progress .p-leg b { margin-left: auto; }
.v-progress .p-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.v-progress .p-ret { font-size: var(--t-xl); }

/* время */
.v-progress .p-min { display: grid; grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) auto; gap: 10px; align-items: center; }

/* достижения */
.v-progress .p-ach { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.v-progress .p-a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.v-progress .p-a.is-on { border-color: var(--marker); }
.v-progress .p-a-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--sunk); color: var(--ink-3); }
.v-progress .p-a.is-on .p-a-ico { background: var(--marker); color: var(--marker-ink); }
.v-progress .p-a-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v-progress .p-a-prog { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.v-progress .p-a-prog .progress { flex: 1 1 auto; height: 6px; }