html, body {
      overflow-x: clip;
      max-width: 100%;
      min-height: 100vh;
    }

    html.profile-loading-lock,
    html.profile-loading-lock body,
    body.profile-loading-lock {
      overflow-y: auto;
      overscroll-behavior-y: auto;
      height: auto;
    }

    :root {
      --mobile-header-theme: #022b3a;
      --mobile-header-overlay: rgba(2, 6, 23, 0.3);
      --mobile-sticky-theme: #030014;
      --mobile-sticky-overlay: rgba(3, 0, 20, 0.72);
      --mobile-sticky-overlay-bottom: rgba(3, 0, 20, 0.46);
      --mobile-navopen-overlay: rgba(3, 0, 20, 0.9);
    }


    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: env(safe-area-inset-top, 0px);
      background: #020617;
      pointer-events: none;
      z-index: 9998;
    }


    header {
      isolation: isolate;
      overflow: visible;
    }

    header > * {
      position: relative;
      z-index: 1;
    }

    

    /* Analytics sections that resolve after the Activity Log show their skeleton
       in place: the section keeps its real layout (plus placeholder markup from
       stryd-profile-page.js in containers that are empty until data renders), so
       each gray piece sits exactly where its content lands. The heading and
       divider stay real. Below them every line of text becomes a gray bar (a
       thick line-through), controls and charts become gray blocks, and card
       frames stay put. Bars and blocks share one solid fill, so bars drawn by
       nested text or inside a block never show as a second shade. */
    .profile-section-skeleton {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 5;
      overflow: hidden;
      pointer-events: none;
    }
    [data-profile-section-state="loading"] {
      --profile-skel-fill: rgba(255, 255, 255, 0.05);
      /* The same gray, opaque: a text bar is a line-through, and translucent
         bars would show a second shade where nested elements overlap them. */
      --profile-skel-bar: #191629;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: none !important;
      transform: none !important;
      animation: none !important;
      overflow: hidden !important;
    }
    [data-profile-section-state="loading"] > .profile-section-skeleton {
      display: block;
    }
    /* Kit look (owner pick 1D): the sheen is part of each gray block (below), so
       this layer only marks the section as loading. Its probe is a hidden
       .ri-skeleton, which tells RunItMotion.skeletonHoldMs how long the section
       has been on screen (shown after 300 ms, held at least 400 ms). */
    .profile-section-skeleton .srs-probe {
      position: absolute;
      width: 1px;
      height: 1px;
      visibility: hidden;
    }
    /* Nothing under the card head shows in the first 300 ms: a fast load never flashes a skeleton. */
    [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) {
      animation: ri-skeleton-wait var(--ri-skeleton-delay, 300ms) linear;
    }
    /* Content below the heading and divider. */
    :is([data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton), [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) *) {
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      text-shadow: none !important;
      caret-color: transparent !important;
      text-decoration-line: line-through !important;
      text-decoration-style: solid !important;
      text-decoration-color: var(--profile-skel-bar) !important;
      text-decoration-thickness: 0.62em !important;
    }
    /* Everything that is neither a card frame (the first classes in :not) nor a
       gray block (the rest, styled further down) drops its own paint, so only
       frames, blocks and text bars show. */
    :is([data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton), [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) *):not(.bio-cg-wrap, .drift-chart-card, .bio-efficiency-card, .bio-metric-card, .bio-sig-card, .bio-sig-dominant-panel, .bio-sig-panel, .bio-sig-explainer, .frp-controls-grid, .shoe-use-case-section, .frp-impact-metric, .rii-compare-btn, .ri-filter-bar, .ri-filter-bar .ri-btn, .bio-date-shell, .bio-select-shell, .drift-chart-container, .bio-slider-runs-dots, input[type="range"], .bio-efficiency-rail, .drift-filter-pill, .env-tab-btn, .use-case-btn, .frp-matrix-tab, .rmt-cell, .bio-sig-dist-track, .bio-sig-icon-wrap, .bio-sig-metric-icon-box, .bio-sig-pattern-badge, .bio-sig-total-score-ring, .di-dropdown-trigger) {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      outline-color: transparent !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
    :is([data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton), [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) *)::before,
    :is([data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton), [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) *)::after,
    [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) :is(img, svg, canvas, video, picture, input, select, textarea) {
      visibility: hidden !important;
    }
    /* Small inline suffixes (units, "/100", arrows) keep their space but draw no
       bar, so each value reads as one bar instead of two at different baselines. */
    [data-profile-section-state="loading"] :is(.bio-efficiency-outof, .bio-card-unit, .bio-sig-total-score-value small, .frp-impact-arrow) {
      visibility: hidden !important;
    }
    /* Card frames keep their box but read neutral while data is pending. */
    [data-profile-section-state="loading"] .bio-metric-card {
      --card-glow-rgb: 148, 163, 184 !important;
    }
    [data-profile-section-state="loading"] .bio-sig-card,
    [data-profile-section-state="loading"] .bio-sig-dominant-panel,
    [data-profile-section-state="loading"] .bio-sig-panel,
    [data-profile-section-state="loading"] .bio-sig-explainer {
      border-color: rgba(148, 163, 184, 0.14) !important;
    }
    /* Controls, charts, pills and tiles become gray blocks of their own size. */
    [data-profile-section-state="loading"] :is(.rii-compare-btn, .ri-filter-bar .ri-btn, .bio-date-shell, .bio-select-shell, .drift-chart-container, .bio-slider-runs-dots, input[type="range"], .bio-efficiency-rail, .drift-filter-pill, .env-tab-btn, .use-case-btn, .frp-matrix-tab, .rmt-cell, .bio-sig-dist-track, .bio-sig-icon-wrap, .bio-sig-metric-icon-box, .bio-sig-pattern-badge, .bio-sig-total-score-ring, .di-dropdown-trigger) {
      visibility: visible !important;
      background-color: var(--profile-skel-fill) !important;
      background-image: none !important;
      animation: ri-skeleton-wait var(--ri-skeleton-delay, 300ms) linear !important;
      border-color: transparent !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      text-decoration-line: none !important;
    }
    [data-profile-section-state="loading"] :is(.rii-compare-btn, .ri-filter-bar .ri-btn, .bio-date-shell, .bio-select-shell, .drift-chart-container, .bio-slider-runs-dots, .bio-efficiency-rail, .drift-filter-pill, .env-tab-btn, .use-case-btn, .frp-matrix-tab, .rmt-cell, .bio-sig-dist-track, .bio-sig-icon-wrap, .bio-sig-metric-icon-box, .bio-sig-pattern-badge, .bio-sig-total-score-ring, .di-dropdown-trigger) * {
      visibility: hidden !important;
    }
    [data-profile-section-state="loading"] :is(.drift-chart-container, .bio-slider-runs-dots) {
      border-radius: 12px;
    }
    /* A text bar is a line-through, and a parent's line-through runs on through every block
       child (a pill's label included), drawing an opaque bar across the block's sheen. The
       elements that hold a block draw no bar of their own (as on garmin-profile.html). */
    [data-profile-section-state="loading"] :has(:is(.rii-compare-btn, .ri-filter-bar .ri-btn, .bio-date-shell, .bio-select-shell, .drift-chart-container, .bio-slider-runs-dots, input[type="range"], .bio-efficiency-rail, .drift-filter-pill, .env-tab-btn, .use-case-btn, .frp-matrix-tab, .rmt-cell, .bio-sig-dist-track, .bio-sig-icon-wrap, .bio-sig-metric-icon-box, .bio-sig-pattern-badge, .bio-sig-total-score-ring, .di-dropdown-trigger)) {
      text-decoration-line: none !important;
    }
    /* Failed (owner pick 8C): the blocks stop and dim. */
    :is([data-load-state="failed"] [data-profile-section-state="loading"], [data-profile-section-state="loading"][data-load-state="failed"]) :is(.rii-compare-btn, .ri-filter-bar .ri-btn, .bio-date-shell, .bio-select-shell, .drift-chart-container, .bio-slider-runs-dots, input[type="range"], .bio-efficiency-rail, .drift-filter-pill, .env-tab-btn, .use-case-btn, .frp-matrix-tab, .rmt-cell, .bio-sig-dist-track, .bio-sig-icon-wrap, .bio-sig-metric-icon-box, .bio-sig-pattern-badge, .bio-sig-total-score-ring, .di-dropdown-trigger) {
      animation: none !important;
      background-image: none !important;
      opacity: 0.45;
    }
    [data-profile-section-state="loading"] :is(input[type="range"], .bio-sig-total-score-ring) {
      border-radius: 999px;
    }
    [data-profile-section-state="loading"] input[type="range"]::-webkit-slider-runnable-track { background: transparent !important; box-shadow: none !important; }
    [data-profile-section-state="loading"] input[type="range"]::-moz-range-track { background: transparent !important; box-shadow: none !important; }
    [data-profile-section-state="loading"] input[type="range"]::-webkit-slider-thumb { visibility: hidden !important; }
    [data-profile-section-state="loading"] input[type="range"]::-moz-range-thumb { visibility: hidden !important; }
    /* Cards already carry their reveal classes while the skeleton shows; they
       must not slide in underneath it. The section reveal still plays on release. */
    [data-profile-section-state="loading"] .reveal-child {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    /* The HR card spans the row below 1024px (see .bio-metric-card[data-bio-metric="hr"]). */
    @media (min-width: 1024px) {
      .bio-metric-card[data-profile-skel-metric="hr"] { grid-column: auto; }
    }
    @media (max-width: 1023px) {
      .bio-metric-card[data-profile-skel-metric="hr"] { grid-column: 1 / -1; }
    }
    @media (prefers-reduced-motion: reduce) {
      [data-profile-section-state="loading"] * { animation: none !important; background-image: none !important; }
    }
    /* With a mouse each gray block breathes like the kit's .ri-skeleton (ui-components.css):
       a cyan light swells to the kit's 16 % peak and fades once per --ri-dur-skeleton (owner
       2026-10-10: these sections "did nothing"). stryd-profile-page.js marks each block's
       outermost element [data-psk-block] and only its opacity moves, on the compositor. Blocks
       are drawn in the peak colour; at rest (opacity .3 over the card) they read as the still
       gray. Frames stay still; touch screens stay still (measured phone cost, 2026-10-09). */
    @keyframes psk-breath {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
      [data-profile-section-state="loading"] {
        --profile-skel-fill: #1c3449; /* #191629 with the kit's cyan .16 on top */
        --profile-skel-bar: #1c3449;
      }
      /* The 300 ms wait first (nothing shows on a fast load), then the breath. Doubled
         attribute: out-ranks the block rule's own animation (.ri-filter-bar .ri-btn). */
      [data-profile-section-state="loading"] [data-psk-block][data-psk-block] {
        animation: ri-skeleton-wait var(--ri-skeleton-delay, 300ms) linear, psk-breath var(--ri-dur-skeleton, 1800ms) ease-in-out var(--ri-skeleton-delay, 300ms) infinite !important;
      }
      :is([data-load-state="failed"] [data-profile-section-state="loading"], [data-profile-section-state="loading"][data-load-state="failed"]) [data-psk-block][data-psk-block] {
        animation: none !important;
        opacity: 0.45;
      }
    }

    /* ═══ Enhanced Card Hover & Interaction ═══ */
    .drift-chart-card {
      transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-color 0.3s ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .drift-chart-card:hover {
        transform: none;
        box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
        border-color: rgba(46, 209, 244, 0.14);
      }
    }

    /* ═══ Premium Button Polish ═══ */
    /* Smoother base transition for all interactive buttons */
    .load-type-btn {
      transition: background 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    /* Active tab indicator glow */
    .load-type-btn.active {
      box-shadow: 0 0 14px rgba(var(--btn-color-rgb, 46,209,244), 0.22),
                  inset 0px -5px 12px rgba(var(--btn-color-rgb, 46,209,244), 0.2),
                  inset 0px 5px 12px rgba(var(--btn-color-rgb, 46,209,244), 0.1),
                  inset 0 1px 0 rgba(255,255,255,0.05);
    }


    @media (prefers-reduced-motion: reduce) {
      .drift-chart-card { transition: none !important; }
    }


    button,
    [type="button"],
    [type="submit"],
    .btn,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"],
    select {
      cursor: pointer;
    }


    .hover-trigger:hover .hover-tooltip {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }


    .section-tooltip {
      position: absolute;
      /* 6 px left of the "?" box, so the tip (20 px in from the panel's
         rounded corner) sits under the centre of a 28 px "?". */
      left: -6px;
      top: 100%;
      margin-top: 12px;
      min-width: 280px;
      max-width: 400px;
      padding: 16px;
      border-radius: 16px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                  transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                  visibility 0.35s;
      transform: translateY(10px);
      pointer-events: none;
      background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.95));
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow:
        0 0 30px rgba(46, 209, 244, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      z-index: 999999 !important;
    }

    /* A closed help tooltip collapses once its fade-out has finished, so a tall
       closed tooltip can never extend the page (audit V1-15: 327 px of blank page
       after the footer). Opening restores it at once. An animation, not a
       transition: help-tooltips.css owns the transition list. */
    @keyframes gp-tooltip-collapse { to { max-height: 0; overflow: hidden; } }
    .section-tooltip {
      animation: gp-tooltip-collapse 0s linear var(--help-tooltip-duration, 180ms) forwards;
    }
    .section-tooltip-trigger.tooltip-active .section-tooltip,
    .section-tooltip.tooltip-open {
      animation: none;
    }
    @media (min-width: 641px) and (hover: hover) and (pointer: fine) {
      .section-tooltip-trigger:hover .section-tooltip,
      .section-tooltip-trigger:focus-within .section-tooltip {
        animation: none;
      }
    }

    .section-tooltip-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(2, 6, 23, 0.42);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.35s;
      z-index: 2147483646;
    }

    .section-tooltip-backdrop.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }


    .section-tooltip::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: linear-gradient(to right, rgba(0, 229, 255, 0.1), rgba(0, 229, 255, 0.05));
      filter: blur(20px);
      opacity: 0.5;
      pointer-events: none;
      z-index: -1;
    }


    .section-tooltip::after {
      content: '';
      position: absolute;
      top: -6px;
      left: 20px;
      width: 12px;
      height: 12px;
      background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.95));
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-left: 1px solid rgba(255, 255, 255, 0.1);
      transform: rotate(45deg);
    }


    @media (max-width: 640px) {

      .section-tooltip {
        position: fixed !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        max-width: min(92vw, 420px) !important;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 2147483647 !important;
        transition: opacity 0.18s ease, visibility 0.18s ease !important;
      }

      .section-tooltip::after {
        display: none;
      }
    }

    .section-tooltip-trigger {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }


    .section-tooltip-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      line-height: 1;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .section-tooltip-trigger svg {
      color: #2ed1f4;
      transition: all 0.3s ease;
      pointer-events: auto;
      filter: drop-shadow(0 0 4px rgba(46, 209, 244, 0.3));
    }

    .section-tooltip-trigger:hover svg,
    .section-tooltip-btn:focus-visible svg,
    .section-tooltip-trigger.tooltip-active svg {
      transform: scale(1.15);
      filter: drop-shadow(0 0 8px rgba(46, 209, 244, 0.5));
    }

    .section-tooltip-btn:focus-visible {
      outline: none;
    }


    @media (min-width: 640px) {
      .section-tooltip-trigger:hover .section-tooltip {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }
    }


    .section-tooltip-trigger.tooltip-active .section-tooltip {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }


    .section-tooltip.tooltip-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }


    .section-tooltip {
      z-index: 2147483647 !important;
    }

    @media (max-width: 640px) {
      .section-tooltip.tooltip-open,
      .section-tooltip-trigger.tooltip-active .section-tooltip {
        transform: translate(-50%, -50%) !important;
      }
    }


    .section-tooltip a {
      pointer-events: auto;
      transition: opacity 0.25s ease, text-shadow 0.25s ease;
    }

    .section-tooltip a:hover {
      opacity: 0.8;
      text-shadow: 0 0 8px currentColor;
    }


    .section-tooltip p {
      position: relative;
    }

    .section-tooltip h5 {
      position: relative;
    }




    .input-field {
      width: 100%;
      min-height: clamp(44px, 10vw, 48px);
      padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.75rem, 2.5vw, 1rem);
      font-size: var(--ri-text-input) !important;
      background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 0.5rem;
      color: white;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      box-sizing: border-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
      width: 100%;
      box-sizing: border-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }


    select.input-field,
    select {
      background-image: url("/images/icons/run-it/chevron-down.svg?v=20261007-icon-edges-v6");
      background-repeat: no-repeat;
      background-position: right clamp(0.75rem, 2.5vw, 1rem) center;
      padding-right: clamp(2rem, 6vw, 2.5rem);
    }

    /* Not checkboxes, radios or switches: this !important fill hid the checked .ri-switch
       track while it kept focus (owner 2026-10-12: "black when toggled on"). */
    .input-field:focus,
    input:not([type="checkbox"]):not([type="radio"]):focus,
    select:focus,
    textarea:focus,
    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus {
      outline: none;
      border-color: #2ED1F4;
      background: rgba(46, 209, 244, 0.05) !important;
      backdrop-filter: blur(12px) !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 15px rgba(46, 209, 244, 0.15), 0 0 30px rgba(46, 209, 244, 0.1) !important;
    }


    .input-field::placeholder,
    input::placeholder,
    textarea::placeholder {
      color: rgba(255, 255, 255, 0.4);
      font-size: var(--ri-text-input);
      opacity: 1;
    }


    select.input-field option,
    select option {
      background-color: #111827;
      color: white;
      font-size: var(--ri-text-input);
      padding: 0.5rem;
    }
    
    
    
    
      @media (max-width: 640px) {
        
        
        
        
        #headerCompletionDropdown {
          position: fixed !important;
          top: 70px !important;
          left: 50% !important;
          right: auto !important;
          transform: translateX(-50%) !important;
          min-width: 90vw !important;
          max-width: 340px !important;
          margin-top: 0 !important;
        }

        #runTypeButtons {
          flex-wrap: nowrap !important;
          gap: 6px !important;
        }

        #runTypeButtons button {
          min-width: 0 !important;
          padding: 6px 8px !important;
          font-size: var(--ri-text-button) !important;
          white-space: nowrap;
        }
      }


      @media (min-width: 641px) {
        #headerCompletionWidget {
          position: relative;
        }
        #headerCompletionDropdown {
          position: absolute !important;
          top: calc(100% + 10px) !important;
          left: 50% !important;
          right: auto !important;
          transform: translateX(-50%) !important;
        }
      }
    .shoe-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: 4px;
      background: linear-gradient(135deg, rgb(20,20,30), rgb(15,15,25));
      backdrop-filter: blur(16px);
      border: 1px solid rgba(46, 209, 244, 0.3);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(46, 209, 244, 0.1);
      max-height: 320px;
      overflow-y: auto;
      z-index: 99999;
      display: none;
    }


    #watchDropdown.shoe-dropdown {
      background: linear-gradient(135deg, rgb(20,20,30), rgb(15,15,25)) !important;
      box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(46, 209, 244, 0.1) !important;
      backdrop-filter: blur(16px) !important;
    }

    .shoe-dropdown.active {
      display: block;
      animation: slideDown 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .shoe-option {
      padding: 14px 18px;
      color: white;
      cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      transition: background 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-left 0.25s ease,
                  padding-left 0.25s ease,
                  box-shadow 0.25s ease;
      position: relative;
    }

    .shoe-option:hover {
      background: linear-gradient(90deg, rgba(46, 209, 244, 0.15), rgba(46, 209, 244, 0.05));
      border-left: 3px solid #2ED1F4;
      padding-left: 15px;
      box-shadow: inset 0 0 20px rgba(46, 209, 244, 0.1);
    }

    .shoe-option:last-child {
      border-bottom: none;
      border-radius: 0 0 12px 12px;
    }

    .shoe-option:first-child {
      border-radius: 12px 12px 0 0;
    }

    .shoe-option.add-new {
      background: linear-gradient(135deg, rgba(46, 209, 244, 0.1), rgba(46, 209, 244, 0.05));
      color: #2ED1F4;
      font-weight: 600;
      border-bottom: 2px solid rgba(46, 209, 244, 0.2);
    }

    .shoe-option.add-new:hover {
      background: linear-gradient(135deg, rgba(46, 209, 244, 0.2), rgba(46, 209, 244, 0.1));
      box-shadow: inset 0 0 30px rgba(46, 209, 244, 0.15);
    }


    .shoe-dropdown::-webkit-scrollbar {
      width: 8px;
    }

    .shoe-dropdown::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 0 12px 12px 0;
    }

    .shoe-dropdown::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(46, 209, 244, 0.6), rgba(46, 209, 244, 0.3));
      border-radius: 4px;
    }

    .shoe-dropdown::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(46, 209, 244, 0.8), rgba(46, 209, 244, 0.5));
    }


    .selected-shoes {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .shoe-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      padding-bottom: 8px;
      background: linear-gradient(135deg, rgba(46, 209, 244, 0.15), rgba(46, 209, 244, 0.08));
      border: 1px solid rgba(46, 209, 244, 0.3);
      border-radius: 6px;
      color: white;
      font-size: var(--ri-text-caption);
      overflow: visible;
    }

    .shoe-tag.has-image {
      padding-bottom: 6px;
    }

    .shoe-tag-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent 0%, rgba(46, 209, 244, 0.3) 10%, rgba(46, 209, 244, 0.3) 90%, transparent 100%);
      margin-top: 4px;
    }

    .shoe-tag-image {
      display: flex;
      justify-content: center;
      margin-top: 6px;
    }

    .shoe-tag button {
      background: none;
      border: none;
      color: #2ED1F4;
      font-size: var(--ri-text-lead);
      font-weight: var(--ri-weight-semibold);
      cursor: pointer;
      padding: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .shoe-tag button:hover {
      color: #2ED1F4;
      transform: scale(1.2);
    }


    .max-shoes-toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      z-index: 999999;
      padding: 16px 24px;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(185, 28, 28, 0.95));
      backdrop-filter: blur(12px);
      border: 1px solid rgba(239, 68, 68, 0.5);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(239, 68, 68, 0.3);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .max-shoes-toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    .max-shoes-toast .toast-content {
      display: flex;
      align-items: center;
      gap: 12px;
      color: white;
    }

    .max-shoes-toast .toast-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      color: #fee2e2;
      filter: drop-shadow(0 0 8px rgba(254,226,226,0.28));
    }

    .max-shoes-toast .toast-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .max-shoes-toast .toast-message {
      font-size: var(--ri-text-body);
      font-weight: 500;
      max-width: 400px;
    }

    @media (max-width: 640px) {
      .max-shoes-toast {
        left: 10px;
        right: 10px;
        transform: translateX(0) translateY(-100px);
        width: auto;
      }
      .max-shoes-toast.show {
        transform: translateX(0) translateY(0);
      }
      .max-shoes-toast .toast-message {
        max-width: none;
      }
      .activity-shoe-editor-modal {
        padding: 18px;
      }
    }


    .fade-in-element {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), margin-top 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
      margin-top: 0;
    }

    .fade-in-element.show {
      opacity: 1;
      max-height: 200px;
      transform: translateY(0);
      margin-top: 20px;
    }

    #wornShoeFeedback {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), margin-top 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
      margin-top: 0;
    }

    #wornShoeFeedback.active {
      max-height: 800px;
      opacity: 1;
      transform: translateY(0);
      margin-top: 120px;
    }

    #selectedWornShoe.has-image + #wornShoeFeedback.active {
      margin-top: 16px;
    }


    #dropZone {
      opacity: 1;
      max-height: 300px;
      overflow: hidden;
      transform: translateY(0);
      transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
      margin-bottom: 0;
    }

    #dropZone.hidden {
      opacity: 0;
      max-height: 0;
      transform: translateY(-8px);
      margin-bottom: 0;
    }

    #fileInfo {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transform: translateY(-10px);
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      display: none;
    }

    #fileInfo.active {
      opacity: 1;
      max-height: 100px;
      transform: translateY(0);
      display: flex;
    }

    #fileInfo.removing {
      opacity: 0 !important;
      max-height: 0 !important;
      transform: translateY(-10px) scale(0.95) !important;
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
      display: flex !important;
    }

    /* -- Activity Overview Table -- */
    /* The Activity Log is a list inside the Run Analysis card: rows with dividers,
       no box of its own (audit V1-05, V1-13). */
    .activity-overview-section {
      margin-top: var(--ri-space-6, 24px);
      padding: 0;
      border-radius: 0;
      background: none;
      border: 0;
      box-shadow: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.16s ease-out, transform 0.16s ease-out;
    }
    .activity-overview-section.ao-section-visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Results fade in where they stand (no slide; audit MOT-03, MOT-04). */
    @keyframes profileResultsBriefReveal {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .profile-results-brief-reveal {
      animation: profileResultsBriefReveal 360ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
    }
    .post-processing-overview-card-prepare {
      opacity: 0;
    }
    @keyframes postProcessingOverviewCardReveal {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .post-processing-overview-card-reveal {
      animation: postProcessingOverviewCardReveal 360ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
    }
    .activity-overview-section-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-regular, 400);
      line-height: var(--ri-leading-caption);
      letter-spacing: 0;
      text-transform: none;
      color: var(--ri-text-faint, rgba(255,255,255,0.62));
      margin-bottom: var(--ri-space-2, 8px);
    }
    .activity-overview-wrap {
      position: relative;
      max-height: 280px;
      overflow-x: hidden;
      overflow-y: auto;
      transition: box-shadow 0.18s ease;
      overscroll-behavior-y: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(46, 209, 244, 0.3) transparent;
    }
    .activity-overview-wrap.ao-fade-bottom {
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
    }
    .activity-overview-wrap.ao-fade-bottom.ao-at-bottom {
      -webkit-mask-image: none;
      mask-image: none;
    }
    .activity-overview-wrap::-webkit-scrollbar { width: 5px; }
    .activity-overview-wrap::-webkit-scrollbar-track { background: transparent; }
    .activity-overview-wrap::-webkit-scrollbar-thumb { background: rgba(46, 209, 244, 0.25); border-radius: 3px; }
    .activity-overview-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
    }
    .activity-overview-table thead {
      position: relative;
      z-index: 90;
    }
    .activity-overview-table thead tr {
      position: relative;
      z-index: 90;
      background: transparent;
    }
    /* Header row: caps labels over a divider. It stays on top while the rows
       scroll, on the card's own (opaque) tone. */
    .activity-overview-table thead tr th {
      position: sticky;
      top: 0;
      z-index: 90;
      text-align: left;
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-regular, 400);
      text-transform: none;
      letter-spacing: 0;
      color: var(--ri-text-faint, rgba(255,255,255,0.62));
      padding: 8px 10px;
      background: rgb(14, 12, 30);
      border-bottom: 1px solid var(--ri-border-subtle, rgba(255,255,255,0.08));
      white-space: nowrap;
    }
    .activity-overview-table thead tr th .ao-head-chip {
      display: inline;
      line-height: 1;
    }
    /* Rows: 12 px vertical padding and a divider; numbers in tabular figures. */
    .activity-overview-table td {
      font-size: var(--ri-text-secondary);
      color: var(--ri-text-muted, rgba(255,255,255,0.74));
      padding: 10px 10px;
      white-space: nowrap;
      border-top: 1px solid var(--ri-border-subtle, rgba(255,255,255,0.08));
      overflow: hidden;
      text-overflow: ellipsis;
      font-variant-numeric: var(--ri-numeric, tabular-nums);
    }
    /* The run date is link text to its run analysis (not a bordered chip). */
    .ao-date-button {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      max-width: 100%;
      min-height: 0;
      padding: 2px 0;
      border: 0;
      border-radius: 4px;
      background: none;
      color: var(--ri-text-strong, rgba(255,255,255,0.96));
      font: inherit;
      font-size: var(--ri-text-secondary);
      line-height: 1.3;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: none;
      transition: color var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease);
    }
    .ao-date-button:hover {
      color: #fff;
    }
    .ao-date-button:focus-visible {
      outline: 2px solid var(--ri-cyan, #2ED1F4);
      outline-offset: 2px;
    }
    .ao-date-button-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ao-date-button-icon {
      width: 12px;
      height: 12px;
      flex: 0 0 auto;
      opacity: .72;
      transition: transform var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease), opacity var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease);
    }
    .ao-date-button:hover .ao-date-button-icon,
    .ao-date-button:focus-visible .ao-date-button-icon {
      opacity: 1;
      transform: translate(2px, -2px);
    }
    .activity-overview-table td.ao-col-device {
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
    }
    .activity-overview-table td.ao-col-drift,
    .activity-overview-table td.ao-col-category,
    .activity-overview-table td.ao-col-shoe {
      text-overflow: clip;
      overflow: visible;
    }
    .activity-overview-table tbody {
      position: relative;
      z-index: 1;
    }
    .activity-overview-table tbody tr {
      position: relative;
      z-index: 1;
    }
    .activity-overview-table tbody tr:hover,
    .activity-overview-table tbody tr:focus-within {
      z-index: 40;
    }
    .activity-overview-table td.ao-col-drift {
      position: relative;
      z-index: 6;
    }
    .activity-overview-table tbody tr:hover td.ao-col-drift,
    .activity-overview-table tbody tr:focus-within td.ao-col-drift {
      z-index: 50;
    }
    /* Category and an assigned shoe are plain text in the activity log, like the
       other cells (owner 2026-10-05); Sync shoe and Confirm stay buttons. */
    .ao-category-text { color: inherit; white-space: nowrap; }
    .activity-shoe-name { min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
    .ao-category-cell {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      max-width: 100%;
    }
    .activity-overview-table tr:first-child td { border-top: none; }
    .activity-overview-table tr.ao-row-qualifying td { color: rgba(255,255,255,0.88); }
    .activity-overview-table tr.ao-row-discard td,
    .activity-overview-table tr.ao-row-other td { color: var(--ri-text-faint, rgba(255,255,255,0.62)); }
    .ao-pill {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 5px;
      font-size: var(--ri-text-pill);
      font-weight: 600;
      text-transform: capitalize;
      letter-spacing: 0.02em;
    }
    .ao-pill-daily   { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.15); }
    .ao-pill-tempo   { background: rgba(249,115,22,.12); color: #f97316; border: 1px solid rgba(249,115,22,.15); }
    .ao-pill-race    { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.15); }
    .ao-pill-longrun { background: rgba(46, 209, 244,.12); color: #2ED1F4; border: 1px solid rgba(46, 209, 244,.15); }
    .ao-pill-interval { background: rgba(234,179,8,.12); color: #eab308; border: 1px solid rgba(234,179,8,.15); }
    .ao-pill-discard { background: rgba(255,255,255,.05); color: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.06); }
    /* Freshness pills for activity feed */
    .ao-pill-fresh { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.2); }
    .ao-pill-moderate { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
    .ao-pill-fatigued { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.2); }
    .ao-drift-cell { display: flex; flex-direction: column; gap: 2px; font-size: var(--ri-text-label); }
    .ao-drift-primary { color: rgba(255,255,255,0.8); font-weight: 600; }
    .ao-drift-secondary { color: var(--ri-text-faint, rgba(255,255,255,0.62)); font-size: var(--ri-text-label); }
    .ao-drift-green { color: #34d399; font-weight: 600; }
    .ao-drift-yellow { color: #fbbf24; font-weight: 600; }
    .ao-drift-red { color: #f87171; font-weight: 600; }
    .ao-drift-neutral { color: var(--ri-text-faint, rgba(255,255,255,0.62)); font-weight: 600; }
    .ao-toggle-cell { text-align: center; vertical-align: middle; padding: 0 4px; }
    /* Phones: the on/off toggle keeps room from the table's right edge
       (owner 2026-10-06: "bit more spacing on the right of activity log"). */
    @media (max-width: 640px) {
      #activityOverviewContainer .activity-overview-table :is(td.ao-toggle-cell, th.ao-col-toggle, th:last-child) { padding-right: 12px !important; }
    }
    /* ao-run-toggle - see .rii-toggle + .rii-toggle-label--sm in dashboard-embed.css */
    .activity-overview-table tr.ao-excluded td:not(.ao-toggle-cell) { opacity: 0.32; }
    .activity-overview-table tr.ao-excluded td.ao-col-drift { opacity: 1; }
    .ao-form-th-wrap { display: inline-flex; align-items: center; gap: 4px; }
    .ao-form-info-icon {
      position: relative;
      color: rgba(255,255,255,0.35);
      font-size: var(--ri-text-micro);
      cursor: help;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      touch-action: manipulation;
      transition: color 0.15s ease;
    }
    .ao-form-info-icon:hover,
    .ao-form-info-icon:focus-visible,
    .ao-form-info-icon.ao-tooltip-active {
      color: rgba(255,255,255,0.72);
      outline: none;
    }
    .ao-form-info-icon::after { content: none; }
    .ao-floating-tooltip {
      position: fixed;
      left: 0;
      top: 0;
      max-width: min(280px, calc(100vw - 24px));
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--ri-surface-popover, var(--ri-surface-overlay, #120F22));
      border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2));
      box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
      color: rgba(255,255,255,0.86);
      font-size: var(--ri-text-tooltip);
      line-height: 1.45;
      text-align: left;
      white-space: pre-line;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
      z-index: 2147483647;
    }
    .ao-floating-tooltip.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    /* Drift pill tags */
    .ao-drift-cell { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 6px; font-size: var(--ri-text-label); position: relative; z-index: 1; isolation: isolate; }
    .ao-drift-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1px 6px;
      border-radius: 6px;
      font-weight: 600;
      border: 0.5px solid rgba(255,255,255,0.16);
      font-size: var(--ri-text-pill);
      line-height: 1.5;
      background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .ao-drift-tag.ao-drift-tag--icon { padding: 3px 5px; min-width: 22px; }
    .ao-drift-tag.ao-drift-tag--excluded {
      min-width: 58px;
      padding: 3px 9px;
      font-size: var(--ri-text-pill);
      text-transform: none;
    }
    .ao-drift-icon { width: 11px; height: 11px; display: block; color: currentColor; }
    .ao-drift-icon--gct {
      background-color: currentColor;
      -webkit-mask: url('/images/gct.svg') center / contain no-repeat;
      mask: url('/images/gct.svg') center / contain no-repeat;
    }
    .ao-drift-tag.ao-drift-green {
      color: #34d399;
      background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(255,255,255,0.02));
      border-color: rgba(52,211,153,0.30);
    }
    .ao-drift-tag.ao-drift-yellow {
      color: #fbbf24;
      background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(255,255,255,0.02));
      border-color: rgba(251,191,36,0.30);
    }
    .ao-drift-tag.ao-drift-red {
      color: #f87171;
      background: linear-gradient(135deg, rgba(248,113,113,0.10), rgba(255,255,255,0.02));
      border-color: rgba(248,113,113,0.30);
    }
    .ao-drift-tag.ao-drift-neutral {
      color: rgba(255,255,255,0.44);
      background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border-color: rgba(255,255,255,0.16);
    }
    .ao-drift-tag.ao-drift-blue {
      color: #60a5fa;
      background: linear-gradient(135deg, rgba(96,165,250,0.12), rgba(255,255,255,0.02));
      border-color: rgba(96,165,250,0.34);
    }
    .ao-drift-tag.ao-drift-orange {
      color: #fb923c;
      background: linear-gradient(135deg, rgba(251,146,60,0.12), rgba(255,255,255,0.02));
      border-color: rgba(251,146,60,0.34);
    }
    .ao-drift-tag.ao-drift-cyan {
      color: #2ED1F4;
      background: linear-gradient(135deg, rgba(46, 209, 244,0.12), rgba(255,255,255,0.02));
      border-color: rgba(46, 209, 244,0.34);
    }
    .ao-drift-tag.ao-drift-tag--conf {
      min-width: 22px;
      padding: 3px 5px;
    }
    .ao-drift-conf-symbol {
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-semibold);
      line-height: 1;
      letter-spacing: 0.01em;
    }
    /* The Relay spinner stands in for the chip's "+" at the symbol's own size
       (1em of the pill text), so a calculating chip is no bigger than its
       neighbours (owner 2026-10-09). min-* undo relay-loader.css's 16 px floor. */
    .ao-drift-loading-spinner {
      display: inline-block;
      width: 1em;
      height: 1em;
      min-width: 0;
      min-height: 0;
      border: 1.5px solid rgba(148,163,184,0.28);
      border-top-color: #2ED1F4;
      border-radius: 50%;
      animation: aoDriftLoadingSpin 0.72s linear infinite;
      box-sizing: border-box;
    }
    @keyframes aoDriftLoadingSpin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .profile-results-brief-reveal,
      .post-processing-overview-card-prepare,
      .post-processing-overview-card-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
      .activity-overview-section { transition: none !important; }
      .ao-drift-loading-spinner { animation: none !important; }
    }
    /* The Category tag is the shared .ri-tag (static/ui-components.css). */
    /* Report-style indicator hover + tooltip interaction */
    .metric-indicator-clickable {
      cursor: pointer;
      position: relative;
      display: inline-flex;
      align-items: center;
      transition: box-shadow 0.12s ease-in-out;
    }
    /* Extend hover hit-area so border hovers don't rapidly enter/leave while animating */
    .metric-indicator-clickable::after {
      content: '';
      position: absolute;
      inset: -9px -8px -10px -8px;
      z-index: 1;
      border-radius: 12px;
      background: transparent;
    }
    .metric-indicator-clickable:hover,
    .metric-indicator-clickable.tooltip-active {
      z-index: 60;
    }
    .metric-indicator-clickable:hover .metric-indicator-icon-wrap,
    .metric-indicator-clickable.tooltip-active .metric-indicator-icon-wrap {
      transform: translateY(-3px);
      box-shadow: 0 4px 16px -4px var(--glow-color-high);
      border-color: rgba(255, 255, 255, 0.4);
    }
    .metric-indicator-tooltip {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out, visibility 0.12s;
      z-index: 70;
      pointer-events: none;
      white-space: normal;
    }
    .metric-indicator-clickable:hover .metric-indicator-tooltip,
    .metric-indicator-clickable.tooltip-active .metric-indicator-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .activity-overview-wrap .metric-indicator-tooltip {
      display: none !important;
    }
    .ao-drift-floating-tooltip {
      position: fixed !important;
      left: 0;
      top: 0;
      bottom: auto;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      z-index: 2147483647;
      pointer-events: none;
      white-space: normal;
      transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out, visibility 0.12s;
    }
    .ao-drift-floating-tooltip.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .ao-drift-floating-tooltip.is-below .metric-indicator-tooltip-arrow {
      top: -6px;
      bottom: auto;
      transform: translateX(-50%) rotate(225deg);
    }
    .metric-indicator-tooltip-content {
      background: var(--ri-surface-popover, var(--ri-surface-overlay, #120F22));
      border-radius: 12px;
      padding: 10px 16px;
      box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      min-width: 230px;
      max-width: min(320px, calc(100vw - 24px));
      white-space: normal;
      border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2)) !important;
    }
    .metric-indicator-tooltip-arrow {
      position: absolute;
      bottom: -6px;
      left: 50%;
      width: 12px;
      height: 12px;
      background: var(--ri-surface-overlay, #120F22) !important;
      transform: translateX(-50%) rotate(45deg);
      border-radius: 2px;
      border-right: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2)) !important;
      border-bottom: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2)) !important;
    }
    .ao-drift-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      line-height: 1;
    }
    .ao-drift-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.03);
      transition: transform 0.12s ease-in-out, box-shadow 0.12s ease-in-out, border-color 0.12s ease-in-out, background-color 0.12s ease-in-out;
      --glow-color-low: rgba(148, 163, 184, 0.18);
      --glow-color-high: rgba(148, 163, 184, 0.35);
      will-change: transform;
    }
    .metric-indicator-clickable:hover .ao-drift-icon-wrap,
    .metric-indicator-clickable.tooltip-active .ao-drift-icon-wrap {
      z-index: 65;
    }
    .ao-drift-icon-wrap .ao-drift-tag {
      border: none;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      min-width: 22px;
    }
    .ao-drift-tooltip-title {
      color: rgba(255,255,255,0.6);
      font-size: var(--ri-text-tooltip);
      font-weight: 600;
    }
    .ao-drift-tooltip-pill {
      color: white;
      font-size: var(--ri-text-tooltip);
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 9999px;
    }
    .ao-drift-tooltip-content--compact {
      align-items: center;
      gap: 6px;
      min-width: auto;
      padding: 8px 12px;
    }
    .ao-drift-tooltip-content--compact .ao-drift-tooltip-pill {
      font-size: var(--ri-text-tooltip);
      letter-spacing: 0;
      text-transform: none;
    }
    .metric-indicator-tooltip-content .tooltip-tier {
      font-size: var(--ri-text-label) !important;
      line-height: var(--ri-leading-label) !important;
    }
    .drift-key-metric-card {
      background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 0.5px solid rgba(255,255,255,0.12) !important;
      box-shadow: 0 6px 24px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08);
      position: relative;
      z-index: 1;
      transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  background 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .drift-key-metric-card:hover {
      z-index: 1;
      transform: none;
      box-shadow: 0 6px 24px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .ao-conf-text {
      display: inline-block;
      font-weight: var(--ri-weight-semibold);
      font-size: var(--ri-text-label);
      line-height: 1;
      letter-spacing: 0.02em;
    }
    .ao-conf-text.ao-conf-high { color: #34d399; }
    .ao-conf-text.ao-conf-medium { color: #fbbf24; }
    .ao-conf-text.ao-conf-low { color: #f87171; }
    /* Loading skeleton for activity log */
    .ao-skeleton-row td { padding: 7px 8px; }
    /* Activity Log loading rows: the kit skeleton (.ri-skeleton) on a text-high bar. */
    .ao-skel { display: inline-block; height: 10px; border-radius: 4px; vertical-align: middle; }
    .ao-row-enter {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      will-change: opacity, transform;
    }
    .ao-row-enter.ao-row-enter-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .ao-pill-other   { background: rgba(255,255,255,.04); color: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.04); }
    /* Shoe assignment pills */
    .activity-overview-table td.ao-col-shoe {
      overflow: visible;
      position: relative;
      z-index: 62;
      isolation: isolate;
    }
    .activity-overview-table tbody tr:hover td.ao-col-shoe,
    .activity-overview-table tbody tr:focus-within td.ao-col-shoe {
      z-index: 68;
    }
    .activity-shoe-pill {
      display: inline-flex;
      align-items: center;
      flex: 0 1 auto;
      min-width: 0;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: var(--ri-text-pill);
      font-weight: 500;
      letter-spacing: 0.01em;
      white-space: normal;
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.55);
      border: 1px solid rgba(255,255,255,0.1);
      position: relative;
      z-index: 2;
      transform-origin: left center;
      isolation: isolate;
      backface-visibility: hidden;
      transition:
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.22s ease,
        color 0.22s ease;
      will-change: transform;
    }
    .activity-shoe-pill::before {
      content: '';
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: -13px;
      height: 16px;
      border-radius: 999px;
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.28) 0%, rgba(180,180,185,0.20) 30%, rgba(120,120,130,0.10) 54%, rgba(0,0,0,0) 80%);
      opacity: 0;
      filter: blur(12px);
      transform: scaleX(0.78);
      transition:
        opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 0;
      pointer-events: none;
    }
    .activity-shoe-pill::after {
      content: '';
      position: absolute;
      inset: -10px 0 -12px 0;
      border-radius: 999px;
      background: transparent;
      z-index: 0;
    }
    .activity-shoe-pill-label {
      display: block;
      min-width: 0;
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
      position: relative;
      z-index: 1;
      transition: opacity 0.24s ease, filter 0.28s ease;
    }
    .activity-shoe-pill.daily  { background: rgba(59,130,246,.12); color: #3b82f6; border-color: rgba(59,130,246,.18); }
    .activity-shoe-pill.tempo  { background: rgba(249,115,22,.12); color: #f97316; border-color: rgba(249,115,22,.18); }
    .activity-shoe-pill.race   { background: rgba(239,68,68,.12); color: #ef4444; border-color: rgba(239,68,68,.18); }
    .activity-shoe-pill.ao-shoe-tag {
      --ao-shoe-tone: 186, 197, 214;
        padding: 3px 10px;
        border-radius: 10px;
        font-size: inherit;
      font-weight: inherit;
        line-height: 1.2;
        background: linear-gradient(135deg, rgba(var(--ao-shoe-tone), 0.14), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
        color: inherit;
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
          inset 0 0 0 1px rgba(var(--ao-shoe-tone), 0.065);
      transform: none;
      transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }
    .activity-shoe-pill.ao-shoe-tag.daily {
      --ao-shoe-tone: 96, 165, 250;
        border-color: rgba(96,165,250,0.24);
        background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
    }
    .activity-shoe-pill.ao-shoe-tag.tempo {
      --ao-shoe-tone: 251, 146, 60;
        border-color: rgba(251,146,60,0.24);
        background: linear-gradient(135deg, rgba(251,146,60,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
    }
    .activity-shoe-pill.ao-shoe-tag.race {
      --ao-shoe-tone: 248, 113, 113;
        border-color: rgba(248,113,113,0.24);
        background: linear-gradient(135deg, rgba(248,113,113,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
      }
      .activity-shoe-pill.ao-shoe-tag.unconfirmed {
        --ao-shoe-tone: 148, 163, 184;
        border-color: rgba(148,163,184,0.24);
        background: linear-gradient(135deg, rgba(148,163,184,0.14), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
    }
    .activity-shoe-pill.ao-shoe-tag::before {
        display: none;
    }
    .activity-shoe-pill.ao-shoe-tag::after {
      display: none;
    }
    .activity-shoe-pill.ao-shoe-tag .activity-shoe-pill-label {
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
    }
    .activity-shoe-pill.activity-shoe-pill-strava-sync {
      gap: 6px;
      padding: 3px 10px;
      color: rgba(255,255,255,0.92);
      background: linear-gradient(135deg, rgba(252,76,2,0.14), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
      border-color: rgba(252,76,2,0.24);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 0 0 1px rgba(252,76,2,0.07);
      text-decoration: none;
      cursor: pointer;
    }
    .activity-shoe-pill.ao-shoe-tag.activity-shoe-pill-strava-sync {
      padding-left: 10px;
    }
    .activity-shoe-pill.ao-shoe-tag.activity-shoe-pill-strava-sync::before {
      display: none;
    }
    .activity-shoe-pill.activity-shoe-pill-strava-sync .activity-shoe-pill-label {
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      color: inherit;
    }
    .activity-shoe-pill-strava-sync-icon {
      width: 12px;
      height: 12px;
      flex: 0 0 12px;
      fill: currentColor;
      filter: drop-shadow(0 0 10px rgba(252,76,2,0.22));
    }
    .activity-shoe-pill.activity-shoe-pill-strava-sync .activity-shoe-pill-strava-sync-icon {
      color: #fc4c02;
    }
    .activity-shoe-pill.activity-shoe-pill-syncing {
      cursor: wait;
      pointer-events: none;
    }
    .activity-shoe-sync-dots {
      display: inline-flex;
      align-items: flex-end;
      justify-content: flex-start;
      width: 12px;
      margin-left: 1px;
    }
    .activity-shoe-sync-dots > span {
      opacity: 0.25;
      animation: activityShoeSyncDot 0.9s ease-in-out infinite;
    }
    .activity-shoe-sync-dots > span:nth-child(2) { animation-delay: 0.12s; }
    .activity-shoe-sync-dots > span:nth-child(3) { animation-delay: 0.24s; }
    @keyframes activityShoeSyncDot {
      0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
      30% { opacity: 1; transform: translateY(-2px); }
    }
    .activity-shoe-pill.activity-shoe-pill-synced-enter {
      animation: activityShoeSyncedEnter 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes activityShoeSyncedEnter {
      0% { opacity: 0; transform: translateY(3px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .activity-shoe-sync-dots > span,
      .activity-shoe-pill.activity-shoe-pill-synced-enter {
        animation: none !important;
      }
    }
    .activity-shoe-pill.activity-shoe-pill-confirm {
      gap: 6px;
      padding: 3px 10px;
      color: rgba(236,253,245,0.96);
      background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(255,255,255,0.032) 44%, rgba(7,15,28,0.9));
      border-color: rgba(34,197,94,0.38);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 0 0 1px rgba(34,197,94,0.1),
        0 0 18px rgba(34,197,94,0.08);
      text-decoration: none;
      cursor: pointer;
    }
    .activity-shoe-pill.activity-shoe-pill-confirm .activity-shoe-pill-strava-sync-icon {
      color: #22c55e;
      filter: drop-shadow(0 0 10px rgba(34,197,94,0.26));
    }
    .activity-overview-table th.ao-col-shoe {
      overflow: visible;
    }
    .ao-shoe-header-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-width: 0;
      white-space: nowrap;
    }
    .ao-shoe-header-help {
      flex: 0 0 auto;
      margin-left: 1px;
      vertical-align: middle;
    }
    .ao-shoe-header-help .section-tooltip-btn {
      --help-tooltip-button-size: 18px;
      --help-tooltip-icon-size: 16px;
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
    }
    /* Right-aligned so it stays in the table; its tip (20 px in from the
       panel's corner, help-tooltips.css) lands under the 18 px "?". */
    .ao-shoe-header-help .section-tooltip {
      left: auto;
      right: -12px;
      text-transform: none;
      white-space: normal;
    }
    .activity-shoe-cell {
      --shoe-hover-extend: 74px;
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      width: 100%;
      position: relative;
      overflow: visible;
      isolation: isolate;
    }
    .activity-shoe-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      flex-shrink: 0;
      position: relative;
      z-index: 3;
      pointer-events: auto;
    }
    @media (hover: hover) and (pointer: fine) {
      .activity-shoe-pill:hover,
      .activity-shoe-pill:focus-visible {
        transform: translate3d(0, -5px, 0);
        color: rgba(255,255,255,0.96);
        border-color: rgba(255,255,255,0.16);
        box-shadow:
          0 14px 28px rgba(15, 23, 42, 0.26),
          0 6px 14px rgba(100, 100, 110, 0.20),
          0 0 0 1px rgba(255,255,255,0.03);
      }
      .activity-shoe-pill:hover::before,
      .activity-shoe-pill:focus-visible::before {
        opacity: 1;
        transform: scaleX(1.08);
      }
      .activity-shoe-pill:hover .activity-shoe-pill-label,
      .activity-shoe-pill:focus-visible .activity-shoe-pill-label {
        opacity: 1;
        filter: none;
      }
      .activity-shoe-pill:hover ~ .activity-shoe-actions,
      .activity-shoe-pill:focus-visible ~ .activity-shoe-actions {
        filter: blur(2px);
        opacity: 0.4;
        transition: filter 0.22s ease, opacity 0.22s ease;
      }
      .activity-shoe-pill.ao-shoe-tag:hover,
      .activity-shoe-pill.ao-shoe-tag:focus-visible {
        transform: none;
        color: inherit;
        border-color: rgba(var(--ao-shoe-tone), 0.34);
        background: linear-gradient(135deg, rgba(var(--ao-shoe-tone), 0.2), rgba(255,255,255,0.03) 44%, rgba(10,18,32,0.92));
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.05),
          0 10px 20px rgba(0,0,0,0.16);
      }
      .activity-shoe-pill.ao-shoe-tag:hover::before,
      .activity-shoe-pill.ao-shoe-tag:focus-visible::before {
        display: none;
      }
      .activity-shoe-pill.ao-shoe-tag:hover ~ .activity-shoe-actions,
      .activity-shoe-pill.ao-shoe-tag:focus-visible ~ .activity-shoe-actions {
        filter: none;
        opacity: 1;
      }
      .activity-shoe-pill.ao-shoe-tag.activity-shoe-pill-strava-sync:hover,
      .activity-shoe-pill.ao-shoe-tag.activity-shoe-pill-strava-sync:focus-visible {
        transform: none;
        color: rgba(255,255,255,0.96);
        border-color: rgba(252,76,2,0.34);
        background: linear-gradient(135deg, rgba(252,76,2,0.2), rgba(255,255,255,0.03) 44%, rgba(10,18,32,0.92));
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.05),
          0 10px 20px rgba(0,0,0,0.16);
      }
    }
    /* The shoe column wears the shared tag (owner 2026-10-04, "D1+D3 glow"):
       a round 24 px pill, white Light 13 px, a dark wash and a full 1 px edge
       of the tone with a soft inner glow; hover deepens the glow, nothing
       lifts. Tone: the shoe's purpose (slate when none), Strava orange to
       sync, green to confirm. The repeated class outranks the older
       per-state rules above. */
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag { --ao-shoe-tone: 100, 116, 139; }
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag.daily { --ao-shoe-tone: 96, 165, 250; }
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag.tempo { --ao-shoe-tone: 251, 146, 60; }
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag.race { --ao-shoe-tone: 248, 113, 113; }
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag.unconfirmed { --ao-shoe-tone: 148, 163, 184; }
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag.activity-shoe-pill-strava-sync { --ao-shoe-tone: 252, 76, 2; }
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag.activity-shoe-pill-confirm { --ao-shoe-tone: 34, 197, 94; }
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag,
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag:hover,
    .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag:focus-visible {
      box-sizing: border-box;
      min-height: 24px;
      padding: 3px 10px;
      border: 1px solid rgb(var(--ao-shoe-tone));
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(var(--ao-shoe-tone), 0.18), rgba(255, 255, 255, 0.028) 44%, rgba(7, 15, 28, 0.86));
      box-shadow: inset 0 0 10px rgba(var(--ao-shoe-tone), 0.28), 0 0 10px rgba(var(--ao-shoe-tone), 0.24), 0 2px 6px rgba(0, 0, 0, 0.4);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      color: rgba(255, 255, 255, 0.92);
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-light, 300);
      line-height: 16px;
      letter-spacing: 0;
      transform: none;
      transition: box-shadow 0.18s ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag:hover,
      .activity-shoe-pill.ao-shoe-tag.ao-shoe-tag.ao-shoe-tag:focus-visible {
        box-shadow: inset 0 0 14px rgba(var(--ao-shoe-tone), 0.45), 0 0 12px rgba(var(--ao-shoe-tone), 0.32), 0 2px 6px rgba(0, 0, 0, 0.4);
      }
    }
    @keyframes asme-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes asme-modal-in { from { opacity: 0; transform: scale(0.95) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes asme-spin { to { transform: rotate(360deg); } }
    @keyframes asme-success-pop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
    .activity-shoe-editor-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(1, 4, 18, 0.8);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      z-index: 2147483647;
    }
    .activity-shoe-editor-backdrop.active {
      display: flex;
      animation: asme-backdrop-in 0.22s ease;
    }
    .activity-shoe-editor-modal {
      position: relative;
      width: min(100%, 480px);
      border-radius: 22px;
      border: 1px solid rgba(46,209,244,0.15);
      background: linear-gradient(160deg, rgba(10, 18, 40, 0.98) 0%, rgba(15, 25, 55, 0.97) 100%);
      box-shadow: 0 24px 72px rgba(0,0,0,0.55), 0 0 48px rgba(46,209,244,0.06), inset 0 1px 0 rgba(255,255,255,0.06);
      padding: 28px;
      animation: asme-modal-in 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .activity-shoe-editor-loading-overlay {
      display: none;
      position: absolute;
      inset: 0;
      border-radius: 22px;
      background: rgba(10,18,40,0.82);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      z-index: 10;
    }
    .activity-shoe-editor-loading-overlay.visible {
      display: flex;
    }
    .asme-spinner {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2.5px solid rgba(46,209,244,0.18);
      border-top-color: #2ed1f4;
      animation: asme-spin 0.75s linear infinite;
    }
    .asme-spinner-sm {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.2);
      border-top-color: white;
      animation: asme-spin 0.65s linear infinite;
      vertical-align: middle;
      margin-right: 6px;
    }
    .asme-spinner-sm--danger {
      border-color: rgba(254, 202, 202, 0.2);
      border-top-color: #f87171;
    }
    .asme-loading-text {
      font-size: var(--ri-text-label);
      color: rgba(46,209,244,0.65);
    }
    .activity-shoe-editor-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }
    /* Look: the shared .ri-btn--close (ui-components.css, owner 2026-10-06/09); only its place here. */
    .activity-shoe-editor-close {
      flex-shrink: 0;
      transition: all 0.18s ease;
    }
    .activity-shoe-editor-meta {
      color: rgba(255,255,255,0.5);
      font-size: var(--ri-text-caption);
      margin-top: 4px;
      letter-spacing: 0.01em;
    }
    .activity-shoe-editor-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    /* "Edit run": the run type sits above the shoe, as on Garmin (#gpActivityRunTypeSection). */
    #activityRunTypeSection {
      margin-bottom: 20px;
    }
    .activity-shoe-editor-label {
      display: block;
      color: rgba(255,255,255,0.5);
      font-size: var(--ri-text-caption) !important;
      font-weight: var(--ri-weight-semibold);
      margin-bottom: 10px;
    }
    .activity-shoe-editor-select {
      width: 100%;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: white;
      padding: 12px 14px;
      font-size: var(--ri-text-input) !important;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
      cursor: pointer;
    }
    .activity-shoe-editor-select:focus {
      outline: none;
      border-color: rgba(46,209,244,0.55);
      box-shadow: 0 0 0 3px rgba(46,209,244,0.1);
    }
    .activity-shoe-editor-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }
    .activity-shoe-editor-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: 1;
      min-width: 120px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 11px;
      padding: 11px 28px;
      font-size: var(--ri-text-button);
      font-weight: 400;
      letter-spacing: 0.01em;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .activity-shoe-editor-btn.primary {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.88);
      font-weight: 400;
      box-shadow: none;
    }
    .activity-shoe-editor-btn.primary:hover:not(:disabled) {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.3);
      box-shadow: none;
      transform: translateY(-1px);
    }
    .activity-shoe-editor-btn.ghost {
      background: transparent;
      border-color: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.55);
    }
    .activity-shoe-editor-btn.ghost:hover:not(:disabled) {
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.8);
      transform: translateY(-1px);
    }
    .activity-shoe-editor-btn.ghost.destructive {
      background: rgba(248,113,113,0.03);
      border-color: rgba(248,113,113,0.18);
      color: rgba(254, 202, 202, 0.82);
    }
    .activity-shoe-editor-btn.ghost.destructive:hover:not(:disabled) {
      background: rgba(248,113,113,0.08);
      border-color: rgba(248,113,113,0.32);
      color: #fecaca;
      box-shadow: 0 8px 24px rgba(127, 29, 29, 0.14);
      transform: translateY(-1px);
    }
    .activity-shoe-editor-btn.is-busy-remove {
      background: linear-gradient(180deg, rgba(248,113,113,0.18), rgba(127,29,29,0.16));
      border-color: rgba(248,113,113,0.44);
      color: #fee2e2;
      box-shadow: 0 0 0 1px rgba(248,113,113,0.08) inset, 0 10px 28px rgba(127,29,29,0.18);
    }
    .activity-shoe-editor-btn.is-busy-remove:disabled {
      opacity: 0.88;
    }
    .activity-shoe-editor-btn:disabled {
      opacity: 0.45;
      cursor: default;
      transform: none !important;
    }
    /* Edit run dialog actions (owner 2026-10-05, BIO-2): the app's dialog row, as
       .ri-dialog-actions: [Remove shoe] [Save] on the right with the shared danger and
       primary buttons at the same size; on phones full width, Save on top. */
    #gpActivityShoeEditorBackdrop .activity-shoe-editor-actions,
    #activityShoeEditorBackdrop .activity-shoe-editor-actions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--ri-space-2, 8px);
      margin-top: 20px;
    }
    .activity-shoe-editor-action.ri-btn {
      flex: 0 0 auto;
      min-width: 0;
    }
    @media (max-width: 640px) {
      #gpActivityShoeEditorBackdrop .activity-shoe-editor-actions,
      #activityShoeEditorBackdrop .activity-shoe-editor-actions {
        flex-direction: column-reverse;
      }
      .activity-shoe-editor-action.ri-btn {
        width: 100%;
      }
    }
    .activity-shoe-editor-hint {
      color: rgba(255,255,255,0.38);
      font-size: var(--ri-text-secondary);
      margin-top: 14px;
      line-height: var(--ri-leading-secondary);
    }
    .activity-shoe-editor-hint a {
      color: rgba(46,209,244,0.7);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .activity-shoe-editor-hint a:hover {
      color: #2ed1f4;
    }
    .activity-shoe-editor-message {
      display: none;
      margin-top: 14px;
      padding: 10px 14px;
      border-radius: 11px;
      font-size: var(--ri-text-body);
      line-height: var(--ri-leading-body);
    }
    .activity-shoe-editor-message.show {
      display: block;
      animation: asme-success-pop 0.3s ease;
    }
    .activity-shoe-editor-message.error {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.2);
      color: #fca5a5;
    }
    .activity-shoe-editor-message.success {
      background: rgba(46,209,244,0.07);
      border: 1px solid rgba(46,209,244,0.22);
      color: #2ED1F4;
    }
    .ao-new-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 13px;
      height: 13px;
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-semibold);
      line-height: 1;
      padding: 0 3px;
      border-radius: 999px;
      background: rgba(34, 197, 94, 0.15);
      color: #34d399;
      border: 1px solid rgba(34, 197, 94, 0.2);
      vertical-align: middle;
      flex-shrink: 0;
      overflow: visible;
    }
    .ao-reason {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.3);
      font-style: italic;
      white-space: normal;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ao-device-cell {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: var(--ri-text-caption);
      color: rgba(255,255,255,0.6);
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      max-width: none;
    }
    .ao-device-manual {
      color: rgba(255,255,255,0.5);
      font-style: italic;
    }
    .ao-device-cell .garmin-tag-logo { height: 12px; }
    @media (max-width: 639px) {
      .activity-overview-wrap {
        max-height: 280px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: contain;
        touch-action: pan-x pan-y;
      }
      .activity-overview-table th,
      .activity-overview-table td { padding: 5px 6px; }
      .ao-pill { padding: 1px 5px; }
      .ao-new-badge { min-width: 12px; height: 12px; padding: 0 2px; }
      .ao-col-dist, .ao-col-pace, .ao-col-device { display: none; }
      /* Collapse hidden col elements so remaining columns get full width */
      col.ao-col-dist, col.ao-col-pace, col.ao-col-device { visibility: collapse; width: 0 !important; }
    }
    @media (max-width: 430px) {
      .activity-overview-table th,
      .activity-overview-table td { padding: 4px 5px; }
      .ao-pill { padding: 1px 4px; }
    }

    /* -- Rep Runs placeholder -- */
    .rep-runs-placeholder {
      text-align: center;
      padding: 14px 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .rep-runs-placeholder-title {
      color: rgba(255,255,255,0.82);
      font-weight: 600;
      font-size: var(--ri-text-subtitle);
      margin-bottom: 7px;
      letter-spacing: 0.01em;
    }
    .rep-runs-placeholder-text {
      color: rgba(255,255,255,0.56);
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
      max-width: 540px;
      margin: 0 auto;
    }
    /* -- Bucket Stats Cards -- */
    .bucket-card {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
      border-radius: 0.5rem; /* Matches .tier-showcase-card border-radius */
      /* Base styles from .tier-showcase-card */
      background: #001018; /* var(--color-dark, #001018) */
      /* Removed glass/backdrop filter to make it solid and consistent */
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);

      cursor: pointer;
      transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  background 0.4s ease;
      flex: 1;
      min-width: 0;
      opacity: 0;
      transform: translateY(16px);
    }
    .bucket-card.bucket-visible { opacity: 1; transform: translateY(0); transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

    /* The Blur/Glow Container - Replicating .metric-card-blur */
    .bucket-card .bucket-blur-container {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    /* The Glow Image inside */
    .bucket-card .bucket-blur-container img {
      width: 100%;
      max-width: none;
      height: 180%;
      object-fit: cover;
      object-position: center bottom;
      pointer-events: none;
      display: block;
      /* Reverting to match .tier-showcase-card exactly */
      opacity: 0.25;
      filter: blur(32px) saturate(1.45) brightness(1.07);
      transform: translateY(22%) scale(1.22);
      mix-blend-mode: screen;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Daily (Blue) */
    .bucket-card[data-shoe-type="daily"] .bucket-blur-container img {
      /* Dark Blue: hue-rotate to blue, significantly lower brightness to combat screen blend mode lightness */
      filter: blur(32px) saturate(1.6) brightness(0.65) hue-rotate(55deg);
    }
    .bucket-card[data-shoe-type="daily"]:hover .bucket-blur-container img,
    .bucket-card[data-shoe-type="daily"].selected .bucket-blur-container img {
      opacity: 0.95; /* Intense glow on select/hover */
    }

    /* Tempo (Orange) */
    .bucket-card[data-shoe-type="tempo"] .bucket-blur-container img {
      /* Ensure vibrant orange */
      filter: blur(32px) saturate(1.8) brightness(1.1);
    }
    .bucket-card[data-shoe-type="tempo"]:hover .bucket-blur-container img,
    .bucket-card[data-shoe-type="tempo"].selected .bucket-blur-container img {
      opacity: 0.95;
    }

    /* Race (Red) */
    .bucket-card[data-shoe-type="race"] .bucket-blur-container img {
      filter: blur(32px) saturate(1.45) brightness(1.07);
    }
    .bucket-card[data-shoe-type="race"]:hover .bucket-blur-container img,
    .bucket-card[data-shoe-type="race"].selected .bucket-blur-container img {
      opacity: 0.95;
    }

    /* Content z-index fix */
    .bucket-card > * { position: relative; z-index: 1; }
    /* But background blur is z-index 0, so content needs explicit z-index 1, and blur needed inside. */

    /* Daily (Blue/Cyan) -> Blue */
    .bucket-card[data-shoe-type="daily"] { border-color: rgba(59, 130, 246, 0.4); }
    .bucket-card[data-shoe-type="daily"]:hover,
    .bucket-card[data-shoe-type="daily"].selected {
      border-color: rgba(59, 130, 246, 0.8);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    /* Tempo (Orange) */
    .bucket-card[data-shoe-type="tempo"] { border-color: rgba(249, 115, 22, 0.4); }
    .bucket-card[data-shoe-type="tempo"]:hover,
    .bucket-card[data-shoe-type="tempo"].selected {
      border-color: rgba(249, 115, 22, 0.8);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    /* Race (Red) */
    .bucket-card[data-shoe-type="race"] { border-color: rgba(239, 68, 68, 0.4); }
    .bucket-card[data-shoe-type="race"]:hover,
    .bucket-card[data-shoe-type="race"].selected {
      border-color: rgba(239, 68, 68, 0.8);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    /* Long Run (Emerald) */
    .bucket-card[data-shoe-type="long_run"] { border-color: rgba(16, 185, 129, 0.4); }
    .bucket-card[data-shoe-type="long_run"]:hover,
    .bucket-card[data-shoe-type="long_run"].selected {
      border-color: rgba(16, 185, 129, 0.8);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }
    .bucket-card[data-shoe-type="long_run"] .bucket-blur-container img {
      filter: blur(32px) saturate(1.6) brightness(0.85) hue-rotate(120deg);
    }
    .bucket-card[data-shoe-type="long_run"]:hover .bucket-blur-container img,
    .bucket-card[data-shoe-type="long_run"].selected .bucket-blur-container img {
      opacity: 0.95;
    }

    /* Child elements */
    .bucket-card .bucket-label { font-size: var(--ri-text-subtitle); font-weight: var(--ri-weight-semibold); color: white; margin-bottom: 4px; letter-spacing: -0.01em; }
    .bucket-card .bucket-price { font-size: var(--ri-text-secondary); font-weight: var(--ri-weight-semibold); margin-bottom: 16px; }
    .bucket-card[data-shoe-type="daily"] .bucket-price { color: #3b82f6; }
    .bucket-card[data-shoe-type="tempo"] .bucket-price { color: #f97316; }
    .bucket-card[data-shoe-type="race"] .bucket-price { color: #ef4444; }
    .bucket-card[data-shoe-type="long_run"] .bucket-price { color: #10b981; }
    .bucket-card .bucket-stat { display: flex; justify-content: space-between; font-size: var(--ri-text-metric-sm); color: rgba(255,255,255,0.6); padding: 4px 0; }
    .bucket-card .bucket-stat .stat-val { color: white; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
    .bucket-card .stat-delta { font-size: var(--ri-text-micro); font-weight: 600; padding: 1px 5px; border-radius: 6px; line-height: var(--ri-leading-micro); }
    .bucket-card .stat-delta.delta-positive { color: #34d399; background: rgba(16, 185, 129, 0.12); }
    .bucket-card .stat-delta.delta-negative { color: #f87171; background: rgba(248, 113, 113, 0.12); }
    .bucket-card .stat-delta.delta-neutral { color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); }
    .bucket-card .bucket-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); margin: 12px 0; }
    .bucket-card .bucket-rep-run { font-size: var(--ri-text-label); color: rgba(255,255,255,0.6); margin-top: 12px; background: #001018; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); box-shadow: none; }
    .bucket-rep-run .rep-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-height: 16px; line-height: 1.2; overflow: hidden; }
    .bucket-rep-run .rep-row .rep-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bucket-rep-run .rep-row-device .rep-device { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bucket-rep-run .rep-dot { color: rgba(255,255,255,0.2); font-size: var(--ri-text-label); }
    .bucket-rep-run .rep-device { color: rgba(255,255,255,0.45); }
    .garmin-tag-logo { height: 14px; width: auto; display: inline-block; vertical-align: middle; margin-right: 3px; margin-top: -1px; }
    .rep-device .garmin-tag-logo { height: 13px; }
    /* Rep-label matches type color */
    .bucket-card[data-shoe-type="daily"] .bucket-rep-run .rep-label { color: rgba(59, 130, 246, 0.8); font-weight: var(--ri-weight-regular, 400); margin-bottom: 6px; text-transform: none; letter-spacing: 0; font-size: var(--ri-text-caption); }
    .bucket-card[data-shoe-type="tempo"] .bucket-rep-run .rep-label { color: rgba(249, 115, 22, 0.8); font-weight: var(--ri-weight-regular, 400); margin-bottom: 6px; text-transform: none; letter-spacing: 0; font-size: var(--ri-text-caption); }
    .bucket-card[data-shoe-type="race"] .bucket-rep-run .rep-label { color: rgba(239, 68, 68, 0.8); font-weight: var(--ri-weight-regular, 400); margin-bottom: 6px; text-transform: none; letter-spacing: 0; font-size: var(--ri-text-caption); }
    .bucket-card[data-shoe-type="long_run"] .bucket-rep-run .rep-label { color: rgba(16, 185, 129, 0.8); font-weight: var(--ri-weight-regular, 400); margin-bottom: 6px; text-transform: none; letter-spacing: 0; font-size: var(--ri-text-caption); }
    .bucket-card .bucket-no-data { text-align: center; padding: 12px 0; color: rgba(255,255,255,0.35); font-size: var(--ri-text-caption); }
    /* Route map - fades seamlessly into card background */
    .bucket-route-map {
      width: calc(100% + 2.5rem); height: 200px; border-radius: 0; margin-top: 12px;
      margin-left: -1.25rem;
      margin-right: -1.25rem;
      margin-bottom: -1.25rem;
      overflow: hidden; position: relative; z-index: 1;
      background: transparent;
      /* Keep only a top fade; no oval clipping */
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.65) 18%, black 34%, black 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.65) 18%, black 34%, black 100%);
      opacity: 0;
      transform: translateY(6px) scale(0.985);
      transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .bucket-route-map.map-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .bucket-route-map .leaflet-container { background: transparent !important; }
    .bucket-route-map .leaflet-tile-pane { opacity: 0.55; mix-blend-mode: screen; transition: opacity 0.45s ease; }

    /* Ensure content is above map */
    .bucket-card .bucket-label,
    .bucket-card .bucket-price,
    .bucket-card .bucket-stat,
    .bucket-card .bucket-divider,
    .bucket-card .bucket-rep-run {
      position: relative;
      z-index: 2;
    }

    /* Adjust rep run container */
    .bucket-card .bucket-rep-run {
      background: #001018;
      /* No massive margin bottom needed */
    }
    .bucket-card .bucket-checkmark {
      position: absolute; top: 12px; right: 12px;
      width: 24px; height: 24px; border-radius: 50%;
      display: none; align-items: center; justify-content: center;
      font-size: var(--ri-text-secondary); color: white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      border: 1px solid rgba(255,255,255,0.2);
    }
    .bucket-card.selected .bucket-checkmark { display: flex; }
    .bucket-card[data-shoe-type="daily"].selected .bucket-checkmark { background: rgba(59, 130, 246, 0.8); border-color: rgba(59, 130, 246, 1); }
    .bucket-card[data-shoe-type="tempo"].selected .bucket-checkmark { background: rgba(249, 115, 22, 0.8); border-color: rgba(249, 115, 22, 1); }
    .bucket-card[data-shoe-type="race"].selected .bucket-checkmark { background: rgba(239, 68, 68, 0.8); border-color: rgba(239, 68, 68, 1); }
    .bucket-card[data-shoe-type="long_run"].selected .bucket-checkmark { background: rgba(16, 185, 129, 0.8); border-color: rgba(16, 185, 129, 1); }

    /* -- Form Drift Profile Section -- */
    .drift-profile-section {
      margin-top: 2rem;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .drift-profile-section.drift-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .drift-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 1rem;
    }
    .drift-section-header h4 {
      color: white;
      font-size: var(--ri-text-subtitle);
      font-weight: 600;
      margin: 0;
    }
    .drift-section-header .drift-badge {
      font-size: var(--ri-text-pill);
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 6px;
      background: rgba(46, 209, 244, 0.12);
      color: #2ED1F4;
    }
    .drift-chart-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    @media (max-width: 768px) {
      .drift-chart-row { grid-template-columns: 1fr; }
    }
    .drift-chart-card {
      background:
        linear-gradient(135deg, rgba(46, 209, 244, 0.08), rgba(46, 209, 244, 0.03) 42%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(46, 209, 244, 0.14);
      border-radius: var(--ri-radius-md, 12px);
      padding: 18px;
      position: relative;
      box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    #biomechanicalProfileSection .drift-chart-card {
      background:
        linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.03) 42%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(148, 163, 184, 0.14);
    }
    #biomechanicalProfileSection .drift-chart-card.biomech-signature-card {
      background: none;
      border: none;
      box-shadow: none;
      padding-left: 0;
      padding-right: 0;
    }
    .drift-chart-card h5 {
      color: #ffffff !important;
      font-size: var(--ri-text-subtitle);
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      margin: 0 0 12px 0;
    }
    .drift-chart-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 12px 0;
      flex-wrap: wrap;
    }
    .frp-controls-grid {
      display: grid;
      grid-template-columns: max-content max-content minmax(118px, 1fr);
      gap: 0;
      align-items: flex-start;
      margin-bottom: 16px;
      background: none;
        border: 0;
        border-radius: 0;
        padding: 0;

    }
    .frp-control-group {
      min-width: 0;
      padding-right: 18px;
      margin-right: 18px;
      border-right: 1px solid rgba(255,255,255,0.07);
    }
    .frp-control-group--runs {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-self: start;
      text-align: left;
      padding-left: 18px;
      padding-right: 0;
      margin-right: 0;
      border-right: none;
      min-width: 0;
      max-width: 100%;
    }
    .frp-runs-summary {
      min-width: 0;
      max-width: 100%;
    }
    .frp-runs-summary .bio-cg-runs-sampled {
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.25;
    }
    .frp-control-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-regular, 400);
      line-height: var(--ri-leading-caption);
      text-transform: none;
        letter-spacing: 0;
        color: var(--ri-text-faint, rgba(255,255,255,0.62));
        margin-bottom: 8px;
      }
    .frp-button-row {

      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
    }
    .frp-bottom-grid {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .frp-secondary-card {
      flex: 1 1 320px;
      min-width: 280px;
      padding: 20px;
    }
    .frp-secondary-card--impact {
      flex-basis: 280px;
      min-width: 260px;
    }
    .frp-impact-content {
      display: flex;
      flex: 1;
    }
    #lpiImpactContent { display: flex; flex: 1; min-width: 0; }
    .frp-impact-metric {
      --frp-impact-accent: rgba(255,255,255,0.72);
      position: relative;
      overflow: hidden;
      flex: 1;
      min-width: 0;
      min-height: 160px;
      padding: 20px 16px;
      border-radius: var(--ri-radius-md, 12px);
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 16px;
      background: transparent;
      border: 1px solid transparent;
      isolation: isolate;
      box-shadow: 0 12px 24px rgba(0,0,0,0.16);
    }
    .frp-impact-metric::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, var(--frp-impact-accent) 28%, rgba(255,255,255,0.04) 58%, var(--frp-impact-accent) 82%, rgba(255,255,255,0.08) 100%);
      background-size: 180% 180%;
      opacity: 0.74;
      pointer-events: none;
    }
    .frp-impact-metric::after {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: calc(var(--ri-radius-md, 12px) - 1px);
      background: linear-gradient(180deg, rgba(8,14,25,0.96), rgba(5,10,18,0.9));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      pointer-events: none;
    }
    .frp-impact-metric > * {
      position: relative;
      z-index: 1;
    }
    .frp-impact-values {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      row-gap: 6px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    .frp-impact-number {
      display: inline-flex;
      align-items: center;
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .frp-impact-number--baseline {
      font-size: var(--ri-text-metric-lg);
      font-weight: 600;
      color: rgba(255,255,255,0.56);
    }
    .frp-impact-number--projected {
      font-size: var(--ri-text-metric-xl);
      font-weight: var(--ri-weight-semibold);
      color: var(--frp-impact-accent);
    }
    .frp-impact-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--ri-text-body);
      color: rgba(255,255,255,0.28);
      transform: translateY(1px);
    }
    .frp-impact-summary {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 0;
      width: 100%;
      text-align: center;
    }
    .frp-impact-shift-value {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--frp-impact-accent);
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      line-height: 1;
      letter-spacing: 0.01em;
      font-variant-numeric: tabular-nums;
    }
    .frp-impact-label {
      font-size: var(--ri-text-caption);
      font-weight: 600;
      color: rgba(255,255,255,0.58);
      line-height: var(--ri-leading-caption);
      letter-spacing: 0.01em;
      max-width: none;
      text-align: center;
    }
    .frp-spinner {
      width: 22px; height: 22px;
      border: 2px solid rgba(255,255,255,0.1);
      border-top-color: rgba(255,255,255,0.5);
      border-radius: 50%;
      animation: frpSpin 0.6s linear infinite;
    }
    @keyframes frpSpin { to { transform: rotate(360deg); } }
    .frp-value-fade-change {
      animation: frpValueFadeChange 260ms ease;
    }
    @keyframes frpValueFadeChange {
      0% { opacity: 1; }
      50% { opacity: 0.32; }
      100% { opacity: 1; }
    }
    @media (max-width: 640px) {
      .frp-impact-metric {
        min-height: 140px;
        gap: 12px;
        padding: 18px 10px;
      }

      .frp-impact-values {
        min-width: 100%;
        justify-content: center;
        gap: 7px;
      }



      .frp-impact-shift-value {
        min-height: 27px;
        padding: 0 9px;
      }

      .frp-impact-summary {
        width: 100%;
        align-items: center;
        text-align: center;
        gap: 5px;
      }

      .frp-impact-label {
        max-width: none;
      }
    }
    @media (min-width: 768px) and (max-width: 1194px) {
      #activityOverviewContainer .activity-overview-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
      }

      #activityOverviewContainer .activity-overview-table {
        table-layout: auto;
        min-width: clamp(680px, 84vw, 760px);
      }

      #envelopeControlsGrid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px 14px;
        padding: 14px 16px;
      }

      #envelopeControlsGrid .frp-control-group {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
      }

      #envelopeRunsControls {
        grid-column: 1 / -1;
        justify-self: stretch;
        align-items: stretch;
        padding-left: 0;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.07);
      }

      #envelopeMetricTabs,
      #envelopeAxisTabs,
      #envelopeFilterBar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        overflow: visible;
      }
    }
    @media (orientation: landscape) and (max-height: 600px) and (min-width: 641px) and (max-width: 1180px) {
      #activityOverviewContainer .activity-overview-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
      }

      #activityOverviewContainer .activity-overview-table {
        table-layout: auto;
        min-width: 1080px;
      }

      #activityOverviewContainer .activity-overview-table col:first-child {
        width: 112px !important;
      }

      #activityOverviewContainer col.ao-col-dist {
        width: 82px !important;
      }

      #activityOverviewContainer col.ao-col-pace {
        width: 76px !important;
      }

      #activityOverviewContainer col.ao-col-device {
        width: 124px !important;
      }

      #activityOverviewContainer col.ao-col-drift {
        width: 132px !important;
      }

      #activityOverviewContainer col.ao-col-category {
        width: 132px !important;
      }

      #activityOverviewContainer col.ao-col-shoe {
        width: 358px !important;
      }

      #activityOverviewContainer col.ao-col-toggle {
        width: 64px !important;
      }

      #activityOverviewContainer .activity-overview-table th.ao-col-device,
      #activityOverviewContainer .activity-overview-table td.ao-col-device {
        min-width: 124px;
      }

      #activityOverviewContainer .activity-overview-table th.ao-col-drift,
      #activityOverviewContainer .activity-overview-table td.ao-col-drift {
        min-width: 132px;
        width: 132px;
        padding-left: 10px !important;
        padding-right: 10px !important;
      }

      #activityOverviewContainer .ao-drift-cell {
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
        min-width: max-content;
      }

      #activityOverviewContainer .ao-drift-cell .ao-drift-indicator,
      #activityOverviewContainer .ao-drift-cell .ao-drift-tag--conf {
        flex: 0 0 auto;
      }

      #activityOverviewContainer .ao-drift-tag.ao-drift-tag--icon,
      #activityOverviewContainer .ao-drift-tag.ao-drift-tag--conf,
      #activityOverviewContainer .ao-drift-icon-wrap .ao-drift-tag {
        min-width: 24px;
        padding: 3px 5px;
      }

      #activityOverviewContainer .activity-overview-wrap .metric-indicator-clickable::after {
        inset: -6px -5px;
      }
    }
    @media (min-width: 641px) and (max-width: 980px) {
      #fatigueResilienceSection .frp-cg-wrap {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px 14px;
        padding: 14px 16px;
      }
      #fatigueResilienceSection .frp-cg-wrap .bio-cg-col {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
      }
      #fatigueResilienceSection .frp-cg-wrap .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }
    }
    .frp-explain-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 2px 0;
      color: rgba(255,255,255,0.38);
      font-size: var(--ri-text-secondary);
      transition: color 0.2s ease;
    }
    .frp-explain-toggle:hover,
    .frp-explain-toggle:focus-visible {
      color: rgba(255,255,255,0.6);
      outline: none;
    }
    .frp-explain-toggle-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      border-radius: 999px;
      border: 1px solid rgba(46, 209, 244, 0.22);
      background: linear-gradient(180deg, rgba(46, 209, 244, 0.14) 0%, rgba(9, 16, 31, 0.92) 100%);
      box-shadow: 0 4px 10px rgba(3, 10, 24, 0.25);
      color: rgba(186, 245, 255, 0.92);
      flex-shrink: 0;
    }
    .frp-explain-toggle-icon svg {
      width: 0.7rem !important;
      height: 0.7rem !important;
      color: currentColor;
      filter: none;
    }
    .frp-explain-toggle-chevron {
      flex-shrink: 0;
    }
    .drift-chart-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      margin-left: auto;
    }
    .drift-chart-toolbar > div:first-child {
      min-width: 0;
      max-width: 100%;
    }
    .drift-chart-toolbar h5 {
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .drift-chart-hint {
      font-size: var(--ri-text-caption);
      color: rgba(255,255,255,0.45);
    }
    .drift-timeline-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .drift-timeline-head {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-width: 100%;
    }
    .drift-timeline-head .drift-chart-hint {
      margin-top: 0 !important;
      line-height: 1.45;
      max-width: 95%;
    }
    .drift-timeline-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .drift-effort-toggle {
      display: inline-flex;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
      font-size: var(--ri-text-pill);
      flex-shrink: 0;
    }
    .drift-effort-toggle .load-type-btn {
      padding: 3px 10px;
      background: transparent;
      color: rgba(255,255,255,0.4);
      border: none;
      cursor: pointer;
      font-size: var(--ri-text-pill);
      font-weight: 600;
    }
    .drift-effort-toggle .load-type-btn + .load-type-btn {
      border-left: 1px solid rgba(255,255,255,0.1);
    }
    .drift-timeline-toolbar .drift-filter-bar {
      margin-left: 0;
      flex-wrap: wrap;
    }
    .drift-timeline-card .drift-response-strip {
      margin-top: 0;
    }
    .drift-timeline-card .drift-chart-container {
      margin-top: 2px;
    }
    @media (max-width: 980px) {
      .drift-timeline-head .drift-chart-hint {
        max-width: 100%;
      }
      .drift-timeline-toolbar {
        align-items: flex-start;
      }
    }
    .drift-response-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }
    /* Trend notes: the shared tag (.ri-tag), wrapping when the note is long. */
    .ri-tag.drift-response-pill { height: auto; min-height: 24px; white-space: normal; }
    .drift-response-pill strong { color: #fff; font-weight: 400; }
    /* Faint default gradient border for all toolbar buttons */
    /* Active (click): colored text + stronger border */
    /* -- Drift window adjustment controls -- */
    .drift-window-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin: 0;
      flex-wrap: wrap;
    }
    .dw-nudge-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .dw-nudge-label {
      font-size: var(--ri-text-micro);
      font-weight: 600;
      color: rgba(255,255,255,0.35);
      padding-right: 2px;
      line-height: var(--ri-leading-micro);
    }
    .dw-view-wrap {
      display: none;
      align-items: center;
      gap: 4px;
    }
    .dw-view-label {
      font-size: var(--ri-text-micro);
      font-weight: 600;
      color: rgba(255,255,255,0.35);
      padding-right: 2px;
      line-height: var(--ri-leading-micro);
      white-space: nowrap;
    }
    /* -- Reset-windows dropdown -- */
    .dw-reset-wrap {
      position: relative;
      display: inline-block;
    }
    .dw-reset-trigger {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .dw-reset-caret {
      font-size: var(--ri-text-label);
      opacity: 0.7;
      pointer-events: none;
    }
    .dw-reset-menu {
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      background: linear-gradient(180deg, rgba(17, 32, 48, 0.98), rgba(12, 22, 36, 0.98));
      border: 1px solid rgba(46,209,244,0.24);
      border-radius: 8px;
      padding: 4px;
      min-width: 150px;
      z-index: 9999;
      box-shadow: 0 10px 24px rgba(0,0,0,0.34), 0 0 0 1px rgba(46,209,244,0.08);
    }
    .dw-reset-item {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      color: rgba(255,255,255,0.9);
      font-size: var(--ri-text-secondary);
      font-weight: 400;
      padding: 6px 10px;
      border-radius: 5px;
      cursor: pointer;
      letter-spacing: normal;
      transition: background 0.14s ease;
    }
    .dw-reset-item:hover {
      background: rgba(46,209,244,0.14);
      color: rgba(255,255,255,0.96);
    }
    .dw-reset-item--saved:disabled,
    .dw-reset-item--saved[disabled] {
      color: rgba(255,255,255,0.35);
      cursor: default;
      pointer-events: none;
    }
    .drift-window-save-btn {
      -webkit-appearance: none;
      appearance: none;
      --btn-color-rgb: 52,211,153;
      --dw-save-status-size: 12px;
      --dw-save-status-offset: 8px;
      --dw-save-status-balance: 0px;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-width: 0;
      padding: 4px 10px;
      box-sizing: border-box;
    }
    @media (min-width: 641px) {
      .drift-window-save-btn {
        min-width: 110px;
        min-height: 28px;
        padding: 6px 14px;
      }
    }
    .drift-window-save-btn .dw-save-a11y {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .drift-window-save-btn .dw-save-content {
      display: grid;
      grid-template-columns: var(--dw-save-status-balance) minmax(0, auto) var(--dw-save-status-balance);
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      pointer-events: none;
    }
    .drift-window-save-btn .dw-save-label-shell {
      grid-column: 2;
      position: relative;
      display: inline-grid;
      place-items: center;
      min-width: 0;
    }
    .drift-window-save-btn .dw-save-label-shell > * {
      grid-area: 1 / 1;
    }
    .drift-window-save-btn .dw-save-label-sizer,
    .drift-window-save-btn .dw-save-label {
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      white-space: nowrap;
    }
    .drift-window-save-btn .dw-save-label-sizer {
      visibility: hidden;
      pointer-events: none;
    }
    .drift-window-save-btn .dw-save-label-track {
      display: grid;
      place-items: center;
    }
    .drift-window-save-btn .dw-save-label-track > * {
      grid-area: 1 / 1;
    }
    .drift-window-save-btn .dw-save-label--save {
      opacity: 1;
      transform: translateX(0);
    }
    .drift-window-save-btn .dw-save-label--saved {
      opacity: 0;
      transform: translateX(2px);
    }
    .drift-window-save-btn .dw-save-status-layer {
      position: absolute;
      top: 50%;
      right: var(--dw-save-status-offset);
      width: var(--dw-save-status-size);
      height: var(--dw-save-status-size);
      transform: translateY(-50%);
      pointer-events: none;
      z-index: 1;
    }
    .drift-window-save-btn .dw-save-spinner,
    .drift-window-save-btn .dw-save-check,
    .drift-window-save-btn .dw-save-error {
      position: absolute;
      inset: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
    }
    .drift-window-save-btn .dw-save-spinner {
      transition: opacity 160ms ease;
    }
    .drift-window-save-btn .dw-save-spinner-ring {
      box-sizing: border-box;
      width: 11px;
      height: 11px;
      border: 1.5px solid rgba(52,211,153,0.16);
      border-top-color: #34d399;
      border-right-color: rgba(255,255,255,0.82);
      border-radius: 50%;
      animation: spin 0.72s linear infinite;
      display: block;
      transform-origin: center;
    }
    .drift-window-save-btn .dw-save-check,
    .drift-window-save-btn .dw-save-error {
      transform: scale(0.82);
    }
    .drift-window-save-btn .dw-save-check svg,
    .drift-window-save-btn .dw-save-error svg {
      width: 12px;
      height: 12px;
      display: block;
    }
    .drift-window-save-btn.is-animating .dw-save-label,
    .drift-window-save-btn.is-animating .dw-save-check,
    .drift-window-save-btn.is-animating .dw-save-error {
      transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .drift-window-save-btn[data-save-state="saving"] .dw-save-spinner {
      opacity: 1;
    }
    .drift-window-save-btn[data-save-state="saved"] .dw-save-label--save {
      opacity: 0;
      transform: translateX(5px);
    }
    .drift-window-save-btn[data-save-state="saved"] .dw-save-label--saved {
      opacity: 1;
      transform: translateX(-4px);
    }
    .drift-window-save-btn[data-save-state="saved"] .dw-save-check,
    .drift-window-save-btn[data-save-state="error"] .dw-save-error {
      opacity: 1;
      transform: scale(1);
    }
    /* Counter flip animation for drift metric updates */
    @keyframes diCounterFlip {
      0%   { transform: translateY(0);   opacity: 1; }
      40%  { transform: translateY(-8px); opacity: 0; }
      60%  { transform: translateY(8px);  opacity: 0; }
      100% { transform: translateY(0);   opacity: 1; }
    }
    .di-val-flip {
      display: inline-block;
      animation: diCounterFlip 0.32s ease-in-out;
    }
    .di-hero-sublabel.di-val-flip,
    .di-hero-meta.di-val-flip {
      display: block;
    }
    @keyframes diChartMetricPulse {
      0%   { opacity: 0.74; filter: saturate(0.82); }
      100% { opacity: 1;    filter: saturate(1); }
    }
    .drift-chart-container.di-chart-metric-animating canvas {
      animation: diChartMetricPulse 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .drift-chart-container {
      position: relative;
      width: 100%;
      height: 280px;
    }
    @media (max-width: 640px) {
      .drift-chart-container { height: 220px; }
    }
    .mobile-chart-scroll {
      position: relative;
    }
    .mobile-chart-stage {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .drift-chart-container canvas:where(:not(#driftInspectorPaceGctChart)) {
      width: 100% !important;
      height: 100% !important;
    }
    .mobile-chart-stage canvas {
      display: block;
    }
    .mobile-chart-stage canvas:where(:not(#driftInspectorPaceGctChart)) {
      width: 100% !important;
      height: 100% !important;
    }
    /* The Drift Inspector chart keeps the exact size Chart.js gives it (a whole number of
       device pixels, the same as its bitmap). Stretched to a fractional 100%, Chrome
       resamples the bitmap and its thin lines go soft (owner 2026-10-07, "so unsharp"). */
    #driftInspectorPaceGctChart {
      display: block;
      max-width: 100%;
    }
    .chart-mobile-landscape {
      --chart-mobile-aspect-ratio: 1.72;
      --chart-mobile-min-height: 176px;
      --chart-mobile-max-height: 210px;
    }
    .chart-mobile-landscape--inspector {
      --chart-mobile-aspect-ratio: 1.56;
      --chart-mobile-min-height: 188px;
      --chart-mobile-max-height: 226px;
    }
    .chart-mobile-landscape--elevation {
      --chart-mobile-aspect-ratio: 2.3;
      --chart-mobile-min-height: 136px;
      --chart-mobile-max-height: 168px;
    }
    @media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
      .chart-mobile-landscape {
        --chart-mobile-landscape-height: clamp(190px, 58vh, 260px);
      }
      .chart-mobile-landscape--inspector {
        --chart-mobile-landscape-height: clamp(204px, 64vh, 282px);
      }
      .chart-mobile-landscape--elevation {
        --chart-mobile-landscape-height: clamp(142px, 42vh, 188px);
      }
      html .drift-chart-container.chart-mobile-landscape {
        height: var(--chart-mobile-landscape-height, 240px) !important;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
      }
      html .mobile-chart-scroll.chart-mobile-landscape {
        overflow-x: hidden;
        padding-bottom: 0;
      }
      html .mobile-chart-scroll.chart-mobile-landscape.is-zoomed {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
      }
      html .mobile-chart-scroll.chart-mobile-landscape.is-zoomed canvas {
        touch-action: pan-x pan-y;
      }
      html .chart-mobile-landscape .mobile-chart-stage,
      html .chart-mobile-landscape .mobile-chart-stage--bio,
      html .chart-mobile-landscape .mobile-chart-stage--envelope,
      html .chart-mobile-landscape .mobile-chart-stage--drift-main {
        min-width: 0;
        width: 100%;
        height: 100%;
      }
      .di-elev-gps-row {
        grid-template-columns: 1fr;
      }
    }
    /* Drift Inspector hover card (HTML, js driftInspectorHtmlTooltip): above the
       HR window overlay (z 3) and the canvas window guides, the popover look (surface, edge and corners as every hover card). */
    .di-chart-tooltip {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 8;
      pointer-events: none;
      opacity: 0;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2));
      background: var(--ri-surface-popover, #120F22);
      box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
      color: #fff;
      font-family: 'Noto Sans', system-ui, sans-serif;
      font-size: var(--ri-text-tooltip);
      line-height: 18px;
      white-space: nowrap;
      transition: opacity 0.12s ease;
    }
    .di-chart-tooltip.is-visible { opacity: 1; }
    .di-chart-tooltip-title {
      font-weight: var(--ri-weight-semibold);
      margin-bottom: 4px;
    }
    .di-chart-tooltip-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .di-chart-tooltip-swatch {
      flex: 0 0 auto;
      width: 10px;
      height: 10px;
      border-radius: 3px;
    }
    .drift-hr-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      overflow: hidden;
    }
    .drift-hr-window-fill {
      position: absolute;
      top: 0;
      bottom: 0;
      border-radius: 0;
      overflow: hidden;
      z-index: 0;
    }
    .drift-hr-window-fill::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,42,85,0.02) 0%, rgba(255,42,85,0.05) 44%, rgba(255,42,85,0.15) 100%);
    }
    .drift-hr-window-fill--fresh::before {
      background: linear-gradient(180deg, rgba(255,42,85,0.02) 0%, rgba(255,42,85,0.06) 42%, rgba(255,42,85,0.18) 100%);
    }
    .drift-hr-window-fill--end::before {
      background: linear-gradient(180deg, rgba(255,42,85,0.02) 0%, rgba(255,42,85,0.06) 40%, rgba(255,42,85,0.22) 100%);
    }
    .drift-hr-window-accent {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(
          180deg,
          rgba(255,42,85,0.00) 0%,
          rgba(255,42,85,0.00) 46%,
          rgba(255,42,85,0.06) 52%,
          rgba(255,42,85,0.18) 58%,
          rgba(255,42,85,0.36) 66%,
          rgba(255,42,85,0.62) 74%,
          rgba(255,42,85,0.95) 100%
        ) left top / 2px 100% no-repeat,
        linear-gradient(
          180deg,
          rgba(255,42,85,0.00) 0%,
          rgba(255,42,85,0.00) 46%,
          rgba(255,42,85,0.06) 52%,
          rgba(255,42,85,0.18) 58%,
          rgba(255,42,85,0.36) 66%,
          rgba(255,42,85,0.62) 74%,
          rgba(255,42,85,0.95) 100%
        ) right top / 2px 100% no-repeat,
        linear-gradient(90deg, rgba(255,42,85,0.98) 0%, rgba(255,42,85,0.98) 100%) bottom left / 100% 2px no-repeat;
      box-shadow: 0 0 12px rgba(255,42,85,0.24);
    }
    .drift-hr-window-fill--end .drift-hr-window-accent {
      background:
        linear-gradient(
          180deg,
          rgba(255,42,85,0.00) 0%,
          rgba(255,42,85,0.00) 46%,
          rgba(255,42,85,0.07) 52%,
          rgba(255,42,85,0.20) 58%,
          rgba(255,42,85,0.40) 66%,
          rgba(255,42,85,0.66) 74%,
          rgba(255,42,85,0.96) 100%
        ) left top / 2px 100% no-repeat,
        linear-gradient(
          180deg,
          rgba(255,42,85,0.00) 0%,
          rgba(255,42,85,0.00) 46%,
          rgba(255,42,85,0.07) 52%,
          rgba(255,42,85,0.20) 58%,
          rgba(255,42,85,0.40) 66%,
          rgba(255,42,85,0.66) 74%,
          rgba(255,42,85,0.96) 100%
        ) right top / 2px 100% no-repeat,
        linear-gradient(90deg, rgba(255,42,85,0.99) 0%, rgba(255,42,85,0.99) 100%) bottom left / 100% 2px no-repeat;
      box-shadow: 0 0 12px rgba(255,42,85,0.28);
    }
    .drift-hr-window-tag {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transform: translate(-100%, -100%);
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-semibold);
      white-space: nowrap;
      text-shadow: 0 0 10px rgba(0,0,0,0.4);
      z-index: 1;
    }
    .drift-hr-window-tag--fresh {
      color: #ff2a55;
    }
    .drift-hr-window-tag--end {
      color: #ff2a55;
    }
    .drift-hr-window-tag--compact .drift-hr-window-text {
      display: none;
    }
    .drift-hr-window-tag--icon-only .drift-hr-window-text {
      display: none;
    }
    .drift-hr-window-heart {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 0.82rem;
      height: 0.82rem;
      flex: 0 0 0.82rem;
      line-height: 1;
      color: #ef4444;
      filter: drop-shadow(0 0 10px rgba(239,68,68,0.35));
      transform-origin: center;
      animation: driftHrBeat var(--beat-duration, 0.48s) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
      animation-delay: var(--beat-delay, 0s);
    }
    .drift-hr-window-heart svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .drift-hr-window-text {
      color: inherit;
    }
    @keyframes driftHrBeat {
      0%, 100% { transform: scale(1); }
      15% { transform: scale(1.18); }
      28% { transform: scale(0.94); }
      42% { transform: scale(1.08); }
      58% { transform: scale(0.98); }
    }
    .drift-legend {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .drift-legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.5);
    }
    .drift-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    /* -- Drift Inspector Mobile Legend -- */
    .di-mobile-legend {
      display: none;
    }
    @media (max-width: 640px) {
      .di-mobile-legend {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 6px 8px 2px;
      }
    }
    .di-ml-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.45);
    }
    .di-ml-line {
      display: inline-block;
      width: 16px;
      height: 0;
    }
    .di-ml-line--dashed {
      border-top-style: dashed;
    }
    .drift-stat-pills {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    /* Counts under the chart: the shared tag (.ri-tag). */
    /* A long status message may wrap on a narrow screen instead of overflowing. */
    .drift-stat-pills .ri-tag { height: auto; min-height: 24px; white-space: normal; }

    /* -- Accuracy filter pills -- */
    .drift-filter-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }
    /* The pills themselves are shared select pills (.ri-btn--select). */
    /* Envelope controls: keep runs aligned/right and pills responsive */
    #envelopeRunsControls {
      gap: 0;
      min-width: 240px;
      align-self: stretch;
      justify-content: flex-start;
    }
    #envelopeRunsPillsRow .drift-filter-bar {
      margin-left: 0;
      justify-content: flex-end;
      flex-wrap: wrap;
      row-gap: 4px;
      max-width: 100%;
    }
    #frpControlsGrid #envelopeRunsPillsRow {
      min-height: 38px;
    }
    #frpControlsGrid #envelopeRunsPillsRow .drift-filter-bar {
      justify-content: flex-start;
    }
    @media (max-width: 1200px) {
      #envelopeRunsControls { min-width: 210px; }
    }

    /* -- Fatigue Resilience Profile ------------------------------------ */
    .resilience-summary-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }
    .resilience-summary-card {
      flex: 1 1 180px;
      min-width: 150px;
      padding: 16px 18px;
      border-radius: 14px;
      border: 1px solid rgba(46,209,244,0.18);
      background: rgba(46,209,244,0.05);
      transition: border-color 0.2s ease, background 0.2s ease;
      position: relative;
      overflow: visible;
    }
    .resilience-summary-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(46,209,244,0.35), transparent);
    }
    .resilience-summary-card .rsc-value {
      font-size: var(--ri-text-metric-lg);
      font-weight: var(--ri-weight-semibold);
      line-height: 1.1;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }
    .resilience-summary-card .rsc-value .rsc-value-tooltip-mobile {
      display: none;
      vertical-align: middle;
      margin-left: 6px;
    }
    .resilience-summary-card .rsc-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      margin-bottom: 6px;
    }
    .resilience-summary-card .rsc-sub {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.38);
      line-height: var(--ri-leading-label);
    }
    .resilience-summary-card .rsc-sub .rsc-sub-tooltip {
      display: inline-flex;
      vertical-align: middle;
      margin-left: 2px;
    }
    .resilience-summary-card .rsc-rate-tooltip {
      left: 50% !important;
      right: auto !important;
      transform: translate(-50%, 10px);
    }
    .resilience-summary-card .rsc-rate-tooltip::after {
      left: 50%;
      margin-left: -6px;
    }
    @media (min-width: 640px) {
      .resilience-summary-card .section-tooltip-trigger:hover .rsc-rate-tooltip {
        transform: translate(-50%, 0);
      }
    }
    .resilience-summary-card .section-tooltip-trigger.tooltip-active .rsc-rate-tooltip,
    .resilience-summary-card .rsc-rate-tooltip.tooltip-open {
      transform: translate(-50%, 0);
    }
    @media (max-width: 640px) {
      .resilience-summary-row {
        flex-wrap: nowrap;
        gap: 10px;
      }
      .resilience-summary-card {
        flex: 1 1 0;
        min-width: 0;
        padding: 14px 12px;
      }
      .resilience-summary-card .rsc-label {
        margin-bottom: 4px;
      }
      .resilience-summary-card .rsc-sub {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 14px;
        line-height: 1;
      }
      .resilience-summary-card .rsc-sub-copy {
        display: none;
      }
      .resilience-summary-card .rsc-sub .rsc-sub-tooltip {
        margin-left: 0;
      }
    }
    /* New-run banner below summary cards */
    .resilience-new-run-banner {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(46,209,244,0.04);
      border: 1px solid rgba(46,209,244,0.16);
      border-radius: 10px;
    }
    .resilience-new-run-label {
      font-size: var(--ri-text-label);
      font-weight: var(--ri-weight-semibold);
      color: rgba(46,209,244,0.6);
      white-space: nowrap;
      padding-top: 3px;
    }
    .resilience-new-run-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      background: rgba(46,209,244,0.07);
      border: 1px solid rgba(46,209,244,0.2);
      border-radius: 7px;
      font-size: var(--ri-text-pill);
    }
    /* Matrix */
    .resilience-matrix-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 4px;
      font-size: var(--ri-text-caption);
    }
    .resilience-matrix-table th {
      color: rgba(255,255,255,0.4);
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-regular, 400);
      text-transform: none;
      letter-spacing: 0;
      padding: 4px 8px;
      text-align: center;
    }
    .resilience-matrix-table .rmt-row-label {
      color: rgba(255,255,255,0.4);
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-regular, 400);
      text-transform: none;
      letter-spacing: 0;
      padding: 4px 8px 4px 0;
      white-space: nowrap;
    }
    /* Envelope metric / x-axis tabs: shared select pills (ui-components.css).
       The HR metric keeps its pink accent. */
    .env-tab-btn[data-metric="hr"] {
      --_sel-1: 244, 114, 182;
      --_sel-2: 244, 114, 182;
      --_sel-3: 236, 72, 153;
    }

    /* Fatigue envelope chart slide transitions when switching single metric */
    @keyframes envChartEnterGct {
      from { opacity: 0.4; transform: translateX(-14px); }
      to   { opacity: 1;   transform: translateX(0); }
    }
    @keyframes envChartEnterHr {
      from { opacity: 0.4; transform: translateX(14px); }
      to   { opacity: 1;   transform: translateX(0); }
    }
    .env-chart-entering-gct {
      animation: envChartEnterGct 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    .env-chart-entering-hr {
      animation: envChartEnterHr 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    /* Shoe use-case buttons: shared select pills (ui-components.css). A locked
       Pro distance reads dimmer. */
    .use-case-btn.is-pro-locked {
      opacity: 0.56;
    }
    .use-case-pro-label {
      margin-left: 1px;
      width: 19px;
      height: 5px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      overflow: hidden;
      line-height: 0;
    }
    .use-case-pro-label img {
      display: block;
      width: 21px;
      max-width: none;
      height: auto;
    }
    .shoe-use-case-entitlements {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: -6px;
    }
    .shoe-use-case-entitlement {
      min-width: 0;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.035);
    }
    .shoe-use-case-entitlement span {
      display: block;
      margin-bottom: 4px;
      font-size: var(--ri-text-micro);
      font-weight: var(--ri-weight-semibold);
      line-height: var(--ri-leading-micro);
    }
    .shoe-use-case-entitlement strong {
      display: block;
      margin-bottom: 3px;
      color: rgba(255,255,255,0.86);
      font-size: var(--ri-text-micro);
      line-height: var(--ri-leading-micro);
    }
    .shoe-use-case-entitlement small {
      display: block;
      color: rgba(255,255,255,0.42);
      font-size: var(--ri-text-label);
      line-height: var(--ri-leading-label);
    }
    .shoe-use-case-entitlement--free {
      border-color: rgba(46,209,244,0.14);
      background: rgba(46,209,244,0.045);
    }
    .shoe-use-case-entitlement--free span {
      color: rgba(46,209,244,0.72);
    }
    .shoe-use-case-entitlement--pro {
      border-color: rgba(248,113,113,0.18);
      background: rgba(248,113,113,0.045);
    }
    .shoe-use-case-entitlement--pro span {
      color: rgba(248,113,113,0.78);
    }
    /* Select run type: the card and the boxed Run-It Basic / Run-It Pro panels
       are back (owner 2026-10-05, "restore the old 'select run type' cards, just
       the cards"). The outer card is a .drift-chart-card like the Fatigue and
       Economy cards below it; the chips, title and labels stay today's. */
    .shoe-use-case-card {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      z-index: 20;
      overflow: visible;
      margin: 16px 0;
      padding: 20px;
    }
    .shoe-use-case-header {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .run-type-tooltip {
      background: linear-gradient(135deg, rgb(13, 20, 33), rgb(22, 30, 45)) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border-color: rgba(148, 163, 184, 0.32) !important;
      box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.78),
        0 0 0 1px rgba(46, 209, 244, 0.16),
        0 0 32px rgba(46, 209, 244, 0.12) !important;
      z-index: 2147483647 !important;
    }
    .run-type-tooltip::after {
      background: linear-gradient(135deg, rgb(13, 20, 33), rgb(22, 30, 45)) !important;
      border-color: rgba(148, 163, 184, 0.32) !important;
    }
    .shoe-use-case-tabs {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
      align-items: stretch;
      width: 100%;
      min-width: 0;
      gap: 12px;
    }
    .shoe-use-case-section {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 14px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    .shoe-use-case-section--pro {
      border-color: rgba(46, 209, 244, 0.22);
      background:
        radial-gradient(circle at 82% 0%, rgba(46, 209, 244, 0.09), transparent 46%),
        linear-gradient(145deg, rgba(46, 209, 244, 0.05), rgba(255, 255, 255, 0.02) 58%);
    }
    .shoe-use-case-section-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .shoe-use-case-section-title {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-regular, 400);
      line-height: var(--ri-leading-caption);
      letter-spacing: 0;
      text-transform: none;
      color: var(--ri-text-faint, rgba(255,255,255,0.62));
      white-space: nowrap;
    }
    .shoe-use-case-section-buttons {
      align-items: center;
    }
    @media (min-width: 900px) {
      .shoe-use-case-section { align-items: center; text-align: center; }
      .shoe-use-case-section-header { justify-content: center; width: 100%; }
      .shoe-use-case-section-buttons { justify-content: center; }
    }

    .rmt-cell {
      text-align: center;
      padding: 10px 8px;
      border-radius: 8px;
      cursor: default;
      font-weight: var(--ri-weight-semibold);
      font-size: var(--ri-text-caption);
      border: 1px solid rgba(255,255,255,0.08);
      transition: filter 0.2s ease, box-shadow 0.25s ease, opacity 0.22s ease, border-color 0.25s ease;
      min-width: 72px;
      line-height: var(--ri-leading-caption);
    }
    .rmt-cell:hover:not(.rmt-active):not(.rmt-dimmed) {
      filter: brightness(1.2);
      border-color: rgba(255,255,255,0.18);
    }
    .rmt-cell.rmt-dimmed {
      opacity: 0.32;
      filter: saturate(0.2) brightness(0.6);
    }
    /* Highlight colour and glow without resizing the table or moving nearby cards. */
    .rmt-cell.rmt-active {
      filter: brightness(1.09);
      border-color: color-mix(in srgb, var(--usecase-color, #2ED1F4) 80%, transparent) !important;
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--usecase-color, #2ED1F4) 80%, transparent),
        inset 0 0 20px color-mix(in srgb, var(--usecase-color, #2ED1F4) 11%, transparent),
        0 0 22px color-mix(in srgb, var(--usecase-color, #2ED1F4) 18%, transparent);
    }
    .rmt-cell.is-tooltip-open:not(.rmt-dimmed) {
      filter: brightness(1.12);
      border-color: rgba(46,209,244,0.24);
    }
    /* ------------------------------------------------------------------- */

    /* Section intro line under the card head (body secondary, faint). */
    .drift-shell-copy {
      color: var(--ri-text-faint, rgba(255,255,255,0.62));
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
      margin: 0 0 var(--ri-space-4, 16px) 0;
    }
    .drift-shell-copy strong {
      color: var(--ri-text-muted, rgba(255,255,255,0.74));
      font-weight: 500;
    }
    .drift-shell-score {
      display: none;
      margin-bottom: 16px;
      padding: 16px 20px;
      border-radius: 14px;
      background: linear-gradient(140deg, rgba(46, 209, 244,0.11), rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.01));
      border: 1px solid rgba(46, 209, 244,0.16);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .drift-no-data {
      text-align: center;
      padding: 32px 16px;
      color: rgba(255,255,255,0.35);
      font-size: var(--ri-text-secondary);
    }

    /* -- Biomechanical Profile - Key Metrics Cards -- */
    .bio-metrics-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(0.65rem, 1.8vw, 0.8rem);
      width: 100%;
      box-sizing: border-box;
      margin-top: 20px;
      align-items: stretch;
    }
    @media (min-width: 641px) {
      .bio-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .bio-metrics-grid .bio-metric-card {
        min-width: 0;
        min-height: 88px;
        padding: clamp(0.55rem, 0.7vw, 0.7rem);
      }
    }
    /* Seven cards in one row only where each keeps room for an 11 px status line
       and a 24 px value; from 1024 to 1179 px they sit in two rows of four. */
    @media (min-width: 1024px) {
      .bio-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .bio-metric-card[data-bio-metric="hr"] { grid-column: auto; }
    }
    @media (min-width: 1180px) {
      .bio-metrics-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    }
    @media (max-width: 1023px) {
      .bio-metric-card[data-bio-metric="hr"] { grid-column: 1 / -1; }
    }
    /* Phones show the short label (CAD); see "Compact phone signature" at the end. */
    .bio-card-label-compact {
      display: none;
    }
    .bio-metric-card--contextual { border-color: rgba(244,114,182,0.42) !important; }
    .bio-metric-card--contextual:hover,
    .bio-metric-card--contextual.bio-active { border-color: #F472B6 !important; }
    /* The compare row is cyan throughout, its HR card included (owner 2026-10-06). */
    .bio-metric-card--compare.bio-metric-card--contextual,
    .bio-metric-card--compare.bio-metric-card--contextual:hover,
    .bio-metric-card--compare.bio-metric-card--contextual.bio-active { border-color: rgba(var(--card-glow-rgb, 46,209,244), 0.3) !important; }
    .bio-card-context-icon { display:inline-flex; width:15px; height:15px; margin-right:5px; color:#F472B6; vertical-align:-2px; }
    .bio-card-context-icon svg { width:100%; height:100%; stroke:currentColor; }
    .bio-context-overview { display:grid; grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr)); gap:1rem; align-items:center; }
    .bio-context-overview__identity { display:flex; align-items:center; gap:0.8rem; }
    .bio-context-overview__icon { width:42px; height:42px; color:#F472B6; }
    .bio-context-overview__icon svg { width:100%; height:100%; stroke:currentColor; }
    .bio-context-overview__eyebrow { color:#F472B6; font-size: var(--ri-text-caption); font-weight: var(--ri-weight-semibold); }
    .bio-context-overview__value { padding:0.75rem; border:1px solid rgba(244,114,182,0.16); border-radius:0.85rem; background:rgba(244,114,182,0.035); }
    .bio-context-note { color:rgba(255,255,255,0.66); font-size: var(--ri-text-secondary); line-height: var(--ri-leading-secondary); }
    @media (max-width:640px) { .bio-context-overview { grid-template-columns:1fr; } }
    .bio-metrics-grid > .bio-explanation-container {
      grid-column: 1 / -1;
      width: 100%;
    }
    .bio-metric-card {
      container-type: inline-size;
      background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
      border: 0.5px solid rgba(var(--card-glow-rgb, 255,255,255), 0.3);
      border-radius: 0.75rem;
      padding: clamp(0.9rem, 2vw, 1rem);
      cursor: pointer;
      transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 0 0 0.5px rgba(var(--card-glow-rgb, 255,255,255), 0.1), 0 6px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      min-width: 0;
    }
    /* Keep the cards free of backdrop blur so hover does not repaint neighboring cards. */
    .bio-metric-card:hover {
      border-color: rgba(255,255,255,0.22);
      box-shadow: 0 0 0 0.5px rgba(var(--card-glow-rgb, 255,255,255), 0.22), 0 8px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    /* Hover matches Garmin's metric cards (lift + glow, below); no light sweep (owner 2026-10-20). */
    #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:focus-visible {
      outline: 2px solid rgba(var(--card-glow-rgb, 255,255,255), 0.8);
      outline-offset: 2px;
    }
    /* The light the blur let through, above phone widths (phones never had the blur). */
    @media (min-width: 641px) {
      .bio-metric-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(160deg, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0.022) 100%);
      }
      /* A selected card is a stacking layer of its own, so there the tint lies over its background. */
      .bio-metric-card.bio-active::before {
        background: linear-gradient(160deg, rgba(255,255,255,0.034) 0%, rgba(255,255,255,0.019) 100%);
      }
    }
    .bio-metric-card.bio-active {
      z-index: 10;
    }
    .bio-metrics-grid.has-active .bio-metric-card:not(.bio-active) {
      opacity: 0.35;
      filter: saturate(0.15) brightness(0.6);
    }
    .bio-metrics-grid.has-active .bio-metric-card.bio-active {
      opacity: 1;
      filter: saturate(0.92) brightness(0.99);
    }
    .bio-metrics-grid.has-active .bio-metric-card.bio-active:not(.bio-metric-card--compare) {
      border-color: rgba(var(--card-glow-rgb, 255,255,255), 0.5);
      border-width: 1.5px;
      box-shadow: 0 0 0 1px rgba(var(--card-glow-rgb, 255,255,255), 0.12),
                  0 10px 32px -8px rgba(var(--card-glow-rgb, 255,255,255), 0.24),
                  inset 0 1px 0 rgba(255,255,255,0.08);
      transform: translateY(-2px);
    }
    .bio-metrics-grid.has-active .bio-metric-card.bio-paired-active:not(.bio-active) {
      opacity: 0.74;
      filter: saturate(0.62) brightness(0.82);
      border-color: rgba(255,255,255,0.18);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 28px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    .bio-metric-card.bio-paired-active {
      z-index: 8;
    }
    @media (min-width: 641px) and (hover: hover) and (pointer: fine) {
      #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:not(.bio-metric-card--unavailable):hover {
        transform: translateY(-5px);
        z-index: 11;
        box-shadow: 0 0 0 1px rgba(var(--card-glow-rgb, 255,255,255), 0.24),
                    0 16px 34px rgba(0,0,0,0.3),
                    0 0 22px rgba(var(--card-glow-rgb, 255,255,255), 0.18),
                    inset 0 1px 0 rgba(255,255,255,0.1);
      }
    }
    .bio-metric-card--pro-locked {
      --card-glow-rgb: 46,209,244 !important;
      background: linear-gradient(160deg, rgba(148,163,184,0.07) 0%, rgba(15,23,42,0.72) 58%, rgba(8,19,32,0.78) 100%) !important;
      border-color: rgba(46,209,244,0.18) !important;
      box-shadow: 0 0 0 1px rgba(148,163,184,0.05), 0 8px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    }
    .bio-metrics-grid.has-active .bio-metric-card--pro-locked.bio-active:not(.bio-metric-card--compare) {
      border-color: rgba(46,209,244,0.24) !important;
      box-shadow: 0 0 0 1px rgba(46,209,244,0.1), 0 10px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    }
    .bio-metric-card--pro-locked .bio-card-accent {
      background: linear-gradient(90deg, rgba(148,163,184,0.24), rgba(46,209,244,0.34), rgba(148,163,184,0.18)) !important;
    }
    .bio-metric-card--pro-locked .bio-card-glow {
      background: radial-gradient(ellipse at 50% 100%, rgba(46,209,244,0.08) 0%, rgba(148,163,184,0.025) 52%, transparent 80%) !important;
    }
    .bio-metric-card--pro-locked .bio-card-badge,
    .bio-metric-card--pro-locked .bio-card-value {
      color: rgba(203,213,225,0.72) !important;
    }
    .bio-pro-card-overlay {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      border-radius: inherit;
      pointer-events: none;
      z-index: 4;
      overflow: hidden;
    }
    .bio-pro-card-overlay::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, rgba(3,7,18,0.76), rgba(3,7,18,0.5));
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
    .bio-pro-card-overlay img {
      position: relative;
      z-index: 1;
      width: min(78%, 112px);
      height: auto;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
    }
    .bio-metric-card--pro-locked .bio-pro-card-overlay {
      display: flex;
    }
    .bio-metric-card--pro-locked .bio-card-inner {
      filter: blur(3.5px);
      opacity: 0.34;
      transform: scale(0.98);
    }
    .bio-card-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      height: 100%;
      width: 100%;
      min-width: 0;
      gap: 0.15rem;
      position: relative;
      z-index: 2;
      transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
    }
    /* Metric card hierarchy (audit V1-08): status kicker (11 px caps, status
       colour), the metric's name (13 px muted), then the value as the largest
       text (24 px semibold, tabular) with its unit at 12 px. */
    .bio-card-inner h3 {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-body, 300);
      line-height: var(--ri-leading-caption);
      color: var(--ri-text-muted, rgba(255,255,255,0.74)) !important;
      margin-bottom: 2px;
      animation: none !important;
      transition: none !important;
      max-width: 100%;
    }
    .bio-card-inner p {
      font-size: var(--ri-text-metric-lg);
      line-height: var(--ri-leading-metric, 1.15);
      color: #fff;
      font-weight: 600;
      font-variant-numeric: var(--ri-numeric, tabular-nums);
      margin: 0;
    }
    .bio-card-inner .bio-card-unit {
      font-size: var(--ri-text-label);
      font-weight: 400;
      color: var(--ri-text-faint, rgba(255,255,255,0.62));
    }
    @keyframes bioValueFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0);  }
    }
    .bio-card-num {
      display: inline-block;
      animation: none !important;
      transition: color 0.35s ease;
    }
    .bio-card-badge {
      font-size: var(--ri-text-pill) !important;
      line-height: 14px;
      transition: color 0.35s ease, opacity 0.2s ease;
    }
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-card-badge,
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-card-value {
      color: rgb(var(--card-glow-rgb, 156,163,175)) !important;
    }
    .bio-card-accent {
      transition: background 0.35s ease, filter 0.3s ease;
    }
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-card-accent {
      background: rgba(var(--card-glow-rgb, 156,163,175), 0.38) !important;
    }
    .bio-card-glow {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 70%;
      pointer-events: none;
      border-radius: inherit;
      opacity: 0;
      transition: opacity 0.45s ease, background 0.45s ease;
    }
    .bio-card-glow.bio-glow-in {
      opacity: 1;
    }
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-card-glow {
      background: radial-gradient(ellipse at 50% 100%, rgba(var(--card-glow-rgb, 156,163,175), 0.11) 0%, rgba(var(--card-glow-rgb, 156,163,175), 0.025) 52%, transparent 80%) !important;
    }
    .bio-card-value {
      transition: color 0.35s ease;
    }
    .bio-expand-arrow {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-expand-arrow path {
      stroke: rgba(var(--card-glow-rgb, 156,163,175), 0.46) !important;
      transition: stroke 0.35s ease;
    }
    @media (prefers-reduced-motion: reduce) {
      #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:hover {
        transform: none !important;
      }
      .bio-metric-card,
      .bio-card-badge,
      .bio-card-value,
      .bio-card-accent,
      .bio-card-glow,
      .bio-metric-card::after,
      .bio-expand-arrow path {
        animation: none !important;
        transition: none !important;
      }
      #bioProfileMetricsGrid .bio-metric-card::after {
        display: none;
      }
    }
    /* -- Explanation panel -- */
    .bio-explanation-container {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out, margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .bio-explanation-container--anchored {
      width: 100%;
    }
    :is(#bioProfileMetricsGrid, #bioCompareMetricsGrid) > .bio-explanation-container {
      grid-column: 1 / -1;
    }
    .bio-explanation-box {
      --bio-accent: #94a3b8;
      --bio-accent-rgb: 148, 163, 184;
      position: relative;
      margin-top: 0.75rem;
      padding: 1.5rem 2rem;
      border-radius: 1rem;
      transform: translateY(-10px);
      opacity: 0;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      overflow: visible;
    }
    #bioExplTriangle {
      z-index: 6;
      pointer-events: none;
      transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      filter: drop-shadow(0 -1px 8px rgba(var(--bio-accent-rgb), 0.16));
    }
    .bio-expl-anim {
      animation: bioPanelRise 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .bio-expl-stack {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    /* Inner cards = the soft inner-glow tile (owner 2026-10-06: "the correct styling"): no border, tile fill, radius 12, --ri-shadow-panel. */
    .bio-expl-hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.9fr);
      gap: 1rem;
      align-items: stretch;
      padding: 1.1rem 1.15rem;
      border: 0;
      border-radius: var(--ri-radius-md, 12px);
      background: var(--ri-surface-tile, rgba(255, 255, 255, 0.04));
      box-shadow: var(--ri-shadow-panel, inset 0 0 0 1px rgba(46, 209, 244, 0.08), inset 0 0 14px rgba(46, 209, 244, 0.06));
      transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s ease, background 0.24s ease;
    }
    .bio-expl-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(var(--bio-accent-rgb), 0.78);
      margin-bottom: 0.65rem;
    }
    .bio-expl-kicker::before {
      content: '';
      width: 24px;
      height: 1px;
      background: rgba(var(--bio-accent-rgb), 0.44);
      box-shadow: 0 0 10px rgba(var(--bio-accent-rgb), 0.24);
    }
    .bio-expl-title {
      font-size: var(--ri-text-subtitle);
      font-weight: var(--ri-weight-semibold);
      color: #fff;
      margin: 0;
      padding: 0;
    }
    .bio-expl-title::after {
      display: none;
    }
    .bio-expl-pace-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      align-items: center;
      margin-top: 0.75rem;
    }
    .bio-expl-pace-pill,
    .bio-expl-pace-note {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      border-radius: 9999px;
      padding: 0.4rem 0.8rem;
      font-size: var(--ri-text-label);
      line-height: 1;
    }
    .bio-expl-pace-pill {
      color: #fff;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      font-weight: var(--ri-weight-semibold);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .bio-expl-pace-note {
      color: rgba(255,255,255,0.74);
      background: rgba(12, 17, 32, 0.34);
      border: 1px solid rgba(var(--bio-accent-rgb), 0.1);
      font-weight: 500;
    }
    .bio-expl-value-col {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 0.65rem;
      padding: 1rem;
      border: 0;
      border-radius: var(--ri-radius-md, 12px);
      background: var(--ri-surface-tile, rgba(255, 255, 255, 0.04));
      box-shadow: var(--ri-shadow-panel, inset 0 0 0 1px rgba(46, 209, 244, 0.08), inset 0 0 14px rgba(46, 209, 244, 0.06));
    }
    .bio-expl-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0.35rem 0.85rem;
      border-radius: 9999px;
      color: #fff;
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-semibold);
      white-space: nowrap;
    }
    .bio-expl-badge--pro-logo {
      min-width: 66px;
      min-height: 30px;
      padding: 0.3rem 0.78rem;
      border: 1px solid rgba(148,163,184,0.22);
      background: linear-gradient(180deg, rgba(148,163,184,0.12), rgba(15,23,42,0.3)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(2,6,23,0.24) !important;
      opacity: 0.7;
      line-height: 0;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      transition: opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }
    button.bio-expl-badge--pro-logo {
      font: inherit;
    }
    .bio-expl-badge--pro-logo:hover,
    .bio-expl-badge--pro-logo:focus-visible {
      opacity: 0.88;
      border-color: rgba(148,163,184,0.34);
      background: linear-gradient(180deg, rgba(148,163,184,0.16), rgba(15,23,42,0.36)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 22px rgba(2,6,23,0.28), 0 0 16px rgba(46,209,244,0.08) !important;
      transform: translateY(-1px);
    }
    .bio-expl-badge--pro-logo img {
      display: block;
      width: 48px;
      max-width: none;
      height: auto;
      transform: translateY(0.5px);
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)) drop-shadow(0 0 8px rgba(46,209,244,0.12));
    }
    .bio-expl-value-row {
      display: flex;
      align-items: flex-end;
      gap: 0.4rem;
      line-height: 0.9;
    }
    .bio-expl-value {
      font-size: var(--ri-text-metric-xl);
      font-weight: var(--ri-weight-semibold);
      color: #fff;
      letter-spacing: -0.04em;
    }
    .bio-expl-unit {
      font-size: var(--ri-text-label);
      font-weight: 600;
      color: rgba(255,255,255,0.72);
      padding-bottom: 0.22rem;
    }
    .bio-expl-delta {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.9);
    }
    .bio-expl-summary-card,
    .bio-expl-content {
      position: relative;
      border-radius: 1rem;
      overflow: hidden;
    }
    .bio-expl-summary-card {
      padding: 1rem 1.1rem;
      background: linear-gradient(145deg, rgba(var(--bio-overall-rgb), 0.075), rgba(255,255,255,0.04));
      border: 1px solid rgba(var(--bio-overall-rgb), 0.16);
      box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    }
    .bio-expl-summary-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .bio-expl-summary-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(var(--bio-overall-rgb), 0.9);
      margin-bottom: 0.45rem;
    }
    .bio-expl-summary-value {
      display: flex;
      align-items: baseline;
      gap: 0.55rem;
      flex-wrap: wrap;
    }
    .bio-expl-summary-value strong {
      font-size: var(--ri-text-metric-lg);
      line-height: 1;
      color: var(--bio-overall-accent);
    }
    .bio-expl-summary-value span,
    .bio-expl-summary-copy,
    .bio-expl-conf-meta {
      color: rgba(255,255,255,0.7);
    }
    .bio-expl-summary-copy {
      margin: 0.6rem 0 0;
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
    }
    .bio-expl-confidence {
      min-width: 210px;
      flex: 0 1 245px;
    }
    .bio-expl-conf-row,
    .bio-expl-conf-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .bio-expl-conf-row {
      margin-bottom: 0.45rem;
    }
    .bio-expl-conf-row span:first-child {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.72);
    }
    .bio-expl-conf-row strong {
      font-size: var(--ri-text-body);
      color: #fff;
    }
    .bio-expl-conf-bar {
      height: 10px;
      border-radius: 9999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
    }
    .bio-expl-conf-fill {
      position: relative;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(var(--bio-overall-rgb), 0.45), rgba(var(--bio-overall-rgb), 0.96));
      box-shadow: 0 0 18px rgba(var(--bio-overall-rgb), 0.35);
      overflow: hidden;
    }
    .bio-expl-conf-fill::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
      animation: bioShimmer 2.6s linear infinite;
    }
    .bio-expl-conf-meta {
      margin-top: 0.45rem;
      font-size: var(--ri-text-label);
    }
    /* -- Distribution bar chart -- */
    .bio-dist-bar {
      display: flex;
      height: 22px;
      border-radius: 7px;
      overflow: hidden;
      gap: 2px;
      margin: 0.6rem 0 0.55rem;
    }
    .bio-dist-seg {
      flex-shrink: 0;
      opacity: 0.32;
      transition: opacity 0.18s;
    }
    .bio-dist-winner {
      opacity: 1;
    }
    .bio-dist-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 1rem;
      margin-bottom: 0.55rem;
    }
    .bio-dist-leg-item {
      display: flex;
      align-items: center;
      gap: 0.38rem;
      font-size: var(--ri-text-label);
    }
    .bio-dist-leg-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
      opacity: 0.55;
    }
    .bio-dist-leg-winner .bio-dist-leg-dot {
      opacity: 1;
    }
    .bio-dist-leg-label {
      color: rgba(255,255,255,0.6);
      font-weight: 500;
    }
    .bio-dist-leg-winner .bio-dist-leg-label {
      font-weight: var(--ri-weight-semibold);
    }
    .bio-dist-leg-count {
      color: rgba(255,255,255,0.38);
    }
    .bio-dist-leg-winner .bio-dist-leg-count {
      color: rgba(255,255,255,0.6);
    }
    .bio-expl-content {
      padding: 1.1rem;
      border: 0;
      border-radius: var(--ri-radius-md, 12px);
      background: var(--ri-surface-tile, rgba(255, 255, 255, 0.04));
      box-shadow: var(--ri-shadow-panel, inset 0 0 0 1px rgba(46, 209, 244, 0.08), inset 0 0 14px rgba(46, 209, 244, 0.06));
      transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s ease, background 0.24s ease;
    }
    .bio-explanation-box.bio-switching .bio-expl-hero,
    .bio-explanation-box.bio-switching .bio-expl-content {
      opacity: 0.02;
      transform: translateY(10px) scale(0.995);
    }
    .bio-expl-desc {
      margin: 0 0 1rem;
      color: rgba(255,255,255,0.84);
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
    }
    .bio-expl-detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
      gap: 0.9rem;
      align-items: stretch;
    }
    .bio-expl-why-card,
    .bio-expl-factors-card {
      border-radius: var(--ri-radius-md, 12px);
      padding: 0.95rem 1rem;
      background: var(--ri-surface-tile, rgba(255, 255, 255, 0.04));
      border: 0;
      box-shadow: var(--ri-shadow-panel, inset 0 0 0 1px rgba(46, 209, 244, 0.08), inset 0 0 14px rgba(46, 209, 244, 0.06));
    }
    .bio-expl-why-card {
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
    }
    .bio-expl-icon-wrap {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      flex: 0 0 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bio-accent);
      background: linear-gradient(145deg, rgba(var(--bio-accent-rgb), 0.11), rgba(var(--bio-accent-rgb), 0.03));
      border: 1px solid rgba(var(--bio-accent-rgb), 0.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.16);
    }
    .bio-expl-icon-wrap svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
    }
    .bio-expl-mini-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-regular, 400);
      line-height: var(--ri-leading-caption);
      letter-spacing: 0;
      text-transform: none;
      color: rgba(var(--bio-accent-rgb), 0.72);
      margin-bottom: 0.35rem;
    }
    /* "Why this matters for shoe choice": production's strong caps label in the
       runner type's colour (owner review 2026-10-03), at the 12 px floor. */
    .bio-expl-mini-label.bio-sig-why-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-regular, 400);
      line-height: var(--ri-leading-caption);
      letter-spacing: 0;
      text-transform: none;
    }
    .bio-expl-mini-copy {
      margin: 0;
      color: rgba(255,255,255,0.84);
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
    }
    .bio-expl-factors-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.7rem;
    }
    /* Factors: the shared tag tinted with the metric accent. */
    .ri-tag.bio-expl-factor-pill { --tag-rgb: var(--bio-accent-rgb); height: auto; min-height: 24px; white-space: normal; }
    .bio-overview-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-column: 1 / -1;
      width: 100%;
      grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.15fr) minmax(260px, 0.8fr);
      gap: 1rem;
      align-items: stretch;
    }
    .bio-overview-meta-col {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 0.9rem;
      min-width: 0;
      padding: 0.1rem 0;
    }
    .bio-overview-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
      width: 100%;
      text-align: center;
    }
    .bio-overview-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
      width: 100%;
      min-width: 0;
    }
    .bio-overview-badge-row {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      flex-wrap: nowrap;
      max-width: 100%;
      min-width: 0;
      overflow: visible;
    }
    .bio-overview-badge-row .bio-inline-tooltip-trigger {
      position: absolute;
      left: calc(100% + 0.45rem);
      top: 50%;
      transform: translateY(-50%);
      margin: 0;
    }
    .bio-overview-kicker {
      color: rgba(229,231,235,0.74);
    }
    .bio-overview-kicker::before {
      background: rgba(229,231,235,0.32);
      box-shadow: none;
    }
    .bio-overview-meta {
      margin: 0;
      color: rgba(255,255,255,0.74);
      font-size: var(--ri-text-caption);
      line-height: var(--ri-leading-caption);
    }
    .bio-overview-rankline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.35rem;
    }
    .bio-overview-ranknote {
      color: rgba(255,255,255,0.84);
      font-size: var(--ri-text-secondary);
      font-weight: 600;
    }
    .bio-overview-score-wrap {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      align-self: center;
      gap: 0.6rem;
      width: 100%;
      text-align: center;
    }
    .bio-overview-score-wrap .bio-overview-score-visual {
      align-self: center;
    }
    .bio-card-title-row {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      flex-wrap: nowrap;
    }
    .bio-inline-tooltip-trigger {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      vertical-align: middle;
      z-index: 10;
    }
    .bio-inline-tooltip-btn,
    .bio-runit-tooltip-btn {
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }
    .bio-inline-tooltip-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      padding: 0;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: rgba(255,255,255,0.55);
      box-shadow: none;
    }
    .bio-inline-tooltip-btn--compact {
      width: 22px;
      height: 22px;
    }
    .bio-inline-tooltip-btn svg {
      color: rgba(255,255,255,0.45);
    }
    .bio-inline-tooltip-btn:hover svg {
      color: rgba(255,255,255,0.75);
    }
    .bio-inline-tooltip-copy {
      margin: 0;
      font-size: var(--ri-text-tooltip);
      line-height: 1.55;
      color: rgba(255,255,255,0.72);
    }
    .bio-runit-inline {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: nowrap;
      max-width: 100%;
      min-width: 0;
    }
    .bio-runit-inline--compact {
      gap: 0.3rem;
    }
    .bio-runit-pill,
    .bio-runit-tooltip-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      white-space: nowrap;
    }
    .bio-runit-pill {
      min-height: 28px;
      padding: 0.28rem 0.72rem 0.28rem 0.34rem;
      border-radius: 9999px;
      background: linear-gradient(135deg, rgba(46,209,244,0.2), rgba(46,209,244,0.12));
      border: 1px solid rgba(46,209,244,0.42);
      box-shadow: 0 0 20px rgba(46,209,244,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
      color: #cffafe;
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-semibold);
    }
    .bio-runit-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(46,209,244,0.22), rgba(46,209,244,0.15));
      border: 1.5px solid rgba(46,209,244,0.5);
      box-shadow: 0 0 14px rgba(46,209,244,0.22);
      flex-shrink: 0;
      cursor: pointer;
    }
    .bio-runit-circle--compact {
      width: 22px;
      height: 22px;
    }
    .bio-runit-circle img {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      object-fit: cover;
    }
    .bio-runit-circle--compact img {
      width: 13px;
      height: 13px;
    }
    .bio-runit-circle:hover {
      box-shadow: 0 0 20px rgba(46,209,244,0.38);
      border-color: rgba(46,209,244,0.72);
    }
    .bio-runit-pill img,
    .bio-runit-tooltip-pill img {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
    }
    .bio-runit-pill--compact {
      min-height: 22px;
      padding: 0.18rem 0.48rem 0.18rem 0.24rem;
      gap: 0.28rem;
      font-size: var(--ri-text-pill);
    }
    .bio-runit-pill--compact img {
      width: 14px;
      height: 14px;
    }
    .bio-runit-tooltip-trigger {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      z-index: 10;
    }
    .bio-runit-tooltip-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      min-width: 22px;
      padding: 0;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(46,209,244,0.28), rgba(46,209,244,0.18));
      border: 1px solid rgba(46,209,244,0.72);
      color: #ecfeff;
      box-shadow: 0 0 0 1px rgba(46,209,244,0.2), 0 0 18px rgba(46,209,244,0.42);
      font-size: var(--ri-text-button);
      font-weight: var(--ri-weight-semibold);
      line-height: 1;
    }
    .bio-runit-tooltip-btn span {
      transform: translateY(-0.5px);
    }
    .bio-runit-tooltip-btn--compact {
      width: 18px;
      height: 18px;
      min-width: 18px;
      font-size: var(--ri-text-label);
    }
    .bio-inline-tooltip-btn:hover,
    .bio-inline-tooltip-btn:focus-visible,
    .bio-runit-tooltip-btn:hover,
    .bio-runit-tooltip-btn:focus-visible {
      transform: scale(1.05);
    }
    .bio-runit-tooltip {
      min-width: 240px;
      max-width: 320px;
      padding: 0.88rem 0.95rem;
      background: linear-gradient(180deg, rgba(5,18,30,0.96), rgba(2,10,18,0.96));
      border: 1px solid rgba(46,209,244,0.45);
      box-shadow: 0 18px 34px rgba(2,8,23,0.58), 0 0 28px rgba(46,209,244,0.32);
      z-index: 2147483647 !important;
    }
    .bio-runit-tooltip--compact {
      min-width: 220px;
    }
    .bio-runit-tooltip-title {
      margin: 0 0 0.5rem;
      font-size: var(--ri-text-tooltip);
      font-weight: var(--ri-weight-semibold);
      letter-spacing: -0.01em;
      color: #ecfeff;
    }
    .bio-runit-tooltip-copy {
      margin: 0 0 0.9rem;
      font-size: var(--ri-text-tooltip);
      line-height: 1.55;
      color: rgba(236,254,255,0.82);
    }
    .bio-runit-tooltip-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.44rem;
      padding: 0.34rem 0.72rem 0.34rem 0.38rem;
      border-radius: 0.62rem;
      background: linear-gradient(135deg, rgba(46,209,244,0.2), rgba(46,209,244,0.12));
      border: 1px solid rgba(46,209,244,0.44);
      color: #e6fcff;
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-semibold);
      letter-spacing: -0.01em;
      text-transform: none;
      white-space: nowrap;
      line-height: 1.1;
      cursor: pointer;
      text-decoration: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }
    .bio-runit-tooltip-pill:hover,
    .bio-runit-tooltip-pill:focus-visible {
      border-color: rgba(46,209,244,0.72);
      box-shadow: 0 0 18px rgba(46,209,244,0.24);
      transform: translateY(-1px);
      outline: none;
    }
    .bio-runit-tooltip-copy + .bio-runit-tooltip-pill,
    .bio-runit-tooltip .tooltip-tier + .bio-runit-tooltip-pill {
      margin-top: 0.72rem;
    }
    .bio-runit-tooltip-pill img {
      width: 15px;
      height: 15px;
      border-radius: 0;
      object-fit: contain;
      flex-shrink: 0;
      box-shadow: none;
    }
    .bio-overview-score-visual {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bio-overview-score-visual img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      filter: drop-shadow(0 0 8px rgba(var(--bio-accent-rgb), 0.35));
    }
    .bio-overview-score-mask {
      width: 100px;
      height: 100px;
      background: rgba(var(--bio-accent-rgb), 0.95);
      filter: drop-shadow(0 0 8px rgba(var(--bio-accent-rgb), 0.35));
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
    .bio-overview-score-visual svg {
      width: 100px;
      height: 100px;
      color: rgba(var(--bio-accent-rgb), 0.95);
      stroke: currentColor;
    }
    .bio-overview-dist-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.7rem;
      min-width: 0;
    }
    .bio-overview-value-card {
      container-type: inline-size;
      align-items: center;
      gap: 0.5rem;
      min-height: 0;
      justify-content: center;
      text-align: center;
    }
    .bio-overview-value-card .bio-expl-value {
      font-size: var(--ri-text-metric-xl);
    }
    .bio-overview-value-card .bio-expl-unit {
      font-size: var(--ri-text-label);
    }
    .bio-overview-value-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.5);
    }
    .bio-overview-delta {
      color: rgba(255,255,255,0.74);
      font-size: var(--ri-text-label);
      font-weight: var(--ri-weight-semibold);
      line-height: var(--ri-leading-label);
      text-align: center;
    }
    .bio-overview-filter-context {
      color: rgba(255,255,255,0.46);
      font-size: var(--ri-text-label);
      font-weight: 600;
      line-height: var(--ri-leading-label);
      text-align: center;
      letter-spacing: 0.01em;
    }
    .bio-overview-value-card .bio-expl-value-row {
      justify-content: center;
    }
    .bio-overview-bars {
      --bio-overview-bar-track-width: 48px;
      --bio-overview-bar-track-height: 128px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0.65rem;
      align-items: end;
      align-self: stretch;
    }
    .bio-overview-bar-col {
      /* Fill each equal grid column so label length cannot shrink the track. */
      width: 100%;
      grid-template-columns: minmax(0, 1fr);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 0.45rem;
      min-width: 0;
    }
    .bio-overview-bar-pct {
      display: flex;
      align-items: baseline;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.08rem 0.16rem;
      min-height: 1em;
      font-size: var(--ri-text-label);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.8);
      line-height: 1;
      text-align: center;
    }
    .bio-overview-bar-pct-main,
    .bio-overview-bar-pct-compare {
      display: inline-block;
      white-space: nowrap;
    }
    .bio-overview-bar-pct-compare {
      color: #2ED1F4;
      font-size: var(--ri-text-label);
    }
    .bio-overview-bar-track {
      width: min(100%, var(--bio-overview-bar-track-width));
      max-width: var(--bio-overview-bar-track-width);
      height: var(--bio-overview-bar-track-height);
      flex: 0 0 auto;
      display: flex;
      align-items: flex-end;
      border-radius: 16px;
      padding: 4px;
      background: rgba(8, 12, 24, 0.34);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .bio-overview-bar-fill {
      width: 100%;
      border-radius: 12px;
      min-height: 0;
      transform-origin: bottom center;
      transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), background 0.24s ease, box-shadow 0.24s ease;
      will-change: height, opacity, transform;
    }
    .bio-overview-bar-label {
      font-size: var(--ri-text-label);
      font-weight: var(--ri-weight-semibold);
      color: rgba(229,231,235,0.78);
      text-align: center;
      line-height: var(--ri-leading-label);
      transition: color 0.24s ease;
    }
    .bio-overview-bar-meta {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.52);
      text-align: center;
      line-height: var(--ri-leading-label);
      transition: color 0.24s ease;
    }
    .bio-overview-bar-col.is-winner .bio-overview-bar-pct,
    .bio-overview-bar-col.is-winner .bio-overview-bar-label {
      color: var(--bio-overall-accent);
    }
    .bio-overview-bar-col.is-winner .bio-overview-bar-track {
      border-color: rgba(var(--bio-overall-rgb), 0.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px rgba(var(--bio-overall-rgb), 0.06);
    }
    @keyframes bioPanelRise {
      0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.985);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @keyframes bioShimmer {
      100% {
        transform: translateX(100%);
      }
    }
    @media (max-width: 840px) {
      .bio-expl-hero,
      .bio-expl-detail-grid {
        grid-template-columns: 1fr;
      }
      .bio-overview-grid {
        grid-template-columns: 1fr;
      }
      .bio-expl-value-col {
        align-items: flex-start;
      }
      .bio-overview-meta-col,
      .bio-overview-dist-col {
        gap: 0.8rem;
      }
    }
    @media (orientation: landscape) and (max-height: 600px) and (max-width: 1180px) {
      .bio-explanation-box {
        padding: 0.85rem;
      }
      .bio-expl-hero {
        padding: 0.75rem;
      }
      .bio-overview-grid {
        grid-template-columns: minmax(150px, 0.72fr) minmax(260px, 1.38fr) minmax(210px, 0.9fr);
        gap: 0.65rem;
      }
      .bio-overview-badge-row {
        gap: 0.36rem;
      }
      .bio-overview-score-visual,
      .bio-overview-score-visual img,
      .bio-overview-score-visual svg,
      .bio-overview-score-mask {
        width: 68px;
        height: 68px;
      }
      .bio-overview-bars {
        --bio-overview-bar-track-width: 34px;
        --bio-overview-bar-track-height: 112px;
        gap: clamp(0.24rem, 0.7vw, 0.38rem);
        min-width: 0;
      }
      .bio-overview-bar-col {
        gap: 0.28rem;
      }
      .bio-overview-bar-track {
        padding: 3px;
        border-radius: 13px;
      }
      .bio-overview-bar-fill {
        border-radius: 10px;
      }
      .bio-overview-bar-pct {
        gap: 0.04rem 0.1rem;
      }
      .bio-overview-bar-label {
        max-width: 46px;
        overflow-wrap: normal;
      }
      .bio-overview-bar-meta {
        max-width: 44px;
      }
      .bio-overview-value-card {
        padding: 0.65rem;
      }
    }
    @media (orientation: landscape) and (max-height: 600px) and (max-width: 940px) {
      .bio-overview-grid {
        grid-template-columns: minmax(126px, 0.58fr) minmax(248px, 1.48fr) minmax(188px, 0.82fr);
        gap: 0.48rem;
      }
      .bio-overview-score-visual,
      .bio-overview-score-visual img,
      .bio-overview-score-visual svg,
      .bio-overview-score-mask {
        width: 56px;
        height: 56px;
      }
      .bio-overview-bar-track {
        height: var(--bio-overview-bar-track-height);
        max-width: var(--bio-overview-bar-track-width);
      }
    }
    @media (max-width: 640px) {
      .bio-explanation-container {
        position: relative;
        z-index: 10;
      }
      .bio-axis-header-label {
        padding-left: 24px;
      }
      .bio-explanation-box {
        padding: 0.75rem 0.85rem;
      }
      .bio-overview-grid {
        gap: 0.4rem;
        padding: 0;
      }
      .bio-overview-bars {
        gap: 0.2rem;
      }
      .bio-overview-bar-track {
        height: 70px;
        max-width: 100%;
      }
      .bio-overview-score-visual,
      .bio-overview-score-visual img,
      .bio-overview-score-visual svg {
        width: 48px;
        height: 48px;
      }
      .bio-overview-score-mask {
        width: 48px;
        height: 48px;
      }
      .bio-overview-value-card {
        padding: 0.3rem;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        align-items: center;
        text-align: center;
      }
      .bio-overview-value-card .bio-expl-value-row {
        width: 100%;
        justify-content: center;
      }
      .bio-overview-value-label,
      .bio-overview-delta,
      .bio-overview-filter-context {
        width: 100%;
        text-align: center;
      }
      .bio-overview-meta-col {
        padding: 0;
        gap: 0.4rem;
        align-items: center;
      }
      .bio-overview-dist-col {
        padding: 0;
        gap: 0.3rem;
      }
      .bio-overview-copy {
        gap: 0.35rem;
        align-items: center;
        text-align: center;
      }
      .bio-overview-heading {
        align-items: center;
      }
      .bio-overview-badge-row {
        justify-content: center;
      }
      .bio-overview-badge-row .bio-inline-tooltip-trigger {
        left: calc(100% + 0.35rem);
      }
      .bio-overview-score-wrap {
        gap: 0.45rem;
        align-items: center;
        text-align: center;
      }
      .bio-overview-score-wrap .bio-overview-score-visual {
        align-self: center;
      }
      .bio-expl-hero {
        padding: 0.6rem;
      }
      .bio-expl-content {
        padding: 0.6rem;
      }
      .bio-expl-summary-card {
        padding: 0.6rem;
      }
      .bio-expl-why-card {
        flex-direction: column;
      }
      .bio-expl-confidence {
        min-width: 0;
        width: 100%;
      }
      .bio-overview-grid {
        padding-bottom: 1rem;
        border-bottom: none;
        margin-bottom: 0.25rem;
      }
      .bio-runit-tooltip,
      .bio-runit-tooltip--compact {
        min-width: 0;
      }
    }

    /* -- Biomechanical Signature -- */
    .bio-sig-section {
      margin-top: 1.5rem;
      padding-top: 1.25rem;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    /* Runner type: a card title (16/300, left) with its run count as a top-right
       stat; the content sits in the section as tiles, no card of its own (audit
       V1-05, V1-19). */
    .bio-sig-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: var(--ri-space-3, 12px);
    }
    .bio-sig-title {
      margin: 0;
    }
    .bio-sig-run-count {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-body, 300);
      color: var(--ri-text-faint, rgba(255,255,255,0.62));
      font-variant-numeric: var(--ri-numeric, tabular-nums);
      white-space: nowrap;
    }
    /* Runner type keeps production's look (owner review 2026-10-03): one card
       tinted in the dominant type's colour (its border is set inline by the
       renderer), tinted tiles, a solid "Dominant pattern" pill, the key metric
       icons in tinted chips and a caps "Why this matters" label. No backdrop
       blur: the fill is near opaque and a blurred card glitches in recordings. */
    .bio-sig-card {
      border-radius: var(--ri-radius-md, 12px);
      background:
        radial-gradient(circle at top right, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.07), transparent 48%),
        linear-gradient(156deg, rgba(20, 26, 38, 0.84), rgba(11, 15, 24, 0.76));
      padding: clamp(1.25rem, 2vw, 2rem) clamp(1.25rem, 2.5vw, 2.5rem);
      box-shadow: 0 8px 24px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
      display: flex;
      flex-direction: column;
      gap: 0.95rem;
    }
    .bio-sig-empty-panel {
      min-height: 132px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.1rem;
      border-radius: var(--ri-radius-md, 12px);
      border: 1px solid rgba(46,209,244,0.14);
      background: linear-gradient(180deg, rgba(255,255,255,0.042), rgba(255,255,255,0.024));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
    }
    .bio-sig-empty-icon {
      width: 72px;
      height: 72px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(46,209,244,0.08);
      border: 1px solid rgba(46,209,244,0.18);
      box-shadow: 0 0 18px rgba(46,209,244,0.09);
    }
    .bio-sig-empty-icon img {
      width: 46px;
      height: 46px;
      object-fit: contain;
      filter: brightness(0) saturate(100%) invert(76%) sepia(46%) saturate(1000%) hue-rotate(158deg) brightness(96%) contrast(94%);
    }
    .bio-sig-empty-title {
      margin: 0 0 0.35rem;
      color: rgba(255,255,255,0.86);
      font-size: var(--ri-text-subtitle);
      font-weight: var(--ri-weight-semibold);
      line-height: var(--ri-leading-subtitle);
    }
    .bio-sig-empty-copy {
      margin: 0;
      max-width: 46rem;
      color: rgba(255,255,255,0.5);
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
    }
    @media (max-width: 640px) {
      .bio-sig-empty-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 1rem;
      }
    }
    /* -- Desktop three-column top row -- */
    .bio-sig-hero {
      display: grid;
      grid-template-columns: minmax(180px, 0.88fr) minmax(0, 1fr) minmax(0, 1.08fr);
      gap: 0.95rem;
      align-items: stretch;
      margin-bottom: 0;
    }
    /* -- Tablet -- */
    @media (min-width: 641px) and (max-width: 1024px) {
      .bio-sig-card {
        padding: 1.1rem 1.15rem;
      }
      .bio-sig-hero {
        grid-template-columns: minmax(220px, 0.92fr) minmax(0, 1fr);
        gap: 0.85rem;
      }
      .bio-sig-dominant-panel,
      .bio-sig-panel,
      .bio-sig-explainer {
        padding: 0.9rem 0.95rem;
      }
      .bio-sig-dist-panel {
        grid-column: 1 / -1;
      }
      .bio-sig-dominant-panel,
      .bio-sig-metrics-panel {
        grid-column: 1 / -1;
      }
    }
    @media (orientation: landscape) and (max-height: 600px) and (min-width: 641px) and (max-width: 1180px) {
      .bio-sig-card {
        padding: 0.85rem;
        gap: 0.75rem;
      }
      .bio-sig-hero {
        grid-template-columns: minmax(136px, 0.64fr) minmax(272px, 1.42fr) minmax(148px, 0.78fr);
        gap: 0.65rem;
      }
      .bio-sig-dist-panel {
        grid-column: auto;
      }
      .bio-sig-dominant-panel,
      .bio-sig-metrics-panel {
        grid-column: auto;
      }
      .bio-sig-dominant-panel,
      .bio-sig-panel,
      .bio-sig-explainer {
        padding: 0.72rem;
        border-radius: var(--ri-radius-md, 12px);
      }
      .bio-sig-panel-label {
        margin-bottom: 0.45rem;
      }
      .bio-sig-icon-col {
        gap: 0.45rem;
      }
      .bio-sig-icon-wrap {
        min-height: clamp(54px, 14vh, 78px);
        padding: 0.3rem;
      }
      .bio-sig-icon-wrap img {
        width: clamp(48px, 10vh, 66px);
        height: clamp(48px, 10vh, 66px);
      }
      .bio-sig-dist-shell {
        width: min(100%, 300px);
      }
      .bio-sig-dist-bars {
        gap: clamp(0.24rem, 0.7vw, 0.42rem);
      }
      .bio-sig-dist-track {
        height: clamp(76px, 26vh, 108px);
        max-width: 34px;
      }
      .bio-sig-metrics-grid {
        gap: 0.48rem;
      }
      .bio-sig-metric-icon-box {
        padding: 4px;
      }
      .bio-sig-card .bio-sig-metric-icon-box {
        padding: 0.55rem;
      }
      .bio-sig-desc,
      .bio-sig-shoe-text {
        font-size: var(--ri-text-body);
        line-height: var(--ri-leading-body);
      }
    }
    /* Runner type tiles: the renderer tints their border in the dominant colour. */
    .bio-sig-panel,
    .bio-sig-explainer,
    .bio-sig-dominant-panel {
      min-width: 0;
      border-radius: var(--ri-radius-md, 12px);
      padding: 0.95rem 1rem;
      background: linear-gradient(180deg, rgba(255,255,255,0.042), rgba(255,255,255,0.024));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
    }
    .bio-sig-dominant-panel {
    @media (min-width: 641px) and (max-width: 1024px) {
      #envelopeControlsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
        padding: 12px 14px;
      }
      #envelopeControlsGrid > .frp-control-group {
        padding-right: 0;
        margin-right: 0;
        border-right: none;
      }
      #envelopeRunsControls {
        grid-column: 1 / -1;
        min-width: 0;
        padding-left: 0;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.07);
      }
      #envelopeRunsPillsRow .drift-filter-bar {
        justify-content: flex-start;
      }
    }
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      text-align: center;
    }
    .bio-sig-icon-col {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      min-height: 100%;
    }
    /* "Dominant pattern": a solid pill in the runner type's colour with its glow
       (set inline), at the 12 px text floor. It stays a full tag, not the
       shared outline tag (owner 2026-10-04). */
    .bio-sig-pattern-badge {
      align-self: center;
      font-size: var(--ri-text-pill);
      font-weight: 600;
      line-height: 16px;
      color: #fff;
      padding: 4px 12px;
      border-radius: 9999px;
      white-space: nowrap;
    }
    .bio-sig-icon-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.55rem;
      min-height: clamp(82px, 10vw, 118px);
    }
    .bio-sig-icon-wrap img {
      width: clamp(64px, 8vw, 100px);
      height: clamp(64px, 8vw, 100px);
      object-fit: contain;
      transition: filter 0.3s ease;
    }
    .bio-sig-type-label {
      font-size: var(--ri-text-subtitle);
      font-weight: var(--ri-weight-semibold);
      margin: 0;
    }
    .bio-sig-type-pct {
      font-size: var(--ri-text-caption);
      font-weight: 600;
      color: rgba(255,255,255,0.45);
      line-height: var(--ri-leading-caption);
      margin: 0;
    }
    .bio-sig-panel-label {
      display: block;
      width: 100%;
      margin-bottom: 0.7rem;
      color: rgba(229,231,235,0.68);
    }
    .bio-sig-metrics-panel {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: center;
    }
    .bio-sig-metrics-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      width: 100%;
      align-items: flex-start;
      justify-content: center;
    }
    .bio-sig-metric-ind {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      cursor: pointer;
      transform: scale(0.7);
      opacity: 0;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }
    .bio-sig-metric-ind.bio-sig-scale-in {
      transform: scale(1);
      opacity: 1;
    }
    .bio-sig-metric-ind:hover {
      transform: scale(1) translateY(-3px);
    }
    /* Key metric icons sit in tinted chips in Runner type (fill and border set
       inline per category); elsewhere they stand on their own. */
    .bio-sig-card .bio-sig-metric-ind:hover .bio-sig-metric-icon-box {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 18px -10px var(--glow-color-low), 0 4px 16px -4px var(--glow-color-high);
      border-color: rgba(255,255,255,0.4) !important;
    }
    .bio-sig-card .bio-sig-metric-icon-box {
      border-radius: 0.75rem;
      padding: 0.75rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 16px -12px var(--glow-color-low, rgba(46,209,244,0.12));
      transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }
    .bio-sig-metric-icon-box {
      border-radius: 8px;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      box-shadow: none;
    }
    .bio-sig-metric-icon-box img {
      width: 24px;
      height: 24px;
    }
    /* -- Metric tooltip -- */
    .bio-sig-metric-tooltip {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
      z-index: 100;
      pointer-events: none;
      white-space: nowrap;
    }
    .bio-sig-metric-ind:hover .bio-sig-metric-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .bio-sig-metric-tooltip-inner {
      background: var(--ri-surface-popover, var(--ri-surface-overlay, #120F22));
      border-radius: 10px;
      padding: 8px 14px;
      box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
      min-width: 210px;
      max-width: min(300px, calc(100vw - 24px));
      white-space: normal;
      border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2)) !important;
    }
    .bio-sig-metric-tooltip-inner--value-only {
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 140px;
      max-width: min(220px, calc(100vw - 24px));
      padding: 9px 14px;
      text-align: center;
      white-space: normal;
    }
    .bio-sig-metric-tooltip-label {
      color: rgba(255,255,255,0.72);
      font-size: var(--ri-text-tooltip);
      letter-spacing: 0;
      text-transform: none;
    }
    .bio-sig-metric-tooltip-value {
      color: #fff;
      font-size: var(--ri-text-tooltip);
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 9999px;
    }
    .bio-sig-metric-tooltip-arrow {
      position: absolute;
      bottom: -5px;
      left: 50%;
      width: 10px;
      height: 10px;
      background: var(--ri-surface-overlay, #120F22);
      transform: translateX(-50%) rotate(45deg);
      border-radius: 2px;
      border-right: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2)) !important;
      border-bottom: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2)) !important;
    }
    /* -- Distribution vertical bars -- */
    .bio-sig-dist-panel {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: center;
    }
    .bio-sig-dist-panel .bio-sig-panel-label,
    .bio-sig-metrics-panel .bio-sig-panel-label {
      text-align: center;
    }
    @media (min-width: 641px) {
      .bio-sig-metrics-panel {
        justify-content: center;
        align-items: center;
        gap: 0.7rem;
        min-height: 100%;
      }
      .bio-sig-metrics-panel .bio-sig-panel-label {
        margin-bottom: 0;
        width: auto;
      }
      .bio-sig-metrics-panel .bio-sig-metrics-grid {
        width: auto;
        max-width: 100%;
        align-items: center;
      }
    }
    .bio-sig-dist-shell {
      width: min(100%, 252px);
      margin: 0 auto;
    }
    .bio-sig-dist-bars {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0.5rem;
      align-items: end;
    }
    .bio-sig-dist-col {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 0.4rem;
      min-width: 0;
      cursor: pointer;
      outline: none;
      isolation: isolate;
      transition: transform 0.18s ease;
    }
    .bio-sig-dist-col::before {
      content: '';
      position: absolute;
      inset: -0.25rem -0.2rem -0.3rem;
      border-radius: 0.9rem;
      background: linear-gradient(180deg, rgba(46,209,244,0.12), rgba(46,209,244,0.02));
      border: 1px solid rgba(46,209,244,0.16);
      opacity: 0;
      transition: opacity 0.18s ease, border-color 0.18s ease;
      pointer-events: none;
      z-index: 0;
    }
    .bio-sig-dist-col > * {
      position: relative;
      z-index: 1;
    }
    .bio-sig-dist-pct {
      font-size: var(--ri-text-label);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.7);
      line-height: 1;
    }
    .bio-sig-dist-pct-compare {
      display: inline-block;
      margin-left: 0.18rem;
      font-size: var(--ri-text-label);
      color: #2ED1F4;
    }
    .bio-sig-dist-track {
      width: 100%;
      max-width: 42px;
      height: 100px;
      display: flex;
      align-items: flex-end;
      border-radius: 14px;
      /* The level line (owner 2026-10-07): a glass track, no inset padding, so
         the haze and its bright top line fill the track (ui-components.css
         .ri-level-track / .ri-level-fill; --bar-rgb comes from the renderer). */
      padding: 0;
      border: 1px solid transparent;
      box-shadow: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }
    .bio-sig-dist-track--compare {
      gap: 2px;
    }
    .bio-sig-dist-fill {
      width: 100%;
      border-radius: 3px 3px 13px 13px;
      min-height: 0;
      transform-origin: bottom center;
      transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.18s ease, box-shadow 0.18s ease;
    }
    .bio-sig-dist-track--compare .bio-sig-dist-fill {
      width: auto;
      flex: 1 1 0;
      min-width: 0;
    }
    .bio-sig-dist-fill--compare {
      --bar-rgb: 46, 209, 244;
    }
    .bio-sig-dist-icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }
    /* A one-word type label is never cut ("Groun…", audit V1-16): 11 px, and it may
       run into the column gap. */
    .bio-sig-dist-label {
      font-size: var(--ri-text-micro);
      font-weight: 600;
      color: var(--ri-text-muted, rgba(255,255,255,0.74));
      text-align: center;
      line-height: var(--ri-leading-micro);
      white-space: nowrap;
      overflow: visible;
      max-width: none;
    }
    .bio-sig-dist-meta {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.45);
      text-align: center;
      line-height: var(--ri-leading-label);
    }
    .bio-sig-dist-col:hover,
    .bio-sig-dist-col:focus-visible,
    .bio-sig-dist-col.is-tooltip-open {
      transform: translateY(-1px);
    }
    .bio-sig-dist-col:hover::before,
    .bio-sig-dist-col:focus-visible::before,
    .bio-sig-dist-col.is-tooltip-open::before {
      opacity: 1;
      border-color: rgba(var(--bio-sig-type-rgb, 46,209,244), 0.22);
    }
    .bio-sig-dist-col:hover .bio-sig-dist-track,
    .bio-sig-dist-col:focus-visible .bio-sig-dist-track,
    .bio-sig-dist-col.is-tooltip-open .bio-sig-dist-track {
      border-color: rgba(var(--bio-sig-type-rgb, 46,209,244), 0.26);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(var(--bio-sig-type-rgb, 46,209,244), 0.08);
    }
    .bio-sig-dist-col:hover .bio-sig-dist-fill,
    .bio-sig-dist-col:focus-visible .bio-sig-dist-fill,
    .bio-sig-dist-col.is-tooltip-open .bio-sig-dist-fill {
      filter: saturate(1.08) brightness(1.04);
    }
    .bio-sig-dist-col:focus-visible {
      box-shadow: 0 0 0 1px rgba(46,209,244,0.22);
      border-radius: 0.9rem;
    }
    .bio-sig-dist-col.is-dominant .bio-sig-dist-pct,
    .bio-sig-dist-col.is-dominant .bio-sig-dist-label {
      color: var(--bio-sig-dom-color, #fff);
    }
    .bio-sig-dist-col.is-dominant .bio-sig-dist-track {
      border-color: var(--bio-sig-dom-border, rgba(255,255,255,0.25));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px var(--bio-sig-dom-glow, rgba(255,255,255,0.08));
    }
    .bio-sig-dist-tooltip {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: min(280px, calc(100vw - 24px));
      padding: 0.8rem 0.85rem;
      border-radius: 12px;
      background: var(--ri-surface-popover, var(--ri-surface-overlay, #120F22));
      border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2));
      box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(6px) scale(0.985);
      transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
      color: rgba(255,255,255,0.92);
    }
    .bio-sig-dist-tooltip.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .bio-sig-dist-tooltip::before {
      content: none;
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid rgba(var(--bio-sig-tooltip-rgb, 46,209,244), 0.14);
      pointer-events: none;
    }
    .bio-sig-dist-tooltip-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.55rem;
    }
    .bio-sig-dist-tooltip-title-wrap {
      min-width: 0;
    }
    .bio-sig-dist-tooltip-kicker {
      display: block;
      font-size: var(--ri-text-tooltip);
      font-weight: var(--ri-weight-semibold);
      color: rgba(46,209,244,0.74);
      margin-bottom: 0.18rem;
    }
    .bio-sig-dist-tooltip-title {
      display: block;
      font-size: var(--ri-text-tooltip);
      font-weight: var(--ri-weight-semibold);
      color: #f8fafc;
      line-height: 1.2;
    }
    .bio-sig-dist-tooltip-count {
      flex-shrink: 0;
      font-size: var(--ri-text-tooltip);
      font-weight: 600;
      color: rgba(255,255,255,0.56);
    }
    .bio-sig-dist-tooltip-list {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      max-height: min(240px, calc(100vh - 120px));
      overflow: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding-right: 0.15rem;
      touch-action: pan-y;
    }
    .bio-sig-dist-tooltip-list::-webkit-scrollbar {
      width: 4px;
    }
    .bio-sig-dist-tooltip-list::-webkit-scrollbar-thumb {
      background: rgba(46,209,244,0.18);
      border-radius: 999px;
    }
    .bio-sig-dist-tooltip-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.42rem 0.55rem;
      border-radius: 0.7rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.04);
    }
    .bio-sig-dist-tooltip-date {
      font-size: var(--ri-text-tooltip);
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }
    .bio-sig-dist-tooltip-detail {
      font-size: var(--ri-text-tooltip);
      color: rgba(255,255,255,0.58);
      white-space: nowrap;
    }
    .bio-sig-dist-tooltip-empty {
      font-size: var(--ri-text-tooltip);
      line-height: 1.5;
      color: rgba(255,255,255,0.62);
    }
    /* Runs listed in a popup open that run (owner 2026-10-05, BIO-1): row hover
       highlight, pointer, keyboard focus ring; same look in the hover previews and
       in the phone panel. */
    a.bio-sig-dist-tooltip-item,
    button.bio-sig-dist-tooltip-item {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      margin: 0;
      font: inherit;
      color: inherit;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }
    a.bio-sig-dist-tooltip-item:hover,
    a.bio-sig-dist-tooltip-item:focus-visible,
    button.bio-sig-dist-tooltip-item.bio-run-link:hover,
    button.bio-sig-dist-tooltip-item.bio-run-link:focus-visible {
      outline: none !important;
      background: rgba(46,209,244,.12);
      box-shadow: inset 0 0 0 1px #2ED1F4;
    }
    .bio-bar-runs-tooltip {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      box-sizing: border-box;
      min-width: 150px;
      max-width: 220px;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2));
      background: var(--ri-surface-popover, var(--ri-surface-overlay, #120F22));
      box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
      color: var(--ri-text-muted, rgba(255, 255, 255, 0.74));
      font-size: var(--ri-text-tooltip);
      line-height: 1.45;
      transform: translate(-50%, -100%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.16s ease, visibility 0.16s ease;
    }
    .bio-bar-runs-tooltip.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    /* The bridge: an invisible strip under the preview covers the gap to the bar. */
    .bio-bar-runs-tooltip::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 10px;
    }
    .bio-bar-runs-tooltip-title {
      display: block;
      margin: 0 4px 4px;
      color: #fff;
      font-weight: 500;
    }
    .bio-bar-runs-tooltip-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-height: min(220px, calc(100vh - 160px));
      overflow: auto;
      overscroll-behavior: contain;
    }
    .bio-bar-runs-tooltip-run {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      padding: 4px 6px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      font: inherit;
      color: inherit;
      text-align: left;
      text-decoration: none;
      white-space: nowrap;
    }
    .bio-bar-runs-tooltip-run.bio-run-link { cursor: pointer; }
    .bio-bar-runs-tooltip-run.bio-run-link:hover,
    .bio-bar-runs-tooltip-run.bio-run-link:focus-visible {
      outline: none !important;
      background: rgba(46,209,244,.12);
      box-shadow: inset 0 0 0 1px #2ED1F4;
      color: #fff;
    }
    .bio-runs-sheet-list li:has(> .bio-runs-sheet-run) {
      display: block;
      padding: 0;
    }
    .bio-runs-sheet-run {
      display: flex;
      align-items: center;
      gap: 12px;
      box-sizing: border-box;
      width: 100%;
      min-height: 44px;
      margin: 0;
      padding: 10px 8px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      font: inherit;
      color: inherit;
      text-align: left;
      text-decoration: none;
    }
    .bio-runs-sheet-run > span:first-child { flex: 1 1 auto; }
    .bio-runs-sheet-run span:last-child {
      color: var(--ri-text-muted, rgba(255, 255, 255, 0.74));
    }
    .bio-runs-sheet-run.bio-run-link {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }
    .bio-runs-sheet-run.bio-run-link::after {
      content: '';
      flex: 0 0 12px;
      width: 12px;
      height: 12px;
      margin-left: -4px;
      opacity: 0.55;
     background: url("/images/icons/run-it/external-link.svg?v=20261007-icon-edges-v6") center / contain no-repeat; }
    .bio-runs-sheet-run.bio-run-link:hover,
    .bio-runs-sheet-run.bio-run-link:focus-visible,
    .bio-runs-sheet-run.bio-run-link:active {
      outline: none !important;
      background: rgba(46,209,244,.12);
      box-shadow: inset 0 0 0 1px #2ED1F4;
    }
    @media (prefers-reduced-motion: reduce) {
      .bio-bar-runs-tooltip,
      .bio-runs-sheet-run.bio-run-link,
      a.bio-sig-dist-tooltip-item { transition: none; }
    }
    .matrix-run-tooltip {
      width: min(300px, calc(100vw - 24px));
    }
    .matrix-run-tooltip .bio-sig-dist-tooltip-list {
      max-height: min(240px, calc(100vh - 140px));
    }
    /* Run lists in the hover previews read like the "Included runs" panel
       (owner 2026-10-06: "use the CORRECT ONE for all of the popups with runs,
       and make them CONSISTENT"): a sentence-case title, the context line, and
       rows on a hairline with the arrow and the cyan outline on hover. The
       previews keep a 16 px title and scroll their list. */
    :is(.bio-sig-dist-tooltip, .bio-bar-runs-tooltip) {
      width: min(300px, calc(100vw - 24px));
      min-width: 0;
      max-width: none;
      padding: 14px 14px 8px;
      border-radius: var(--ri-radius-md, 12px);
      color: #fff;
      font-size: var(--ri-text-tooltip);
      text-align: left;
    }
    :is(.bio-sig-dist-tooltip, .bio-bar-runs-tooltip) .bio-runs-sheet-title {
      font-size: var(--ri-text-subtitle);
      line-height: var(--ri-leading-subtitle);
    }
    :is(.bio-sig-dist-tooltip, .bio-bar-runs-tooltip) .bio-runs-sheet-sub {
      margin: 4px 0 6px;
    }
    :is(.bio-sig-dist-tooltip, .bio-bar-runs-tooltip) .bio-runs-sheet-list {
      max-height: min(240px, calc(100vh - 160px));
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      scrollbar-width: thin;
      scrollbar-color: rgba(46, 209, 244, 0.18) transparent;
    }
    .matrix-run-tooltip .bio-sig-dist-tooltip-item {
      align-items: flex-start;
    }
    .matrix-run-tooltip .bio-sig-dist-tooltip-detail {
      max-width: 58%;
      text-align: right;
      white-space: normal;
    }
    /* -- Explanation surface -- */
    .bio-sig-explainer {
      display: block;
    }
    .bio-sig-explainer-copy {
      min-width: 0;
    }
    .bio-sig-desc {
      color: rgba(255,255,255,0.85);
      line-height: var(--ri-leading-body);
      margin: 0 0 0.8rem 0;
      font-size: var(--ri-text-body);
    }
    .bio-sig-shoe-divider {
      height: 1px;
      margin-bottom: 0.75rem;
    }
    .bio-sig-shoe-text {
      color: rgba(255,255,255,0.7);
      line-height: var(--ri-leading-body);
      margin: 0;
      font-size: var(--ri-text-body);
    }
    /* Production's reading size for the two explanation lines (it came from the
       old page-wide p rule), and the 12 px floor for the block's small figures
       and labels (owner review 2026-10-03). */
    .bio-sig-section .bio-sig-desc,
    .bio-sig-section .bio-sig-shoe-text {
      font-size: var(--ri-text-body);
    }
    /* One role per element (type scale v2, 2026-10-06). */
    .bio-sig-section .bio-sig-panel-label,
    .bio-sig-section .bio-sig-total-score-caption { font-size: var(--ri-text-caption); } /* sentence-case labels (owner 2026-10-05) */
    .bio-sig-section .bio-sig-dist-pct { font-size: var(--ri-text-label); }
    .bio-sig-section .bio-sig-dist-label { font-size: var(--ri-text-micro); }
    .bio-sig-card .bio-sig-metric-tooltip-label,
    .bio-sig-card .bio-sig-metric-tooltip-value { font-size: var(--ri-text-tooltip); }
    /* -- Mobile -- */
    @media (max-width: 640px) {
      .bio-sig-card {
        gap: 12px;
      }
      .bio-sig-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      .bio-sig-dominant-panel,
      .bio-sig-panel,
      .bio-sig-explainer {
        padding: 1rem;
      }
      .bio-sig-icon-col {
        min-height: auto;
      }
      .bio-sig-icon-wrap {
        min-height: auto;
        padding: 0.4rem;
      }
      .bio-sig-icon-wrap img {
        width: 64px;
        height: 64px;
      }
      .bio-sig-metrics-grid {
        gap: 0.5rem;
      }
      .bio-sig-metric-icon-box {
        padding: 4px;
      }
      .bio-sig-card .bio-sig-metric-icon-box {
        padding: 0.6rem;
      }
      .bio-sig-metric-icon-box img {
        width: 20px;
        height: 20px;
      }
      .bio-sig-dist-shell {
        width: 100%;
      }
      .bio-sig-dist-track {
        height: 80px;
        max-width: 36px;
      }
      .bio-sig-dist-bars {
        gap: 0.35rem;
      }
      .bio-sig-dist-tooltip {
        width: min(260px, calc(100vw - 20px));
        padding: 0.72rem 0.75rem;
        background: var(--ri-surface-popover, var(--ri-surface-overlay, #120F22));
        border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2));
        box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
        border-radius: 12px;
      }
      .bio-sig-dist-tooltip-list {
        max-height: min(190px, calc(100vh - 120px));
      }
    }

    /* -- Bio Bracket Slider -- */
    /* -- Bio Period Picker -- */
    .bio-period-picker {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .bio-profile-controls {
      display: flex;
      align-items: center;
      gap: clamp(8px, 1.5vw, 14px);
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .bio-period-label {
      font-size: var(--ri-text-caption);
      font-weight: 600;
      color: rgba(255, 255, 255, 0.55);
      white-space: nowrap;
    }
    .bio-period-select {
      font-size: var(--ri-text-input);
      font-weight: 600;
      padding: 4px 24px 4px 8px;
      border-radius: 8px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      background-color: rgba(148, 163, 184, 0.09);
      background-image: url("/images/icons/run-it/chevron-down.svg?v=20261007-icon-edges-v6");
      background-repeat: no-repeat;
      background-position: right 10px center;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      color: rgba(255, 255, 255, 0.92);
      outline: none;
      cursor: pointer;
      transition: border-color 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
    }
    .bio-period-select:hover,
    .bio-period-select:focus {
      border-color: rgba(148, 163, 184, 0.6);
      background-color: rgba(148, 163, 184, 0.14);
    }
    .bio-period-select--loading {
      opacity: 0.55;
      pointer-events: none;
    }
    .bio-shoe-select {
      min-width: clamp(100px, 14vw, 160px);
      max-width: 200px;
    }
    @media (max-width: 640px) {
      .bio-controls-wrap {
        align-items: flex-start;
      }
      .bio-profile-controls {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
      }
      .bio-shoe-select {
        min-width: 0;
        flex: 1 1 100px;
        max-width: none;
      }
      .bio-date-input {
        width: clamp(82px, 30vw, 110px) !important;
      }
    }
    /* -- Date range picker & compare controls -- */
    .bio-controls-wrap {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: flex-end;
      margin-top: 10px;
    }
    .bio-date-range-wrap {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .bio-date-presets {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .bio-preset-pill {
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-semibold);
      padding: 3px 8px;
      border-radius: 8px;
      border: 1px solid rgba(148,163,184,0.28);
      background: rgba(148,163,184,0.07);
      color: rgba(255,255,255,0.55);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .bio-preset-pill:hover {
      border-color: rgba(148,163,184,0.55);
      background: rgba(148,163,184,0.15);
      color: rgba(255,255,255,0.88);
    }
    .bio-preset-pill.bio-preset-active {
      border-color: rgba(148,163,184,0.75);
      background: rgba(148,163,184,0.22);
      color: #94a3b8;
    }
    .bio-preset-pill--compare {
      border-color: rgba(46,209,244,0.28);
      background: rgba(46,209,244,0.07);
      color: rgba(255,255,255,0.5);
    }
    .bio-preset-pill--compare:hover {
      border-color: rgba(46,209,244,0.55);
      background: rgba(46,209,244,0.15);
      color: rgba(255,255,255,0.88);
    }
    .bio-preset-pill--compare.bio-preset-active {
      border-color: rgba(46,209,244,0.75);
      background: rgba(46,209,244,0.22);
      color: #2ED1F4;
    }
    .bio-section-intro {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin: 22px 0 16px;
    }
    .bio-section-intro .drift-shell-copy {
      margin: 0;
      flex: 1 1 520px;
      max-width: 760px;
    }
    .bio-section-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
    }
    .bio-date-inputs {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }
    /* Period and shoe fields: the shared field look (.ri-input in
       ui-components.css) drawn on the wrapper that holds the real input:
       40 px (44 on phones), radius 8, white .05 fill, white .36 border, one
       cyan focus ring (audit S-20, X-11). */
    .bio-date-shell,
    .bio-select-shell {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: var(--ri-control-md, 40px);
      border: 1px solid var(--ri-border-control, rgba(255,255,255,0.36));
      border-radius: var(--ri-radius-sm, 8px);
      background: var(--ri-surface-control, rgba(255,255,255,0.05));
      color: var(--ri-text-strong, rgba(255,255,255,0.96));
      box-shadow: none;
      transition: border-color var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease), box-shadow var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease);
      overflow: hidden;
      box-sizing: border-box;
    }
    @media (hover: hover) {
      .bio-date-shell:hover:not(:focus-within),
      .bio-select-shell:hover:not(:focus-within) {
        border-color: rgba(255,255,255,0.5);
      }
    }
    .bio-date-shell:focus-within,
    .bio-select-shell:focus-within {
      border-color: var(--ri-cyan, #2ED1F4);
      box-shadow: var(--ri-focus-field-shadow, inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 18px rgba(46, 209, 244, 0.32), 0 0 40px rgba(46, 209, 244, 0.18));
    }
    @media (max-width: 640px) {
      .bio-date-shell,
      .bio-select-shell {
        min-height: 44px;
      }
    }
    .bio-date-shell {
      flex: 1 1 0;
      min-width: 0;
      width: clamp(136px, 15vw, 168px);
      cursor: pointer;
    }
    .bio-date-display {
      width: 100%;
      padding: 0 38px 0 12px;
      font-size: var(--ri-text-input);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0;
      color: var(--ri-text-strong, rgba(255,255,255,0.96));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums;
      pointer-events: none;
    }
    .bio-date-shell.is-empty .bio-date-display {
      color: rgba(255,255,255,0.5);
    }
    .bio-date-icon {
      position: absolute;
      right: 11px;
      top: 50%;
      width: 15px;
      height: 15px;
      transform: translateY(-50%);
      pointer-events: none;
      opacity: 0.88;
    }
    .bio-date-icon::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: no-repeat center / contain url("/images/icons/run-it/calendar.svg?v=20261007-icon-edges-v6");
    }
    .bio-date-input {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100%;
      min-width: 0;
      min-height: 100%;
      margin: 0;
      padding: 0;
      border: none;
      opacity: 0;
      background: transparent !important;
      color: transparent;
      outline: none;
      cursor: pointer;
      color-scheme: dark;
    }
    .bio-date-input::-webkit-calendar-picker-indicator {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
    .bio-date-input::-webkit-datetime-edit,
    .bio-date-input::-webkit-datetime-edit-text,
    .bio-date-input::-webkit-datetime-edit-month-field,
    .bio-date-input::-webkit-datetime-edit-day-field,
    .bio-date-input::-webkit-datetime-edit-year-field {
      color: transparent;
    }
    .bio-date-input:disabled,
    .bio-date-input--compare:disabled {
      opacity: 0.5;
      pointer-events: none;
    }
    .bio-date-sep {
      font-size: var(--ri-text-caption);
      color: rgba(255,255,255,0.38);
      flex-shrink: 0;
    }
    /* Compare toggle button - see .rii-compare-btn in dashboard-embed.css. */
    /* Compare controls second row - (base styles below in \u201eBio Controls Grid\u201c section) */
    .bio-compare-label {
      color: rgba(46,209,244,0.75) !important;
      white-space: nowrap;
    }
    .bio-period-select--compare {
      border-color: rgba(46,209,244,0.35) !important;
      background-color: rgba(46,209,244,0.07) !important;
      background-image: url("/images/icons/run-it/chevron-down.svg?v=20261007-icon-edges-v6") !important;
      background-repeat: no-repeat !important;
      background-position: right 10px center !important;
    }
    .bio-period-select--compare:hover,
    .bio-period-select--compare:focus {
      border-color: rgba(46,209,244,0.6) !important;
      background-color: rgba(46,209,244,0.12) !important;
    }
    .bio-section-intro {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin: 22px 0 16px;
    }
    .bio-section-intro .drift-shell-copy {
      margin: 0;
      flex: 1 1 520px;
      max-width: 760px;
    }
    .bio-section-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
    }

    /* -- Bio Controls Grid (envelope-style) -- */
    /* The filter row is a tile inside the section (fill, no border). */
    .bio-cg-wrap {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
      gap: 0;
      align-items: flex-start;
      margin: 12px 0 0;
      background: var(--ri-surface-tile, rgba(255,255,255,0.04));
      box-shadow: var(--ri-shadow-panel, inset 0 0 0 1px rgba(46, 209, 244, 0.08), inset 0 0 14px rgba(46, 209, 244, 0.06));
      border: 0;
      border-radius: var(--ri-radius-md, 12px);
      padding: var(--ri-tile-pad, 16px);
      transition: border-radius 0.28s ease;
    }
    .bio-cg-wrap.bio-compare-open {
      border-radius: var(--ri-radius-md, 12px) var(--ri-radius-md, 12px) 0 0;
    }
    .bio-cg-col {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-right: 14px;
      min-width: 0;
    }
    .bio-cg-col--sep {
      margin-right: 14px;
      border-right: 1px solid var(--ri-border-subtle, rgba(255,255,255,0.08));
    }
    .bio-cg-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-regular, 400);
      line-height: var(--ri-leading-caption);
      text-transform: none;
      letter-spacing: 0;
      color: var(--ri-text-faint, rgba(255,255,255,0.62));
      white-space: nowrap;
      margin-bottom: 2px;
    }
    .bio-cg-runs {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .bio-cg-runs-count {
      font-size: var(--ri-text-body);
      font-weight: 600;
      color: var(--ri-text-strong, rgba(255,255,255,0.96));
      line-height: var(--ri-leading-body);
      font-variant-numeric: var(--ri-numeric, tabular-nums);
    }
    .bio-cg-runs-sampled {
      font-size: var(--ri-text-label);
      color: var(--ri-text-faint, rgba(255,255,255,0.62));
      white-space: nowrap;
      font-variant-numeric: var(--ri-numeric, tabular-nums);
    }
    .bio-cg-compare-runs {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-height: 22px;
      justify-content: center;
    }
    .bio-cg-compare-runs--loading {
      justify-content: flex-start;
    }
    .bio-cg-compare-runs-loading {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(46,209,244,0.72);
      font-size: var(--ri-text-label);
      font-weight: 600;
    }
    .bio-cg-compare-runs-spinner {
      width: 12px;
      height: 12px;
      border: 1.75px solid rgba(46,209,244,0.18);
      border-top-color: rgba(46,209,244,0.95);
      border-radius: 50%;
      animation: proc-spin 1s linear infinite;
      filter: drop-shadow(0 0 6px rgba(46,209,244,0.28));
      flex: 0 0 auto;
    }
    .bio-cg-compare-runs-count {
      font-size: var(--ri-text-body);
      font-weight: var(--ri-weight-semibold);
      color: rgba(46,209,244,0.8);
      line-height: 1;
    }
    .bio-cg-compare-runs-sampled {
      font-size: var(--ri-text-label);
      color: rgba(46,209,244,0.42);
      white-space: nowrap;
    }
    /* Compare row below the grid */
    /* Compare row: it opens with a measured height (RunItMotion.expand, 280 ms),
       not a guessed max-height (audit MOT-19). It continues the filter tile. */
    .bio-compare-controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
      gap: 0;
      align-items: flex-start;
      background: var(--ri-surface-tile, rgba(255,255,255,0.04));
      box-shadow: var(--ri-shadow-panel, inset 0 0 0 1px rgba(46, 209, 244, 0.08), inset 0 0 14px rgba(46, 209, 244, 0.06));
      border: 0;
      border-top: 1px solid var(--ri-border-subtle, rgba(255,255,255,0.08));
      border-radius: 0 0 var(--ri-radius-md, 12px) var(--ri-radius-md, 12px);
      padding: 12px var(--ri-tile-pad, 16px) var(--ri-tile-pad, 16px);
      overflow: visible;
      margin-top: 0;
    }
    .bio-compare-controls[hidden] {
      display: none;
    }
    .bio-mobile-control-stack {
      display: none;
    }
    @media (min-width: 781px) {
      .bio-cg-wrap,
      .bio-compare-controls {
        grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.95fr) minmax(120px, 0.7fr);
      }
    }
    @media (max-width: 640px) {
      .bio-section-intro {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 14px 0 12px;
      }
      .bio-section-intro .drift-shell-copy {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        font-size: var(--ri-text-secondary);
        line-height: var(--ri-leading-secondary);
      }
      .bio-section-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin: 0;
      }
      .frp-section-intro {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0 0 8px;
      }
      .frp-section-intro .drift-shell-copy {
        flex: 0 1 auto;
        max-width: 100%;
        font-size: var(--ri-text-secondary);
        line-height: var(--ri-leading-secondary);
        margin: 0;
      }
      .frp-section-actions {
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0;
      }
      .bio-cg-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px;
      }
      .bio-compare-controls {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      #biomechanicalProfileSection .bio-section-actions {
        display: none !important;
      }
      /* One filter bar in the filter card (ui-components.css .ri-filter-bar;
         owner 2026-10-06, option D). */
      #biomechanicalProfileSection .bio-mobile-control-stack,
      #fatigueResilienceSection .frp-mobile-control-stack {
        display: block !important;
        margin: 0 0 10px !important;
      }
      #bioControlsGrid {
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
      }
      #bioControlsGrid.bio-mobile-panel-open {
        display: grid !important;
      }
      #frpControlsGrid {
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 12px !important;
        padding: 12px !important;
        border-radius: 16px !important;
      }
      #frpControlsGrid.bio-mobile-panel-open {
        display: grid !important;
      }
      #frpControlsGrid .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }
      #frpControlsGrid .bio-date-shell,
      #frpControlsGrid .bio-select-shell {
        width: 100% !important;
        min-height: 34px !important;
      }
      #frpControlsGrid .bio-date-display,
      #frpControlsGrid .bio-period-select {
        font-size: var(--ri-text-input) !important;
      }
      #bioCompareControls {
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 0 !important;
        padding: 12px !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        border-radius: 16px !important;
        border-top-color: rgba(46,209,244,0.18) !important;
      }
      #bioCompareControls.bio-compare-controls--visible {
        display: grid !important;
      }
      /* Compare period spans full width; Shoe + Runs sit side by side below */
      #bioCompareControls .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }
      .bio-cg-col--sep {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
      }
    }
    /* One date-field width for both sections (audit V1-16). */
    #biomechanicalProfileSection .bio-date-shell {
      width: clamp(138px, 15vw, 172px);
    }
    .frp-section-intro {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin: 14px 0 16px;
    }
    .frp-section-intro .drift-shell-copy {
      margin: 0;
      flex: 1 1 520px;
      max-width: 760px;
    }
    #fatigueResilienceSection .frp-cg-wrap {
      margin: 10px 0 1.5rem;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-date-shell {
      width: clamp(138px, 15vw, 172px);
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-period-select {
      width: 100%;
      font-size: var(--ri-text-input);
      font-weight: 400;
      padding: 8px 28px 8px 12px;
      min-height: auto;
      border: none !important;
      border-radius: 10px;
      background-color: transparent !important;
      background-position: right 10px center;
      background-size: 10px 6px;
      letter-spacing: normal;
      box-shadow: none !important;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-period-select:hover,
    #fatigueResilienceSection .frp-cg-wrap .bio-period-select:focus {
      border-color: transparent !important;
      background-color: transparent !important;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-shoe-select {
      min-width: max-content;
      max-width: none;
    }
    @media (min-width: 761px) {
      #fatigueResilienceSection .frp-cg-wrap {
        grid-template-columns: minmax(300px, 1.35fr) minmax(190px, 0.9fr) minmax(252px, 1.08fr);
      }
      #fatigueResilienceSection .frp-cg-wrap .frp-confidence-filter-col {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
      }
      #frpControlsGrid #envelopeRunsPillsRow .drift-filter-bar {
        gap: 4px;
        min-height: 38px;
      }
    }
    .frp-axis-header-overlay {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.18s ease;
    }
    .frp-axis-header-overlay.visible { opacity: 1; }
    .frp-axis-header {
      position: absolute;
      top: 6px;
      display: none;
      color: rgba(209,213,219,0.72);
      font-size: var(--ri-text-caption);
      line-height: 1;
      font-weight: var(--ri-weight-regular, 400);
      letter-spacing: 0;
      text-transform: none;
      white-space: nowrap;
      font-family: 'Noto Sans', system-ui, sans-serif;
      text-shadow: 0 1px 2px rgba(0,0,0,0.44);
    }
    @media (max-width: 640px) {
      .frp-axis-header {
        display: inline-flex;
      }
    }
    #biomechanicalProfileSection .bio-period-select {
      width: 100%;
      font-size: var(--ri-text-input);
      font-weight: 400;
      padding: 0 34px 0 12px;
      min-height: 40px;
      border: none !important;
      border-radius: 10px;
      background-color: transparent !important;
      background-position: right 12px center;
      background-size: 10px 6px;
      letter-spacing: normal;
      box-shadow: none !important;
    }
    #biomechanicalProfileSection .bio-period-select:hover,
    #biomechanicalProfileSection .bio-period-select:focus {
      border-color: transparent !important;
      background-color: transparent !important;
    }
    #biomechanicalProfileSection .bio-shoe-select {
      min-width: clamp(140px, 15vw, 184px);
      max-width: none;
    }
    #biomechanicalProfileSection .bio-compare-controls {
      margin-left: 0;
    }
    /* Compare metrics row */
    .bio-compare-metrics-row {
      margin-top: 10px;
      padding: 10px 14px 14px;
      border-radius: 12px;
      border: 1px solid rgba(46,209,244,0.18);
      background: rgba(46,209,244,0.03);
    }
    .bio-compare-metrics-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(46,209,244,0.65);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .bio-compare-metrics-label::before {
      content: '';
      display: inline-block;
      width: 14px;
      height: 2px;
      background: #2ED1F4;
      border-radius: 2px;
      flex-shrink: 0;
    }
    @media (max-width: 640px) {
      .bio-date-input { width: 100px; }
      .bio-compare-controls { justify-content: flex-start; }
    }
    .owned-shoes-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .owned-shoe-card {
      position: relative;
      border-radius: 20px;
      padding: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    }
    .owned-shoe-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .owned-shoe-purpose-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-semibold);
      padding: 4px 10px;
      border-radius: 999px;
      color: rgba(255,255,255,0.86);
      background: rgba(255,255,255,0.08);
    }
    .owned-shoe-card[data-purpose="daily"] .owned-shoe-purpose-tag { background: rgba(59,130,246,0.16); color: #93c5fd; }
    .owned-shoe-card[data-purpose="tempo"] .owned-shoe-purpose-tag { background: rgba(249,115,22,0.16); color: #fdba74; }
    .owned-shoe-card[data-purpose="race"] .owned-shoe-purpose-tag { background: rgba(239,68,68,0.16); color: #fca5a5; }
    .owned-shoe-target {
      font-size: var(--ri-text-secondary);
      color: rgba(255,255,255,0.72);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .owned-shoe-target strong { color: #fff; font-size: var(--ri-text-body); }
    .owned-shoe-range {
      font-size: var(--ri-text-label);
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.66);
    }
    .owned-shoe-range.great { border-color: rgba(46, 209, 244,0.35); color: #2ED1F4; }
    .owned-shoe-range.good { border-color: rgba(52,211,153,0.3); color: #86efac; }
    .owned-shoe-best {
      margin-bottom: 14px;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .owned-shoe-best-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .owned-shoe-best-main {
      min-width: 0;
      flex: 1;
    }
    .owned-shoe-best-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.48);
      margin-bottom: 8px;
    }
    .owned-shoe-best-name {
      font-size: var(--ri-text-subtitle);
      font-weight: var(--ri-weight-semibold);
      color: #fff;
      margin-bottom: 6px;
    }
    .owned-shoe-best-sub {
      font-size: var(--ri-text-secondary);
      color: rgba(255,255,255,0.68);
      line-height: var(--ri-leading-secondary);
    }
    .owned-shoe-media {
      width: 76px;
      height: 52px;
      flex: 0 0 auto;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      padding: 6px;
    }
    .owned-shoe-media.sm {
      width: 54px;
      height: 40px;
      border-radius: 10px;
      padding: 4px;
    }
    .owned-shoe-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 10px 16px rgba(0,0,0,0.24));
    }
    .owned-shoe-tier {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--ri-text-pill);
      font-weight: var(--ri-weight-semibold);
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
    }
    .owned-shoe-tier.great { background: rgba(46, 209, 244,0.14); border-color: rgba(46, 209, 244,0.35); color: #2ED1F4; }
    .owned-shoe-tier.good { background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.32); color: #86efac; }
    .owned-shoe-tier.not-ideal { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.28); color: #fde68a; }
    .owned-shoe-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .owned-shoe-row {
      display: grid;
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px 0;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .owned-shoe-rank {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--ri-text-label);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.84);
      background: rgba(255,255,255,0.08);
    }
    .owned-shoe-row-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .owned-shoe-row-name {
      font-size: var(--ri-text-secondary);
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .owned-shoe-row-meta {
      font-size: var(--ri-text-caption);
      color: rgba(255,255,255,0.56);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .owned-shoe-row-score {
      text-align: right;
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-end;
    }
    .owned-shoe-row-lpi {
      font-size: var(--ri-text-label);
      color: #2ed1f4;
      font-weight: var(--ri-weight-semibold);
    }
    .owned-shoe-estimate {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.72);
      font-weight: 600;
    }
    .owned-shoe-row-note {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.64);
      line-height: var(--ri-leading-label);
      margin-top: 6px;
    }
    .owned-shoe-empty {
      padding: 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.04);
      border: 1px dashed rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.62);
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
    }
    .owned-shoe-footnote {
      margin-top: 14px;
      font-size: var(--ri-text-micro);
      color: rgba(255,255,255,0.56);
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
    }
    @media (max-width: 1024px) {
      .owned-shoes-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 640px) {
      .owned-shoe-best-top {
        align-items: flex-start;
      }
      .owned-shoe-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
      }
      .owned-shoe-row .owned-shoe-media.sm {
        display: none;
      }
    }

    .bio-bracket-slider-wrap {
      padding: 12px 0 4px;
      padding-right: max(0px, calc(var(--ca-right, 11px) - 11px));
      position: relative;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      touch-action: pan-y pinch-zoom;
      overscroll-behavior-y: auto;
    }
    .bio-bracket-slider-wrap input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 9999px;
      background: transparent;
      outline: none;
      cursor: pointer;
      touch-action: pan-y pinch-zoom;
      --fill-pct: 50%;
      --bio-selected-slider-track-glow-rgb: 119, 232, 249;
      --bio-selected-slider-track-core-rgb: 46, 209, 244;
      --bio-selected-slider-track-start-rgb: 7, 26, 35;
      --bio-selected-slider-track-mid-rgb: 13, 52, 67;
      --bio-selected-slider-track-end-rgb: 9, 34, 44;
      --bio-selected-slider-track-border-rgb: 102, 225, 248;
      --bio-selected-slider-track-shadow-rgb: 6, 18, 24;
      --bio-selected-slider-thumb-core-rgb: 9, 37, 47;
      --bio-selected-slider-thumb-edge-rgb: 20, 94, 113;
      --bio-selected-slider-thumb-ring-rgb: 104, 222, 247;
      --bio-selected-slider-thumb-depth-rgb: 6, 24, 31;
      --bio-selected-slider-thumb-shadow-rgb: 46, 209, 244;
      --bio-selected-slider-thumb-bg: rgba(var(--bio-selected-slider-thumb-depth-rgb), 0.96);
      --bio-selected-slider-thumb-bg-active: rgba(var(--bio-selected-slider-thumb-edge-rgb), 0.98);
    }
    .bio-bracket-slider-wrap input[type=range]::-webkit-slider-runnable-track {
      background:
        linear-gradient(90deg, rgba(var(--bio-selected-slider-track-core-rgb), 0.12) 0%, rgba(var(--bio-selected-slider-track-core-rgb), 0.24) var(--fill-pct, 50%), rgba(var(--bio-selected-slider-track-core-rgb), 0.12) 100%),
        linear-gradient(90deg, rgba(var(--bio-selected-slider-track-start-rgb), 0.94) 0%, rgba(var(--bio-selected-slider-track-mid-rgb), 0.94) 52%, rgba(var(--bio-selected-slider-track-end-rgb), 0.94) 100%);
      height: 8px;
      border-radius: 9999px;
      border: 1px solid rgba(var(--bio-selected-slider-track-border-rgb), 0.18);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 0 12px rgba(var(--bio-selected-slider-track-glow-rgb), 0.06),
        0 0 0 1px rgba(4, 14, 20, 0.42),
        0 4px 14px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.34);
      transition: box-shadow 160ms ease;
    }
    @property --fill-pct {
      syntax: '<percentage>';
      inherits: true;
      initial-value: 50%;
    }
    .bio-bracket-slider-wrap input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      touch-action: pan-y pinch-zoom;
      width: 20px;
      height: 20px;
      margin-top: -7px;
      border-radius: 50%;
      background: var(--bio-selected-slider-thumb-bg);
      cursor: pointer;
      border: 2px solid rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.9);
      box-shadow:
        0 0 0 3px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.12),
        0 0 16px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.14),
        0 6px 12px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.28);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }
    @media (pointer: coarse), (max-width: 640px) {
      #biomechanicalProfileSection,
      #biomechanicalProfileSection .biomech-signature-card,
      #biomechanicalProfileSection .drift-chart-container,
      #biomechanicalProfileSection .drift-chart-container canvas,
      #biomechanicalProfileSection .bio-pace-overlay,
      #biomechanicalProfileSection .bio-slider-runs-dots,
      #biomechanicalProfileSection .bio-metrics-grid,
      #biomechanicalProfileSection .bio-metric-card,
      #biomechanicalProfileSection .bio-sig-section,
      #biomechanicalProfileSection .bio-sig-card {
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-y: auto;
      }
    }
    .bio-bracket-slider-wrap input[type=range]:hover::-webkit-slider-thumb,
    .bio-bracket-slider-wrap input[type=range]:active::-webkit-slider-thumb {
      transform: scale(1.05);
      background: var(--bio-selected-slider-thumb-bg-active);
      box-shadow:
        0 0 0 4px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.16),
        0 0 18px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.2),
        0 6px 14px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.32);
      border-color: rgba(var(--bio-selected-slider-thumb-ring-rgb), 1);
    }
    .bio-bracket-slider-wrap input[type=range]:hover::-webkit-slider-runnable-track,
    .bio-bracket-slider-wrap input[type=range]:active::-webkit-slider-runnable-track {
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        inset 0 0 14px rgba(var(--bio-selected-slider-track-glow-rgb), 0.08),
        0 0 0 1px rgba(var(--bio-selected-slider-track-border-rgb), 0.16),
        0 6px 18px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.38);
    }
    @media (pointer: coarse), (max-width: 640px) {
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-webkit-slider-runnable-track {
        transition: none;
        box-shadow:
          inset 0 0 0 1px rgba(255,255,255,0.04),
          0 0 0 1px rgba(4, 14, 20, 0.42);
      }
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-webkit-slider-thumb {
        transform: none;
        transition: none;
        box-shadow: 0 0 0 3px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.14);
        /* Touch scrubbing never puts the input in :active; keep its pressed look. */
        background: var(--bio-selected-slider-thumb-bg-active);
        border-color: rgba(var(--bio-selected-slider-thumb-ring-rgb), 1);
      }
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-moz-range-track,
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-moz-range-progress {
        transition: none;
        box-shadow: none;
      }
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-moz-range-thumb {
        transform: none;
        transition: none;
        box-shadow: 0 0 0 3px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.14);
      }
      .bio-bracket-slider-wrap.bio-slider-dragging .bio-slider-run-dot {
        transition: background-color 80ms linear, transform 80ms linear !important;
      }
    }
    .bio-bracket-slider-wrap input[type=range]::-moz-range-track {
      background:
        linear-gradient(90deg, rgba(var(--bio-selected-slider-track-core-rgb), 0.12) 0%, rgba(var(--bio-selected-slider-track-core-rgb), 0.24) var(--fill-pct, 50%), rgba(var(--bio-selected-slider-track-core-rgb), 0.12) 100%),
        linear-gradient(90deg, rgba(var(--bio-selected-slider-track-start-rgb), 0.94) 0%, rgba(var(--bio-selected-slider-track-mid-rgb), 0.94) 52%, rgba(var(--bio-selected-slider-track-end-rgb), 0.94) 100%);
      height: 8px;
      border-radius: 9999px;
      border: 1px solid rgba(var(--bio-selected-slider-track-border-rgb), 0.18);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 0 12px rgba(var(--bio-selected-slider-track-glow-rgb), 0.06),
        0 0 0 1px rgba(4, 14, 20, 0.42),
        0 4px 14px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.34);
    }
    .bio-bracket-slider-wrap input[type=range]::-moz-range-progress {
      background: linear-gradient(90deg, rgba(var(--bio-selected-slider-track-core-rgb), 0.4) 0%, rgba(var(--bio-selected-slider-track-core-rgb), 0.26) 100%);
      height: 8px;
      border: 1px solid rgba(var(--bio-selected-slider-track-border-rgb), 0.12);
      border-radius: 9999px;
    }
    .bio-bracket-slider-wrap input[type=range]::-moz-range-thumb {
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--bio-selected-slider-thumb-bg);
      cursor: pointer;
      border: 2px solid rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.9);
      box-shadow:
        0 0 0 3px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.12),
        0 0 16px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.14),
        0 6px 12px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.28);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }
    .bio-bracket-slider-wrap input[type=range]:hover::-moz-range-thumb,
    .bio-bracket-slider-wrap input[type=range]:active::-moz-range-thumb {
      transform: scale(1.05);
      background: var(--bio-selected-slider-thumb-bg-active);
      box-shadow:
        0 0 0 4px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.16),
        0 0 18px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.2),
        0 6px 14px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.32);
      border-color: rgba(var(--bio-selected-slider-thumb-ring-rgb), 1);
    }
    .bio-slider-label {
      margin-top: 14px;
      text-align: center;
      font-size: var(--ri-text-body);
      color: #cbd5e1;
      font-weight: var(--ri-weight-semibold);
      text-shadow: 0 0 15px rgba(148, 163, 184, 0.6);
      transition: color 0.3s, transform 0.3s;
    }
    .bio-slider-sub {
      text-align: center;
      font-size: var(--ri-text-caption);
      color: rgba(255,255,255,0.4);
      margin-top: 4px;
      margin-bottom: 6px;
      transition: color 0.3s;
    }
    .bio-slider-runs-dots {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 24px;
      padding: 0 8px; /* inline with thumb */
      margin-bottom: 8px;
      gap: 4px;
    }
    .bio-slider-run-dot {
      flex: 1;
      border-radius: 3px 3px 0 0;
      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      min-height: 2px;
      opacity: 0.4;
    }
    .bio-slider-run-dot.active {
      opacity: 1;
      box-shadow: 0 -7px 22px rgba(var(--bio-selected-slider-shadow-rgb, 46, 209, 244), 0.34), 0 0 0 1px rgba(var(--bio-selected-slider-ring-rgb, 46, 209, 244), 0.22);
    }
    .bio-slider-run-dot.active.bio-slider-run-dot--new {
      box-shadow: 0 -7px 22px rgba(var(--bio-selected-slider-shadow-rgb, 46, 209, 244), 0.4), 0 0 0 1px rgba(var(--bio-selected-slider-ring-rgb, 46, 209, 244), 0.28) !important;
    }
    .bio-slider-run-dot--new {
      box-shadow: 0 -6px 16px rgba(46, 209, 244, 0.5) !important;
    }
    @keyframes bioNewBarGrow {
      from { transform: translateX(-50%) scaleY(0.15); opacity: 0.2; }
      to   { opacity: 1; }
    }
    @keyframes bioNewBadgePop {
      0%   { opacity: 0;   transform: translateX(-50%) translateY(4px)  scale(0.6); }
      40%  { opacity: 1;   transform: translateX(-50%) translateY(-3px) scale(1.15); }
      65%  { opacity: 1;   transform: translateX(-50%) translateY(0)    scale(1); }
      88%  { opacity: 0.9; }
      100% { opacity: 0;   transform: translateX(-50%) translateY(-5px) scale(0.8); }
    }

    /* -- Bio Mobile Legend (collapsible) -- */
    .bio-mobile-legend {
      padding: 4px 8px 2px;
    }
    .bio-mobile-legend-toggle {
      background: none; border: none; color: rgba(255,255,255,0.45);
      font-size: var(--ri-text-label); cursor: pointer; display: flex; align-items: center; gap: 4px;
      padding: 2px 0; font-family: inherit;
    }
    .bio-mobile-legend-toggle:hover { color: rgba(255,255,255,0.65); }
    .bio-legend-chevron {
      transition: transform 0.2s ease;
    }
    .bio-mobile-legend-toggle[aria-expanded="true"] .bio-legend-chevron {
      transform: rotate(180deg);
    }
    .bio-mobile-legend-items {
      display: flex; flex-wrap: wrap; gap: 8px 14px;
      padding: 6px 0 4px;
    }
    .bio-ml-item {
      display: flex; align-items: center; gap: 4px;
      font-size: var(--ri-text-label); color: rgba(255,255,255,0.4);
    }
    .bio-ml-line {
      display: inline-block; width: 16px; height: 0;
    }

    .bio-axis-header {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      min-height: 0;
      margin: 0;
      opacity: 0;
      pointer-events: none;
      transition: min-height 0.22s ease, margin 0.22s ease, opacity 0.18s ease;
    }
    .bio-axis-header.visible {
      min-height: 18px;
      margin: 0 0 4px;
      opacity: 1;
    }
    .bio-axis-header-label {
      padding: 4px 10px 4px 28px;
      color: rgba(238, 247, 255, 0.94);
      font-size: var(--ri-text-label);
      line-height: 1;
      font-weight: 600;
      letter-spacing: 0.02em;
      white-space: nowrap;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(7, 12, 24, 0.74), rgba(10, 18, 32, 0.42));
      box-shadow: 0 8px 20px rgba(0,0,0,0.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .bio-axis-toggle {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 48px;
      background: linear-gradient(180deg, rgba(8, 14, 28, 0.94), rgba(12, 22, 40, 0.82));
      border: 1px solid rgba(46,209,244,0.24);
      border-left: none;
      border-radius: 0 8px 8px 0;
      color: rgba(221,246,255,0.9);
      font-size: 0;
      padding: 0;
      cursor: pointer;
      transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
      font-family: inherit;
      box-shadow: 0 0 0 1px rgba(46,209,244,0.08), 0 12px 24px rgba(0,0,0,0.28), 0 0 18px rgba(46,209,244,0.14);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .bio-axis-toggle:hover,
    .bio-axis-toggle:active {
      background: linear-gradient(180deg, rgba(12, 22, 40, 0.98), rgba(16, 28, 50, 0.88));
      border-color: rgba(46,209,244,0.4);
      color: rgba(240,252,255,0.98);
      box-shadow: 0 0 0 1px rgba(46,209,244,0.12), 0 14px 28px rgba(0,0,0,0.3), 0 0 22px rgba(46,209,244,0.22);
    }
    .bio-axis-toggle[aria-expanded="true"] {
      top: -20px;
      left: 0;
      transform: none;
      width: 22px;
      height: 22px;
      border: 1px solid rgba(46,209,244,0.26);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(7, 12, 24, 0.92), rgba(11, 20, 34, 0.8));
      color: rgba(221,246,255,0.92);
      box-shadow: 0 8px 18px rgba(0,0,0,0.28), 0 0 14px rgba(46,209,244,0.18);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .bio-axis-toggle[aria-expanded="true"]:hover,
    .bio-axis-toggle[aria-expanded="true"]:active {
      background: linear-gradient(180deg, rgba(10, 18, 32, 0.98), rgba(14, 24, 42, 0.88));
      border-color: rgba(46,209,244,0.42);
      color: rgba(240,252,255,1);
    }
    .bio-axis-toggle .bio-axis-chevron {
      width: 12px;
      height: 12px;
      filter: drop-shadow(0 0 8px rgba(46,209,244,0.25));
      transition: transform 0.25s ease;
      transform: rotate(-90deg);
    }
    .bio-axis-toggle[aria-expanded="true"] .bio-axis-chevron {
      transform: rotate(180deg);
    }
    .bio-axis-overlay {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 0;
      overflow: visible;
      z-index: 5;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .bio-axis-overlay.visible {
      opacity: 1;
    }
    .bio-axis-label {
      position: absolute;
      left: 8px;
      display: inline-flex;
      align-items: center;
      color: rgba(244, 250, 255, 0.98);
      font-size: var(--ri-text-micro);
      font-weight: 600;
      font-family: 'Noto Sans', system-ui, sans-serif;
      transform: translateY(-50%);
      pointer-events: none;
      white-space: nowrap;
      letter-spacing: 0.01em;
      text-shadow: 0 1px 2px rgba(0,0,0,0.62);
      z-index: 1;
    }
    .bio-axis-label::before {
      content: '';
      position: absolute;
      inset: -6px -9px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(6, 10, 20, 0.72), rgba(10, 18, 32, 0.42));
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      z-index: -1;
    }
    .bio-axis-title {
      position: absolute;
      left: 6px;
      top: 4px;
      color: rgba(46, 209, 244, 0.8);
      font-size: var(--ri-text-micro);
      font-weight: 600;
      font-family: 'Noto Sans', system-ui, sans-serif;
      pointer-events: none;
      white-space: nowrap;
      text-shadow: 0 0 4px rgba(46, 209, 244, 0.3);
    }
    .bio-pace-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 22px;
      overflow: visible;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.24s ease;
    }
    .bio-pace-overlay.visible { opacity: 1; }
    .bio-pace-tick {
      position: absolute;
      top: 1px;
      width: 1px;
      transform: translateX(-50%);
      background: rgba(241, 245, 249, 0.2);
      box-shadow: none;
    }
    .bio-pace-tick.is-active {
      background: rgba(248, 250, 252, 0.76);
      box-shadow: 0 0 10px rgba(46, 209, 244, 0.16);
    }
    /* Pace axis labels: level, 11 px, faint, tabular (audit V1-04, V1-12). */
    .bio-pace-label {
      position: absolute;
      top: 6px;
      display: block;
      min-width: 0;
      padding: 0;
      transform: translateX(-50%);
      color: var(--ri-text-faint, rgba(255,255,255,0.62));
      font-size: var(--ri-text-micro);
      font-weight: 500;
      font-variant-numeric: var(--ri-numeric, tabular-nums);
      letter-spacing: 0;
      line-height: 1;
      white-space: nowrap;
      z-index: 1;
    }
    .bio-pace-label.is-active {
      color: #fff;
      font-weight: 600;
    }
    .bio-pace-label.is-muted {
      color: rgba(255,255,255,0.5);
    }
    /* Touch scrub: the pace readout under the slider switches between copies drawn once per
       bracket (buildSliderReadouts), so a drag never lays out text; the real label and run
       count are rewritten when the finger rests or lifts. */
    .bio-slider-readouts {
      position: absolute;
      left: 0;
      width: 100%;
      pointer-events: none;
      opacity: 0;
      will-change: opacity;
    }
    .bio-slider-readout {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      opacity: 0;
      will-change: opacity;
    }
    .bio-slider-readout.is-current { opacity: 1; }
    .bio-bracket-slider-wrap.is-scrubbing .bio-slider-readouts { opacity: 1; }
    .bio-bracket-slider-wrap.is-scrubbing > #bioSliderLabel,
    .bio-bracket-slider-wrap.is-scrubbing > #bioSliderSub { opacity: 0; }
    /* Touch screens: the slider dot is this element, a compositor layer that the touch
       handler moves itself (owner 2026-10-06: "as smooth as a spotify app slider"). The
       native thumb stays in the input, invisible, for its value. Same dot as the phone
       thumb; it grows while held and glides onto its pace on release. */
    .bio-slider-touch-thumb { display: none; }
    .bio-bracket-slider-wrap.bio-slider-touch .bio-slider-touch-thumb {
      --bio-selected-slider-thumb-depth-rgb: 6, 24, 31;
      --bio-selected-slider-thumb-edge-rgb: 20, 94, 113;
      --bio-selected-slider-thumb-ring-rgb: 104, 222, 247;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: var(--bio-touch-thumb-size, 18px);
      height: var(--bio-touch-thumb-size, 18px);
      margin: calc(var(--bio-touch-thumb-size, 18px) / -2) 0 0 calc(var(--bio-touch-thumb-size, 18px) / -2);
      pointer-events: none;
      opacity: 0;
      will-change: transform;
    }
    /* The circle is drawn inside, so growing it never scales the element's position
       (a scale on the moved element itself pushed the held dot 25 % off the finger). */
    .bio-bracket-slider-wrap.bio-slider-touch .bio-slider-touch-thumb::after {
      content: '';
      position: absolute;
      inset: 0;
      box-sizing: border-box;
      border-radius: 50%;
      border: 1.5px solid rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.9);
      background: rgba(var(--bio-selected-slider-thumb-depth-rgb), 0.96);
      transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 140ms ease, border-color 140ms ease;
    }
    .bio-bracket-slider-wrap.bio-slider-touch .bio-slider-touch-thumb.is-placed { opacity: 1; }
    .bio-bracket-slider-wrap.bio-slider-touch .bio-slider-touch-thumb.is-gliding {
      transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .bio-bracket-slider-wrap.bio-slider-touch.bio-slider-pressed .bio-slider-touch-thumb::after {
      transform: scale(1.25);
      background: rgba(var(--bio-selected-slider-thumb-edge-rgb), 0.98);
      border-color: rgba(var(--bio-selected-slider-thumb-ring-rgb), 1);
    }
    @media (min-width: 641px) {
      .bio-bracket-slider-wrap.bio-slider-touch .bio-slider-touch-thumb::after { border-width: 2px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .bio-bracket-slider-wrap.bio-slider-touch .bio-slider-touch-thumb,
      .bio-bracket-slider-wrap.bio-slider-touch .bio-slider-touch-thumb::after { transition: none !important; }
    }
    .bio-bracket-slider-wrap.bio-slider-touch input[type=range]::-webkit-slider-thumb { opacity: 0; }
    .bio-bracket-slider-wrap.bio-slider-touch input[type=range]::-moz-range-thumb { opacity: 0; }
    /* Phones draw the chart's selection line as this element instead of on the canvas, so a
       pace-slider drag moves one compositor layer and never redraws the chart (owner
       2026-10-06: "as smooth as a Spotify slider"). Same 1 px line, 3 px dash and 5 px gap
       as the canvas line it replaces; stryd-profile-page.js places it. */
    .bio-selection-beam { display: none; }
    @media (max-width: 640px) {
      #biomechanicalProfileSection .bio-selection-beam {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 0;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        background: repeating-linear-gradient(to bottom, rgba(var(--bio-selection-beam-rgb, 132, 235, 251), 0.55) 0 3px, transparent 3px 8px);
        transform: translate3d(0, 0, 0);
        will-change: transform;
      }
      #biomechanicalProfileSection .bio-selection-beam.is-visible { opacity: 1; }
    }

    /* -- Drift Inspector Section -- */
    .di-dropdown-wrap { position: relative; width: 100%; z-index: 1; }
    .di-dropdown-wrap.is-open { z-index: 2320; }
    .di-dropdown-stack-lift { z-index: 2319 !important; }
    /* The run picker is a field: the shared .ri-input look (40/44 px, white .36
       border, one chevron, one cyan focus ring; audit S-20, X-11). */
    .di-dropdown-trigger {
      width: 100%; min-height: var(--ri-control-md, 40px); padding: 0 36px 0 12px; box-sizing: border-box;
      border-radius: var(--ri-radius-sm, 8px); border: 1px solid var(--ri-border-control, rgba(255,255,255,0.36));
      background: var(--ri-surface-control, rgba(255,255,255,0.05));
      color: var(--ri-text-strong, rgba(255,255,255,0.96));
      font-size: var(--ri-text-input); font-weight: 400; font-family: var(--ri-font-sans, 'Noto Sans', system-ui, sans-serif);
      cursor: pointer; text-align: left; display: flex; align-items: center;
      transition: border-color var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease), box-shadow var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease); position: relative;
    }
    .di-dropdown-trigger::after {
      content: ''; position: absolute; right: 12px; top: 50%;
      transform: translateY(-50%); width: 12px; height: 12px;
      background-image: url("/images/icons/run-it/chevron-down.svg?v=20261007-icon-edges-v6");
      background-repeat: no-repeat; background-position: center;
      transition: transform var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease); pointer-events: none;
    }
    .di-dropdown-wrap.is-open .di-dropdown-trigger::after { transform: translateY(-50%) rotate(180deg); }
    @media (hover: hover) {
      .di-dropdown-trigger:hover { border-color: rgba(255,255,255,0.5); }
    }
    .di-dropdown-trigger:focus { outline: none; }
    .di-dropdown-trigger:focus-visible,
    .di-dropdown-wrap.is-open .di-dropdown-trigger {
      border-color: var(--ri-cyan, #2ED1F4);
      box-shadow: var(--ri-focus-field-shadow, inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 18px rgba(46, 209, 244, 0.32), 0 0 40px rgba(46, 209, 244, 0.18));
    }
    @media (max-width: 640px) {
      .di-dropdown-trigger { min-height: 44px; }
    }
    .di-dropdown-label {
      flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
      display: flex; align-items: center; gap: 6px;
    }
    .di-dropdown-menu {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: linear-gradient(165deg, rgba(10, 24, 48, 0.995), rgba(14, 24, 44, 0.995) 54%, rgba(12, 16, 34, 0.995));
      border: 1px solid rgba(46, 209, 244, 0.24);
      border-radius: 10px;
      max-height: 320px; overflow-x: hidden; overflow-y: auto; z-index: 2321;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
      scrollbar-width: thin;
      scrollbar-color: rgba(46, 209, 244, 0.34) rgba(2, 6, 23, 0.28);
      box-shadow: 0 16px 40px rgba(0,0,0,0.66), 0 0 0 1px rgba(46, 209, 244, 0.08) inset;
    }
    .di-dropdown-item {
      display: flex; align-items: center; gap: 8px; padding: 9px 14px;
      cursor: pointer; font-size: var(--ri-text-secondary); color: #e2e8f0;
      font-family: 'Noto Sans', system-ui, sans-serif;
      border-bottom: 1px solid rgba(46, 209, 244, 0.08);
      transition: background 0.12s, border-color 0.12s;
    }
    .di-dropdown-item:last-child { border-bottom: none; }
    .di-dropdown-item:hover {
      background: linear-gradient(90deg, rgba(46, 209, 244, 0.10), rgba(36, 55, 92, 0.18));
      border-bottom-color: rgba(46, 209, 244, 0.14);
    }
    .di-dropdown-item.is-selected {
      background: linear-gradient(90deg, rgba(46, 209, 244, 0.12), rgba(40, 52, 88, 0.22));
      border-bottom-color: rgba(46, 209, 244, 0.18);
    }
    .di-dropdown-item-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Run confidence: the shared tag (.ri-tag--high/--medium/--low). It sits
       last, so the selected row's check (::after) lands left of it and every
       tag keeps the same right edge (owner 2026-10-06). */
    .di-dropdown-conf-badge { flex-shrink: 0; order: 1; }
    /* Bottom fade on the dropdown scroll list */
    .di-dropdown-fade {
      position: sticky;
      bottom: 0;
      display: block;
      height: 36px;
      margin-top: -36px;
      background: linear-gradient(to top, rgba(12, 16, 34, 1) 0%, transparent 100%);
      pointer-events: none;
      border-radius: 0 0 10px 10px;
      flex-shrink: 0;
    }
    .drift-inspector-note {
      margin: 14px 0 8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(46, 209, 244, 0.16);
      background: linear-gradient(140deg, rgba(46, 209, 244, 0.08), rgba(46, 209, 244, 0.08));
      color: rgba(255,255,255,0.68);
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
    }
    /* -- Drift Inspector one-row layout -- */
    .drift-inspector-summary {
      display: grid;
      grid-template-columns: minmax(360px, 1.05fr) minmax(0, 1.25fr) minmax(340px, 1.05fr);
      gap: 14px;
      margin: 14px 0;
      align-items: stretch;
    }
    .di-confidence-section,
    .di-metadata-row {
      background:
        linear-gradient(135deg, rgba(46, 209, 244, 0.08), rgba(46, 209, 244, 0.03) 42%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(46, 209, 244, 0.14);
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
      position: relative;
    }
    /* Left column: two signal cards stacked */
    .di-hero-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
      width: 100%;
      min-width: 0;
      padding: 10px;
    }
    .di-hero-card {
      padding: 12px 12px;
      border-radius: 12px;
      position: relative;
      min-width: 0;
      min-height: 126px;
      overflow: visible;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 3px;
    }
    @keyframes di-glow-pulse {
      0%,100% { opacity: 0.13; }
      50%      { opacity: 0.22; }
    }
    .di-hero-card--mech::before,
    .di-hero-card--hr::before {
      display: none;
    }
    .di-hero-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(ellipse at 30% 40%, var(--glow-c, transparent) 0%, transparent 70%);
      animation: di-glow-pulse 3s ease-in-out infinite;
      pointer-events: none;
    }
    .di-hero-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      margin-bottom: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      min-width: 0;
      white-space: nowrap;
    }
    .di-hero-card--mech .di-hero-label { color: rgba(255,255,255,0.55); }
    .di-hero-card--hr .di-hero-label { color: rgba(255,255,255,0.55); }
    .di-hero-icon {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      margin-right: 4px;
      opacity: 0.7;
    }
    .di-hero-sublabel {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.28);
      margin-bottom: 4px;
    }
    .di-hero-value {
      font-size: var(--ri-text-metric-lg);
      font-weight: var(--ri-weight-semibold);
      font-family: inherit;
      line-height: 1.1;
      text-align: center;
    }
    .di-hero-meta {
      margin-top: 3px;
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.36);
      line-height: var(--ri-leading-label);
      text-align: center;
    }
    .di-hero-meta .di-sub-note {
      display: block;
      margin-top: 1px;
      color: rgba(255,255,255,0.18);
    }
    /* Middle column: confidence */
    .di-confidence-section {
      display: flex;
      flex-direction: row;
      gap: 8px;
      padding: 8px 10px;
      height: 100%;
      box-sizing: border-box;
      align-items: center;
    }
    .di-conf-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 82px;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding-right: 7px;
      border-right: 1px solid rgba(46, 209, 244,0.12);
    }
    .di-conf-score-row {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      flex-wrap: wrap;
    }
    .di-confidence-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.35);
    }
    .di-confidence-score {
      font-size: var(--ri-text-metric-lg);
      font-weight: var(--ri-weight-semibold);
      font-family: inherit;
      color: rgba(255,255,255,0.5);
    }
    .di-confidence-of {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.22);
    }
    .di-confidence-meta {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.34);
      margin-top: 2px;
      text-align: center;
    }
    .di-confidence-meta--wind {
      max-width: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: help;
    }
    /* Confidence rules: chip grid */
    .di-confidence-rules {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 5px;
      flex: 1;
      min-width: 0;
    }
    /* Metric chips */
    .di-rtag {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 6px;
      border-radius: 7px;
      min-width: 80px;
      min-height: 54px;
      flex: 1 1 calc(33% - 5px);
      cursor: help;
      position: relative;
      text-align: center;
      gap: 2px;
      overflow: visible;
    }
    .di-rtag--ok   { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.18); }
    .di-rtag--warn { background: rgba(251,191,36,0.07);  border: 1px solid rgba(251,191,36,0.22); }
    .di-rtag--bad  { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.20); }
    .di-rtag--ceil { background: rgba(251,191,36,0.07);  border: 1px solid rgba(251,191,36,0.15); }
    .di-rtag--info { background: rgba(148,163,184,0.08); border: 1px solid rgba(148,163,184,0.18); }
    .di-rtag-name {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.35);
      line-height: 1.1;
    }
    .di-rtag--warn .di-rtag-name { color: #fde68a; }
    .di-rtag--bad  .di-rtag-name { color: #fca5a5; }
    .di-rtag--ok   .di-rtag-name { color: #6ee7b7; }
    .di-rtag--ceil .di-rtag-name { color: #fde68a; }
    .di-rtag--info .di-rtag-name { color: #94a3b8; }
    .di-rtag-val {
      font-size: var(--ri-text-secondary);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: rgba(255,255,255,0.85);
      line-height: 1.05;
      word-break: break-word;
    }
    .di-rtag--warn .di-rtag-val { color: rgba(255,255,255,0.9); }
    .di-rtag-sub {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.28);
      line-height: 1.05;
    }
    .di-rtag--warn .di-rtag-sub { color: rgba(251,191,36,0.55); }
    .di-rtag--bad .di-rtag-sub { color: rgba(248,113,113,0.55); }
    .di-rtag-pen      { font-size: var(--ri-text-caption); font-weight: var(--ri-weight-semibold); color: #f87171; line-height: 1.05; }
    .di-rtag-pen-warn { font-size: var(--ri-text-caption); font-weight: var(--ri-weight-semibold); color: #fbbf24; line-height: 1.05; }
    .di-rtag-ok   { font-size: var(--ri-text-caption); font-weight: var(--ri-weight-semibold); color: #34d399; line-height: 1.05; }
    .di-rtag-ceil { font-size: var(--ri-text-caption); line-height: 1.05; }
    .di-rtag-info { font-size: var(--ri-text-caption); font-weight: 600; color: #94a3b8; line-height: 1.05; }
    /* data-tip CSS tooltip */
    [data-tip] { position: relative; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 7px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--ri-surface-popover, var(--ri-surface-overlay, #120F22));
      border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2));
      border-radius: 8px;
      padding: 8px 11px;
      min-width: 220px;
      max-width: min(340px, 86vw);
      font-size: var(--ri-text-tooltip);
      color: rgba(255,255,255,0.78);
      line-height: 1.5;
      z-index: 9999;
      white-space: pre-line;
      text-align: left;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease;
      box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
      font-weight: 400;
      text-transform: none;
      letter-spacing: normal;
    }
    [data-basic][data-tip]::after {
      content: attr(data-tip);
    }
    [data-tip]:hover::after,
    [data-tip].di-touch-tip-active::after { opacity: 1; }
    .di-confidence-rules [data-tip],
    .di-metadata-row [data-tip] {
      position: relative;
    }
    .di-confidence-rules [data-tip]:hover,
    .di-confidence-rules [data-tip]:focus-visible,
    .di-confidence-rules [data-tip].di-touch-tip-active,
    .di-metadata-row [data-tip]:hover,
    .di-metadata-row [data-tip]:focus-visible,
    .di-metadata-row [data-tip].di-touch-tip-active {
      z-index: 40;
    }
    #driftInspectorSection [data-tip]::after,
    #driftInspectorSection [data-tip].di-touch-tip-active::after {
      display: none !important;
    }
    /* Right column: metadata */
    .di-metadata-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      padding: 10px;
      width: 100%;
      min-height: 112px;
      box-sizing: border-box;
      overflow: visible;
    }
    .di-meta-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2px;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.02);
      min-height: 46px;
    }
    .di-meta-item--run {
      grid-column: 1 / -1;
    }
    .di-meta-item--context-right {
      grid-column: 2;
    }
    .di-meta-label {
      font-size: var(--ri-text-caption);
      font-weight: var(--ri-weight-semibold);
      color: rgba(255,255,255,0.6);
      white-space: nowrap;
      order: 2;
    }
    .di-meta-label--gct {
      line-height: 1.1;
      max-width: 100%;
      text-align: center;
      white-space: normal;
    }
    .di-meta-label--context {
      text-transform: none;
      letter-spacing: 0.02em;
    }
    .di-meta-value {
      font-size: var(--ri-text-secondary);
      font-weight: 600;
      color: #ffffff;
      font-variant-numeric: tabular-nums;
      text-align: center;
      line-height: var(--ri-leading-secondary);
      order: 1;
    }
    .di-meta-sub {
      display: block;
      margin-top: 2px;
      font-size: var(--ri-text-label);
      font-weight: 500;
      line-height: var(--ri-leading-label);
      color: rgba(255,255,255,0.62);
      letter-spacing: 0.01em;
    }
    .di-visual-metric-shell {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      max-width: 100%;
      min-width: 0;
      cursor: pointer;
    }
    .di-visual-metric-shell::after {
      content: '';
      position: static;
      flex: 0 0 4px;
      width: 4px;
      height: 4px;
      border-right: 1.4px solid rgba(46,209,244,0.62);
      border-bottom: 1.4px solid rgba(46,209,244,0.62);
      transform: translateY(-1px) rotate(45deg);
      pointer-events: none;
    }
    .di-visual-metric-text {
      color: rgba(255,255,255,0.68);
      font: inherit;
      font-size: var(--ri-text-secondary) !important;
      font-weight: var(--ri-weight-semibold);
      letter-spacing: 0;
      line-height: var(--ri-leading-secondary);
      white-space: nowrap;
      pointer-events: none;
    }
    .di-visual-metric-select {
      position: absolute;
      inset: -6px -12px -6px -6px;
      width: calc(100% + 18px);
      height: calc(100% + 12px);
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      border-radius: 0;
      background: transparent;
      background-image: none !important;
      color: transparent;
      opacity: 0;
      padding: 0;
      cursor: pointer;
    }
    .di-hero-label .di-visual-metric-shell { margin-left: 2px; }
    .di-visual-metric-select:focus {
      outline: none;
    }
    .di-visual-metric-shell:focus-within {
      outline: 1px solid rgba(46,209,244,0.45);
      outline-offset: 2px;
      border-radius: 3px;
    }
    .di-visual-metric-select option {
      background: #020617;
      color: #e2e8f0;
    }
    .di-hero-card--visual-selected .di-hero-meta {
      color: rgba(255,255,255,0.50);
    }
    .di-hero-metric-range {
      display: block;
      color: rgba(255,255,255,0.46);
    }
    .di-visual-metric-delta {
      color: rgba(255,255,255,0.42);
    }
    @media (max-width: 1120px) {
      .drift-inspector-summary { grid-template-columns: 1fr; }
      .di-confidence-section { flex-direction: column; gap: 10px; }
      .di-conf-left {
        border-right: none;
        border-bottom: 1px solid rgba(46, 209, 244,0.12);
        padding-right: 0;
        padding-bottom: 9px;
      }
    }
    @media (max-width: 768px) {
      .di-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .di-rtag { flex: 1 1 calc(50% - 5px); min-width: 72px; }
    }
    .drift-inspector-stat {
      padding: 12px 14px;
      border-radius: 12px;
      background: linear-gradient(140deg, rgba(46, 209, 244, 0.12), rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.01));
      border: 1px solid rgba(46, 209, 244, 0.16);
      box-shadow: 0 8px 22px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .drift-inspector-stat--primary {
      background: linear-gradient(145deg, rgba(46, 209, 244, 0.12), rgba(46, 209, 244, 0.16) 55%, rgba(255,255,255,0.04));
      border-color: rgba(46, 209, 244, 0.28);
      box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 0 1px rgba(46,209,244,0.08), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .drift-inspector-stat--primary .di-label {
      color: rgba(255,255,255,0.56);
    }
    .drift-inspector-stat--primary .di-value {
      font-size: var(--ri-text-metric-lg);
    }
    .drift-inspector-stat .di-label {
      font-size: var(--ri-text-caption);
      font-weight: 600;
      color: rgba(255,255,255,0.4);
      margin-bottom: 4px;
    }
    .drift-inspector-stat .di-value {
      font-size: var(--ri-text-metric-lg);
      font-weight: var(--ri-weight-semibold);
      color: #e2e8f0;
    }
    .drift-inspector-stat .di-sub {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.35);
      margin-top: 2px;
    }
    .drift-inspector-stat .di-sub-note {
      display: block;
      margin-top: 4px;
      color: rgba(255,255,255,0.28);
    }
    /* Drift Inspector status and confidence: the shared tag (.ri-tag). */
    .di-conf-wrap { position: relative; display: inline-block; cursor: default; }
    .di-conf-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--ri-surface-popover, var(--ri-surface-overlay, #120F22));
      border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2));
      border-radius: 8px;
      padding: 10px 14px;
      min-width: 220px;
      max-width: 320px;
      z-index: 100;
      box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
      pointer-events: none;
    }
    .di-conf-wrap:hover .di-conf-tooltip { display: block; }
    .di-conf-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(46,209,244,0.25);
    }
    .di-conf-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2px 0;
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.7);
    }
    .di-conf-row + .di-conf-row { border-top: 1px solid rgba(255,255,255,0.04); }
    .di-conf-penalty { color: #f87171; font-weight: 600; font-variant-numeric: tabular-nums; }
    .di-conf-ok { color: #34d399; }
    .di-conf-ceiling { border-top: 1px solid rgba(255,255,255,0.1) !important; margin-top: 2px; opacity: 0.7; font-style: italic; }
    .di-conf-cap { font-size: var(--ri-text-label); }
    .di-conf-total {
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px solid rgba(255,255,255,0.1);
      font-weight: var(--ri-weight-semibold);
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.9);
      display: flex;
      justify-content: space-between;
    }
    .drift-inspector-charts {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .drift-inspector-charts .drift-chart-card {
      margin-top: 0;
    }
    .drift-inspector-charts .drift-chart-container {
      height: 240px;
    }
    /* Elevation + GPS map side-by-side row */
    .di-elev-gps-row {
      display: grid;
      grid-template-columns: 1fr minmax(260px, 0.52fr);
      gap: 16px;
      align-items: stretch;
    }
    .di-gps-map-card {
      background:
        linear-gradient(135deg, rgba(46, 209, 244, 0.08), rgba(46, 209, 244, 0.03) 42%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(46, 209, 244, 0.14);
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      min-height: 208px;
    }
    .di-gps-map-card h5 {
      font-size: var(--ri-text-subtitle) !important;
      color: rgba(255,255,255,0.72);
      margin: 0;
      font-weight: 600;
      position: absolute;
      top: 12px;
      left: 14px;
      right: 14px;
      z-index: 520;
      text-shadow: 0 1px 10px rgba(2, 6, 23, 0.9);
    }
    .di-gps-zoom-controls {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 530;
      display: inline-flex;
      gap: 6px;
    }
    .di-gps-leaflet-wrap {
      position: absolute;
      inset: 0;
      min-height: 100%;
      border-radius: 14px;
      overflow: hidden;
      isolation: isolate;
      background:
        linear-gradient(135deg, rgba(46, 209, 244, 0.08), rgba(46, 209, 244, 0.03) 42%, rgba(255,255,255,0.02) 100%),
        linear-gradient(180deg, #081126 0%, #0a1328 54%, #060b1e 100%);
      box-shadow: inset 0 0 24px rgba(0,0,0,0.24);
      -webkit-mask-image: radial-gradient(135% 118% at 50% 50%, #000 58%, rgba(0,0,0,0.98) 72%, rgba(0,0,0,0.82) 84%, rgba(0,0,0,0.46) 94%, transparent 100%);
      mask-image: radial-gradient(135% 118% at 50% 50%, #000 58%, rgba(0,0,0,0.98) 72%, rgba(0,0,0,0.82) 84%, rgba(0,0,0,0.46) 94%, transparent 100%);
    }
    .di-gps-leaflet-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(46, 209, 244, 0.08), rgba(46, 209, 244, 0.03) 42%, rgba(255,255,255,0.02) 100%),
        linear-gradient(180deg, #0b142d 0%, #0d152e 48%, #080d22 100%);
      mix-blend-mode: normal;
      opacity: 1;
    }
    .di-gps-leaflet-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(148,163,184,0.08), rgba(51,65,85,0.07) 44%, rgba(255,255,255,0.03) 100%),
        radial-gradient(118% 108% at 50% 50%, rgba(148,163,184,0.05) 0%, rgba(46,209,244,0.04) 62%, rgba(6,10,28,0.05) 100%);
      mix-blend-mode: screen;
      opacity: 0;
    }
    .di-gps-leaflet-wrap .leaflet-container,
    .di-gps-leaflet-wrap .leaflet-pane,
    .di-gps-leaflet-wrap .leaflet-map-pane {
      background: transparent !important;
      border-radius: 8px;
    }
    @media (pointer: coarse), (max-width: 640px) {
      .di-gps-leaflet-wrap,
      .di-gps-leaflet-wrap .leaflet-container,
      .bucket-route-map,
      .bucket-route-map .leaflet-container {
        touch-action: pan-y !important;
      }
    }
    .di-gps-leaflet-wrap .leaflet-tile-pane {
      opacity: 0.42 !important;
      mix-blend-mode: normal !important;
      filter: grayscale(1) sepia(0.18) hue-rotate(165deg) saturate(0.85) brightness(2.15) contrast(1.18) drop-shadow(0 0 1.2px rgba(148,163,184,0.2)) !important;
    }
    .di-gps-leaflet-wrap .leaflet-overlay-pane { z-index: 500 !important; }
    .di-gps-leaflet-wrap .leaflet-marker-pane { z-index: 505 !important; }
    .di-gps-leaflet-wrap .leaflet-tooltip-pane { z-index: 510 !important; }
    .di-gps-leaflet-wrap .leaflet-popup-pane { z-index: 515 !important; }
    .di-gps-leaflet-wrap .leaflet-overlay-pane path {
      filter: none;
    }
    .di-gps-leaflet-wrap .di-gps-base-halo {
      stroke: #001f2e !important;
      stroke-width: 8px !important;
      stroke-opacity: 0.82 !important;
    }
    .di-gps-leaflet-wrap .di-gps-base-route {
      stroke: #38bdf8 !important;
      stroke-width: 4px !important;
      stroke-opacity: 0.92 !important;
    }
    .di-gps-leaflet-wrap .di-gps-window-halo {
      stroke: #06101f !important;
      stroke-width: 12px !important;
      stroke-opacity: 0.92 !important;
      filter: none !important;
    }
    .di-gps-leaflet-wrap .di-gps-window-fresh {
      stroke: #21ff92 !important;
      stroke-width: 7px !important;
      stroke-opacity: 1 !important;
      filter: none !important;
    }
    .di-gps-leaflet-wrap .di-gps-window-fatigue {
      stroke: #ff7a1a !important;
      stroke-width: 7px !important;
      stroke-opacity: 1 !important;
      filter: none !important;
    }
    /* One small key on the map's right edge, under the zoom buttons (owner 2026-10-16: "put the
       legend vertically on the right, and bit smaller"); drift-surface.js adds the surfaces to it. */
    .di-gps-legend {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      margin-top: 0;
      padding: 6px 8px;
      border-radius: 8px;
      background: rgba(7, 14, 27, 0.78);
      font-size: var(--ri-text-micro, 11px);
      line-height: 1.3;
      color: rgba(255,255,255,0.72);
      position: absolute;
      top: 58px;
      right: 10px;
      z-index: 520;
      pointer-events: none;
    }
    .di-gps-legend span { white-space: nowrap; }
    .di-gps-legend span::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 3px;
      border-radius: 2px;
      margin-right: 6px;
      vertical-align: middle;
    }
    .di-gps-legend .gps-leg-fresh::before { background: #21ff92; }
    .di-gps-legend .gps-leg-fatigue::before { background: #ff7a1a; }
    .di-gps-legend .gps-leg-route::before { background: #38bdf8; }
    @media (max-width: 640px) {
      /* Section rhythm comes from .ri-sections (24 px on phones), not a margin. */
      .drift-inspector-charts .drift-chart-container { height: 180px; }
      .drift-inspector-summary {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 8px 0 14px;
      }
      .di-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 6px; }
      .di-hero-card { min-height: 90px; padding: 8px 6px; }
      .di-confidence-section { padding: 7px; gap: 6px; }
      .di-conf-left { min-width: 0; width: 100%; padding-bottom: 4px; }
      .di-confidence-rules {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        width: 100%;
      }
      .di-rtag {
        min-width: 0;
        min-height: 46px;
        padding: 4px 3px;
        width: 100%;
        flex: none;
      }
      .di-metadata-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 6px; min-height: 0; }
      .di-meta-item { padding: 6px 8px; min-height: 48px; min-width: 0; }
      .di-meta-item--run { grid-column: 1 / -1; }
      .di-meta-item--context-right { grid-column: auto; }
      .di-meta-label { white-space: normal; text-align: center; }
      .di-meta-value {
        overflow-wrap: anywhere;
      }
      #driftInspectorChartsWrap {
        margin-top: 4px;
        min-width: 0;
      }
      #driftInspectorChartsWrap,
      #driftInspectorChartsWrap .drift-chart-card,
      #driftInspectorChartsWrap .drift-chart-toolbar,
      #driftInspectorChartsWrap .drift-chart-actions {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }
      #driftInspectorSection [data-tip] {
        cursor: default;
      }
      #driftInspectorSection [data-tip]::after {
        display: none !important;
      }
      #driftInspectorSection [data-tip].di-touch-tip-active::after {
        display: none !important;
        position: fixed;
        left: 50%;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(290px, calc(100vw - 42px));
        min-width: 0;
        max-width: calc(100vw - 42px);
        opacity: 1;
        z-index: 2147483647;
      }
      .di-elev-gps-row { grid-template-columns: 1fr; }
      /* Drift summary collapsible on mobile */
      .di-summary-collapsible {
        width: 100%;
        min-width: 0;
      }
      .di-summary-collapsible.di-summary-expanded {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .di-summary-collapsible { display: none; }
      .di-summary-collapsible.di-summary-expanded { display: block; }
      .di-summary-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        padding: 6px 0;
        margin-top: 4px;
        background: none;
        border: none;
        border-top: 1px solid rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.5);
        font-size: var(--ri-text-label);
        font-weight: 600;
        cursor: pointer;
        transition: color 0.18s ease;
      }
      .di-summary-toggle:hover { color: rgba(255,255,255,0.7); }
      .di-summary-toggle svg { transition: transform 0.25s ease; }
      .di-summary-toggle.di-summary-expanded svg { transform: rotate(90deg); }
    }
    @media (min-width: 641px) {
      .di-summary-toggle { display: none; }
      .di-summary-collapsible { display: contents !important; }
    }

    /* Cards container */
    .bucket-cards-row { display: flex; gap: 12px; }
    /* Mobile: stack cards vertically */
    @media (max-width: 640px) {
      .bucket-cards-row { flex-direction: column; gap: 10px; }
      .bucket-card { padding: 1rem; }
      .bucket-route-map {
        height: 150px;
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
        margin-bottom: -1rem;
      }
      .bucket-card .bucket-price { margin-bottom: 12px; }
      .bucket-rep-run .rep-row { font-size: var(--ri-text-label); min-height: 14px; }
    }

    /* The Run Analysis results (summary + Activity Log, which scrolls past 280px) are this
       tall with a typical run history and no new runs since the last visit. The pre-load
       placeholder and the loading spinner reserve it while the intro keeps its line, so the
       card does not change height when the results replace them. Narrow phones wrap the
       "No new runs" chip. A browser that last saw no Stryd data here
       (html[data-ra-no-results], set in stryd-profile.html) reserves the upload card
       instead, and keeps the intro hidden as the upload state does. */
    #strydRunAnalysisSection { --ra-results-min-h: 493px; }
    @media (max-width: 640px) {
      #strydRunAnalysisSection { --ra-results-min-h: 385px; }
    }
    @media (max-width: 369px) {
      #strydRunAnalysisSection { --ra-results-min-h: 402px; }
    }
    @media (max-width: 329px) {
      #strydRunAnalysisSection { --ra-results-min-h: 414px; }
    }
    html[data-ra-no-results] #strydRunAnalysisSection { --ra-results-min-h: 251px; }
    @media (max-width: 899px) {
      html[data-ra-no-results] #strydRunAnalysisSection { --ra-results-min-h: 249px; }
    }
    @media (max-width: 640px) {
      /* The spinner is 200px tall here; the upload card that follows is 194px. */
      html[data-ra-no-results] #strydRunAnalysisSection { --ra-results-min-h: 200px; }
    }
    html[data-ra-no-results] #strydRunAnalysisSection .frp-section-intro:not(.ra-intro-shown) {
      display: none;
    }
    /* The Run Analysis skeleton (kit: .ri-skeleton): the results' layout - summary chips,
       then Activity Log rows - drawn in the page markup, so it is in the layout before JS
       runs and gives the section its reserved height. showBucketState() takes it away. */
    .proc-preload-placeholder {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 12px;
      min-height: var(--ra-results-min-h, 220px);
      box-sizing: border-box;
      padding: 16px 0 0;
    }
    .proc-preload-placeholder[hidden] { display: none; }
    .stryd-results-skeleton .srs-label { align-self: flex-start; font-size: var(--ri-text-secondary); line-height: var(--ri-leading-secondary); }
    .stryd-results-skeleton .srs-label--log { margin-top: 28px; }
    .stryd-results-skeleton .srs-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ri-space-3, 12px); }
    .stryd-results-skeleton .srs-chip { display: block; height: 76px; border-radius: var(--ri-radius-md, 12px); }
    .stryd-results-skeleton .srs-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
    .stryd-results-skeleton .srs-row { display: block; height: 36px; border-radius: 8px; }
    /* A browser that last saw no Stryd data expects the upload card, not results. */
    .stryd-results-skeleton .srs-upload { display: none; }
    html[data-ra-no-results] .stryd-results-skeleton { padding: 0; }
    html[data-ra-no-results] .stryd-results-skeleton > :not(.srs-upload) { display: none; }
    html[data-ra-no-results] .stryd-results-skeleton .srs-upload { display: block; flex: 1; border-radius: 16px; }
    /* Phones draw the summary without its tile (padding 0), so the skeleton
       starts 20 px under the title as the results do (owner 2026-10-20). */
    @media (max-width: 640px) { .stryd-results-skeleton { padding-top: 0; } }
    @media (max-width: 640px) {
      .stryd-results-skeleton .srs-chips { gap: 8px; }
      .stryd-results-skeleton .srs-chip { height: 62px; }
      .stryd-results-skeleton .srs-row { height: 32px; }
    }
    /* The processing loader itself: static/run-processing-loader.css (shared with My Runs).
       Stryd keeps its own type sizes there. */
    #bucketStatsLoading .proc-patience-note { font-size: var(--ri-text-secondary); line-height: var(--ri-leading-secondary); }
    #bucketStatsLoading .proc-counter { font-size: var(--ri-text-metric-sm); }
    #bucketStatsLoading .proc-run-details,
    #bucketStatsLoading .proc-run-detail-date { font-size: var(--ri-text-micro); }
    @media (max-width: 640px) {
      #bucketStatsLoading .proc-patience-note { line-height: var(--ri-leading-secondary); }
      #bucketStatsLoading .proc-counter-main { font-size: var(--ri-text-micro); }
      #bucketStatsLoading .proc-counter .proc-num,
      #bucketStatsLoading .proc-valid-inline .proc-valid-num { font-size: var(--ri-text-metric-sm); }
    }
    .gp-inline-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1em;
      height: 1em;
      flex: 0 0 auto;
      color: currentColor;
      vertical-align: -0.13em;
    }
    .gp-inline-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .gp-inline-icon--status {
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }
    .gp-inline-icon--button,
    .gp-inline-icon--button-state {
      width: 14px;
      height: 14px;
    }
    .gp-inline-icon--option {
      width: 13px;
      height: 13px;
      margin-right: 6px;
      vertical-align: -0.1em;
    }
    #bucketStatsError { text-align: center; padding: 24px 0; color: rgba(255,255,255,0.6); max-width: 520px; margin: 0 auto; }
    .gp-state-icon {
      width: 104px;
      height: 104px;
      margin: 0 auto 16px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    .gp-state-icon img,
    .gp-state-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      overflow: visible;
      filter:
        drop-shadow(0 0 14px rgba(46, 209, 244, 0.18))
        drop-shadow(0 0 22px rgba(139, 92, 246, 0.12));
    }
    #bucketRetryBtn { display: none; margin: 0 auto; align-items: center; justify-content: center; gap: 6px; padding: 8px 20px; border-radius: 8px; background: rgba(46, 209, 244, 0.15); border: 1px solid rgba(46, 209, 244, 0.3); color: #2ED1F4; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
    #bucketRetryBtn:hover { background: rgba(46, 209, 244, 0.22); border-color: rgba(46, 209, 244, 0.5); }
    .bucket-new-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--ri-text-pill); font-weight: 600; background: rgba(46, 209, 244, 0.15); color: #2ED1F4; margin-left: 8px; }

    /* Consolidated Stats Summary */
    /* Run Analysis stats: production's grouped block (owner, 2026-10-03), in
       current tokens: one panel with a cyan edge and wash, headed "Last N days",
       holding the stat tiles. The "since last visit" tile carries the green
       status tint. Phones keep production's open layout (rule further down). */
    .bucket-stats-summary { position: relative; display: flex; flex-direction: column; gap: var(--ri-space-3, 12px); padding: var(--ri-tile-pad, 16px); margin-bottom: 0; border-radius: var(--ri-radius-md, 12px); background: linear-gradient(140deg, rgba(var(--ri-cyan-rgb, 46, 209, 244), 0.12), rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.01)); border: 1px solid var(--ri-cyan-20, rgba(46,209,244,0.2)); box-shadow: none; opacity: 0; transition: opacity .16s ease-out; }
    .bucket-stats-summary.bucket-stats-summary-visible { opacity: 1; }
    .bucket-stats-label { font-size: var(--ri-text-caption); font-weight: var(--ri-weight-regular, 400); line-height: var(--ri-leading-caption); letter-spacing: 0; text-transform: none; color: var(--ri-text-faint, rgba(255,255,255,0.62)); }
    .bucket-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ri-space-3, 12px); }
    .bucket-stats-chip { min-width: 0; padding: 12px var(--ri-tile-pad, 16px); border-radius: var(--ri-radius-md, 12px); border: 1px solid transparent; background: var(--ri-surface-tile, rgba(255,255,255,0.04)); display: flex; flex-direction: column; gap: 4px; }
    .bucket-stats-chip-key { font-size: var(--ri-text-caption); font-weight: var(--ri-weight-regular, 400); line-height: 18px; color: var(--ri-text-faint, rgba(255,255,255,0.62)); text-transform: none; letter-spacing: 0; }
    .bucket-stats-chip-value { font-size: var(--ri-text-metric-lg); font-weight: 600; color: #fff; line-height: 1.2; font-variant-numeric: tabular-nums; }
    .bucket-stats-chip-value .bucket-counter { display: inline-block; min-width: 1ch; }
    .bucket-stats-chip-value-accent { color: #fff; }
    .bucket-stats-chip-new { background: rgba(var(--ri-green-rgb, 52, 211, 153), 0.1); }
    .bucket-stats-chip-new .bucket-stats-chip-key { color: rgba(167, 243, 208, 0.9); }
    .bucket-stats-chip-new .bucket-stats-chip-value { color: var(--ri-green, #34D399); }
    .bucket-stats-chip-muted { background: var(--ri-surface-tile, rgba(255,255,255,0.04)); }
    .bucket-stats-chip:not(.bucket-stats-chip-upload) { box-shadow: var(--ri-shadow-panel, inset 0 0 0 1px rgba(46, 209, 244, 0.08), inset 0 0 14px rgba(46, 209, 244, 0.06)); }
    /* A tile whose value is words ("No new runs") reads as secondary text, not
       as a metric figure (owner 2026-10-09; same rule as garmin-profile.html). */
    .bucket-stats-chip-muted .bucket-stats-chip-value:not(:has(.bucket-counter)),
    #newRunsValue { font-size: var(--ri-text-secondary); font-weight: 500; line-height: var(--ri-leading-secondary); color: var(--ri-text-muted, rgba(255,255,255,0.74)); }
    /* Upload run: production's tile and motion (owner, 2026-10-03: "the dotted
       border becoming full"). A dashed cyan edge that turns solid and brighter
       on hover while the tile lifts 1 px (160 ms, shadow 180 ms). */
    .bucket-stats-chip-upload {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      border: 1px dashed rgba(var(--ri-cyan-rgb, 46, 209, 244), 0.34);
      transition: border-color .16s ease, background-color .16s ease, box-shadow .18s ease, transform .16s ease, opacity .15s ease;
    }
    @media (hover: hover) {
      .bucket-stats-chip-upload:not([data-upload-state]):hover {
        border-style: solid;
        border-color: rgba(var(--ri-cyan-rgb, 46, 209, 244), 0.56);
        background: var(--ri-surface-tile-hover, rgba(255,255,255,0.07));
        box-shadow: 0 12px 22px rgba(0,0,0,0.18), 0 0 0 1px rgba(var(--ri-cyan-rgb, 46, 209, 244), 0.06);
        transform: translateY(-1px);
      }
    }
    .bucket-stats-chip-upload:not([data-upload-state="success"]):focus-visible {
      border-style: solid;
      border-color: rgba(var(--ri-cyan-rgb, 46, 209, 244), 0.64);
      outline: 2px solid var(--ri-cyan, #2ED1F4);
      outline-offset: 2px;
    }
    .bucket-stats-chip-upload[data-upload-state="uploading"] {
      border-style: solid;
    }
    .bucket-stats-chip-upload .bucket-stats-chip-key {
      position: relative;
      z-index: 1;
    }
    .bucket-stats-chip-upload .bucket-stats-chip-value {
      position: relative;
      z-index: 1;
      color: var(--ri-text-strong, rgba(255,255,255,0.96));
      font-size: var(--ri-text-secondary);
      font-weight: 500;
    }
    .bucket-stats-chip-upload .bucket-stats-chip-key { color: rgba(46, 209, 244,0.75); }
    .bucket-stats-chip-upload .bucket-stats-chip-value { color: #2ED1F4; font-size: var(--ri-text-secondary); }
    .bucket-stats-chip-upload-value {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .bucket-stats-chip-upload-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      color: rgba(46,209,244,0.78);
    }
    .bucket-stats-chip-upload-icon svg {
      width: 12px;
      height: 12px;
      display: block;
    }
    .bucket-stats-chip-upload-text {
      color: rgba(239,252,255,0.92);
    }
    .bucket-stats-chip-upload[data-upload-state="uploading"] {
      cursor: wait;
    }
    .bucket-stats-chip-upload[data-upload-state="uploading"] .bucket-stats-chip-upload-icon {
      color: rgba(186,239,249,0.82);
    }
    .bucket-stats-chip-upload[data-upload-state="uploading"] .bucket-stats-chip-upload-text {
      color: rgba(235,248,255,0.82);
    }
    .bucket-stats-chip-upload[data-upload-state="success"] {
      border-style: solid;
      border-color: rgba(var(--ri-green-rgb, 52, 211, 153), 0.34);
      background: rgba(var(--ri-green-rgb, 52, 211, 153), 0.1);
    }
    /* Upload run edge (owner 2026-10-20: "dotted -> full", not a sweep): an SVG edge whose
       dashes grow on hover until the gaps close (same 9 px period, so they stay in place).
       The tile's own border is clear; the SVG sits inside it (the tile clips). */
    .bucket-stats-chip-upload {
      border-color: transparent !important;
      border-style: solid !important;
    }
    .bucket-stats-chip-upload .upload-edge {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }
    .bucket-stats-chip-upload .upload-edge rect {
      x: 0.75px;
      y: 0.75px;
      width: calc(100% - 1.5px);
      height: calc(100% - 1.5px);
      rx: 11px;
      fill: none;
      stroke: rgba(var(--ri-cyan-rgb, 46, 209, 244), 0.55);
      stroke-width: 1.5px;
      stroke-dasharray: 4 5;
      transition: stroke-dasharray .45s cubic-bezier(.4, 0, .2, 1), stroke .25s ease;
    }
    @media (hover: hover) {
      .bucket-stats-chip-upload:not([data-upload-state]):hover .upload-edge rect {
        stroke-dasharray: 9 0;
        stroke: rgba(var(--ri-cyan-rgb, 46, 209, 244), 0.85);
      }
    }
    .bucket-stats-chip-upload:focus-visible .upload-edge rect,
    .bucket-stats-chip-upload[data-upload-state] .upload-edge rect { stroke-dasharray: 9 0; }
    .bucket-stats-chip-upload[data-upload-state="success"] .upload-edge rect { stroke: rgba(var(--ri-green-rgb, 52, 211, 153), 0.45); }
    @media (prefers-reduced-motion: reduce) {
      .bucket-stats-chip-upload .upload-edge rect { transition: none; }
    }
    .bucket-stats-chip-upload[data-upload-state="success"] .bucket-stats-chip-upload-icon {
      color: #34d399;
    }
    .bucket-stats-chip-upload[data-upload-state="success"] .bucket-stats-chip-upload-text {
      color: rgba(220,252,231,0.92);
    }
    @media (max-width: 639px) {
      .bucket-stats-grid { grid-template-columns: repeat(3, 1fr); }
      .bucket-stats-grid { gap: 8px; }
      .bucket-stats-chip { padding: 10px; }
      /* Phones: the run counts use the Upload run tile's type (owner 2026-10-09:
         "38 and +1 are too big, same size as the upload .fit/.zip"). */
      .bucket-stats-chip-value { font-size: var(--ri-text-secondary); font-weight: 500; }
      .bucket-stats-chip-upload-value { gap: 4px; }
      .bucket-stats-chip-upload-icon { width: 14px; height: 14px; flex-basis: 14px; }
    }

    /* A pressed Upload (kit pick 5): the chip takes the busy look of a .ri-btn - the
       Relay spinner in the upload icon's place, in the chip's own cyan. */
    .bucket-stats-chip-upload[aria-busy="true"] {
      border-style: solid;
      cursor: progress;
      pointer-events: none;
    }
    .bucket-stats-chip-upload[aria-busy="true"] .bucket-stats-chip-value { position: relative; }
    .bucket-stats-chip-upload[aria-busy="true"] .bucket-stats-chip-value > svg { visibility: hidden; }
    .bucket-stats-chip-upload[aria-busy="true"] .bucket-stats-chip-value::before {
      content: "";
      position: absolute;
      left: -2px;
      top: 50%;
      width: 16px;
      height: 16px;
      margin-top: -8px;
      background: transparent var(--ri-relay-art) center / contain no-repeat;
    }
    /* The drop zone itself while its ZIP uploads: no second pick. */
    #strydDropZone[aria-busy="true"] { cursor: progress; pointer-events: none; }

    .bucket-new-runs-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; background: rgba(16, 185, 129, 0.12); color: #34d399; font-weight: 600; font-size: var(--ri-text-pill); border: 1px solid rgba(16, 185, 129, 0.18); }
    .bucket-pending-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; background: rgba(249, 115, 22, 0.12); color: #fb923c; font-weight: 600; font-size: var(--ri-text-pill); border: 1px solid rgba(249, 115, 22, 0.18); }
    .bucket-pending-pill .mini-spinner { width: 10px; height: 10px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
    .garmin-permission-warning-actions { display: flex; justify-content: center; margin-top: 14px; margin-bottom: 4px; }
    .garmin-reconnect-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      padding: 8px 16px;
      border-radius: 20px;
      border: 1px solid rgba(248, 113, 113, 0.4);
      background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
      color: #fecaca;
      font-size: var(--ri-text-button);
      font-weight: 600;
      letter-spacing: 0.02em;
      line-height: 1;
      cursor: pointer;
      transition: background 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-color 0.3s ease,
                  color 0.3s ease,
                  transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.3s ease;
      box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .garmin-reconnect-btn:hover {
      background: linear-gradient(135deg, rgba(248, 113, 113, 0.25) 0%, rgba(220, 38, 38, 0.2) 100%);
      border-color: rgba(252, 165, 165, 0.6);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .garmin-reconnect-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(220, 38, 38, 0.15);
    }
    .garmin-reconnect-btn[aria-disabled="true"] { opacity: 0.7; pointer-events: none; transform: none; }
    .garmin-permission-warning-error { margin-top: 8px; color: #fecaca; font-size: var(--ri-text-secondary); line-height: var(--ri-leading-secondary); }

    /* Page head (.ri-page-head): the source switcher sits top right; its menu
       opens over the sync panel below. */
    .analysis-header-row {
      position: relative;
      z-index: 240;
      isolation: isolate;
    }
    .analysis-header-row.analysis-header-row-menu-open {
      z-index: 2405;
    }
    .profile-toggle-wrap {
      width: clamp(156px, 21vw, 176px);
      max-width: 100%;
    }
    .profile-toggle-wrap .rii-data-toggle {
      width: 100%;
    }
    @keyframes profileToggleChevronFloat {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(1.5px);
      }
    }
    .profile-toggle-wrap .rii-data-toggle-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.45rem;
    }
    .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo-wrap {
      flex: 1 1 auto;
      min-width: 0;
      justify-content: center;
    }
    .profile-toggle-wrap #profileViewToggleLogo[src*="stryd-logo"],
    .profile-toggle-wrap #profileViewToggleLogo[src*="strava-logo"] {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 34px;
      padding: 10px 10px;
      box-sizing: border-box;
      border-radius: 6px;
      background: #000;
      box-shadow: 0 0 8px rgba(0,0,0,0.6);
      display: block;
    }
    .profile-toggle-wrap .rii-data-toggle-logo {
      width: 100%;
      height: 34px;
      border: none;
      border-radius: 9px;
      padding: 0;
      background: transparent;
      box-shadow: none;
      object-fit: contain;
    }
    .profile-toggle-wrap .rii-data-toggle-menu {
      margin-top: 2px;
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-menu {
      background: linear-gradient(180deg, rgba(6,10,18,0.97), rgba(2,4,10,0.98));
      border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.22);
      box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.06), inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item {
      background: rgba(255,255,255,0.03);
      border-color: rgba(255,255,255,0.06);
      position: relative;
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item:hover {
      background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.06);
      border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.18);
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item.is-active {
      background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.05);
      border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.32);
      box-shadow: 0 0 12px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.08), inset 0 0 12px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.04);
    }
    /* Black-background Garmin PNG: blend into dark item via tight wrapper */
    .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="Garmin"] {
      border-radius: 6px;
      background: #000;
      padding: 4px 10px;
      box-shadow: 0 0 8px rgba(0,0,0,0.6);
    }
    .profile-toggle-wrap .rii-data-toggle-item {
      justify-content: center;
      min-height: 46px;
      padding: 5px 10px;
    }
    .profile-toggle-wrap .rii-data-toggle-chevron {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.78);
      flex-shrink: 0;
      transform-origin: center;
      transition: transform 0.24s ease, color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease;
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-chevron {
      transform: rotate(180deg) scale(1.03);
      color: rgba(255,255,255,0.96);
    }
    @media (prefers-reduced-motion: reduce) {
      .profile-toggle-wrap .rii-data-toggle-chevron {
        animation: none !important;
        transition: none !important;
      }
    }
    .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="stryd-logo"],
    .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="strava-logo"] {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 34px;
      padding: 10px 10px;
      box-sizing: border-box;
      border-radius: 6px;
      background: #000;
      box-shadow: 0 0 8px rgba(0,0,0,0.6);
      display: block;
    }
    @media (max-width: 640px) {
      .profile-toggle-wrap {
        width: 108px;
      }
      .profile-toggle-wrap .rii-data-toggle-btn {
        min-height: 32px;
        border-radius: 9px;
        padding: 4px 7px 4px 5px;
      }
      .profile-toggle-wrap .rii-data-toggle-logo {
        height: 24px;
      }
      .profile-toggle-wrap #profileViewToggleLogo[src*="stryd-logo"],
      .profile-toggle-wrap #profileViewToggleLogo[src*="strava-logo"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 24px;
        padding: 6px 8px;
        box-sizing: border-box;
      }
      .profile-toggle-wrap .rii-data-toggle-chevron {
        width: 12px;
        height: 12px;
        padding: 2px;
        border-radius: 999px;
        color: rgba(255,255,255,0.92);
        background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.14);
        box-shadow: inset 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.18), 0 0 14px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.16);
        animation: profileToggleChevronFloat 2.2s ease-in-out infinite;
      }
      .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-chevron {
        animation: none;
        transform: rotate(180deg) scale(1.06);
        background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.2);
        box-shadow: inset 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.28), 0 0 16px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.2);
      }
      .profile-toggle-wrap .rii-data-toggle-item {
        min-height: 38px;
        padding: 4px 8px;
      }
      .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="stryd-logo"],
      .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="strava-logo"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 24px;
        padding: 6px 8px;
        box-sizing: border-box;
      }
    }


    #selectedWatch,
    #selectedWornShoe {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
      margin-bottom: 0;
    }

    #selectedWatch.has-content,
    #selectedWornShoe.has-content {
      max-height: 220px;
      opacity: 1;
      transform: translateY(0);
      margin-bottom: 1rem;
    }

    #selectedWornShoe.has-image.has-content {
      margin-bottom: 0.4rem;
    }

    #selectedShoes {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
      margin-top: 0;
    }

    #selectedShoes.has-content {
      max-height: 500px;
      opacity: 1;
      transform: translateY(0);
      margin-top: 0.75rem;
    }

    .shoe-tag {
      display: inline-flex !important;
      animation: tagFadeIn 0.3s ease forwards;
    }

    @keyframes tagFadeIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


    #pricingBreakdown,
    #priceLabel,
    #submitBtn span {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    #pricingBreakdown.updating,
    #priceLabel.updating,
    #submitBtn.updating span {
      opacity: 0.3;
      transform: scale(0.98);
    }


    body {
      transition: opacity 0.4s ease;
    }

    body.fade-out {
      opacity: 0;
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

    /* -- Full-screen analysis loading overlay (matches report.html loading) -- */
    #analysisLoadingOverlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    #analysisLoadingOverlay.active {
      display: flex;
      opacity: 1;
    }
    /* Logo + circle container */
    .overlay-logo-wrap {
      position: relative;
      width: 220px;
      height: 220px;
      margin-bottom: 32px;
    }
    .overlay-logo-wrap img {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      height: 52px;
      z-index: 10;
      filter: drop-shadow(0 0 20px rgba(46, 209, 244, 0.6));
    }
    .overlay-logo-wrap .overlay-glow {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 140px; height: 140px;
      background: radial-gradient(circle, rgba(46, 209, 244, 0.2) 0%, transparent 70%);
      border-radius: 50%;
    }
    .overlay-logo-wrap svg {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      transform: rotate(-90deg);
    }
    @keyframes overlayDrawCircle {
      0%   { stroke-dashoffset: 502; }
      50%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -502; }
    }
    .overlay-circle-line {
      animation: overlayDrawCircle 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    /* Title + subtitle beneath logo */
    .overlay-title {
      color: #fff;
      font-weight: 600;
      font-size: var(--ri-text-subtitle);
      letter-spacing: -0.01em;
      text-align: center;
      margin-bottom: 6px;
      transition: color 0.35s ease;
    }
    .overlay-subtitle {
      color: rgba(255,255,255,0.4);
      font-size: var(--ri-text-secondary);
      text-align: center;
      margin-bottom: 28px;
    }

    .hero-upload-zone {
      position: relative;
      border: 2px dashed rgba(46, 209, 244, 0.5) !important;
      background: linear-gradient(135deg, rgba(46, 209, 244, 0.08), rgba(46, 209, 244, 0.03)) !important;
      transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .hero-upload-zone:hover {
      border-color: var(--accent-cyan) !important;
      background: linear-gradient(135deg, rgba(46, 209, 244, 0.12), rgba(46, 209, 244, 0.06)) !important;
      box-shadow: 0 0 30px rgba(46, 209, 244, 0.15), var(--shadow-inner);
    }

    .hero-upload-zone.dragover {
      border-color: var(--accent-cyan) !important;
      background: linear-gradient(135deg, rgba(46, 209, 244, 0.18), rgba(46, 209, 244, 0.1)) !important;
      box-shadow: 0 0 40px rgba(46, 209, 244, 0.25), var(--shadow-inner);
      transform: scale(1.01);
    }


    .secondary-section {
      opacity: var(--opacity-secondary);
      background: linear-gradient(135deg, rgba(46, 209, 244, 0.035), rgba(46, 209, 244, 0.015)) !important;
      border-color: rgba(46, 209, 244, 0.12) !important;
    }

    .secondary-section:hover {
      opacity: 1;
    }

    .strava-quick-pick-card {
      position: relative;
      isolation: isolate;
      z-index: 20;
      margin-bottom: 12px;
      padding: 14px 14px 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(252, 76, 2, 0.18);
      background: linear-gradient(140deg, rgba(252, 76, 2, 0.09), rgba(252, 76, 2, 0.02));
      box-shadow: inset 0 0 0 1px rgba(252, 76, 2, 0.05);
      overflow: visible;
      transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
    }

    .strava-quick-pick-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 100%, rgba(252, 96, 26, 0.26) 0%, rgba(252, 76, 2, 0.12) 32%, rgba(252, 76, 2, 0.03) 52%, rgba(252, 76, 2, 0) 72%),
        radial-gradient(ellipse at 52% 98%, rgba(255, 128, 72, 0.1) 0%, rgba(252, 76, 2, 0.04) 36%, rgba(252, 76, 2, 0) 64%);
      filter: blur(14px);
      opacity: 0.75;
      z-index: 0;
    }

    .strava-quick-pick-card::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background: radial-gradient(ellipse at 50% 100%, rgba(252, 96, 26, 0.34) 0%, rgba(252, 76, 2, 0.18) 44%, rgba(252, 76, 2, 0) 82%);
      filter: blur(10px);
      opacity: 0;
      transform: scale(0.985);
      transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 0;
    }

    .strava-quick-pick-card > * {
      position: relative;
      z-index: 1;
    }

    .strava-quick-pick-card:hover {
      border-color: rgba(252, 96, 28, 0.36);
      box-shadow: inset 0 0 0 1px rgba(252, 96, 28, 0.14), 0 10px 24px rgba(0, 0, 0, 0.2), 0 0 18px rgba(252, 76, 2, 0.08);
      transform: translateY(-1px);
    }

    .strava-quick-pick-card:hover::after {
      opacity: 1;
      transform: scale(1);
    }

    .strava-quick-pick-card:hover .strava-quick-pick-input {
      border-color: rgba(252, 76, 2, 0.62);
      box-shadow: 0 0 18px rgba(252, 76, 2, 0.28), inset 0 0 24px rgba(252, 76, 2, 0.08);
    }

    .strava-quick-pick-card.dropdown-open {
      z-index: 2147483640;
    }

    .strava-quick-pick-label {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: rgba(255, 239, 228, 0.92);
      font-size: var(--ri-text-caption);
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    .strava-quick-pick-input {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(252, 76, 2, 0.5) !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.12), rgba(252, 76, 2, 0.03));
      backdrop-filter: blur(8px);
      color: white;
      font-size: var(--ri-text-input);
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .strava-quick-pick-input::placeholder {
      color: rgba(255, 218, 191, 0.65);
    }

    .strava-quick-pick-input:focus {
      outline: none;
      border-color: #FC4C02 !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.14), rgba(252, 76, 2, 0.04)) !important;
      box-shadow: 0 0 16px rgba(252, 76, 2, 0.3), 0 0 30px rgba(252, 76, 2, 0.14) !important;
    }

    .strava-quick-pick-input.strava-picked-valid,
    .strava-quick-pick-input.strava-picked-valid:focus {
      border-color: rgba(252, 76, 2, 0.78) !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.13), rgba(252, 76, 2, 0.04)) !important;
      box-shadow: 0 0 16px rgba(252, 76, 2, 0.24), 0 0 32px rgba(252, 76, 2, 0.12) !important;
    }

    .strava-autofill-field {
      border-color: rgba(252, 76, 2, 0.72) !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.1), rgba(252, 76, 2, 0.03)) !important;
      box-shadow: 0 0 16px rgba(252, 76, 2, 0.2), 0 0 30px rgba(252, 76, 2, 0.1) !important;
    }

    .strava-autofill-field:focus {
      border-color: rgba(252, 76, 2, 0.84) !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.14), rgba(252, 76, 2, 0.05)) !important;
      box-shadow: 0 0 18px rgba(252, 76, 2, 0.28), 0 0 34px rgba(252, 76, 2, 0.14) !important;
    }

    #stravaShoeQuickPickDropdown.shoe-dropdown {
      z-index: 2147483647 !important;
      background: linear-gradient(135deg, rgba(28, 10, 5, 0.995), rgba(18, 7, 4, 0.995));
      border: 1px solid rgba(252, 76, 2, 0.44);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(252, 76, 2, 0.16), inset 0 0 24px rgba(252, 76, 2, 0.07);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
    }

    #stravaShoeQuickPickDropdown .shoe-option:hover {
      background: linear-gradient(90deg, rgba(252, 76, 2, 0.2), rgba(252, 76, 2, 0.08));
      border-left: 3px solid #FC4C02;
      box-shadow: inset 0 0 22px rgba(252, 76, 2, 0.2);
    }

    .strava-connect-prompt-card {
      position: relative;
      margin-bottom: 12px;
      padding: 14px 14px 12px;
      border-radius: 14px;
      border: 1px solid rgba(252, 76, 2, 0.18);
      background: linear-gradient(140deg, rgba(252, 76, 2, 0.09), rgba(252, 76, 2, 0.02));
      box-shadow: inset 0 0 0 1px rgba(252, 76, 2, 0.05);
      overflow: hidden;
      transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
    }

    .strava-connect-prompt-card::before {
      content: '';
      position: absolute;
      left: -10%;
      right: -10%;
      bottom: -58%;
      height: 128%;
      border-radius: 50%;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 100%, rgba(252, 96, 26, 0.3) 0%, rgba(252, 76, 2, 0.16) 28%, rgba(252, 76, 2, 0.07) 44%, rgba(252, 76, 2, 0.01) 56%, rgba(252, 76, 2, 0) 68%),
        radial-gradient(ellipse at 52% 98%, rgba(255, 128, 72, 0.12) 0%, rgba(252, 76, 2, 0.05) 34%, rgba(252, 76, 2, 0) 60%);
      filter: blur(18px);
      opacity: 0.9;
      z-index: 0;
    }

    .strava-connect-prompt-card::after {
      content: '';
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: -26px;
      height: 40px;
      pointer-events: none;
      border-radius: 999px;
      background: radial-gradient(ellipse at center, rgba(252, 96, 26, 0.48) 0%, rgba(252, 76, 2, 0.24) 42%, rgba(252, 76, 2, 0) 82%);
      filter: blur(11px);
      opacity: 0;
      transform: translateY(10px) scaleX(0.92);
      transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 0;
    }

    .strava-connect-prompt-card > * {
      position: relative;
      z-index: 1;
    }

    .strava-connect-prompt-card:hover {
      border-color: rgba(252, 96, 28, 0.36);
      box-shadow: inset 0 0 0 1px rgba(252, 96, 28, 0.14), 0 10px 24px rgba(0, 0, 0, 0.2), 0 0 18px rgba(252, 76, 2, 0.08);
      transform: translateY(-1px);
    }

    .strava-connect-prompt-card:hover::after {
      opacity: 1;
      transform: translateY(0) scaleX(1);
    }

    .strava-connect-prompt-head {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 239, 228, 0.95);
      font-size: var(--ri-text-subtitle);
      font-weight: 600;
      margin-bottom: 6px;
    }

    .strava-connect-prompt-copy {
      color: rgba(255, 222, 197, 0.8);
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
      margin-bottom: 10px;
    }

    .strava-connect-prompt-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 9px;
      border: 1px solid rgba(252, 76, 2, 0.55);
      color: #fff;
      font-size: var(--ri-text-button);
      font-weight: 600;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.92), rgba(227, 68, 2, 0.92));
      box-shadow: 0 4px 14px rgba(252, 76, 2, 0.22);
      transition: transform 200ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }

    .strava-connect-prompt-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(252, 76, 2, 0.8);
      box-shadow: 0 8px 20px rgba(252, 76, 2, 0.32);
    }

    .strava-connect-prompt-btn:disabled {
      opacity: 0.8;
      pointer-events: none;
      transform: none;
    }

    .strava-connect-prompt-error {
      margin-top: 8px;
      color: #fca5a5;
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
    }


    .section-group-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
      margin: 1.5rem 0;
    }


    .cta-endpoint {
      position: relative;
      background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)) !important;
      border: 0.5px solid rgba(255,255,255,0.1) !important;
      box-shadow: 0 16px 56px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .cta-endpoint::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(46, 209, 244, 0.3), transparent);
    }


    #submitBtn {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }


    #submitBtn {
      padding-top: 14px !important;
      padding-bottom: 14px !important;
      min-height: 52px;
    }

    #submitBtn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(46, 209, 244, 0.1), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    #submitBtn:hover::before {
      opacity: 1;
    }
    
    


    .shoe-dropdown {
      z-index: 2147483647 !important;
    }


    .secondary-section:hover {
      opacity: var(--opacity-secondary);
    }




    .understanding-matches-row {
      display: flex;
      gap: 1rem;
      justify-content: flex-start;
    }


    .tier-showcase-card {
      position: relative;
      z-index: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.75rem;
      border-radius: 0.5rem;
      background: var(--color-dark, #001018) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.12) !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      flex: 1;
      min-width: 0;
      height: 280px;
      min-height: 280px;
      max-height: 280px;
      transition: box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 1s cubic-bezier(0.4, 0, 0.2, 1);
    }


    .tier-showcase-card[data-tier="great"] {
      border-color: rgba(46, 209, 244, 0.35) !important;
    }
    .tier-showcase-card[data-tier="great"]:hover {
      border-color: rgba(46, 209, 244, 0.6) !important;
    }

    .tier-showcase-card[data-tier="good"] {
      border-color: rgba(1, 195, 168, 0.35) !important;
    }
    .tier-showcase-card[data-tier="good"]:hover {
      border-color: rgba(1, 195, 168, 0.6) !important;
    }

    .tier-showcase-card[data-tier="warning"] {
      border-color: rgba(255, 183, 65, 0.35) !important;
    }
    .tier-showcase-card[data-tier="warning"]:hover {
      border-color: rgba(255, 183, 65, 0.6) !important;
    }
    .tier-showcase-card:hover {
      z-index: 12;
    }


    .tier-card-content {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
    }


    .tier-label {
      font-size: var(--ri-text-secondary);
      font-weight: 600;
      margin-bottom: 0.5rem;
      text-align: center;
    }
    .tier-label.great { color: #2ED1F4; }
    .tier-label.good { color: #01c3a8; }
    .tier-label.warning { color: #ffb741; }


    .tier-card-content .shoe-image-wrapper {
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-bottom: 0.5rem;
    }

    .tier-card-content .shoe-image-wrapper img {
      max-width: 175px;
      max-height: 95px;
      object-fit: contain;
    }


    .tier-card-content .shoe-name {
      font-size: var(--ri-text-secondary) !important;
      font-weight: 600;
      color: white !important;
      margin-bottom: 0.25rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }


    .tier-card-content .tier-divider {
      width: 85%;
      height: 1px;
      margin: 6px 0 8px 0;
    }
    .tier-divider.great { background: linear-gradient(90deg, transparent, rgba(46, 209, 244, 0.5), transparent); }
    .tier-divider.good { background: linear-gradient(90deg, transparent, rgba(1, 195, 168, 0.5), transparent); }
    .tier-divider.warning { background: linear-gradient(90deg, transparent, rgba(255, 183, 65, 0.5), transparent); }


    .tier-card-content .tier-description {
      font-size: var(--ri-text-label);
      color: rgba(255,255,255,0.65);
      text-align: center;
      line-height: var(--ri-leading-label);
      padding: 0 0.5rem;
      flex: 1;
      display: flex;
      align-items: center;
    }


    .tier-showcase-card .metric-card-blur {
      position: absolute !important;
      inset: 0 !important;
      display: flex !important;
      align-items: flex-end !important;
      justify-content: center !important;
      pointer-events: none !important;
      z-index: 0 !important;
      overflow: hidden !important;
    }

    .tier-showcase-card .metric-card-blur img {
      width: 100% !important;
      max-width: none !important;
      height: 180% !important;
      opacity: 0.25 !important;
      object-fit: cover !important;
      object-position: center bottom !important;
      pointer-events: none !important;
      display: block !important;
      filter: blur(32px) saturate(1.45) brightness(1.07) !important;
      transform: translateY(22%) scale(1.22) !important;
      mix-blend-mode: screen !important;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .tier-showcase-card:hover .metric-card-blur img {
      opacity: 0.95 !important;
    }


    @media (max-width: 639px) {
      .understanding-matches-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
      }

      .tier-showcase-card {
        width: 100% !important;
        height: 220px;
        min-height: 220px;
        max-height: 220px;
      }

      .tier-card-content .shoe-image-wrapper {
        height: 70px;
      }

      .tier-card-content .shoe-image-wrapper img {
        max-width: 120px;
        max-height: 65px;
      }

    }



    @media (min-width: 640px) {
      #shoeTypeButtons button {
        padding: 1.5rem !important;
        font-size: var(--ri-text-button) !important;
      }

      #greatMatchButtons button,
      #goodMatchButtons button {
        padding: 1.5rem !important;
      }

      #greatMatchButtons button .text-lg,
      #goodMatchButtons button .text-lg {
        font-size: var(--ri-text-subtitle) !important;
      }

      #greatMatchButtons button .text-sm,
      #goodMatchButtons button .text-sm {
        font-size: var(--ri-text-secondary) !important;
      }
    }

    @media (max-width: 639px) {
      .mobile-inner-card-tight {
        padding: 16px !important;
      }


      #fileInfo {
        gap: 6px !important;
        padding: 8px !important;
      }

      #fileInfo > div {
        flex: 1;
        min-width: 0;
        overflow: hidden;
      }

      #fileInfo #fileName {
        font-size: var(--ri-text-caption) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #fileInfo #fileSize {
        font-size: var(--ri-text-label) !important;
      }

      #fileInfo button {
        padding: 5px 8px !important;
        font-size: var(--ri-text-button) !important;
        flex-shrink: 0;
      }


      #runTypeButtons button {
        padding: 0.9rem 0.9rem !important;
      }


      .mobile-understanding-matches {
        padding: 1.5rem !important;
        margin-bottom: 2rem !important;
      }


      #shoeTypeButtons button {
        padding: 0.75rem !important;
      }


      #greatMatchButtons button,
      #goodMatchButtons button {
        padding: 0.75rem !important;
      }




      [data-static-text="true"] {
        pointer-events: none;
      }
    }


      @media (max-width: 1023px) {
        /* The site header only: card headers are <header class="ri-card-head"> too,
           and this fill, blur and padding hid their fading divider on phones. */
        body > header {
          background: var(--mobile-header-overlay) !important;
          backdrop-filter: blur(8px) !important;
          -webkit-backdrop-filter: blur(8px) !important;

          padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
          padding-bottom: 0.75rem !important;
        }

        header[data-sticky="true"],
        header[data-nav-open="true"] {
          background: var(--mobile-sticky-overlay) !important;
          backdrop-filter: blur(10px) !important;
          -webkit-backdrop-filter: blur(10px) !important;
          padding-bottom: 0 !important;
        }
      }


      header[data-nav-open="true"] {
        background: var(--mobile-navopen-overlay) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
      }
      header[data-sticky="true"][data-at-bottom="true"]:not([data-nav-open="true"]) {
        background: var(--mobile-sticky-overlay-bottom) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
      }


/* === Stryd-specific CSS === */
    .activity-shoe-pill {
      display: inline-flex;
      align-items: center;
      flex: 0 1 auto;
      min-width: 0;
      max-width: none;
      overflow: visible;
      padding: 3px 9px;
      border-radius: 9999px;
      font-size: var(--ri-text-pill);
      font-weight: 500;
      white-space: nowrap;
      background: rgba(160, 160, 160, 0.1);
      border: 1px solid rgba(160, 160, 160, 0.25);
      color: rgba(255, 255, 255, 0.65);
      position: relative;
      z-index: 2;
      transform-origin: left center;
      isolation: isolate;
      backface-visibility: hidden;
      transition:
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        margin-right 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.03s,
        box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.22s ease,
        color 0.22s ease;
      will-change: transform, margin-right;
    }
    .activity-shoe-editor-input {
      width: 100%;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      color: white;
      padding: 12px 14px;
      font-size: var(--ri-text-input) !important;
    }
    .activity-shoe-editor-input:focus {
      outline: none;
      border-color: rgba(148, 163, 184, 0.6);
      box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
    }
    .activity-shoe-editor-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .activity-shoe-editor-btn.secondary {
      background: rgba(255,255,255,0.06);
      color: white;
    }
    @media (max-width: 640px) {
      .max-shoes-toast {
        left: 10px;
        right: 10px;
        transform: translateX(0) translateY(-100px);
        width: auto;
      }
      .max-shoes-toast.show {
        transform: translateX(0) translateY(0);
      }
      .max-shoes-toast .toast-message {
        max-width: none;
      }

      .activity-shoe-editor-grid {
        grid-template-columns: 1fr;
      }

      .activity-shoe-editor-modal {
        padding: 18px;
      }
    }
    .bio-metric-empty {
      display: none;
      margin-top: 14px;
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid rgba(148, 163, 184, 0.18);
      background: linear-gradient(160deg, rgba(148, 163, 184, 0.08), rgba(15, 23, 42, 0.55));
      color: rgba(255,255,255,0.82);
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
    }
    .di-dropdown-item-icon { flex-shrink: 0; opacity: 0.65; }
    .drift-hr-window-tag--icon-only { padding: 2px 4px; }
    .secondary-section {
      opacity: var(--opacity-secondary);
      background: linear-gradient(135deg, rgba(148, 163, 184, 0.035), rgba(148, 163, 184, 0.015)) !important;
      border-color: rgba(148, 163, 184, 0.12) !important;
    }
    .secondary-section:hover {
      opacity: 1;
    }
    .secondary-section:hover {
      opacity: var(--opacity-secondary);
    }
    .profile-toggle-wrap .rii-data-toggle[data-source="stryd"] {
      --rii-toggle-accent-rgb: 254, 202, 47;
      --rii-toggle-accent: #feca2f;
    }
    .stryd-processing-shell {
      position: relative;
      z-index: 100;
      background: transparent;
      padding: 0;
      border-radius: 0;
      border: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      overflow: visible;
      box-shadow: none;
    }
    #strydDropZone {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 204px;
      padding: 1.75rem 1.5rem;
      border-radius: 14px;
      border: 1px solid rgba(252, 96, 28, 0.28);
      background-image:
        radial-gradient(circle at 50% -22%, rgba(252, 76, 2, 0.16), transparent 44%),
        linear-gradient(rgba(252, 76, 2, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(252, 76, 2, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(10, 20, 38, 0.82), rgba(4, 10, 22, 0.78));
      background-size: auto, 36px 36px, 36px 36px, auto;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.02), 0 18px 48px rgba(0, 0, 0, 0.26);
      text-align: center;
      cursor: pointer;
      transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
    }
    #strydDropZone::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(252, 76, 2, 0.13), transparent 20%, transparent 80%, rgba(255, 128, 72, 0.1)),
        radial-gradient(circle at 50% 52%, rgba(252, 76, 2, 0.075) 0%, rgba(252, 76, 2, 0) 54%);
      opacity: 0.72;
      pointer-events: none;
      z-index: 0;
      transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    #strydDropZone::after {
      content: '';
      position: absolute;
      inset: 12px;
      border-radius: 10px;
      border: 1px dashed rgba(148, 163, 184, 0.22);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
      pointer-events: none;
      z-index: 0;
      transition: inset 240ms ease, border-color 240ms ease;
    }
    #strydDropZone > * {
      position: relative;
      z-index: 1;
    }
    #strydDropZone:hover,
    #strydDropZone.dragover,
    #strydDropZone:focus-visible {
      transform: translateY(-2px);
      border-color: rgba(252, 96, 28, 0.52);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(252, 76, 2, 0.06), 0 22px 58px rgba(0, 0, 0, 0.3), 0 0 26px rgba(252, 76, 2, 0.12);
    }
    #strydDropZone:focus-visible {
      outline: 2px solid rgba(252, 96, 28, 0.44);
      outline-offset: 4px;
    }
    #strydDropZone:hover::before,
    #strydDropZone.dragover::before,
    #strydDropZone:focus-visible::before {
      opacity: 1;
      transform: scale(1.02);
    }
    #strydDropZone:hover::after,
    #strydDropZone.dragover::after,
    #strydDropZone:focus-visible::after {
      inset: 11px;
      border-color: rgba(252, 96, 28, 0.38);
    }
    .stryd-upload-glow {
      position: absolute;
      top: 0;
      left: 50%;
      width: min(430px, 68%);
      height: 2px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, transparent, rgba(252, 76, 2, 0.7), rgba(255, 128, 72, 0.48), transparent);
      filter: none;
      opacity: 0.68;
      pointer-events: none;
      z-index: 0;
      transform: translateX(-50%);
      transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    #strydDropZone:hover .stryd-upload-glow,
    #strydDropZone.dragover .stryd-upload-glow {
      opacity: 1;
      transform: translateX(-50%) scaleX(1.06);
    }
    .stryd-upload-logo-shell {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(160px, 62%);
      min-height: 34px;
      padding: 0;
      box-sizing: border-box;
      border-radius: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .stryd-upload-logo {
      display: block;
      width: 100%;
      max-width: 150px;
      height: auto;
      filter: drop-shadow(0 8px 18px rgba(252, 76, 2, 0.1));
    }
    .stryd-upload-icon {
      width: 26px;
      height: 26px;
      color: rgba(252, 96, 28, 0.88);
      opacity: 0.95;
    }
    .stryd-upload-title-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
    }
    .stryd-upload-title {
      color: #ffffff;
      font-size: var(--ri-text-subtitle);
      font-weight: var(--ri-weight-semibold);
      letter-spacing: -0.03em;
      line-height: var(--ri-leading-subtitle);
    }
    .stryd-upload-copy {
      max-width: 44ch;
      color: rgba(203, 213, 225, 0.74);
      font-size: var(--ri-text-secondary);
      line-height: var(--ri-leading-secondary);
    }
    .stryd-upload-copy strong {
      color: rgba(255, 239, 228, 0.98);
      font-weight: 600;
    }
    #strydUploadProgress {
      max-width: 340px;
      margin: 4px auto 0;
    }
    #strydUploadStatus {
      font-size: var(--ri-text-caption);
      color: rgba(255, 218, 191, 0.78);
      margin-top: 6px;
      text-align: center;
    }
    #strydUploadError {
      max-width: 420px;
      margin: 0 auto;
      color: #fecaca;
      font-size: var(--ri-text-secondary);
      padding: 0.75rem 1rem;
      background: rgba(127, 29, 29, 0.28);
      border-radius: 12px;
      border: 1px solid rgba(248, 113, 113, 0.25);
      text-align: center;
    }
    .stryd-upload-progress-track {
      width: 100%;
      max-width: 280px;
      height: 4px;
      border-radius: 999px;
      /* The level line (owner 2026-10-07): a glass track that lets the value
         line stand out (ui-components.css .ri-level-track / .ri-level-fill). */
      margin: 4px auto 0;
    }
    .stryd-upload-progress-fill {
      --bar-rgb: 252, 76, 2;
      height: 100%;
      border-radius: 999px;
      transition: width 0.3s ease;
    }
    @media (max-width: 640px) {
      /* Page head and source switcher: the shared .ri-page-head and the switcher
         rules above, as on My Runs. */

      /* Upload zone */
      #strydDropZone {
        padding: 1.35rem 1rem;
        min-height: 188px;
        gap: 12px;
      }
      #strydDropZone::after {
        inset: 8px;
        border-radius: 14px;
      }
      .stryd-upload-logo-shell {
        width: min(132px, 60%);
        min-height: 28px;
      }
      .stryd-upload-logo {
        max-width: 124px;
      }
      .stryd-upload-icon {
        width: 22px;
        height: 22px;
      }

      /* Bio controls wrap */
      .bio-controls-wrap {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100%;
      }

      /* Bio date range inputs */
      .bio-period-picker input[type="date"],
      .bio-period-picker input[type="datetime-local"],
      .bio-period-input {
        width: 100% !important;
        min-width: unset !important;
      }

      /* Bio bracket slider - reduce font sizes */
      .bio-bracket-slider-wrap {
        padding: 10px 12px !important;
      }

      /* Envelope controls grid - single column */
      #envelopeControlsGrid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }
      #envelopeControlsGrid > div {
        border-right: none !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        padding-bottom: 8px;
      }
      #envelopeControlsGrid > div:last-child {
        border-bottom: none;
        padding-bottom: 0;
        padding-left: 0 !important;
      }

      /* Drift chart canvas heights on mobile */
      .drift-inspector-charts .drift-chart-container {
        height: 200px !important;
      }
      /* Drift summary cards - single column */
      .drift-inspector-summary {
        grid-template-columns: 1fr !important;
      }

      /* Hide distance + pace columns on mobile */
      #strydRunAnalysisSection .ao-col-dist,
      #strydRunAnalysisSection .ao-col-pace { display: none !important; }
      #strydRunAnalysisSection col.ao-col-dist,
      #strydRunAnalysisSection col.ao-col-pace { visibility: collapse; width: 0 !important; }
    }

    /* -- Mobile audit fixes -- */
    .mobile-chart-scroll {
      position: relative;
    }
    .mobile-chart-stage {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .fr-bottom-row {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .rmt-scroll-shell {
      width: 100%;
    }
    @media (max-width: 640px) {
      .profile-mobile-bg {
        display: block !important;
      }

      /* Flatten redundant inner paint on mobile; the outer analytics shell already frames the section. */
      #strydRunAnalysisSection .stryd-processing-shell {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      #strydDropZone {
        min-height: 0 !important;
        padding: 1.05rem 0.95rem !important;
        border-radius: 14px !important;
        border: 1px dashed rgba(252, 96, 28, 0.28) !important;
        background: rgba(252, 76, 2, 0.045) !important;
        box-shadow: none !important;
      }

      #strydDropZone::before,
      #strydDropZone::after,
      .stryd-upload-glow {
        display: none !important;
      }

      #strydDropZone:hover,
      #strydDropZone.dragover {
        transform: none !important;
        background: rgba(252, 76, 2, 0.06) !important;
        border-color: rgba(252, 96, 28, 0.36) !important;
        box-shadow: none !important;
      }

      #biomechanicalProfileSection .bio-explanation-box {
        margin-top: 0.6rem !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      #biomechanicalProfileSection .bio-explanation-container {
        transition: opacity 0.2s ease-out, margin-top 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      #biomechanicalProfileSection .bio-metric-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      #biomechanicalProfileSection .bio-metrics-grid.has-active .bio-metric-card {
        filter: none !important;
      }

      #biomechanicalProfileSection #bioExplTriangle {
        display: none !important;
      }

      #biomechanicalProfileSection .bio-sig-section {
        margin-top: 1rem !important;
        padding-top: 0.95rem !important;
      }

      #biomechanicalProfileSection .bio-sig-card {
        padding: 0 !important;
        gap: 0.75rem !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      #biomechanicalProfileSection .bio-sig-dominant-panel,
      #biomechanicalProfileSection .bio-sig-panel,
      #biomechanicalProfileSection .bio-sig-explainer {
          padding: var(--ri-tile-pad, 12px) !important;
          border-color: rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.16) !important;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 10px 24px rgba(0,0,0,0.16) !important;
        }

        /* Phones keep production's tinted tiles (owner review 2026-10-03). */
        #biomechanicalProfileSection .bio-sig-dominant-panel {
          background:
            radial-gradient(circle at top center, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.18), transparent 72%),
            linear-gradient(180deg, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.17), rgba(255,255,255,0.035)) !important;
          border-color: rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.24) !important;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 26px rgba(0,0,0,0.18) !important;
        }

        #biomechanicalProfileSection .bio-sig-panel {
          background:
            linear-gradient(180deg, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.11), rgba(255,255,255,0.028)) !important;
        }

        #biomechanicalProfileSection .bio-sig-explainer {
          background:
            linear-gradient(180deg, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.09), rgba(255,255,255,0.022)) !important;
        }

        #biomechanicalProfileSection .bio-sig-panel .bio-sig-panel-label,
        #biomechanicalProfileSection .bio-sig-explainer .bio-expl-mini-label {
          color: rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.82) !important;
        }


      .section-tooltip {
        min-width: 0 !important;
        width: min(calc(100vw - 24px), 420px) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 14px !important;
      }

      #strydRunAnalysisSection .frp-section-intro {
        display: none !important;
      }

      .activity-overview-section {
        margin-top: 24px;
        padding: 0;
        border-radius: 0;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
      }
      .activity-overview-section-label {
        padding: 0;
        margin-bottom: 12px;
      }
      .activity-overview-wrap {
        position: relative;
        max-height: 360px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: contain;
        touch-action: pan-x pan-y;
        scrollbar-width: thin;
        scrollbar-color: rgba(46, 209, 244, 0.25) transparent;
      }
      .activity-overview-wrap::-webkit-scrollbar { height: 4px; }
      .activity-overview-wrap::-webkit-scrollbar-track { background: transparent; }
      .activity-overview-wrap::-webkit-scrollbar-thumb { background: rgba(46, 209, 244, 0.2); border-radius: 2px; }
      .activity-overview-wrap.ao-can-scroll-x.ao-at-left:not(.ao-at-right) {
        box-shadow: inset -16px 0 18px -18px rgba(2, 6, 23, 0.96);
      }
      .activity-overview-wrap.ao-can-scroll-x:not(.ao-at-left):not(.ao-at-right) {
        box-shadow: inset 16px 0 18px -18px rgba(2, 6, 23, 0.96), inset -16px 0 18px -18px rgba(2, 6, 23, 0.96);
      }
      .activity-overview-wrap.ao-can-scroll-x:not(.ao-at-left).ao-at-right {
        box-shadow: inset 16px 0 18px -18px rgba(2, 6, 23, 0.96);
      }
      .activity-overview-wrap.ao-fade-right {
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
      }
      .activity-overview-wrap.ao-fade-right.ao-fade-bottom {
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
      }
      .activity-overview-wrap.ao-fade-right.ao-at-right {
        -webkit-mask-image: none;
        mask-image: none;
      }
      .activity-overview-wrap.ao-fade-right.ao-at-right.ao-fade-bottom:not(.ao-at-bottom) {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
      }

      .bucket-stats-summary {
        padding: 0 !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
        border-radius: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
      }

      .activity-overview-table {
        table-layout: auto;
        min-width: 820px;
        width: 100%;
      }
      .activity-overview-table th,
      .activity-overview-table td {
          padding: 12px !important;
        }

      #activityOverviewContainer .activity-overview-table :is(th.ao-col-date, td.ao-col-date) {
        min-width: 116px;
      }
      #activityOverviewContainer .activity-overview-table :is(th.ao-col-category, td.ao-col-category) {
        min-width: 104px;
      }
      #activityOverviewContainer .activity-overview-table :is(th.ao-col-shoe, td.ao-col-shoe) {
        min-width: 280px;
      }
      #activityOverviewContainer .activity-overview-table :is(th.ao-col-toggle, td.ao-toggle-cell) {
        min-width: 64px;
      }
      #activityOverviewContainer .activity-shoe-cell,
      #activityOverviewContainer .activity-shoe-actions {
        gap: 8px;
      }
      #activityOverviewContainer .activity-shoe-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
      }

        .ao-pill { padding: 1px 5px; }
        .ao-new-badge { min-width: 12px; height: 12px; padding: 0 2px; }


      .ao-col-dist,
      .ao-col-pace {
        display: none !important;
      }
      col.ao-col-dist,
      col.ao-col-pace {
        visibility: collapse;
        width: 0 !important;
      }
      .ao-col-device {
        display: table-cell;
      }
      col.ao-col-device {
        visibility: visible;
        width: auto !important;
      }
      col.ao-col-drift {
        width: 96px !important;
      }
      /* Keep the full Garmin-style date button readable in the horizontal log. */
      #strydRunAnalysisSection .activity-overview-table col.ao-col-date {
        width: 112px !important;
      }
      #strydRunAnalysisSection .activity-overview-table th.ao-col-date,
      #strydRunAnalysisSection .activity-overview-table td.ao-col-date {
        padding-inline: 12px !important;
        overflow: visible;
        text-overflow: clip;
      }
      #strydRunAnalysisSection .ao-date-button {
        gap: 4px;
        padding-inline: 6px;
        width: max-content;
        max-width: none;
        font-size: var(--ri-text-secondary) !important;
      }
      #strydRunAnalysisSection .ao-date-button-label {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
      }

      .activity-overview-table th.ao-col-device,
      .activity-overview-table td.ao-col-device {
        min-width: 132px;
        width: auto;
        max-width: none;
        overflow: visible;
        white-space: nowrap;
      }
      .activity-overview-table th.ao-col-drift,
      .activity-overview-table td.ao-col-drift {
        min-width: 96px;
        width: 96px;
      }
      .ao-device-cell {
        width: max-content;
        max-width: none;
        min-width: max-content;
        overflow: visible;
      }
      .ao-drift-cell {
        flex-wrap: nowrap;
        gap: 4px;
      }
      .ao-drift-cell .ao-drift-indicator {
        flex: 0 0 auto;
      }
      .ao-drift-tag.ao-drift-tag--icon,
      .ao-drift-tag.ao-drift-tag--conf,
      .ao-drift-icon-wrap .ao-drift-tag {
        min-width: 20px;
        padding: 3px 4px;
      }

      #strydRunAnalysisSection .activity-overview-table {
        width: 100%;
        table-layout: auto;
      }

      #biomechanicalProfileSection > div:first-child {
        align-items: stretch !important;
      }
      .bio-controls-wrap {
        align-items: stretch !important;
      }
      .bio-profile-controls {
        width: 100%;
      }
      .bio-cg-wrap {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 10px !important;
        padding: 6px 8px !important;
        margin-top: 2px !important;
      }
      .bio-cg-wrap .bio-cg-col--sep:first-child {
        grid-column: 1 / -1;
      }
      .bio-compare-controls,
      .frp-controls-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
      }

      /* Compare controls: 2-col layout matching the primary grid */
      .bio-compare-controls {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 10px !important;
        padding: 6px 8px !important;
      }
      #bioCompareControls .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }

      .bio-cg-col,
      .bio-cg-col--sep,
      .bio-compare-controls .bio-cg-col,
      .frp-control-group,
      .frp-control-group--runs {
        width: 100%;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 6px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.07);
      }
      .bio-cg-wrap .bio-cg-col:last-child,
      .bio-compare-controls .bio-cg-col:last-child,
      .frp-controls-grid .frp-control-group:last-child {
        padding-bottom: 0 !important;
        border-bottom: none !important;
      }

      /* Hide divider under Shoe column in biomech controls */
      #biomechanicalProfileSection .bio-cg-wrap .bio-cg-col--sep:nth-child(2) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }

      /* Vertically centre the Runs count relative to the Shoe button */
      #biomechanicalProfileSection .bio-cg-wrap .bio-cg-col:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* Same treatment for compare controls: hide Shoe's bottom border, centre Runs */
      #bioCompareControls .bio-cg-col--sep:nth-child(2) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }
      #bioCompareControls .bio-cg-col:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .bio-date-inputs {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 6px;
        width: 100%;
      }
      #biomechanicalProfileSection .bio-date-shell,
      #biomechanicalProfileSection .bio-select-shell,
      #bioCompareControls .bio-date-shell,
      #bioCompareControls .bio-select-shell,
      #frpShoeSelect {
        width: 100% !important;
        min-height: 34px !important;
      }
      #biomechanicalProfileSection .bio-date-display,
      #biomechanicalProfileSection .bio-period-select,
      #bioCompareControls .bio-date-display,
      #bioCompareControls .bio-period-select,
      #frpShoeSelect {
        font-size: var(--ri-text-input) !important;
      }
      #biomechanicalProfileSection .drift-chart-container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      #biomechanicalProfileSection .bio-bracket-slider-wrap {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range] {
        width: 100%;
        margin-left: 0;
      }
      #biomechanicalProfileSection .bio-slider-runs-dots {
        width: 100%;
        margin-left: 0;
      }

      #envelopeMetricTabs,
      #envelopeAxisTabs,
      #envelopeFilterBar {
        display: flex;
        flex-wrap: wrap !important;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
        scrollbar-width: none;
        gap: 6px;
        padding-bottom: 0;
      }
      #envelopeMetricTabs > *,
      #envelopeAxisTabs > *,
      #envelopeFilterBar > * {
        flex: 0 0 auto;
      }
      #shoeUseCaseTabs {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .shoe-use-case-card {
        padding: 16px;
        gap: 12px;
      }
      .shoe-use-case-section {
        padding: 10px 12px 12px;
        gap: 8px;
      }

      .fr-bottom-row {
        flex-direction: column;
        gap: 12px;
      }
      .fr-bottom-matrix-card,
      .fr-bottom-lpi-card {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100%;
      }
      .rmt-scroll-shell {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
      }
      .rmt-scroll-shell .resilience-matrix-table {
        min-width: 420px;
      }
      .resilience-matrix-table th,
      .resilience-matrix-table .rmt-row-label {
        font-size: var(--ri-text-caption);
      }
      .rmt-cell {
        min-width: 86px;
      }

      .mobile-chart-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
        touch-action: pan-x pan-y;
        padding-bottom: 10px;
        width: 100%;
        max-width: 100%;
      }
      .mobile-chart-stage {
        height: 100%;
      }
      .mobile-chart-stage--bio,
      .mobile-chart-stage--envelope {
        min-width: 620px;
      }
      .mobile-fullbleed-chart-card--frp .mobile-chart-stage--envelope {
        min-width: 0;
        width: 100%;
      }
      .mobile-chart-stage--drift-main {
        min-width: 0;
        width: 100%;
      }
      .mobile-chart-stage canvas {
        display: block;
      }
      .mobile-chart-stage canvas:where(:not(#driftInspectorPaceGctChart)) {
        width: 100% !important;
        height: 100% !important;
      }
      .drift-chart-container {
        height: 248px !important;
      }
      .mobile-fullbleed-chart-card .drift-chart-container {
        height: 272px !important;
      }
      .mobile-fullbleed-chart-card--inspector .drift-chart-container {
        height: 300px !important;
      }
      .di-elev-gps-row .drift-chart-container,
      .drift-inspector-charts .di-elev-gps-row .drift-chart-container {
        height: 208px !important;
      }

      .drift-chart-container.chart-mobile-landscape {
        height: auto !important;
        aspect-ratio: var(--chart-mobile-aspect-ratio, 1.72);
        min-height: var(--chart-mobile-min-height, 176px);
        max-height: var(--chart-mobile-max-height, 210px);
      }

      #driftInspectorSection .drift-inspector-main-card > .drift-chart-container {
        width: 100%;
        padding: 0;
      }
      #driftInspectorSection .mobile-chart-scroll {
        overflow-x: hidden;
        padding-bottom: 0;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
      }
      #driftInspectorSection .mobile-chart-scroll canvas {
        touch-action: pan-y;
      }
      #driftInspectorSection .mobile-chart-scroll.is-zoomed {
        overflow-x: auto;
        touch-action: pan-x pan-y;
      }
      #driftInspectorSection .mobile-chart-scroll.is-zoomed canvas {
        touch-action: pan-y;
      }
      #driftInspectorSection .mobile-chart-stage {
        width: 100%;
        min-width: 0;
      }

      .drift-chart-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }

      .drift-chart-actions,
      .drift-window-controls {
        width: 100%;
        justify-content: stretch;
        margin-left: 0;
        min-width: 0;
      }

      .drift-window-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "actions actions"
          "nudge view";
        gap: 8px;
        align-items: stretch;
      }

      .dw-nudge-wrap {
        grid-area: nudge;
        min-height: 38px;
        justify-content: flex-start;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 10px;
        border: 1px solid rgba(46,209,244,0.18);
        background: rgba(46, 209, 244, 0.08);
        min-width: 0;
      }

      .dw-view-wrap {
        min-height: 38px;
        justify-content: flex-start;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 10px;
        border: 1px solid rgba(46,209,244,0.18);
        background: rgba(46, 209, 244, 0.08);
        min-width: 0;
      }

      .dw-nudge-label {
        flex: 1 1 auto;
        padding-right: 0;
        min-width: 0;
      }

      .dw-view-label {
        flex: 1 1 auto;
        padding-right: 0;
        min-width: 0;
      }



      .dw-window-actions { grid-area: actions; }
      #dwViewWrap { grid-area: view; display: inline-flex; }

      .dw-view-wrap,
      .drift-chart-reset {
        width: 100%;
        min-width: 0;
      }

      .drift-window-controls > * {
        min-width: 0;
      }

      .dw-reset-trigger,
      .drift-chart-reset {
        min-height: 40px !important;
        justify-content: center;
        font-size: var(--ri-text-button) !important;
        /* Icon right offset stays consistent at larger button height */
        padding-right: 28px;
      }

      .drift-window-save-btn {
        min-height: 40px !important;
        justify-content: center;
        font-size: var(--ri-text-button) !important;
      }

      .drift-window-save-btn .dw-save-content {
        justify-content: center;
      }

      .dw-reset-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        margin-top: 0;
        min-width: 0;
      }

      .di-dropdown-menu {
        position: static;
        top: auto;
        left: auto;
        right: auto;
          margin-top: 8px;
          max-height: min(42vh, 280px);
        }


        .di-gps-map-card {
          min-height: 240px;


      }
    }
    @media (max-width: 640px) {
      .bio-section-intro {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 14px 0 12px;
      }
      .bio-section-intro .drift-shell-copy {
        display: none !important;
      }
      .bio-section-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin: 0;
      }
      .frp-section-intro {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0 0 8px;
      }
      .frp-section-intro .drift-shell-copy {
        display: none !important;
      }
      .frp-section-actions {
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0;
      }
      #driftInspectorSection > .drift-shell-copy {
        display: none !important;
      }

      #driftInspectorSection > .di-dropdown-wrap {
        margin-top: 16px;
      }
      .frp-section-actions .bio-select-shell {
        min-width: 0;
        width: 100%;
      }
      .frp-section-actions .bio-shoe-select {
        width: 100%;
        min-width: 0;
      }
      .bio-cg-wrap {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 10px !important;
        padding: 6px 8px !important;
        margin-top: 2px !important;
      }
      .bio-cg-wrap .bio-cg-col--sep:first-child {
        grid-column: 1 / -1;
      }
      .bio-compare-controls,
      .frp-controls-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
      }

      /* Compare controls: 2-col layout matching the primary grid */
      .bio-compare-controls {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 10px !important;
        padding: 6px 8px !important;
      }
      #bioCompareControls .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }

      .bio-cg-col,
      .bio-cg-col--sep,
      .bio-compare-controls .bio-cg-col,
      .frp-control-group,
      .frp-control-group--runs {
        width: 100%;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 6px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.07);
      }
      .bio-cg-wrap .bio-cg-col:last-child,
      .bio-compare-controls .bio-cg-col:last-child,
      .frp-controls-grid .frp-control-group:last-child {
        padding-bottom: 0 !important;
        border-bottom: none !important;
      }

      /* Hide divider under Shoe column in biomech controls */
      #biomechanicalProfileSection .bio-cg-wrap .bio-cg-col--sep:nth-child(2) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }

      /* Vertically centre the Runs count relative to the Shoe button */
      #biomechanicalProfileSection .bio-cg-wrap .bio-cg-col:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* Same treatment for compare controls: hide Shoe's bottom border, centre Runs */
      #bioCompareControls .bio-cg-col--sep:nth-child(2) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }
      #bioCompareControls .bio-cg-col:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .bio-date-inputs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 6px;
      }
      #biomechanicalProfileSection .bio-date-shell,
      #biomechanicalProfileSection .bio-select-shell,
      #bioCompareControls .bio-date-shell,
      #bioCompareControls .bio-select-shell,
      .frp-section-actions .bio-select-shell {
        width: 100% !important;
        min-height: 34px !important;
      }
      #biomechanicalProfileSection .bio-date-display,
      #biomechanicalProfileSection .bio-period-select,
      #bioCompareControls .bio-date-display,
      #bioCompareControls .bio-period-select,
      #frpShoeSelect {
        font-size: var(--ri-text-input) !important;
      }

      #envelopeRunsControls {
        min-width: 0 !important;
        padding-left: 0 !important;
      }

      #envelopeRunsPillsRow .drift-filter-bar {
        justify-content: flex-start;
      }

      .shoe-use-case-entitlements {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: -4px;
      }
      .shoe-use-case-entitlement {
        padding: 9px 10px;
      }

      .bio-metrics-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 0.25rem;
      }
      .resilience-summary-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .resilience-summary-card {
        min-width: 0;
        padding: 14px 16px;
      }
      .resilience-summary-card .rsc-sub {
        display: none;
      }
      .resilience-summary-card .rsc-value .rsc-value-tooltip-mobile {
        display: inline-flex;
      }
      .frp-bottom-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .frp-secondary-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
        box-sizing: border-box;
      }
      .frp-secondary-card > div:first-child,
      .frp-secondary-card > h5,
      .frp-secondary-card > p {
        padding-left: 0;
        padding-right: 0;
      }
      .resilience-matrix-table {
        table-layout: fixed;
        border-spacing: 3px;
        }

        .resilience-matrix-table th,
        .resilience-matrix-table .rmt-row-label {
          font-size: var(--ri-text-caption);
          padding: 3px 4px;
        }

        .rmt-cell {
        min-width: 0;
        padding: 8px 4px;
      }
      .drift-chart-card {
        margin-left: 0;
        margin-right: 0;
        border-radius: var(--ri-radius-md, 12px);
        padding: 14px 16px;
      }
      .drift-chart-card.mobile-fullbleed-chart-card,
      .mobile-fullbleed-chart-card--frp,
      .mobile-fullbleed-chart-card--inspector {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-top: 4px !important;
      }

      #biomechanicalProfileSection .mobile-fullbleed-chart-card > h5 {
        display: block !important;
        margin-bottom: 8px !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
      }

      #bioCompareControls.bio-compare-controls--visible + .mobile-fullbleed-chart-card {
        margin-top: 16px !important;
      }

      .mobile-fullbleed-chart-card > h5 {
        margin-bottom: 2px !important;
        font-size: var(--ri-text-subtitle) !important;
      }

      .mobile-fullbleed-chart-card > h5,
      .mobile-fullbleed-chart-card > .drift-chart-toolbar,
      .mobile-fullbleed-chart-card > .drift-timeline-head,
      .mobile-fullbleed-chart-card > .frp-controls-grid,
      .mobile-fullbleed-chart-card > #envelopeSummaryStrip,
      .mobile-fullbleed-chart-card > .drift-chart-hint,
      .mobile-fullbleed-chart-card > .drift-response-strip {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .mobile-fullbleed-chart-card .drift-chart-container {
        width: calc(100% + 1.5rem);
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding: 0;
      }
      /* Biomech chart: match metric card width, not full-bleed */
      #biomechanicalProfileSection .drift-chart-container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      #biomechanicalProfileSection .bio-bracket-slider-wrap {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range] {
        width: 100%;
        margin-left: 0;
      }
      #biomechanicalProfileSection .bio-slider-runs-dots {
        width: 100%;
        margin-left: 0;
      }

      .mobile-chart-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        width: 100%;
        max-width: 100%;
      }

      .mobile-chart-stage--drift-main {
        min-width: 0;
        width: 100%;
      }

      .drift-chart-container {
        height: 248px !important;
      }

      .mobile-fullbleed-chart-card .drift-chart-container {
        height: 272px !important;
      }
      .bio-bracket-slider-wrap {
        padding: 14px 0 2px;
        overflow: visible;
      }
        .bio-pace-overlay {
          height: 20px;
        }
        .bio-pace-label {
          top: 6px;
          transform: translateX(-50%);
        }
        .bio-bracket-slider-wrap input[type=range] {
          width: calc(100% + 22px);
          margin-left: -11px;
        height: 12px;
      }
      .bio-slider-runs-dots {
        width: calc(100% + 22px);
        margin-left: -11px;
      }
      .bio-bracket-slider-wrap input[type=range]::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -9px;
      }
      .bio-bracket-slider-wrap input[type=range]::-moz-range-thumb {
        width: 28px;
        height: 28px;
      }
      .bio-slider-label {
        margin-top: 10px;
      }
    }
/* === End Stryd-specific CSS === */

/* Profile motion and distribution alignment parity with Garmin. */
#biomechanicalProfileSection { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.bio-metric-card { transition: opacity .16s ease-out, transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out; }
.bio-expand-arrow { transition: transform .16s ease-out; }
.bio-explanation-container { transition: opacity .18s ease-out; }
#bioExplanationContainer h3 { animation: none !important; }
.bio-explanation-box { transition: transform .18s ease-out, opacity .18s ease-out; }
#bioExplTriangle { transition: transform 140ms cubic-bezier(.2,.7,.2,1); will-change: transform; }
.bio-expl-anim { animation: bioPanelRise .18s cubic-bezier(.16,1,.3,1); }
.bio-expl-hero, .bio-expl-content { transition: opacity .16s ease-out, transform .16s ease-out; }
.bio-overview-bar-fill { transition: none; will-change: opacity, transform; }
.bio-overview-bars { grid-template-rows: repeat(4, auto); align-items: stretch; }
.bio-overview-bar-col { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; justify-items: center; align-items: start; }

/* Compact phone signature, as on production and on the Garmin/Apple/Strava page: a thin
   pace slider inside a 44px touch target, and small metric cards four to a row
   (CAD LPI GCT DF / VO VR LSS ILR) on the desktop cards' tinted surface and bottom glow,
   one clean 1 px status edge (no top accent or second ring on phones; owner 2026-10-04). Cards production does not have (the LPI comparison
   cards and HR effort context) follow on a row of their own. */
@media (max-width: 640px) {
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range] { display: block; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-webkit-slider-runnable-track { height: 3px; border: 0; background: rgba(46, 209, 244, 0.3); box-shadow: none; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-track { height: 3px; border: 0; background: rgba(46, 209, 244, 0.3); box-shadow: none; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-progress { background: transparent; box-shadow: none; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7.5px; border-width: 1.5px; box-shadow: none; transform: none; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-width: 1.5px; box-shadow: none; transform: none; }

  #biomechanicalProfileSection .bio-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; margin-top: 0.9rem; }
  #biomechanicalProfileSection .bio-metrics-grid.bio-compare-metrics-row { margin-top: 0.35rem; padding: 0; border: 0; background: transparent; }
  #biomechanicalProfileSection .bio-metrics-grid > .bio-metric-card:is([data-bio-metric="hr"], [data-profile-skel-metric="hr"]) { grid-column: span 2; }
  #biomechanicalProfileSection .bio-metric-card { min-width: 0; min-height: 4.25rem; padding: 0.3rem 0.06rem; border-width: 1px !important; border-radius: var(--ri-radius-md, 12px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; }
  #biomechanicalProfileSection .bio-card-accent,
  #biomechanicalProfileSection .bio-card-badge,
  #biomechanicalProfileSection .bio-expand-arrow,
  #biomechanicalProfileSection .bio-card-title-row .bio-runit-circle--compact { display: none !important; }
  #biomechanicalProfileSection .bio-card-label-full { display: none; }
  #biomechanicalProfileSection .bio-card-label-compact { display: inline; }
  #biomechanicalProfileSection .bio-card-inner { gap: 0; }
  #biomechanicalProfileSection .bio-card-inner h3 { font-size: var(--ri-text-caption) !important; line-height: var(--ri-leading-caption); font-weight: 500; letter-spacing: 0.01em; margin: 0 0 5px !important; }
  #biomechanicalProfileSection .bio-card-inner p { line-height: 1.2; white-space: nowrap; }
  #biomechanicalProfileSection .bio-card-inner .bio-card-value { font-size: var(--ri-text-metric-lg) !important; }
  #biomechanicalProfileSection .bio-card-inner .bio-card-unit { font-size: var(--ri-text-label) !important; }
  /* Four to a row leaves 73 px per value: a tighter value-unit space keeps "13.0 kN/m"
     and "66.7 BW/s" inside their card at the 18 / 12 px phone sizes. */
  #biomechanicalProfileSection .bio-card-inner .bio-card-value { word-spacing: -0.2em; }
  #biomechanicalProfileSection .bio-card-unavailable-note { margin-top: -3px; font-size: var(--ri-text-label); line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
  #biomechanicalProfileSection .bio-metrics-grid.has-active .bio-metric-card:not(.bio-active) { opacity: .4 !important; border-color: rgba(148,163,184,.3) !important; }
  #biomechanicalProfileSection .bio-metrics-grid.has-active .bio-metric-card:not(.bio-active) .bio-card-value { color: #94a3b8 !important; }

  #biomechanicalProfileSection #bioCompareMetricsGrid .bio-metric-card { min-height: 88px; padding: 8px 4px; }
  #biomechanicalProfileSection #bioCompareMetricsGrid .bio-card-inner p { font-size: var(--ri-text-metric-lg) !important; }
  #biomechanicalProfileSection #bioCompareMetricsGrid .bio-card-unit { font-size: var(--ri-text-label) !important; }
  #biomechanicalProfileSection #bioCompareMetricsGrid .bio-compare-card-delta { display: block !important; min-height: 0.32rem; margin-top: 5px !important; font-size: var(--ri-text-label) !important; font-weight: var(--ri-weight-semibold); line-height: var(--ri-leading-label); letter-spacing: 0; white-space: normal; }

  #biomechanicalProfileSection .bio-overview-bars { width: 100%; box-sizing: border-box; margin-inline: auto; }
  #biomechanicalProfileSection .bio-overview-bar-col { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); justify-items: center; box-sizing: border-box; }
  #biomechanicalProfileSection .bio-overview-bar-track { box-sizing: border-box; width: 30px; min-width: 30px; max-width: 30px; height: 70px; }
}

/* Keep the moving metric pointer on a compositor-friendly surface. */
#biomechanicalProfileSection #bioExplTriangle { filter: none; }
@media (prefers-reduced-motion: reduce) {
  #biomechanicalProfileSection #bioExplTriangle { transition: none; }
}

/* Included runs of a distribution bar: the app's dialog (owner 2026-10-04:
   "card not updated"): the ink backdrop with its blur, the dialog surface
   (cyan glow, brighter along the top) and edge, radius and padding, a Light
   title and the 40 px ghost close button top right. */
.bio-runs-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));
}
.bio-runs-sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483647;
  box-sizing: border-box;
  width: min(calc(100vw - 32px), 380px);
  max-height: min(calc(100dvh - 32px), 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ri-dialog-pad, 24px);
  border: 1px solid var(--ri-border-dialog, rgba(46, 209, 244, 0.2));
  border-radius: var(--ri-radius-lg, 16px);
  background: var(--ri-surface-dialog, var(--ri-surface-overlay, #120F22));
  box-shadow: var(--ri-shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.5));
  color: #fff;
  font-family: var(--ri-font-sans, 'Noto Sans', ui-sans-serif, system-ui, sans-serif);
  text-align: left;
  outline: none;
}
/* The panel takes focus so Escape and the reader land in it; the ring
   belongs to its close button, not to the whole dialog. */
.bio-runs-sheet:focus,
.bio-runs-sheet:focus-visible {
  outline: none !important;
}
.bio-runs-sheet[hidden],
.bio-runs-sheet-backdrop[hidden] {
  display: none;
}
.bio-runs-sheet-head {
  display: block;
  padding-right: 40px;
}
.bio-runs-sheet-title {
  margin: 0;
  color: #fff;
  font-size: var(--ri-text-title);
  font-weight: var(--ri-weight-light, 300);
  line-height: var(--ri-leading-title, 1.25);
  letter-spacing: var(--ri-tracking-title, -0.01em);
}
/* Look: the shared .ri-btn--close (ui-components.css, owner 2026-10-06/09); only its place here. */
.bio-runs-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  transition: background-color var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease), color var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease);
}
.bio-runs-sheet-sub {
  margin: 6px 0 12px;
  color: var(--ri-text-faint, rgba(255, 255, 255, 0.62));
  font-size: var(--ri-text-caption);
  line-height: var(--ri-leading-caption);
}
.bio-runs-sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bio-runs-sheet-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--ri-border-subtle, rgba(255, 255, 255, 0.08));
  color: var(--ri-text-strong, rgba(255, 255, 255, 0.96));
  font-size: var(--ri-text-secondary);
  line-height: var(--ri-leading-secondary);
}
.bio-runs-sheet-list li:first-child {
  border-top: 0;
}
.bio-runs-sheet-list li span:last-child {
  color: var(--ri-text-muted, rgba(255, 255, 255, 0.74));
}
@media (prefers-reduced-motion: reduce) {
  .bio-runs-sheet-close { transition: none; }
}

/* The tapped pace of the signature chart in the same panel: a colour key per row. */
.bio-chart-sheet-list .bio-chart-sheet-metric {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bio-chart-sheet-list .bio-chart-sheet-metric i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.bio-chart-sheet-list li span:last-child {
  text-align: right;
  font-variant-numeric: var(--ri-numeric, tabular-nums);
}
/* The compare row stays out of the layout while hidden, phones included. */
#bioCompareControls[hidden] { display: none !important; }
/* Metric figures read in tabular numerals so values do not jitter (audit T5, V1-08). */
.rmt-count, .bio-sig-dist-pct, .bio-sig-dist-meta, .bio-slider-label, .bio-slider-sub,
.bio-expl-value, .bio-expl-delta, .bio-sig-type-pct, .frp-impact-number, .frp-impact-shift-value {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Runs owner fixes 2026-10-04 (v39). Shared verbatim by garmin-profile.html
   and static/stryd-profile-page.css; keep both copies identical.
   ========================================================================== */

/* 1. Activity log row actions: the app's icon buttons at 24 px. Edit = the
   secondary button (.ri-btn--secondary), delete = the danger button
   (.ri-btn--danger); ui-components.css draws ring, inner glow, hover wash,
   focus ring and disabled state. On touch screens the 44 px hit area stays
   vertical only, so the two neighbouring buttons never share a tap zone. */
.activity-shoe-icon-btn.ri-btn {
  --_btn-h: 24px;
  --_btn-radius: 6px;
  --_btn-icon: 12px;
  flex: 0 0 auto;
  z-index: 4;
  pointer-events: auto;
}
.activity-shoe-icon-btn.ri-btn:disabled,
.activity-shoe-icon-btn.ri-btn[aria-disabled="true"] {
  pointer-events: none;
}
@media (pointer: coarse) {
  .activity-shoe-icon-btn.ri-btn::after { inset: -10px -2px; }
}

/* Sync shoe: the shared secondary button at the small size, not a tag (owner
   2026-10-05, "the sync strava should also look like a button"). The Strava
   glyph keeps its orange. It takes the row's 24 px control height (the edit
   and delete buttons beside it), so the row never grows. */
.activity-shoe-sync-btn.ri-btn {
  --_btn-h: 24px;
  --_btn-px: 10px;
  --_btn-fs: 12px;
  --_btn-lh: 16px;
  --_btn-icon: 12px;
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
}
.activity-shoe-sync-btn.ri-btn .activity-shoe-pill-strava-sync-icon {
  width: 12px;
  height: 12px;
  color: #fc4c02;
  fill: currentColor;
  filter: drop-shadow(0 0 8px rgba(252, 76, 2, 0.28));
}
.activity-shoe-sync-btn.ri-btn .activity-shoe-pill-label {
  color: inherit;
}
/* Sync shoe keeps its Strava logo and the animated "Syncing..." dots while it
   syncs (owner 2026-10-05: "don't remove the dots"), not the shared spinner. */
.activity-shoe-sync-btn.ri-btn[aria-busy="true"] { cursor: wait; }
.activity-shoe-sync-btn.ri-btn[aria-busy="true"] .ri-btn-icon > * { visibility: visible; }
.activity-shoe-sync-btn.ri-btn[aria-busy="true"] .ri-btn-icon::before { content: none; }

/* 2. Drift Inspector type scale (type scale v2: labels are caption, sentence case;
   faint label, values white 500, secondary lines 12 px Light faint, status
   words 13 px Light in their status colour. Tiles, sizes and state colours
   stay as they were. */
#driftInspectorSection .di-hero-label,
#driftInspectorSection .di-visual-metric-text,
#driftInspectorSection .di-confidence-label,
#driftInspectorSection .di-rtag-name,
#driftInspectorSection .di-meta-label,
#driftInspectorSection .dw-nudge-label,
#driftInspectorSection .dw-view-label {
  font-family: var(--ri-font-sans, 'Noto Sans', ui-sans-serif, system-ui, sans-serif);
  font-size: var(--ri-text-caption) !important;
  font-weight: 600;
  line-height: var(--ri-leading-caption);
  color: var(--ri-text-faint, rgba(255, 255, 255, 0.62));
}
#driftInspectorSection .di-visual-metric-text { font-size: var(--ri-text-secondary) !important; line-height: var(--ri-leading-secondary); }
#driftInspectorSection .di-rtag .di-rtag-name { color: var(--ri-text-faint, rgba(255, 255, 255, 0.62)); }
#driftInspectorSection .di-hero-icon { opacity: 0.62; margin-right: 3px; }
#driftInspectorSection .di-hero-value {
  font-size: var(--ri-text-metric-lg);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}
#driftInspectorSection .di-confidence-score {
  font-size: var(--ri-text-metric-lg);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}
#driftInspectorSection .di-meta-value,
#driftInspectorSection .di-rtag-val {
  font-size: var(--ri-text-secondary);
  font-weight: 500;
  line-height: var(--ri-leading-secondary);
  letter-spacing: 0;
  color: #fff;
}
#driftInspectorSection .di-hero-sublabel,
#driftInspectorSection .di-hero-meta,
#driftInspectorSection .di-hero-metric-range,
#driftInspectorSection .di-visual-metric-delta,
#driftInspectorSection .di-hero-meta .di-sub-note,
#driftInspectorSection .di-confidence-of,
#driftInspectorSection .di-confidence-meta,
#driftInspectorSection .di-rtag-sub,
#driftInspectorSection .di-meta-sub {
  font-size: var(--ri-text-label);
  font-weight: 300;
  line-height: var(--ri-leading-label);
  letter-spacing: 0;
  color: var(--ri-text-faint, rgba(255, 255, 255, 0.62));
}
/* Status words ("stable", "too short", "narrow") in the tile's state colour. */
#driftInspectorSection .di-rtag-val--word,
#driftInspectorSection .di-rtag-info {
  font-size: var(--ri-text-caption);
  font-weight: 300;
  line-height: 1.25;
}
#driftInspectorSection .di-rtag--ok .di-rtag-val--word { color: #34d399; }
#driftInspectorSection .di-rtag--warn .di-rtag-val--word,
#driftInspectorSection .di-rtag--ceil .di-rtag-val--word { color: #fbbf24; }
#driftInspectorSection .di-rtag--bad .di-rtag-val--word { color: #f87171; }
#driftInspectorSection .di-rtag--info .di-rtag-val--word,
#driftInspectorSection .di-rtag-info { color: #94a3b8; }
#driftInspectorSection .di-rtag-ok,
#driftInspectorSection .di-rtag-pen,
#driftInspectorSection .di-rtag-pen-warn {
  font-size: var(--ri-text-caption);
  font-weight: 600;
  line-height: 1.2;
}
/* Drift signal tiles (owner 2026-10-05, BIO-4: "fix these buttons and use correct
   styling here"; 2026-10-06: the filter dropdown box, on one line, with the % and
   its tag big and centred). Each metric picker is the app's filter field: the run
   picker's .di-dropdown-trigger / .ri-input look (40 px, 44 px on phones, 8 px
   radius, one chevron, the shared filter hover from ui-components.css). Below it
   the value and its .ri-tag status sit centred in the rest of the tile. */
/* Two shared metric tiles; the row is only a layout container. */
#driftInspectorSection .di-hero-row { padding: 0; gap: var(--ri-space-3, 12px); }
#driftInspectorSection .di-hero-card {
  min-height: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: center;
}
#driftInspectorSection .di-hero-label { flex: none; width: 100%; margin: 0; }
#driftInspectorSection .di-hero-icon { display: none; }
#driftInspectorSection .di-hero-sublabel { display: none; }
#driftInspectorSection .di-hero-label .di-visual-metric-shell {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: var(--ri-control-md, 40px);
  margin: 0;
  padding: 3px 30px 3px 10px;
  box-sizing: border-box;
  border: 1px solid var(--ri-border-control, rgba(255, 255, 255, 0.36));
  border-radius: var(--ri-radius-sm, 8px);
  background-color: var(--ri-surface-control, rgba(255, 255, 255, 0.05));
  cursor: pointer;
}
#driftInspectorSection .di-hero-label .di-visual-metric-text {
  flex: 1 1 auto;
  font-family: var(--ri-font-sans, 'Noto Sans', ui-sans-serif, system-ui, sans-serif);
  font-size: var(--ri-text-secondary) !important;
  font-weight: 400;
  line-height: var(--ri-leading-secondary);
  letter-spacing: 0;
  text-transform: none;
  /* One line, like every filter field; the open list shows the full name. */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  color: var(--ri-text-strong, rgba(255, 255, 255, 0.96));
}
/* The run picker's chevron. */
#driftInspectorSection .di-hero-label .di-visual-metric-shell::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  flex: none;
  margin: 0;
  border: 0;
  opacity: 1;
  transform: translateY(-50%);
  background: url("/images/icons/run-it/chevron-down.svg?v=20261007-icon-edges-v6") center / 12px 12px no-repeat;
  pointer-events: none;
}
#driftInspectorSection .di-visual-metric-select {
  inset: 0;
  width: 100%;
  height: 100%;
  font-size: var(--ri-text-input);
  cursor: pointer;
}
/* The shared filter hover (ui-components.css) brings the inner glow and the lift;
   its edge and fill are restated here because the tile rules above carry an id. */
@media (hover: hover) {
  #driftInspectorSection .di-hero-label .di-visual-metric-shell:hover:not(:focus-within):not(:has(select:disabled)) {
    border-color: rgba(255, 255, 255, 0.42);
    background-color: rgba(255, 255, 255, 0.08);
  }
}
#driftInspectorSection .di-hero-label .di-visual-metric-shell:focus-within {
  outline: none;
  border-color: var(--ri-cyan, #2ED1F4);
  box-shadow: var(--ri-focus-ring, 0 0 0 3px rgba(46, 209, 244, 0.25));
}
#driftInspectorSection .di-visual-metric-shell:has(select:disabled) { opacity: 0.5; cursor: default; }
#driftInspectorSection .di-visual-metric-shell:has(select:disabled):hover { border-color: var(--ri-border-control, rgba(255, 255, 255, 0.36)); }
#driftInspectorSection .di-visual-metric-select:disabled { cursor: default; }
/* The value and its tag share the space under the picker, centred both ways. */
#driftInspectorSection .di-hero-value {
  margin-top: auto;
  min-width: 0;
  font-size: var(--ri-text-metric-lg);
  line-height: 1.15;
  text-align: center;
  overflow-wrap: break-word;
}
#driftInspectorSection .di-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  margin: 0 0 auto;
  text-align: center;
}
#driftInspectorSection .di-hero-card--visual-selected .di-hero-meta { text-align: center; }
#driftInspectorSection .di-hero-value--status {
  font-size: var(--ri-text-secondary, 14px);
  line-height: var(--ri-leading-secondary, 1.45);
}

@media (max-width: 640px) {
  #driftInspectorSection .di-hero-label .di-visual-metric-shell {
    min-height: 44px;
    padding: 3px 24px 3px 10px;
  }
  #driftInspectorSection .di-hero-label .di-visual-metric-shell::after { right: 8px; }
}
#driftInspectorSection .di-gps-map-card h5 {
  font-size: var(--ri-text-subtitle) !important;
  font-weight: 300;
  line-height: var(--ri-leading-subtitle);
  color: #fff;
}

/* 2b. Chart-card header controls: small secondary buttons (.ri-btn
   .ri-btn--secondary .ri-btn--sm in the markup); the -/+ pairs are square.
   Save windows keeps its saved/error colours as the button colour. */
#driftInspectorSection .drift-window-controls .ri-btn { --_btn-radius: 8px; }
#driftInspectorSection .dw-nudge-btn.ri-btn { --_btn-px: 0px; width: var(--_btn-h); font-size: var(--ri-text-lead) !important; }
#driftInspectorSection .drift-window-save-btn.ri-btn.is-saved { --_btn-color: #34d399; }
#driftInspectorSection .drift-window-save-btn.ri-btn.is-error { --_btn-color: #f87171; }
#driftInspectorSection .drift-window-save-btn.ri-btn.saving { opacity: 1; cursor: wait; }
#driftInspectorSection .drift-window-save-btn.ri-btn.is-saved:disabled { opacity: 0.82; }
/* Save and Reset are icon buttons (owner 2026-10-18), with Smoothed beside them. */
#driftInspectorSection .dw-window-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
#driftInspectorSection .dw-window-actions .drift-chart-smooth { margin-left: 6px; }
#driftInspectorSection .dw-icon-btn.ri-btn { --_btn-px: 0px; min-width: var(--_btn-h) !important; width: auto; padding: 0 9px !important; justify-content: center; }
#driftInspectorSection .drift-window-save-btn.dw-icon-btn.ri-btn { width: var(--_btn-h); padding: 0 !important; }
#driftInspectorSection .dw-icon-btn .dw-icon { width: 18px; height: 18px; display: block; }
/* Reset carries icon + caret, so it is wider than the square buttons (owner 2026-10-18). */
#driftInspectorSection .dw-reset-trigger.dw-icon-btn { gap: 8px; padding: 0 16px !important; min-width: calc(var(--_btn-h) * 1.5) !important; }
#driftInspectorSection .dw-reset-trigger.dw-icon-btn .dw-reset-caret { font-size: 9px; }
#driftInspectorSection .dw-icon-btn .dw-save-content { grid-template-columns: auto; }
#driftInspectorSection .dw-icon-btn .dw-save-label-shell { grid-column: 1; }
#driftInspectorSection .dw-icon-btn .dw-save-status-layer { right: auto; left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); }
#driftInspectorSection .dw-icon-btn .dw-save-check svg,
#driftInspectorSection .dw-icon-btn .dw-save-error svg { width: 16px; height: 16px; }
#driftInspectorSection .dw-icon-btn .dw-save-spinner-ring { width: 15px; height: 15px; }
#driftInspectorSection .dw-icon-btn[data-save-state="saving"] .dw-save-label--save,
#driftInspectorSection .dw-icon-btn[data-save-state="error"] .dw-save-label--save { opacity: 0; }
@media (max-width: 640px) { #driftInspectorSection .dw-window-actions .dw-reset-menu { left: 0; right: auto; min-width: 170px; } }
@media (max-width: 640px) {
  #driftInspectorSection .drift-window-save-btn.ri-btn,
  #driftInspectorSection .dw-reset-trigger.ri-btn,
  #driftInspectorSection .drift-chart-reset.ri-btn { --_btn-h: 40px; }
}

/* 3. Drift Inspector explanation popover (js/help-tooltips.js opens the
   shared #driftInspectorSharedTooltip; the page anchors it above or below
   the hovered tile, see _diAnchorSharedTooltip). The popover surface, a
   280 px wrap, 13 px Light text, a 150 ms fade. The page's closed-tooltip
   collapse (gp-tooltip-collapse) never applies to it: that clipped the open
   panel to one line. */
#driftInspectorSharedTooltip.di-shared-tooltip-panel {
  --help-tooltip-duration: 150ms;
  animation: none !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px 14px !important;
  font-size: var(--ri-text-tooltip) !important;
  font-weight: 300 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: break-word;
}
@media (min-width: 641px) and (hover: hover) and (pointer: fine) {
  #driftInspectorSharedTooltip.di-shared-tooltip-panel {
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(280px, calc(100vw - 24px)) !important;
  }
}

/* 4. Route map zoom buttons: the app's square secondary icon button
   (32 px, radius 8, glass wash, cyan ring, inner glow, hover wash). The
   apple-route-map.js map builds the same .di-gps-zoom-btn markup. */
.di-gps-zoom-controls { gap: 6px; }
.di-gps-zoom-btn {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 8px;
  background: var(--ri-gradient-glass, linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%));
  box-shadow: inset 0 -6px 15px rgba(56, 230, 215, 0.25), inset 0 6px 15px rgba(121, 241, 255, 0.25);
  color: #fff;
  /* Both glyphs white (owner 2026-10-16), not the two-tone grey/cyan icon. */
  --icon-muted: #fff;
  --icon-accent: #fff;
  font-family: var(--ri-font-sans, 'Noto Sans', ui-sans-serif, system-ui, sans-serif);
  font-size: var(--ri-text-lead) !important;
  font-weight: 300;
  line-height: 1 !important;
  cursor: pointer;
  transform: none;
  transition: opacity var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease), color var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease);
  -webkit-tap-highlight-color: transparent;
}
.di-gps-zoom-btn::before,
.di-gps-zoom-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--ri-dur-fast, 150ms) var(--ri-ease-standard, ease);
}
.di-gps-zoom-btn::before {
  z-index: -1;
  padding: 1px;
  background: linear-gradient(90deg, rgba(121, 241, 255, 0.45) 0.01%, rgba(56, 230, 215, 0.45) 50.01%, rgba(56, 230, 215, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.di-gps-zoom-btn::after {
  z-index: -2;
  background: linear-gradient(90deg, rgba(46, 209, 244, 0.12), rgba(46, 209, 244, 0.05));
  opacity: 0;
}
@media (hover: hover) {
  .di-gps-zoom-btn:hover:not(:disabled)::after { opacity: 1; }
}
.di-gps-zoom-btn:hover:not(:disabled) {
  background: var(--ri-gradient-glass, linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%));
  color: #fff;
  transform: none;
}
@media (pointer: coarse) {
  .di-gps-zoom-btn::after {
    inset: -6px -3px;
    background: none;
    opacity: 1;
    pointer-events: auto;
  }
}
.di-gps-zoom-btn:focus-visible {
  outline: 2px solid var(--ri-cyan, #2ED1F4);
  outline-offset: 2px;
}
.di-gps-zoom-btn:focus:not(:focus-visible) { outline: none; }
.di-gps-zoom-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}



/* Drift Inspector: readable plot and compact controls at phone widths. */
/* Keep both value axes and the HR overlay visible while the distance range pans. */
#driftInspectorSection .di-chart-viewport { position: sticky; left: 0; height: 100%; min-width: 0; }

#driftInspectorSection .di-mobile-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 16px;
  padding: 10px 0 2px;
}
#driftInspectorSection .di-ml-item { color: #dbe4f0; font-size: var(--ri-text-label); gap: 6px; }
#driftInspectorSection .di-ml-line { width: 20px; flex: 0 0 20px; }
.di-hr-edge-grip { position: absolute; bottom: 6px; height: 18px; width: 4px; border-radius: 3px; background: #ff416c; }
.di-hr-edge-grip--start { left: 0; }
.di-hr-edge-grip--end { right: 0; }
@media (max-width: 640px), (max-width: 1024px) and (max-height: 540px) and (pointer: coarse) {
  #driftInspectorSection .drift-chart-card { min-width: 0; }
  #driftInspectorSection .drift-inspector-main-card { display: flex; flex-direction: column; }
  #driftInspectorSection .drift-chart-toolbar { display: contents; }
  #driftInspectorSection .drift-chart-toolbar > div:first-child { margin-bottom: 10px; }
  #driftInspectorSection .drift-chart-actions { order: 4; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
  #driftInspectorSection .drift-chart-toolbar { gap: 8px; }
  #driftInspectorSection .drift-chart-hint { font-size: var(--ri-text-caption); line-height: var(--ri-leading-caption); color: #aebdd0; }
  #driftInspectorSection .drift-window-controls { gap: 6px 10px; }
  #driftInspectorSection .dw-nudge-wrap,
  #driftInspectorSection .dw-view-wrap { padding: 0; gap: 4px; border: 0; background: none; min-height: 36px; }
  #driftInspectorSection .drift-window-controls .ri-btn {
    --_btn-h: 36px; height: 36px; min-height: 36px !important; padding: 0 10px; font-size: var(--ri-text-button) !important;
  }
  #driftInspectorSection .dw-nudge-btn.ri-btn { width: 36px; min-width: 36px; padding: 0; }
  #driftInspectorSection .dw-nudge-label,
  #driftInspectorSection .dw-view-label { font-size: var(--ri-text-micro); letter-spacing: 0; text-transform: none; }
  #driftInspectorSection #driftInspectorMainScroll { height: clamp(164px, 48vw, 196px) !important; min-height: 0; max-height: none; aspect-ratio: auto; padding-bottom: 0; overflow-y: hidden; }
  #driftInspectorSection .di-mobile-legend { gap: 8px 12px; }
  /* Phones (owner 2026-10-18): no Nudge; the Zoom -/+ sit next to Smoothed, without the word. */
  #driftInspectorSection .drift-window-controls { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "actions view"; align-items: center; }
  #driftInspectorSection .dw-nudge-wrap { display: none !important; }
  #driftInspectorSection .dw-view-wrap { width: auto; justify-content: flex-end; }
  #driftInspectorSection .dw-view-label { display: none; }
}

/* Groove and knob (owner 2026-10-07, "the CORRECT SLIDER styling"): the pace slider is a
   draggable control, so it takes the app's slider look (Shoes Assigned distance, Shoe Analysis
   price): a 12 px groove cut into the card and a dark round knob with a ring and soft glow in the slider
   colour. It picks a pace bracket rather than an amount, so the groove is lit evenly in the slider
   colour instead of filling up to the knob (owner 2026-10-07: an unlit groove read as a "black
   bar"). Thumb sizes
   (20 px, 18 px on phones), so the thumb-under-bar alignment, the touch scrub and the touch
   dot's motion are unchanged. Shared verbatim by garmin-profile.html and
   static/stryd-profile-page.css; keep both copies identical. */
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-webkit-slider-runnable-track,
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]:hover::-webkit-slider-runnable-track,
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]:active::-webkit-slider-runnable-track {
  height: 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.16);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.07);
}
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-track {
  height: 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.16);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.07);
}
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-progress { background: transparent; border: 0; box-shadow: none; }
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-webkit-slider-thumb {
  margin-top: -4px;
  border: 2px solid rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.95);
  background: #0d1222;
  box-shadow: 0 0 14px rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.4), 0 4px 10px rgba(0, 0, 0, 0.45);
}
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-thumb {
  border: 2px solid rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.95);
  background: #0d1222;
  box-shadow: 0 0 14px rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.4), 0 4px 10px rgba(0, 0, 0, 0.45);
}
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]:hover::-webkit-slider-thumb,
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.1);
  background: #0d1222;
  border-color: rgba(var(--bio-selected-slider-thumb-ring-rgb), 1);
}
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]:hover::-moz-range-thumb,
#biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]:active::-moz-range-thumb {
  transform: scale(1.1);
  background: #0d1222;
  border-color: rgba(var(--bio-selected-slider-thumb-ring-rgb), 1);
}
/* The touch-screen dot (a compositor layer moved by the touch handler) is the same knob. */
#biomechanicalProfileSection .bio-bracket-slider-wrap.bio-slider-touch .bio-slider-touch-thumb::after {
  border: 2px solid rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.95);
  background: #0d1222;
  box-shadow: 0 0 12px rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.4), 0 3px 8px rgba(0, 0, 0, 0.45);
}
#biomechanicalProfileSection .bio-bracket-slider-wrap.bio-slider-touch.bio-slider-pressed .bio-slider-touch-thumb::after {
  background: #0d1222;
  border-color: rgba(var(--bio-selected-slider-thumb-ring-rgb), 1);
}
@media (max-width: 640px) {
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-webkit-slider-thumb { margin-top: -3px; box-shadow: 0 0 12px rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.4); transform: none; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-thumb { box-shadow: 0 0 12px rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.4); transform: none; }
}

    /* Drift Inspector loading skeleton (kit: .ri-skeleton): the summary cards and the main
       chart in the places the run's streams land. While the run renders, the skeleton lies
       over that spot (.is-handoff) and the real elements wait hidden (.di-body-pending),
       so each block turns into its element in place (RunItMotion.revealFromSkeleton). */
    .di-skeleton { position: relative; margin: 14px 0; }
    .di-skeleton.is-handoff { position: absolute; margin: 0; pointer-events: none; z-index: 3; }
    .di-skeleton-cards {
      display: grid;
      grid-template-columns: minmax(360px, 1.05fr) minmax(0, 1.25fr) minmax(340px, 1.05fr);
      gap: 14px;
    }
    .di-skeleton-card { display: block; height: 190px; border-radius: 14px; }
    .di-skeleton-chart { display: block; height: 340px; margin-top: 14px; border-radius: 14px; }
    .di-body-pending { visibility: hidden !important; }
    @media (max-width: 1120px) {
      .di-skeleton-cards { grid-template-columns: 1fr; }
      .di-skeleton-card:nth-child(n+2) { display: none; }
    }
    @media (max-width: 640px) {
      .di-skeleton { margin: 8px 0 14px; }
      .di-skeleton-card { height: 120px; }
      .di-skeleton-chart { height: 200px; margin-top: 8px; }
    }

/* Drift Inspector parity with garmin-profile.html: drag-zoom crosshair, "Smoothed" switch,
   route-map hover dot and the zoom scrollbar (drift-inspector-shared.js attachDriftChartScroll). */
@media (hover: hover) and (pointer: fine) { #driftInspectorPaceGctChart { cursor: crosshair; } }
.drift-chart-smooth { display: inline-flex; align-items: center; gap: 10px; color: var(--ri-text-muted, rgba(255,255,255,0.62)); font-size: var(--ri-text-caption, 13px); white-space: nowrap; cursor: pointer; }
.drift-chart-smooth[hidden] { display: none; }
.di-gps-leaflet-wrap .di-gps-cursor { filter: drop-shadow(0 0 6px rgba(46, 209, 244, 0.85)); }
.di-zoom-scroll { position: relative; height: 8px; margin: 6px 0 2px; border-radius: 999px; background: rgba(255,255,255,0.06); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
.di-zoom-scroll.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.di-zoom-scroll-thumb { position: absolute; top: 0; bottom: 0; min-width: 18px; border-radius: inherit; background: rgba(46, 209, 244, 0.45); box-shadow: 0 0 8px rgba(46, 209, 244, 0.35); cursor: grab; touch-action: none; transition: background-color 150ms ease; }
.di-zoom-scroll-thumb:hover, .di-zoom-scroll-thumb.is-dragging { background: rgba(46, 209, 244, 0.75); }
.di-zoom-scroll-thumb.is-dragging { cursor: grabbing; }
.di-zoom-scroll-thumb:focus-visible { outline: 2px solid var(--ri-cyan, #2ED1F4); outline-offset: 2px; }
@media (max-width: 640px) { .di-zoom-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .di-zoom-scroll, .di-zoom-scroll-thumb { transition: none; } }

/* Upload: the My Runs source chooser's Stryd tile above the title and copy
   (owner 2026-10-19, like the Strava and Apple Health states). The area stays
   a drop target but loses its own box; a dragged ZIP lights the tile. */
#strydDropZone,
#strydDropZone:hover,
#strydDropZone.dragover,
#strydDropZone:focus-visible {
  min-height: 0 !important;
  gap: 0 !important;
  /* No top padding: the tile starts 20 px under the title, like every card. */
  padding: 0 0 8px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible;
  cursor: default;
}
#strydDropZone::before,
#strydDropZone::after {
  display: none !important;
}
.run-source-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; padding: 16px; border: 0; border-radius: var(--ri-radius-lg, 16px);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.run-source-tile:focus-visible { outline: 2px solid var(--tile-color); outline-offset: 2px; }
.run-source-tile img { width: 40px; height: 40px; margin: 0 0 10px; border-radius: 10px; object-fit: contain; }
.run-source-tile-name { font-size: var(--ri-text-lead, 16px); font-weight: var(--ri-weight-regular, 400); color: var(--ri-text-strong, rgba(255,255,255,.96)); }
.run-source-tile-line { font-size: var(--ri-text-caption, 13px); color: var(--ri-text-faint, rgba(255,255,255,.62)); }
.stryd-upload-tile { width: min(100%, 180px); margin: 0 auto 16px; }
#strydDropZone.dragover .stryd-upload-tile { --tile-lift: 1; --_tile-edge: 100%; transition: var(--_tile-in); }
#strydDropZone[aria-busy="true"] .stryd-upload-tile { cursor: progress; }
@media (max-width: 640px) {
  .run-source-tile { padding: 14px; }
  .run-source-tile img { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 8px; }
}
#strydDropZone .stryd-upload-copy { margin-top: 8px; }

/* Keep activity text on the normal scroll paint path, without masked layers
   (prod 59fcba813). The one-time reveal fades stay (staging motion rules). */
#runAnalysisSection, #strydRunAnalysisSection {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#activityOverviewContainer .activity-overview-wrap {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}