/* ==========================================================================
   Run mode of the Runs pages (owner 2026-10-09): /garmin-profile,
   /apple-profile or /stryd-profile with ?run=<id> (html[data-run-mode]).
   The profile sections hide; js/run-page.js draws the run's head and
   1. Your run: pace chart + the Biomechanical Signature cards
      (run-metric-cards.css); a chosen card focuses its line.
   2. Compared with your runs: each metric against the runner's own range
      (same run type by default, all runs, last 4 weeks).
   3. Biomechanics of this run: per-run scores and runner type.
   Below them stays the page's own, complete Drift Inspector, opened on the
   run (its run picker hides: the page is about one run).
   The run type colours the page (--run-rgb: daily blue, tempo orange,
   race red, interval amber): the pace line, score arcs, tiles and the
   background glow.
   ========================================================================== */
html[data-run-mode] { --run-rgb: 59, 130, 246; }
html[data-run-mode][data-run-purpose="tempo"] { --run-rgb: 249, 115, 22; }
html[data-run-mode][data-run-purpose="race"] { --run-rgb: 239, 68, 68; }
html[data-run-mode][data-run-purpose="interval"] { --run-rgb: 251, 191, 36; }
html[data-run-mode] main { overflow-x: clip; }
html[data-run-mode] .analysis-header-row,
html[data-run-mode] #garminProfileControls,
html[data-run-mode] [id$="ProfileControls"],
html[data-run-mode] #bucketStatsCards,
html[data-run-mode] #repRunsPlaceholder,
html[data-run-mode] .gp-sections > :not(#driftInspectorSection):not(.run-mode-section),
html[data-run-mode] main section.ri-card:not(#driftInspectorSection):not(.run-mode-section):not(#driftInspectorSection section),
html[data-run-mode] #driftDropdownWrap,
html[data-run-mode] .di-run-page-row { display: none !important; }
/* The page head shows as a block through `body .analysis-header-row:has(#sourceSwitcher)`
   (ID weight); two :not(#…) give this rule more. */
html[data-run-mode] .analysis-header-row:not(#ri-run-a):not(#ri-run-b) { display: none !important; }
html:not([data-run-mode]) .run-mode-head,
html:not([data-run-mode]) .run-mode-section,
html:not([data-run-mode]) .run-glow { display: none !important; }

/* The page's own top glow shows from the first paint while the run loads (owner
   2026-10-12: no glow there "looks weird"), then hands over to the run colour: it fades
   out as the run's tone fades in. A run that never loads keeps it. */
html[data-run-mode] .profile-mobile-bg { transition: opacity .46s ease; }
html[data-run-mode]:has(#runGlow:not([data-variant="none"])) .profile-mobile-bg { opacity: 0; }

/* Background glow in the run colour: the app's top glow (ui-shell.css .ri-glow) in the
   run's colour, same size and strength as every other page (owner 2026-10-12: the runs
   page must have "the new top glow"; it was scaled 3.5 %, colour-boosted and shadowed).
   The colours still cross-fade and settle (.run-glow-tone motion). */
.run-glow { position: absolute; top: -400px; right: 0; left: 0; height: 1400px; overflow: visible; }
.run-glow-tone {
  --glow-rgb: 46, 209, 244;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.985);
  transform-origin: 50% 0;
  transition: opacity .46s ease, transform .7s cubic-bezier(.2, .75, .22, 1);
}
.run-glow-tone[data-glow-variant="daily"] { --glow-rgb: 71, 135, 255; }
.run-glow-tone[data-glow-variant="tempo"] { --glow-rgb: 255, 109, 37; }
.run-glow-tone[data-glow-variant="race"] { --glow-rgb: 255, 65, 94; }
.run-glow-tone[data-glow-variant="interval"] { --glow-rgb: 251, 191, 36; }
.run-glow-tone .ri-glow {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  max-width: none;
  transform: translateX(-50%);
}
.run-glow[data-variant="daily"] [data-glow-variant="daily"],
.run-glow[data-variant="tempo"] [data-glow-variant="tempo"],
.run-glow[data-variant="race"] [data-glow-variant="race"],
.run-glow[data-variant="interval"] [data-glow-variant="interval"] {
  opacity: 1;
  transform: scale(1);
}

/* Title block. */
.run-head { align-items: flex-start; }
.run-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 16px 0 0; color: var(--ri-text-muted); font-size: var(--ri-text-secondary); }
.run-facts b { color: #fff; font-weight: 400; }
.run-fact { display: inline-flex; align-items: center; gap: 6px; }
.run-fact svg { width: 16px; height: 16px; }
.run-back { white-space: nowrap; }
.run-back-arrow { display: inline-block; width: 16px; height: 16px; flex: none; margin-right: 6px; transition: transform var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease); }
.run-back:hover .run-back-arrow, .run-back:focus-visible .run-back-arrow { transform: translateX(-3px); }
/* Share this run (owner 2026-10-14): the app's filled primary under "Back to activity log";
   on phones only its icon, a 40 px square at the right end of that row (as Shoe Analysis'
   head buttons). The top bar's "Share" beside the profile ring is desktop only (header). */
.run-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ri-space-4, 16px); }
.run-share-btn > .run-it-icon, .run-share-top > .run-it-icon { width: 18px; height: 18px; flex: none; }
.run-share-top { margin-right: var(--ri-space-3, 12px); }
@media (max-width: 640px) {
  .run-head .ri-page-actions.run-head-actions { flex-direction: row; align-items: center; justify-content: space-between; }
  .run-share-btn { --_btn-px: 0px; width: 40px; height: 40px; padding: 0; }
  .run-share-btn .run-share-label { display: none; }
}
.run-notice { margin: 0 0 var(--ri-space-6, 24px); }

