/* Progres (lane B): the v4 Progres screen. Only --f-* tokens from forma.css.
   Mockup: mockups/finale/progres.html. Small quiet labels (.f-label), flat boxes (radius 24), calm numbers.
   Overrides here (instead of deleting them) the v3 rules in app.css (.cal-*, .note-field, .list in the day sheet)
   and shell.css (.sh-cal …, .pg-weight__now, .sh-day, .sheet .note-field), which the new markup no longer asks for
   or which still match the shared class names. */

/* ---------------------------------------------------------------- page */
.app .f-screen.pg { display: block; padding: env(safe-area-inset-top, 0px) 6px 0; }
.pg > .f-label:first-child { padding-top: calc(var(--f-s4) + 10px); }

/* period: small centred words */
.pg-period { display: flex; justify-content: center; gap: 26px; padding-top: 12px; }
.pg-period__b { min-height: var(--f-tap); font-size: 15.5px; font-weight: 500; color: var(--f-text-3); transition: color var(--f-dur-2) var(--f-ease); }
.pg-period__b.is-on { color: var(--f-text); }
.pg-period + .f-label { padding-top: 16px; }

/* a box: flat card, a bit tighter than .f-card */
.pg .pg-box, .sheet .pg-box { padding: 18px 20px; border-radius: var(--f-r-lg); }
.pg-row { display: flex; justify-content: space-between; align-items: center; gap: var(--f-s4); min-width: 0; }

/* the calm number with its small unit */
.pg-n { font-family: var(--f-font-num); font-size: var(--f-fs-num); font-weight: 500; line-height: 1; letter-spacing: var(--f-track-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-n small { font-family: var(--f-font); font-size: var(--f-fs-sub); font-weight: 400; letter-spacing: 0; color: var(--f-text-2); margin-left: 6px; }
.pg-n--sm { font-size: var(--f-fs-display); }

.pg-empty { font-size: var(--f-fs-sub); color: var(--f-text-2); padding: 2px 0 4px; }
.pg-empty--in { padding: 0; }

.pg-add { flex: none; }
.pg-add svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Tréningy: count + dots (a column is a week) */
.pg .pg-train { display: flex; justify-content: space-between; align-items: center; gap: var(--f-s4); }
.pg .pg-train--wide { display: grid; justify-content: stretch; align-items: start; gap: var(--f-s4); }
.pg-dotgrid { display: grid; gap: 14px; min-width: 0; }
.pg-dots { display: flex; column-gap: clamp(7px, 2.8vw, 12px); }
.pg-dots__week { display: grid; grid-template-rows: repeat(var(--rows), 14px); row-gap: 8px; align-content: start; }
.pg-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--f-quiet); }
.pg-dots i.is-done { background: var(--f-text); }
.pg-dots i.is-now { background: var(--f-accent); }
.pg-dots i.is-next { background: rgba(244, 239, 233, 0.04); }
/* 3 months / a year: under the number, full width, the dots as large as the columns allow */
.pg-dots--wide { column-gap: 0; }
.pg-dots--wide .pg-dots__week { flex: 1 1 0; min-width: 0; grid-template-rows: repeat(var(--rows), auto); row-gap: 6px; justify-items: center; }
.pg-dots--wide i { width: min(12px, calc(100% - 3px)); height: auto; aspect-ratio: 1; }

