/* Open, illustrated milestones. Meaning stays in the icon, color, label and completion badge. */
#modal .pipeline-stage-control,.shell .review-pipeline{background:transparent;border:0;border-radius:0;box-shadow:none;padding:14px 0 12px;margin:20px 0}
#modal .pipeline-stage-heading{margin:0 0 7px}
:is(.shell,#modal) .workflow-progress{margin:0;padding:26px 2px 10px;overflow-x:auto;overflow-y:hidden;scroll-padding-inline:10px;scrollbar-width:thin}
:is(.shell,#modal) .workflow-progress>li{min-width:94px;font:600 12px/1.4 var(--sans);color:var(--hm-muted)}
:is(.shell,#modal) .workflow-progress .progress-step,:is(.shell,#modal) .workflow-progress button{gap:12px;min-height:96px;padding:0 5px 5px;border-radius:12px;background:transparent;box-shadow:none}
:is(.shell,#modal) .workflow-progress .progress-node{width:64px;height:64px;position:relative;border:0;border-radius:0;background:transparent;box-shadow:none;isolation:isolate}
:is(.shell,#modal) .workflow-progress .progress-core{position:static;display:grid;place-items:center;width:100%;height:100%;background:transparent;color:color-mix(in srgb,var(--step-color) 70%,var(--hm-ink));border-radius:0;box-shadow:none;animation:none}
:is(.shell,#modal) .workflow-progress .hm-stage-glyph{display:block;width:43px;height:46px;overflow:visible;transition:transform .3s var(--hm-spring)}
.hm-stage-glyph .stage-shape{fill:color-mix(in srgb,var(--step-color) 12%,var(--hm-paper));stroke:currentColor;stroke-width:1.65}
.hm-stage-glyph .stage-line,.hm-stage-glyph .stage-detail{fill:none;stroke:currentColor;stroke-width:1.8}
.hm-stage-glyph .stage-cutout{fill:currentColor;stroke:none}.hm-stage-glyph .stage-pupil{fill:var(--hm-paper);stroke:none}
:is(.shell,#modal) .workflow-progress :is(.is-past,.is-current) .progress-core{background:transparent;color:var(--step-color);box-shadow:none}
:is(.shell,#modal) .workflow-progress :is(.is-past,.is-current) .stage-shape{fill:var(--step-color);stroke:var(--step-color)}
:is(.shell,#modal) .workflow-progress :is(.is-past,.is-current) .stage-detail{stroke:var(--hm-paper)}
:is(.shell,#modal) .workflow-progress :is(.is-past,.is-current) .stage-cutout{fill:var(--hm-paper)}
:is(.shell,#modal) .workflow-progress :is(.is-past,.is-current) .stage-pupil{fill:var(--step-color)}
:is(.shell,#modal) .workflow-progress .is-current .progress-node::before,:is(.shell,#modal) .workflow-progress .is-current .progress-core::after{display:none}
:is(.shell,#modal) .workflow-progress .progress-done{position:absolute;top:-17px;left:22px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--step-color);color:white;box-shadow:0 0 0 3px var(--hm-paper);animation:hm-stage-check .38s var(--hm-spring) both;animation-delay:calc(var(--node-delay)*.12)}
:is(.shell,#modal) .workflow-progress .progress-done .hm-icon{width:14px;height:14px;stroke-width:2.6}
.progress-current-dot{position:absolute;bottom:0;left:29px;width:6px;height:6px;border-radius:50%;background:var(--step-color)}
:is(.shell,#modal) .workflow-progress>.is-current .progress-label{font-weight:800;color:color-mix(in srgb,var(--step-color) 55%,var(--hm-ink))}
:is(.shell,#modal) .workflow-progress>.is-past .progress-label{color:var(--hm-ink)}
:is(.shell,#modal) .workflow-progress>li::before,:is(.shell,#modal) .workflow-progress>li::after{top:32px;left:calc(-50% + 35px);width:calc(100% - 70px);height:2px;background:var(--hm-line);border-radius:2px}
:is(.shell,#modal) .workflow-progress>li::after{background:linear-gradient(90deg,var(--previous-color),var(--step-color));animation-duration:.35s;animation-delay:calc(var(--step-delay)*.12)}
:is(.shell,#modal) .workflow-progress>.is-current .hm-stage-glyph{animation:hm-stage-arrive .5s var(--hm-spring) both}
@media(hover:hover){:is(.shell,#modal) .workflow-progress button:not(:disabled):hover .hm-stage-glyph{transform:translateY(-4px) rotate(-4deg)}}
:is(.shell,#modal) .workflow-progress button:focus-visible{outline:2px solid var(--step-color);outline-offset:-2px}
.shell .review-pipeline-next{border-color:var(--hm-line)}
@keyframes hm-stage-check{from{opacity:0;transform:translateY(5px) scale(.5)}to{opacity:1;transform:none}}
@keyframes hm-stage-arrive{from{opacity:.4;transform:translateY(7px) scale(.85) rotate(-7deg)}to{opacity:1;transform:none}}
@media(max-width:600px){
 :is(.shell,#modal) .workflow-progress>li{min-width:86px;font-size:11px}
 :is(.shell,#modal) .workflow-progress .progress-step,:is(.shell,#modal) .workflow-progress button{gap:9px;min-height:91px}
 :is(.shell,#modal) .workflow-progress .progress-node{width:58px;height:58px}
 :is(.shell,#modal) .workflow-progress .hm-stage-glyph{width:39px;height:42px}
 :is(.shell,#modal) .workflow-progress .progress-done{left:19px}
 .progress-current-dot{left:26px}
 :is(.shell,#modal) .workflow-progress>li::before,:is(.shell,#modal) .workflow-progress>li::after{top:29px;left:calc(-50% + 31px);width:calc(100% - 62px)}
 #modal .pipeline-stage-control{margin:18px 0 20px}
}
@media(prefers-reduced-motion:reduce){:is(.shell,#modal) .workflow-progress *,:is(.shell,#modal) .workflow-progress *::before,:is(.shell,#modal) .workflow-progress *::after{animation:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){:is(.shell,#modal) .workflow-progress .hm-stage-glyph,:is(.shell,#modal) .workflow-progress .progress-done{transform:none!important}}
@media(forced-colors:active){.hm-stage-glyph .stage-shape{fill:Canvas;stroke:CanvasText}.hm-stage-glyph .stage-detail,.hm-stage-glyph .stage-line{stroke:CanvasText}:is(.shell,#modal) .workflow-progress :is(.is-past,.is-current) .stage-shape{fill:Highlight;stroke:CanvasText}:is(.shell,#modal) .workflow-progress :is(.is-past,.is-current) .stage-detail{stroke:HighlightText}:is(.shell,#modal) .workflow-progress .progress-done{background:Highlight;color:HighlightText;outline:1px solid CanvasText}}