.run-copy { margin: 0 0 20px; max-width: 70ch; color: var(--ri-text-muted); font-size: var(--ri-text-body); line-height: 1.5; }
.run-label { color: var(--ri-text-faint); font-size: var(--ri-text-caption); font-weight: 400; }
.run-vs { margin: -4px 0 0; color: var(--ri-text-faint); font-size: var(--ri-text-caption); text-align: center; }
.run-vs b { color: var(--ri-text-muted); font-weight: 400; }
.run-vs-note { display: block; margin-top: 2px; }

/* Skeleton blocks in the final layout (the shared .ri-skeleton look; size only here). */
.run-skel { display: block; border-radius: var(--ri-radius-sm, 8px); }
.run-skel--title { display: inline-block; width: min(300px, 62vw); height: .8em; margin: .15em 0; vertical-align: top; }
.run-skel--lead { width: min(340px, 80%); height: 18px; }
.run-skel--facts { width: min(420px, 90%); height: 24px; }
.run-skel--chart { position: absolute; inset: 0; border-radius: var(--ri-radius-md, 12px); }
.run-skel--card { height: 102px; border-radius: var(--ri-radius-md, 12px); }
.run-skel--row { height: 36px; margin: 8px 0; }
.run-skel--tile { height: 180px; border-radius: var(--ri-radius-md, 12px); }
#runCards:not(.rmc-grid) { display: grid; gap: 12px; margin-top: 24px; }
/* Eight cards with Pace (owner 2026-10-20): one row, two rows of four under 1180 px, and on
   phones rows of three, three and two (a six-column grid), skeleton and cards alike. */
#runCards { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1180px) { #runCards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  #runCards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #runCards > :not(.rmc-expl) { grid-column: span 2; }
  #runCards > :nth-last-child(-n + 2 of :not(.rmc-expl)) { grid-column: span 3; }
}

/* 1. Your run. */
.run-chart-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 12px; }
.run-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ri-text-muted); font-size: var(--ri-text-caption); }
.run-legend span { display: inline-flex; align-items: center; gap: 7px; }
.run-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid currentColor; }
.run-legend i.is-dashed { border-top-style: dashed; }
.run-hint { color: var(--ri-text-faint); font-size: 12px; }
.run-chart-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; }
.run-chart-actions .ri-btn[hidden] { display: none; }
/* Phones: the switch at the end of the hint line, "Smoothed" above it (run-page.js placeRunSmoothSwitch).
   It takes no room of its own (owner: never push the legend / hint spacing): the switch is centred on
   the hint line and its word rises into the free right side of the legend row. */