/* ---------------------------------------------------------------- Váha */
.pg .pg-weight { display: grid; gap: 14px; }
.pg-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pg-chart__line { fill: none; stroke: var(--f-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pg-chart__dot { fill: var(--f-text); }
.pg-chart__dot--last { fill: var(--f-accent); }

/* ---------------------------------------------------------------- Sila, Rekordy: picture, name, number */
.pg-lifts { display: grid; }
.pg-lift { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 7px 0; text-align: left; border-radius: var(--f-r-md); }
.pg-lift:active { opacity: 0.7; }
.pg-lift__pic { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; background: var(--f-surface-1); display: block; }
.pg-lift__pic .pic, .pg-lift__pic > svg, .pg-lift__pic svg { width: 100%; height: 100%; display: block; }
.pg-lift__name { font-size: 16.5px; font-weight: 500; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
.pg-lift__v { text-align: right; font-family: var(--f-font-num); font-size: 22px; font-weight: 500; line-height: 1; letter-spacing: var(--f-track-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-lift__v b { font-weight: 500; }
.pg-lift__v small { display: block; margin-top: 4px; font-family: var(--f-font); font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--f-text-2); }

/* "Všetky N" at the end of a label: quiet, full tap height without growing the label */
.pg-more { min-height: var(--f-tap); margin: -12px 0; font-size: var(--f-fs-sub); color: var(--f-text-2); }

/* ---------------------------------------------------------------- calendar (overrides app.css .cal-*) */
.pg .pg-cal { padding: 14px 12px 16px; display: grid; gap: var(--f-s2); }
.pg-cal .cal-head { margin: 0 0 var(--f-s1); }
.pg-cal .cal-title { font-size: var(--f-fs-body); font-weight: 500; text-align: center; min-width: 0; }
.pg-cal .cal-nav { width: var(--f-tap); height: var(--f-tap); color: var(--f-text); background: var(--f-quiet); }
.pg-cal .cal-nav svg { width: 8px; height: 14px; }
.pg-cal .cal-grid { gap: 2px; }
.pg-cal .cal-week span { font-size: 12px; font-weight: 500; color: var(--f-text-3); padding-bottom: 2px; }
.pg-cal .cal-day { color: var(--f-text-3); font-size: var(--f-fs-sub); font-weight: 500; box-shadow: none; background: none; }
.pg-cal .cal-day > span { line-height: 1; }
.pg-cal .cal-day.is-plan { color: var(--f-text-2); }
.pg-cal .cal-day.has-log { background: var(--f-quiet-pressed); color: var(--f-text); }
.pg-cal .cal-day.is-complete { background: var(--f-text); color: #141414; }
.pg-cal .cal-day.is-today { color: var(--f-accent-text); font-weight: 500; box-shadow: none; }
.pg-cal .cal-day.is-today.is-complete { color: var(--f-accent); }
.pg-cal .cal-day i { bottom: 9%; width: 4px; height: 4px; background: transparent; }
.pg-cal .cal-day.has-log i { background: transparent; }
.pg-cal .cal-day.has-photo i { background: var(--f-text-2); }
.pg-cal .cal-day.is-complete.has-photo i { background: #141414; }
.pg-cal .cal-day.is-pr::after { content: ""; position: absolute; top: 6%; right: 10%; width: 6px; height: 6px; border-radius: 50%; background: var(--f-better); }

/* ---------------------------------------------------------------- volume */
.pg-bar { fill: var(--f-quiet-pressed); }
.pg-bar--now { fill: var(--f-text); }
.pg-axis { fill: var(--f-text-3); font-size: 11px; font-family: var(--f-font); font-variant-numeric: tabular-nums; }
.pg-axis--now { fill: var(--f-text); font-size: 12px; font-weight: 500; }

/* ---------------------------------------------------------------- photos (card) */
.pg .ph-card { display: grid; gap: var(--f-s4); }
.pg .ph-card .ph-grid + .pg-row { justify-content: flex-end; }
.pg .ph-thumb { border-radius: var(--f-r-md); background: var(--f-surface-2); }

/* muscle map entry (inner layer), when on */
.pg-inner { margin-top: 26px; }

/* ---------------------------------------------------------------- sheets from Progres: day, records */
.pg-chip { font-size: var(--f-fs-sub); color: var(--f-text-2); }
.sheet .pg-lifts { margin-top: var(--f-s2); }
.pg-day { display: grid; gap: var(--f-s3); }
.pg-day__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--f-s2); }
.pg-day__stats p { display: grid; gap: 6px; min-width: 0; }
.pg-day__stats span { font-size: var(--f-fs-caption); color: var(--f-text-2); }
.pg-day__pr { font-size: var(--f-fs-sub); color: var(--f-text); }
.pg-day__pr::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--f-better); margin: 0 8px 2px 0; }
.sheet .pg-day__list { margin-top: var(--f-s3); }
.sheet .ph-thumb { background: var(--f-surface-1); }
.sheet .note-field.pg-note { background: var(--f-surface-1); color: var(--f-text); box-shadow: none; border-radius: var(--f-r-md); font-family: var(--f-font); }
.sheet .note-field.pg-note::placeholder { color: var(--f-text-3); }
.sheet .note-field.pg-note:focus { outline: none; box-shadow: var(--f-focus); }

@media (prefers-reduced-motion: reduce) { .pg-period__b { transition: none; } }

/* photo viewer: the one flat page grey instead of black (overrides shell.css .ph-viewer) */
.ph-viewer { background: var(--f-bg); }
.ph-viewer [data-phv="close"]:focus-visible { box-shadow: var(--f-focus); }