/* @group @m-flow-list */

[class*="m-flow-list"] {
display: grid;
align-content: var(--content-block-align-content);
grid-template-columns: repeat(1, 1fr);
counter-reset: li-entry;
}

[class*="m-flow-list"]>li {
counter-increment: li-entry;
}

/* @end @m-flow-list */

/* --------------------------------------------------------*/

/* @group @variables */

[class*="m-flow-detail"] {
--text-block-margin-bottom: 0;
--event-body-align-content: start;
--flow-count-width: calc(1.125rem - 1px);
--flow-count-line-width: 2px;
--flow-count-height: 2.25rem;
--flow-count-line-grid-row: 1 /  7;
--head-3-margin-bottom: 0;
--head-3-font-size: 1.125rem;
--head-3-line-height: 1.333333333;
--head-3-color: var(--color-brand);
--head-3-font-weight: 500;
}

[class*="m-flow-list"]>li:last-of-type {
--flow-count-line-grid-row: 1 /  4;
}

/* @end @variables */

/* @group @variables */

[class*="m-flow-detail"] {
--flow-detail-grid-rows: .375rem auto .375rem var(--flow-detail—gap) var(--flow-detail-body) 2.25rem;
}

[class*="m-flow-list"]>li:last-of-type {
--flow-detail-grid-rows: .375rem auto .375rem var(--flow-detail—gap) var(--flow-detail-body) 0;
}

[class*="m-flow-list"] {
--flow-detail-body: 1fr;
--flow-detail—gap: .375rem;
}

[class*="m-flow-detail-primary"] {
--flow-detail-body: 0;
--flow-detail—gap: 0;
}

/* @end @variables */

/* @group @m-flow-detail */

[class*="m-flow-detail"] {
position: relative;
display: grid;
grid-template-columns: var(--flow-count-width) var(--flow-count-line-width) var(--flow-count-width) .75rem 1fr;
grid-template-rows: var(--flow-detail-grid-rows);
}

[class*="m-flow-detail"]:before {
box-sizing: border-box;
content: counter(li-entry);
position: relative;
z-index: 2;
grid-column: 1 / 4;
grid-row: 1 /  4;
display: grid;
place-items: var(--place-items-center-primary);
width: var(--flow-count-height);
height: var(--flow-count-height);
background-color: var(--color-brand);
border-radius: 50%;
font-size: 1.25rem;
line-height: 1;
color: var(--color-white);
}

[class*="m-flow-detail"]:after {
content: '';
position: relative;
z-index: 1;
grid-column: 2;
grid-row: var(--flow-count-line-grid-row);
display: grid;
width: var(--flow-count-line-width);
height: 100%;
background-color: var(--color-brand);
}

[class*="a-flow-label"] {
grid-column: 5;
grid-row: 2;
}

[class*="a-flow-body"] {
grid-column: 5;
grid-row: 5;
}

/* @end @m-flow-detail */