.ds-segment-list{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-1) var(--space-2) 100% var(--space-2)}.ds-segment-card{align-items:center;background-color:var(--ds-bg-surface);border:1.5px solid var(--ds-border);border-radius:12px;cursor:pointer;display:flex;gap:12px;padding:var(--space-2) var(--space-3);position:relative;scroll-margin-top:var(--space-3)}.ds-segment-card.active{border-color:color-mix(in srgb,var(--interactive-neutral) 40%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--interactive-neutral) 20%,transparent);filter:brightness(.94)}.ds-segment-card.status-completed{border-color:var(--ds-border)}.ds-segment-card.status-in_progress{border:2px solid var(--interactive-neutral);box-shadow:0 2px 12px color-mix(in srgb,var(--interactive-neutral) 12%,transparent);padding-bottom:calc(var(--space-2) + 10px)}.ds-segment-card.status-in_progress.active{filter:brightness(.97)}.ds-segment-card.status-in_progress:after{background:linear-gradient(to right,color-mix(in srgb,var(--brand-primary) 80%,transparent) 0,color-mix(in srgb,var(--brand-primary) 80%,transparent) calc(var(--progress, 0)*100%),transparent calc(var(--progress, 0)*100%)),repeating-linear-gradient(to right,color-mix(in srgb,var(--interactive-neutral) 18%,transparent) 0,color-mix(in srgb,var(--interactive-neutral) 18%,transparent) 4px,transparent 4px,transparent 8px);border-radius:2px;bottom:6px;content:"";height:3px;left:var(--space-3);pointer-events:none;position:absolute;right:var(--space-3)}.ds-segment-card.status-in_progress:before{background:url(/images/ds-white.svg) no-repeat;background-position:calc(var(--progress, 0)*100%);background-size:18px 18px;bottom:0;content:"";height:18px;left:var(--space-3);pointer-events:none;position:absolute;right:var(--space-3);z-index:1}@media (hover:hover) and (pointer:fine){.ds-segment-card:hover{background-color:var(--bg-secondary);box-shadow:0 2px 8px color-mix(in srgb,var(--interactive-neutral) 15%,transparent)}.ds-segment-card.status-in_progress:hover{filter:brightness(.97)}}.ds-segment-number{align-items:center;border:2px solid var(--ds-border);border-radius:50%;color:var(--ds-text-muted);display:flex;flex-shrink:0;font-size:12px;font-weight:700;height:28px;justify-content:center;width:28px}.ds-segment-card.active .ds-segment-number{border-color:color-mix(in srgb,var(--interactive-neutral) 40%,transparent);color:var(--interactive-neutral)}.ds-segment-card.status-completed .ds-segment-number{background-color:var(--status-success-bg);color:var(--ds-text-faint)}.status-completed .ds-segment-distance,.status-completed .ds-segment-name{color:var(--ds-text-faint)}.ds-segment-card.status-in_progress .ds-segment-number{animation:number-sonar 1.5s ease-out infinite;background:var(--interactive-neutral);border-color:var(--interactive-neutral);color:var(--text-inverse)}@keyframes number-sonar{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--interactive-primary) 70%,transparent)}to{box-shadow:0 0 0 6px transparent}}.ds-segment-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ds-segment-name{color:var(--ds-text);font-size:var(--font-lg);font-weight:var(--weight-semibold);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-segment-distance{color:var(--ds-text-muted);font-size:var(--font-base);font-weight:var(--weight-medium)}.ds-segment-distance .ds-distance-of{font-weight:400}@media (min-width:768px){.ds-segment-list{padding-bottom:var(--space-4)}.ds-segment-list--has-overflow{padding-bottom:100%}.ds-segment-card{padding:var(--space-3) var(--space-2);scroll-margin-top:calc(var(--space-3) + 40px)}.ds-segment-card.status-in_progress{padding-bottom:calc(var(--space-3) + 10px)}.ds-segment-card.status-in_progress:after{left:var(--space-2);right:var(--space-2)}.ds-segment-distance{font-size:var(--font-sm)}}