/* A strength or a sauna post's picture (27 Sep), in the share sheet and the feed alike: the body
   with its muscles lit, or the temperature dial — always on the dark ground their colours were drawn for. */
.post-art{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:2/1;background:linear-gradient(160deg,#1B2333,#111723);color:#fff}
.post-art.dial svg{display:block;width:100%;height:100%}
.post-art.body{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 10px}
.post-art .figs{display:flex;gap:4px;flex:none;align-items:center;height:100%}
.post-art .figs svg{height:100%;width:auto}
.post-art .rank{flex:1;display:flex;flex-direction:column;gap:7px;font-size:12.5px;min-width:0}
.post-art .rank small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(235,235,245,.55)}
.post-art .r{display:flex;align-items:center;gap:8px}
.post-art .r .n{width:78px;flex:none;color:rgba(235,235,245,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-art .r .bar{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.post-art .r .bar i{display:block;height:100%}
.post-art .r .s{width:48px;flex:none;text-align:right;white-space:nowrap;color:rgba(235,235,245,.55)}
.post-art .dialsvg{display:block;width:100%;height:100%}
/* "Share image" on the author's own picture: the replay pill's glass, bottom right */
.post-art .replay{position:absolute;right:10px;bottom:8px;height:32px;border-radius:999px;border:0;padding:0 11px 0 8px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.22);font:inherit}
.post-art .replay:hover{background:rgba(0,0,0,.65)}
.post-art .replay svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.post-art .replay b{font-size:12px;font-weight:600;letter-spacing:.1px}
.media.pair .post-art{border-radius:inherit}
.post-art .replay{top:8px;bottom:auto}   /* clear of the dial's 120° and the list's last line */
/* The strength activity page's "Muscles worked" card (MM-1, 2 Oct 2026): the post picture's body and bars on the
   page card. The card is narrower than the feed's picture, so each bar goes under its name and set count. */
.mm{display:flex;flex-direction:column;gap:12px}
.mm .top{display:flex;align-items:center;gap:10px}
.mm .top b{display:flex;align-items:center;gap:6px;font-size:var(--font-subheadline);font-weight:var(--weight-semibold);color:var(--ink-secondary)}
.mm .top b .icon{width:15px;height:15px}
.mm .top .n{margin-left:auto;font-size:var(--font-caption);font-weight:var(--weight-semibold);color:var(--ink-secondary);white-space:nowrap}
.mm .post-art.body{padding:10px 14px 10px 10px}
.mm .post-art .r{flex-wrap:wrap;row-gap:4px}
.mm .post-art .r .n{width:auto;flex:1 1 auto}
.mm .post-art .r .s{width:auto}
.mm .post-art .r .bar{order:3;flex:1 0 100%}
.mm .foot{margin:0;font-size:var(--font-caption);color:var(--ink-secondary);line-height:1.35}

/* The frozen strength card uses the activity page's full-width ranked bars. */
:is(.cs-card, [data-post]) .post-art.body{aspect-ratio:auto;min-height:180px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:12px;gap:12px}
:is(.cs-card, [data-post]) .post-art.body .figs{width:100%;height:180px;min-width:0;justify-content:center}
:is(.cs-card, [data-post]) .post-art.body .figs svg{width:calc((100% - 4px)/2);height:auto;max-height:180px;overflow:visible}
:is(.cs-card, [data-post]) .post-art.body .r{flex-wrap:wrap;row-gap:4px}
:is(.cs-card, [data-post]) .post-art.body .r .n{width:auto;flex:1;white-space:normal}
:is(.cs-card, [data-post]) .post-art.body .r .s{width:auto}
:is(.cs-card, [data-post]) .post-art.body .r .bar{order:3;flex:1 0 100%}
/* The author's "Share image" sits top right: the list starts below it, never under it (23 Oct). */
:is(.cs-card, [data-post]) .post-art.body:has(> .replay) .rank{padding-top:34px}
/* The Pose card (9 Nov 2026): a distance-free post's own picture, on the gauge's dark card. Beside a heart-rate chart
   it fills the pair's narrow cell at the chart's height, and "Share image" keeps its icon only. */
.post-art.pose .dialsvg>svg{display:block;width:100%;height:100%}
.media.pair .post-art.pose.compact{aspect-ratio:auto;height:100%;min-height:0}
.post-art.pose.compact .replay{padding:0 8px}
.post-art.pose.compact .replay b{display:none}