@media (max-width: 640px) {
  .run-chart-actions:has(.run-smooth--stacked) { position: relative; width: 100%; justify-content: flex-start; padding-right: 68px; }
  /* The switch is centred on the hint line; its word sits on the legend row's line, centred on
     the legend items (legend line 19 px, then the tools' 10 px row gap, then the hint line). */
  .run-smooth.run-smooth--stacked { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }
  .run-smooth--stacked .run-smooth-word {
    /* hint line centre - 9 px (half the hint line) - 10 px (row gap) = the legend line's bottom */
    position: absolute; right: 0; bottom: calc(50% + 19px);
    font-size: var(--ri-text-caption, 13px); line-height: 19px; white-space: nowrap;
  }
}

.run-chart { position: relative; width: 100%; height: 260px; }
.run-chart svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
.run-axis text { fill: rgba(255, 255, 255, 0.55); font-size: 11px; font-family: var(--ri-font-sans); }
/* Phones: the tapped metric's numbers sit inside the plot, on a dark halo over the lines. */
.run-axis text.is-inside { paint-order: stroke; stroke: #0b0820; stroke-width: 3px; stroke-linejoin: round; }
.run-grid line { stroke: rgba(255, 255, 255, 0.06); }
.run-cursor { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
/* Drag across the chart to zoom in on a stretch (owner 2026-10-15): the band being dragged,
   and "Show whole run" on the hint's line (12 px, so the row never changes height). */
.run-chart { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (hover: hover) and (pointer: fine) { .run-chart svg { cursor: crosshair; } }
.run-zoom-band { fill: rgba(46, 209, 244, 0.1); stroke: rgba(46, 209, 244, 0.55); stroke-width: 1; pointer-events: none; }
.run-zoom-reset { --_btn-fs: 12px; --_btn-lh: 16px; }
/* "Smoothed": the app's switch with its label, as on the Drift Inspector chart, at the right end
   of the card's title line (its meta slot), so the hint line below never changes height. */
.run-smooth { display: flex; flex: none; align-items: center; gap: 10px; margin: -2px 0; color: var(--ri-text-muted); font-size: var(--ri-text-caption, 13px); white-space: nowrap; cursor: pointer; }
/* While the run loads, the switch is a gray block like the rest (no thumb, no track colour). */
.run-smooth .ri-switch.ri-skeleton { background-color: rgba(255, 255, 255, 0.05); box-shadow: none; }
.run-smooth .ri-switch.ri-skeleton::after { visibility: hidden; }
/* LPI has no stream, so a zoomed stretch keeps the run's value: dimmed. */
.rmc-card.is-fixed .rmc-value { opacity: 0.45; }
.run-readout {
  position: absolute;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 8px 10px;
  border: 1px solid var(--ri-border-menu, rgba(46, 209, 244, 0.28));
  border-radius: var(--ri-radius-sm, 8px);
  background: var(--ri-surface-popover, #120F22);
  box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
  color: var(--ri-text-muted);
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.run-readout.is-on { opacity: 1; }
.run-readout b { color: #fff; font-weight: 400; }
.run-readout span { display: flex; justify-content: space-between; gap: 12px; }

/* 2. Compared with your runs. */
/* The sets as text tabs on a hairline, a cyan line under the chosen one that slides to the
   next, and "Only runs in <shoe>" as a switch at the end of the same line (owner 2026-10-12,
   option E). min-height holds the row while it loads. */
.run-compare-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; min-height: 38px; margin: 0 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.run-skel--tabs { width: min(320px, 70%); height: 20px; margin: 0 0 10px; }
.run-tabs { position: relative; display: flex; gap: 28px; min-width: 0; }
.run-tab { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 0 12px; border: 0; border-radius: 0; background: none; color: var(--ri-text-faint); font: inherit; font-size: var(--ri-text-body, 15px); font-weight: var(--ri-weight-light, 300); line-height: 1.4; white-space: nowrap; cursor: pointer; transition: color 200ms ease; }
.run-tab:hover { color: var(--ri-text-muted); }
.run-tab[aria-selected="true"] { color: #fff; }
.run-tab-count { color: var(--ri-text-faint); }
.run-tab[aria-selected="true"] .run-tab-count { color: var(--ri-text-muted); }
.run-tab:focus-visible { outline: 2px solid var(--ri-cyan, #2ED1F4); outline-offset: 2px; border-radius: 4px; }
html[data-ri-pointer] .run-tab:focus-visible { outline: none; }
.run-tab-line { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; border-radius: 1px; background: var(--ri-cyan, #2ED1F4); box-shadow: 0 0 10px rgba(46, 209, 244, 0.8); pointer-events: none; transition: transform 320ms cubic-bezier(0.3, 0.1, 0.3, 1), width 320ms cubic-bezier(0.3, 0.1, 0.3, 1); }
.run-tab-line.is-still { transition: none; }
.run-compare-shoe { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--ri-text-muted); font-size: var(--ri-text-caption, 13px); white-space: nowrap; cursor: pointer; }
.run-compare-shoe b { color: #fff; font-weight: 400; }
.run-standout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 24px; margin: 0 0 20px; }
.run-standout .run-label { margin-right: 4px; }
.run-rows { display: grid; }
.run-row { display: grid; grid-template-columns: minmax(150px, 1fr) 96px minmax(200px, 2.6fr) 200px; align-items: center; gap: 20px; min-height: 52px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.run-row:first-child { border-top: 0; }
.run-row-name { display: flex; align-items: center; gap: 10px; color: var(--ri-text-muted); font-size: var(--ri-text-secondary); }
.run-row-name svg, .run-row-name img { flex: none; width: 18px; height: 18px; }
/* The Run-It mark is wider than tall: fit it, never squeeze it into the square. */
.run-row-name img { object-fit: contain; }
.run-row-value { font-size: 18px; font-weight: 300; text-align: right; white-space: nowrap; }
.run-row-value small { margin-left: 3px; color: var(--ri-text-faint); font-size: 12px; }
.run-row-delta { color: var(--ri-text-faint); font-size: var(--ri-text-caption); line-height: 1.35; }
.run-row-delta b { color: var(--ri-text-muted); font-weight: 400; }
.run-row.is-out .run-row-delta b { color: #FCD34D; }
.run-row.is-thin .run-range { opacity: .45; }
.run-range { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); }
.run-range-band { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, rgba(46, 209, 244, 0.10), rgba(46, 209, 244, 0.22), rgba(46, 209, 244, 0.10)); }
.run-range-avg { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, 0.5); }
.run-range-this { --bar-rgb: 46, 209, 244; position: absolute; top: -7px; bottom: -7px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: rgb(var(--bar-rgb)); box-shadow: 0 0 8px rgba(var(--bar-rgb), 0.9), 0 0 2px rgba(var(--bar-rgb), 0.9); }
.run-row.is-out .run-range-this { --bar-rgb: var(--ri-amber-rgb, 251, 191, 36); }
/* A set switch glides the markers to their new places (owner 2026-10-09: animate,
   but light): left/width on three small marks per row, colour for a run that moves
   in or out of the usual range, and a fade for rows with too few runs. */
.run-range-band, .run-range-avg, .run-range-this {
  transition:
    left 420ms cubic-bezier(0.3, 0.1, 0.3, 1),
    width 420ms cubic-bezier(0.3, 0.1, 0.3, 1),
    opacity 260ms ease,
    background-color 300ms ease,
    box-shadow 300ms ease;
}
.run-row.is-thin .run-range > span { opacity: 0; }
.run-range { transition: opacity 260ms ease; }
/* A taller hit area than the 6 px bar, so the hover card is easy to reach. */
.run-range::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.run-row:not(.is-thin) .run-range { cursor: default; }
/* Above the page content (its section sits at z-index 320), under the header. */
.run-tip { position: fixed; z-index: 1000; box-sizing: border-box; width: min(300px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2)); border-radius: 10px; background: var(--ri-surface-popover, #120F22); box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5)); color: rgba(255, 255, 255, 0.74); font-size: 13px; line-height: 1.45; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms var(--ri-ease-standard, ease), visibility 0s linear 180ms; }
.run-tip.is-on { opacity: 1; visibility: visible; transition: opacity 180ms var(--ri-ease-standard, ease), visibility 0s; }
.run-tip-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.run-tip-name { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.96); font-weight: 500; }
/* No dot before the name (owner 2026-10-16: "remove the dot before 'pace'"); the verdict line
   under the facts says inside or outside. */
.run-tip-meta { flex: none; color: rgba(255, 255, 255, 0.62); font-size: 12px; }
.run-tip-value { margin-top: 8px; color: rgba(255, 255, 255, 0.96); font-size: 26px; font-weight: 300; line-height: 1.1; font-variant-numeric: proportional-nums; }
.run-tip-value small { margin-left: 4px; color: rgba(255, 255, 255, 0.74); font-size: 13px; font-weight: 400; }
.run-tip-sub { margin-top: 2px; color: rgba(255, 255, 255, 0.62); font-size: 12px; }
.run-tip-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(46, 209, 244, 0.12); }
.run-tip-facts dt { color: rgba(255, 255, 255, 0.62); }
.run-tip-facts dd { margin: 0; color: rgba(255, 255, 255, 0.86); text-align: right; font-variant-numeric: proportional-nums; }
.run-tip-verdict { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(46, 209, 244, 0.12); color: rgba(255, 255, 255, 0.74); }
.run-tip-verdict.is-out { color: #FCD34D; }
/* Phones: the same card as a bottom sheet over the app's backdrop (owner 2026-10-14), the My
   Shoes chart's phone sheet recipe; its X, the backdrop or Escape closes it. */
.run-tip-sheet-backdrop { position: fixed; inset: 0; z-index: 2147483646; background: var(--ri-backdrop, rgba(3, 0, 20, 0.6)); -webkit-backdrop-filter: blur(var(--ri-backdrop-blur, 12px)); backdrop-filter: blur(var(--ri-backdrop-blur, 12px)); }
.run-tip-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483647; box-sizing: border-box; max-height: min(80dvh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2)); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--ri-surface-popover, #120F22); box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5)); color: rgba(255, 255, 255, 0.74); font-size: 14px; line-height: 1.5; text-align: left; outline: none; }
.run-tip-sheet:focus, .run-tip-sheet:focus-visible { outline: none !important; }
.run-tip-sheet[hidden], .run-tip-sheet-backdrop[hidden] { display: none; }
/* Look: the shared .ri-btn--close; only its place here. */
.run-tip-sheet-close { position: absolute; top: 10px; right: 10px; margin: 0; }
.run-tip-sheet .run-tip-top { align-items: center; min-height: 32px; padding-right: 44px; }
.run-tip-sheet .run-tip-meta { font-size: 13px; }
.run-tip-sheet .run-tip-value { font-size: 32px; }
.run-tip-sheet .run-tip-sub { font-size: 13px; }
.run-tip-sheet .run-tip-facts { gap: 6px 12px; margin-top: 14px; padding-top: 14px; }
.run-tip-sheet .run-tip-verdict { margin-top: 14px; padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .run-tip, .run-tip.is-on { transition: none; } }
.run-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; color: var(--ri-text-faint); font-size: 12px; }
.run-key span { display: inline-flex; align-items: center; gap: 8px; }
.run-key i { display: inline-block; }
.run-key .k-band { width: 22px; height: 6px; border-radius: 3px; background: rgba(46, 209, 244, 0.2); }
.run-key .k-avg { width: 2px; height: 14px; background: rgba(255, 255, 255, 0.5); }
.run-key .k-this { width: 3px; height: 16px; border-radius: 2px; background: var(--ri-cyan); box-shadow: 0 0 8px rgba(46, 209, 244, 0.9); }

/* The metric explanation (owner 2026-10-09): one size for every metric, so choosing
   another card never moves the page. The title keeps one line and the sentence a
   two-line slot, whatever the metric says. */
#runCardsExpl .rmc-expl-about h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#runCardsExpl .rmc-expl-about p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 3em;
}

/* 3. Biomechanics of this run: tiles in the run colour. */
.run-bio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.run-bio[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.run-bio[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.run-bio-tile { --tile-color: rgb(var(--run-rgb)); display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--ri-radius-md, 12px); }
.run-bio-tile h3 { margin: 0; color: #fff; font-size: var(--ri-text-lead, 16px); font-weight: 400; text-align: center; }
/* The Shoes page score arc (shoes-page.css .shoes-score-ring, owner 2026-10-07) in the run
   colour: a haze up to the score, the comparison as the one white stripe, gain lit / drop dashed,
   +N / -N in the opening. */
.run-arc { position: relative; display: grid; place-items: center; width: 128px; height: 97px; margin: 4px auto 0; }
.run-arc svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.run-arc path, .run-arc line { fill: none; stroke-linecap: round; }
.run-arc-track { stroke: rgba(255, 255, 255, 0.07); stroke-width: 6; }
.run-arc-progress, .run-arc-gain { stroke-width: 6; }
.run-arc-haze-start { stop-color: rgb(var(--run-rgb)); stop-opacity: 0.04; }
.run-arc-haze-end { stop-color: rgb(var(--run-rgb)); stop-opacity: 0.34; }
.run-arc-gain { stroke: rgba(var(--run-rgb), 0.55); }
.run-arc-drop { stroke: rgba(148, 163, 184, 0.75); stroke-width: 1.6; stroke-dasharray: 1.6 1.8; stroke-linecap: butt; }
.run-arc-mark { stroke: #fff; stroke-width: 2.2; }
.run-arc-mark-glow { stroke: rgba(255, 255, 255, 0.07); stroke-width: 7; }
.run-arc-mark-halo { stroke: rgba(255, 255, 255, 0.2); stroke-width: 4.2; }
.run-arc-value { position: absolute; top: 57%; right: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; transform: translateY(-50%); }
.run-arc-value b { color: #fff; font-size: 30px; font-weight: 300; letter-spacing: -0.02em; }
.run-arc-value small { color: var(--ri-text-faint); font-size: 11px; font-weight: 400; }
.run-arc-delta { position: absolute; right: 0; bottom: -3px; left: 0; font-size: 12px; font-weight: 400; line-height: 1; text-align: center; }
.run-arc-delta.is-up { color: #6ee7b7; }
.run-arc-delta.is-down { color: #94a3b8; }
.run-arc-key { display: inline-block; width: 2px; height: 11px; margin-right: 7px; border-radius: 1px; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, 0.5); vertical-align: -1px; }
@media (max-width: 640px) { .run-arc { width: 112px; height: 85px; } .run-arc-value b { font-size: 26px; } }
.run-parts { display: grid; gap: 12px; margin-top: 4px; }
.run-part-head { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--ri-text-muted); font-size: var(--ri-text-caption); }
.run-part-head b { color: #fff; font-weight: 400; }
.run-part .ri-level-track { height: 4px; border-radius: 2px; }
.run-part .ri-level-fill { --bar-rgb: var(--run-rgb); height: 100%; border-radius: 2px; }
/* Each bar's part of your average (owner 2026-10-19), in the arc's language: the one white
   stripe, the gain lit brighter, the drop dashed slate, +N / -N beside the points. */
.run-part .ri-level-track { position: relative; }
.run-part-gain, .run-part-drop { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.run-part-gain { background: rgba(var(--run-rgb), 0.55); }
.run-part-drop { top: 50%; bottom: auto; height: 0; border-top: 1.5px dashed rgba(148, 163, 184, 0.75); transform: translateY(-50%); }
.run-part-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 6px rgba(255, 255, 255, 0.35); pointer-events: none; }
.run-part-delta { margin-right: 8px; font-size: 12px; }
.run-part-delta.is-up { color: #6ee7b7; }
.run-part-delta.is-down { color: #94a3b8; }
.run-part-delta.is-none { color: var(--ri-text-faint); }
.run-type { display: grid; justify-items: center; gap: 6px; text-align: center; }
.run-type-icon { width: 54px; height: 54px; }
.run-type-name { color: #34D399; font-size: 20px; font-weight: 400; }
.run-type-usual { color: var(--ri-text-faint); font-size: var(--ri-text-caption); }
.run-type-usual b { color: var(--ri-text-muted); font-weight: 400; }
.run-drivers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; margin-top: 12px; }
.run-explain { display: grid; gap: 12px; margin: 20px 0 0; }
.run-explain:empty { display: none; }
.run-explain p { margin: 0; color: var(--ri-text-muted); font-size: var(--ri-text-secondary); line-height: 1.55; }

.run-footnote { margin: 40px 0 64px; color: var(--ri-text-faint); font-size: 12px; line-height: 1.5; text-align: center; }

@media (max-width: 1024px) {
  .run-row { grid-template-columns: minmax(130px, 1fr) 90px minmax(160px, 2fr) 170px; gap: 14px; }
}
@media (max-width: 640px) {
  .run-head { flex-wrap: wrap; gap: 12px; }
  /* Phones (owner 2026-10-20, as the Run Signature page): the title with Share beside it; under the
     title's fading line "← Back to activity log" (text link, two-tone arrow); then the date line
     and the run's facts. The copy and actions blocks open up (display: contents) so their pieces
     can be ordered. */
  .run-head { align-items: flex-start; }
  .run-head > .ri-page-head-copy,
  .run-head > .ri-page-actions.run-head-actions { display: contents; }
  .run-head #runTitle { order: 1; flex: 0 1 auto; min-width: 0; }
  .run-head .run-share-btn { order: 2; margin-left: auto; flex: none; }
  .run-head .run-back { order: 3; flex: 0 0 100%; justify-content: flex-start; margin-top: -4px; }
  .run-head #runLead { order: 4; width: 100%; margin-top: 0; }
  .run-head #runFacts { order: 5; width: 100%; }
  /* Phones: the tabs fill their own hairline row, the shoe switch goes under it. */
  .run-compare-top { display: block; min-height: 37px; border-bottom: 0; }
  .run-compare-top > .run-skel--tabs { margin: 8px 0 0; }
  .run-tabs { justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .run-tab { font-size: var(--ri-text-secondary, 14px); }
  .run-compare-shoe { display: flex; margin: 14px 0 0; white-space: normal; }
  .run-chart { height: 210px; }
  .run-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "bar bar" "delta delta"; gap: 10px 12px; padding: 14px 0; }
  .run-row-name { grid-area: name; }
  .run-row-value { grid-area: value; }
  .run-range { grid-area: bar; margin: 6px 0 2px; }
  .run-row-delta { grid-area: delta; }
  .run-bio, .run-bio[data-count="2"] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .run-range-band, .run-range-avg, .run-range-this, .run-glow-tone, .run-tab-line,
  html[data-run-mode] .profile-mobile-bg { transition: none; }
}

/* The failed-load note keeps one line beside a card title on phones. */
html[data-run-mode] .run-mode-section .ri-load-error { white-space: nowrap; }

/* Confirm shoe (owner 2026-10-19): a small secondary button right after the shoe in the head, and its popup:
   the shoes as glow tiles with their photo (the Shoe choice look), a bottom sheet on phones. */
.run-facts .run-shoe-confirm { flex: none; }
.run-shoe-confirm-card { --ri-dialog-width: 480px; display: flex; flex-direction: column; overflow: hidden; }
.run-shoe-confirm-card > * { flex: none; }
.run-shoe-confirm-card > .run-shoe-confirm-list { flex: 0 1 auto; min-height: 0; }
.run-shoe-confirm-close { position: absolute; top: 16px; right: 16px; }
.run-shoe-confirm-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--ri-text-muted); font-size: var(--ri-text-meta, 13px); }
.run-shoe-confirm-kicker svg { width: 16px; height: 16px; color: var(--icon-accent, #26c6e6); }
.run-shoe-confirm-card .run-modal-title { padding-right: 40px !important; }
.run-shoe-confirm-lead { margin: 0; color: var(--ri-text-muted); font-size: var(--ri-text-secondary, 15px); line-height: 1.5; }
.run-shoe-confirm-lead b { color: #fff; font-weight: 400; }
.run-shoe-confirm-list { display: grid; gap: 10px; margin: 20px 0 0; overflow-y: auto; overscroll-behavior: contain; max-height: min(52dvh, 420px); padding: 2px; }
.run-shoe-confirm-skel { display: block; height: 76px; border-radius: 14px; }
.run-shoe-option { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 24px; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 8px 14px 8px 10px; border-radius: 14px; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.run-shoe-option .rot-photo { width: 72px; height: 48px; }
.run-shoe-option-name { display: grid; gap: 2px; min-width: 0; }
.run-shoe-option-brand { overflow: hidden; color: var(--ri-text-faint, #8a90a6); font-size: var(--ri-text-caption, 13px); line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.run-shoe-option-model { overflow: hidden; font-size: 17px; font-weight: var(--ri-weight-light, 300); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.run-shoe-option-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* The pick mark is the onboarding's square green glass box (owner 2026-10-20: "WRONG CHECKBOX"). */
.run-shoe-option-radio { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); box-shadow: inset 0 -5.25px 13.125px rgba(148, 163, 184, 0.12), inset 0 5.25px 13.125px rgba(255, 255, 255, 0.06); transition: box-shadow 150ms ease; }
.run-shoe-option-radio::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: rgba(148, 163, 184, 0.24); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: background 150ms ease; }
.run-shoe-option-radio .check-toggle-mark { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; --icon-muted: #a7f3d0; --icon-accent: #a7f3d0; opacity: 0; transition: opacity 150ms ease; }
.run-shoe-option.is-selected .run-shoe-option-radio { box-shadow: inset 0 -5.25px 14.875px rgba(52, 211, 153, 0.34), inset 0 5.25px 14.875px rgba(110, 231, 183, 0.28), 0 0 0 1px rgba(52, 211, 153, 0.12); }
.run-shoe-option.is-selected .run-shoe-option-radio::before { background: linear-gradient(90deg, rgba(110, 231, 183, 0.78), rgba(52, 211, 153, 0.84) 50%, rgba(16, 185, 129, 0.78)); }
.run-shoe-option.is-selected .run-shoe-option-radio .check-toggle-mark { opacity: 1; }
.run-shoe-confirm-card .run-modal-error { margin: 12px 0 0; color: #ff8a8a; font-size: 14px; }
.run-shoe-confirm-actions { margin-top: 20px; }
@media (max-width: 640px) {
  .run-shoe-option-tags .ri-tag:not(.ri-tag--cyan) { display: none; }
  .run-shoe-option { grid-template-columns: 64px minmax(0, 1fr) auto 24px; gap: 12px; }
  .run-shoe-option .rot-photo { width: 64px; height: 44px; }
}
/* Phones: a bottom sheet with a grab handle, as the filter sheet (owner pick D). */
.run-shoe-confirm-backdrop.is-sheet { place-items: end stretch; padding: var(--ri-popup-gap-top, 16px) 0 0; }
.run-shoe-confirm-backdrop.is-sheet .run-shoe-confirm-card { width: 100%; max-height: calc(100dvh - var(--ri-popup-gap-top, 16px)); border-width: 1px 0 0; border-radius: 20px 20px 0 0; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
.run-shoe-confirm-grab { display: block; flex: none; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); }
.run-shoe-confirm-backdrop.is-sheet .run-shoe-confirm-close { top: 22px; }
.run-shoe-confirm-backdrop.is-sheet .run-shoe-confirm-list { max-height: none; margin-right: -4px; padding-right: 4px; overscroll-behavior-y: none; }
.run-shoe-confirm-backdrop.is-sheet .run-shoe-confirm-actions .ri-btn { flex: none; width: 100%; }

/* My Runs: the shoe just saved on a run page glows once in its log row (garmin-profile.js,
   _gpGlowRunPageShoes). This file loads on the profile page too. */
#activityOverviewContainer .activity-shoe-cell.is-shoe-saved { border-radius: 8px; animation: ri-shoe-saved 1800ms ease-out; }
@keyframes ri-shoe-saved {
  0% { background-color: rgba(46, 209, 244, 0); box-shadow: 0 0 0 rgba(46, 209, 244, 0); }
  18% { background-color: rgba(46, 209, 244, 0.16); box-shadow: 0 0 18px rgba(46, 209, 244, 0.35); }
  100% { background-color: rgba(46, 209, 244, 0); box-shadow: 0 0 0 rgba(46, 209, 244, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #activityOverviewContainer .activity-shoe-cell.is-shoe-saved { animation-duration: 1ms; }
}