/* the Progress tab: charts on the tokens; one hue (--ok) for magnitude, --line for the rest */
.pr-range { max-width: 260px; margin: 10px 0; }
.pr-pane h3 { margin: 0; font-size: 17px; font-family: var(--f-display, var(--f-he)); font-weight: normal; }
.pr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pr-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pr-ok { margin-inline-start: auto; color: var(--ok, var(--targ)); font-size: 12px; }
.pr-row { display: flex; align-items: center; gap: 12px; }
.pr-ring { width: 40px; height: 40px; flex: 0 0 auto; }
.pr-big { font-size: 22px; color: var(--ink); min-width: 4.5em; font-variant-numeric: tabular-nums; }
.pr-big small { font-size: 12px; color: var(--mute); }
.pr-big.mute { font-size: 13px; color: var(--mute); }
.pr-week { display: flex; gap: 4px; margin-inline-start: auto; align-items: flex-end; height: 44px; }
.pr-bar { width: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.pr-bar i { display: block; width: 8px; border-radius: 4px 4px 0 0; background: var(--line); }
.pr-bar.full i { background: var(--ok, var(--targ)); }
.pr-bar:not(.full):not(.none) i { background: color-mix(in srgb, var(--ok, var(--targ)) 45%, var(--line)); }
.pr-bar.none i { background: transparent; border-bottom: 2px dotted var(--line); height: 0 !important; width: 8px; }
.pr-bar b { font-weight: normal; font-size: 10px; color: var(--mute); margin-top: 3px; }
.pr-lines { margin: 8px 0 0; }
.pr-line.ok { color: var(--ok, var(--targ)); }
.pr-list .pr-item { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; padding: 4px 0; font-size: 14px; }
.pr-list .qbar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; display: block; }
.pr-list .qbar i { display: block; height: 100%; background: var(--ok, var(--targ)); border-radius: 4px; }
.pr-list .val { color: var(--mute); font-variant-numeric: tabular-nums; }
.pr-heatwrap { overflow-x: auto; direction: ltr; }
.pr-heat { display: block; }
.pr-mlabel { font-size: 9px; fill: var(--mute); font-family: var(--f-ui, sans-serif); }
.rd-timer { position: absolute; inset-inline-end: 56px; bottom: 14px; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; pointer-events: none; }