/* The Charts card — course-card.js. Loaded by the activities page and the feed, so the
   feed's copy of the card is the activity page's own (his ask, 22 Sep 2026). */
/* The feed has no page-wide button or icon reset (the activities page has); the same
   rules, scoped under the card at element specificity so the card's own win. */
:where(.course) button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
:where(.course) .icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;
                      stroke-linecap:round;stroke-linejoin:round;flex:none}
.course .top{display:flex;align-items:center;gap:10px}
.course .top b{display:flex;align-items:center;gap:6px;font-size:var(--font-subheadline);
               font-weight:var(--weight-semibold);color:var(--ink-secondary)}
.course .top b .icon{width:14px;height:14px;flex:none}
.course .figs{margin-left:auto;font-size:var(--font-caption);
              font-weight:var(--weight-semibold);color:var(--ink-secondary);white-space:nowrap}
.course .exp{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
             background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.course .exp .icon{width:12px;height:12px;stroke-width:2.4}
/* The chart and its two axes. The labels are HTML around the SVG because the
   chart stretches (`preserveAspectRatio="none"`) and `<text>` inside it comes
   out smeared — the expanded chart learned this first. */
/* **Its own names, both of them.** The EXPANDED chart owns `.yax`/`.xax`, and
   its `.yax` is `position:absolute; top:8; bottom:8` — inherited here it tore
   the labels out of the card and stretched them from the Course header to the
   delete button, down the sheet's left edge. `.chartbox` was taken too, by the
   Charts deck's sized slots, which this grid would have re-laid out. */
.tracebox{display:grid;grid-template-columns:30px 1fr;grid-template-rows:108px auto;
          column-gap:5px;margin-top:8px}
.tracebox .tracechart{grid-area:1/2}
.tracebox .yaxis{grid-area:1/1;display:flex;flex-direction:column;justify-content:space-between;
                 align-items:flex-end;font-size:var(--chart-axis-size);color:var(--ink-secondary);
                 font-variant-numeric:tabular-nums;line-height:1}
/* Catalogue cards (Pace, Speed, …) label one series. 48px holds "10:59" / "1200"
   at the shared 11px axis size; the spans sit on the gridlines, not at the flex edges. */
.tracebox.catalogue{grid-template-columns:48px 1fr}
.tracebox.catalogue .yaxis{position:relative;display:block}
.tracebox.catalogue .yaxis span{position:absolute;right:0;transform:translateY(-50%);
                                 white-space:nowrap;line-height:1}
.tracebox .xaxis{grid-area:2/2;display:flex;justify-content:space-between;padding-top:4px;
                 font-size:var(--chart-axis-size);color:var(--ink-secondary);font-variant-numeric:tabular-nums}
/* Round ticks (shared ChartStyle): each label sits at its own time or km, clamped whole inside the chart. */
.tracebox .xaxis.ticks{display:block;position:relative;height:calc(var(--chart-axis-size) * 1.3 + 4px);container-type:inline-size}
.tracebox .xaxis.ticks span{position:absolute;top:4px;white-space:nowrap;line-height:1.3}
.tracechart{width:100%;height:108px;display:block}
/* In a post the card sits inside the feed's own card: the activity page's frame
   (`.dsections > .card`), on the page ground so it reads as a card. */
.post .card.course{display:flex;flex-direction:column;gap:8px;max-width:none;
                   background:var(--bg);border-radius:var(--radius-card);padding:12px}
/* In the feed the chart sits under the map and a fifth shorter than the activity page's
   (his ask, 22 Sep): the SVG stretches, so the height is the whole change. */
.post .tracebox{grid-template-rows:86px auto}
.post .tracechart{height:86px}
/* A distance-free post's heart-rate picture is the finished page's card (108px), not the shorter chart under a route. */
.post .slot-heart.card.course{margin:0;background:var(--card);border:1px solid var(--separator)}
.post .slot-heart .tracebox{grid-template-rows:108px auto}
.post .slot-heart .tracechart{height:108px}
.media.pair > .slot-heart{min-width:0}