/* ========================================================== */
/* Progress Page (v2 - Main Layout) */
/* ========================================================== */

.pg-page{max-width:1120px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}

.pg-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:4px 2px 18px;border-bottom:1px solid var(--border-subtle);margin-bottom:18px}
.pg-kicker{display:inline-flex;align-items:center;gap:6px;font-size:calc(12px * var(--fs-scale, 1));font-weight:800;color:var(--accent);letter-spacing:.02em}
.pg-kicker svg{width:15px;height:15px}
.pg-h1{margin:6px 0 4px;font-size:calc(26px * var(--fs-scale, 1));font-weight:900;letter-spacing:-.02em;line-height:1.3;color:var(--text-primary)}
.pg-hero p{margin:0;font-size:calc(13px * var(--fs-scale, 1));color:var(--text-secondary);line-height:1.8}
.pg-streak{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:108px;padding:12px 16px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,color-mix(in srgb,var(--warn-strong) 18%,transparent),color-mix(in srgb,var(--orange) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--warn-strong) 30%,transparent);
}
.pg-streak b{font-size:calc(28px * var(--fs-scale, 1));font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:var(--warn-ink)}
.pg-streak span{font-size:calc(12px * var(--fs-scale, 1));color:var(--text-secondary);margin-top:4px}

.pg-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pg-kpi{
  display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-lg);
  background:var(--surface-raised);border:1px solid var(--border-subtle);
  animation:pg-rise .55s cubic-bezier(.22,1,.36,1) both;
}
.pg-kpis .pg-kpi:nth-child(2){animation-delay:.05s}
.pg-kpis .pg-kpi:nth-child(3){animation-delay:.1s}
.pg-kpis .pg-kpi:nth-child(4){animation-delay:.15s}
.pg-kpi-ring{position:relative;width:76px;height:76px;flex-shrink:0}
.pg-ring{width:76px;height:76px;transform:rotate(-90deg)}
.pg-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.pg-ring-bg{stroke:color-mix(in srgb,var(--border-strong,var(--border-subtle)) 55%,transparent)}
.pg-ring-fg{stroke:var(--kc,var(--accent));transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}
.pg-kpi.is-cyan{--kc:var(--color-cyan,var(--cyan-strong))}
.pg-kpi.is-green{--kc:var(--ok-strong)}
.pg-kpi.is-blue{--kc:var(--accent)}
.pg-kpi.is-amber{--kc:var(--warn-strong)}
.pg-kpi-ic{position:absolute;inset:0;display:grid;place-items:center;color:var(--kc,var(--accent))}
.pg-kpi-ic svg{width:20px;height:20px}
.pg-kpi-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pg-kpi-body b{font-size:calc(22px * var(--fs-scale, 1));font-weight:900;font-variant-numeric:tabular-nums;line-height:1.2}
.pg-kpi-body b small{font-size:calc(13px * var(--fs-scale, 1));color:var(--text-tertiary);font-weight:700}
.pg-kpi-body span{font-size:calc(13px * var(--fs-scale, 1));font-weight:800}
.pg-kpi-body small{font-size:calc(11.5px * var(--fs-scale, 1));color:var(--text-tertiary)}

.pg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pg-panel{
  padding:16px;border-radius:var(--r-lg);background:var(--surface-raised);border:1px solid var(--border-subtle);
  display:flex;flex-direction:column;gap:12px;min-width:0;
  animation:pg-rise .55s cubic-bezier(.22,1,.36,1) both;
}
.pg-panel--wide{grid-column:1 / -1}
.pg-panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pg-panel-h h3{margin:0;font-size:calc(14.5px * var(--fs-scale, 1));font-weight:900}
.pg-meta{font-size:calc(11.5px * var(--fs-scale, 1));color:var(--text-tertiary);white-space:nowrap}
.pg-empty{margin:0;font-size:calc(13px * var(--fs-scale, 1));color:var(--text-tertiary);padding:8px 0}
.pg-note{margin:0;font-size:calc(13px * var(--fs-scale, 1));color:var(--text-secondary);line-height:1.9}
.pg-link{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:calc(12.5px * var(--fs-scale, 1));font-weight:800;color:var(--accent);text-decoration:none;
  padding:6px 10px;border-radius:99px;
}
.pg-link:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pg-link svg{width:14px;height:14px}

.pg-days{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:8px;align-items:end;height:170px}
.pg-day{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0}
.pg-day-col{flex:1;width:100%;max-width:34px;display:flex;align-items:flex-end;border-radius:10px;background:color-mix(in srgb,var(--border-strong,var(--border-subtle)) 35%,transparent);overflow:hidden}
.pg-day-col i{display:block;width:100%;border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--color-cyan,var(--accent)));transition:height .8s cubic-bezier(.22,1,.36,1)}
.pg-day.is-zero .pg-day-col i{height:0}
.pg-day span{font-size:calc(11px * var(--fs-scale, 1));color:var(--text-tertiary);font-variant-numeric:tabular-nums}

.pg-packs{display:flex;flex-direction:column;gap:12px}
.pg-pack{display:flex;flex-direction:column;gap:6px}
.pg-pack-h{display:flex;align-items:center;gap:8px;min-width:0}
.pg-pack-h b{font-size:calc(13.5px * var(--fs-scale, 1));font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-pack-n{margin-inline-start:auto;font-size:calc(11.5px * var(--fs-scale, 1));color:var(--text-tertiary);white-space:nowrap;font-variant-numeric:tabular-nums}
.pg-tag{font-size:calc(10.5px * var(--fs-scale, 1));font-weight:800;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--ok-strong) 16%,transparent);color:var(--ok-ink)}
.pg-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--border-strong,var(--border-subtle)) 50%,transparent);overflow:hidden}
.pg-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--color-cyan,var(--accent)));transition:width .8s cubic-bezier(.22,1,.36,1)}
.pg-bar--sm{height:4px;margin-top:6px}
.pg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pg-list li{display:flex;flex-direction:column;gap:4px;font-size:calc(13px * var(--fs-scale, 1))}
.pg-list li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.6}
.pg-list li b{font-size:calc(12px * var(--fs-scale, 1));color:var(--text-tertiary);font-weight:700;font-variant-numeric:tabular-nums}
.pg-list .pg-rose{color:var(--color-rose)}
.pg-list li.pg-empty{padding:4px 0}

@media (max-width:1099px){
  .pg-grid{grid-template-columns:minmax(0,1fr)}
  .pg-days{height:140px;gap:5px}
  .pg-day span{font-size:calc(10px * var(--fs-scale, 1))}
}
@media (min-width:1600px){
  .pg-page{max-width:1280px}
  .pg-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-panel--wide{grid-column:span 2}
  .pg-days{height:190px}
}
@media (max-width:520px){
  .pg-kpis{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .pg-kpi,.pg-panel{animation:none!important}
  .pg-ring-fg,.pg-bar i,.pg-day-col i{transition:none!important}
}

/* ========================================================== */
/* Progress Page (Legacy / Heatmap) - Kept for backwards compatibility */
/* ========================================================== */

.prog-panel {
  padding: 20px 22px 22px;
  border-radius: 18px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
}
.prog-panel-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.prog-panel-h h2 {
  margin: 0;
  font-size: calc(15px * var(--fs-scale, 1));
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text-primary);
  line-height: 1.4;
}
.prog-panel-meta {
  font-size: calc(12px * var(--fs-scale, 1));
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.hm-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.hm-days {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
  padding-top: 0;
}
.hm-days span {
  font-size: calc(10px * var(--fs-scale, 1));
  color: var(--text-tertiary);
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  width: 14px;
  user-select: none;
}
.hm-grid {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.hm-grid::-webkit-scrollbar { height: 5px; }
.hm-grid::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-primary) 22%, transparent);
  border-radius: 99px;
}
.hm-grid::-webkit-scrollbar-track { background: transparent; }

.hm-c {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--border-strong) 32%, transparent);
  transition: transform .12s var(--ease);
  cursor: help;
}
.hm-c[data-l="0"] { background: color-mix(in srgb, var(--border-strong) 32%, transparent); }
.hm-c[data-l="1"] { background: color-mix(in srgb, var(--ac) 28%, transparent); }
.hm-c[data-l="2"] { background: color-mix(in srgb, var(--ac) 52%, transparent); }
.hm-c[data-l="3"] { background: color-mix(in srgb, var(--ac) 76%, transparent); }
.hm-c[data-l="4"] { background: var(--ac); }
.hm-c:hover { transform: scale(1.22); }

@media (max-width: 720px) {
  .prog-panel { padding: 16px 16px 18px; }
  .hm-grid { grid-template-rows: repeat(7, 11px); grid-auto-columns: 11px; }
  .hm-days { grid-template-rows: repeat(7, 11px); }
  .hm-days span { line-height: 11px; font-size: calc(9px * var(--fs-scale, 1)); }
  .hm-c { width: 11px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-c,
.hm-c:hover {
    transition: none;
    transform: none;
  }
}