/* Workflows (the reference's boards, not the built-in triage), measured
   with a test workflow in the reference. */

/* All Workflows: 79px rows, the name over its stages, a trash at the right */
.workflows-list { display: flex; flex-direction: column; margin: 0 -17.6px; }
.workflows-list__item { position: relative; }
.workflows-list__link { position: relative; display: block; min-height: 79.2px; box-sizing: border-box; padding: 14.52px 58.52px 14.52px 66px; border-radius: 8.8px; color: var(--color-ink); text-decoration: none; }
.workflows-list__link:hover { background: rgb(var(--shade-rgb) / 0.03); }
.workflows-list__icon { position: absolute; left: 22px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; }
.workflows-list__name { margin: 0; overflow: hidden; font-size: 22px; line-height: 28.6px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.workflows-list__stages { display: block; overflow: hidden; color: rgb(var(--ink-rgb) / 0.66); font-size: 15.4px; line-height: 21.6px; text-overflow: ellipsis; white-space: nowrap; }
.workflows-list__delete-form { position: absolute; top: 50%; right: 13.2px; margin: 0; translate: 0 -50%; }
/* The reference's trash: 17px tall in a 26.4px button */
.workflows-list__delete { display: grid; place-items: center; width: 26.4px; height: 26.4px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgb(var(--ink-rgb) / 0.5); cursor: pointer; }
.workflows-list__delete svg { width: 21.25px; height: 21.25px; }

/* The All Workflows heading icon in a dark circle, as the reference's (33px) */
.labels-sheet__title-icon.workflows-title-icon { box-sizing: border-box; width: 33px; height: 33px; padding: 7px; border-radius: 50%; background: var(--color-ink); color: var(--color-sheet); }
.workflows-list__delete:hover { color: rgb(201 36 0); }

/* The board: a near full-width sheet, 17.6px from the window's edges */
.sheet.workflow-board { position: relative; box-sizing: border-box; width: calc(100vw - 35.2px); max-width: none; margin-left: calc(50% - 50vw + 17.6px); padding: 55px 55px 110px; border-radius: 29.7px; }
.workflow-board__header { display: flex; justify-content: center; }
.workflow-board__rename { position: relative; }
.workflow-board__title { list-style: none; cursor: pointer; }
.workflow-board__title::-webkit-details-marker { display: none; }
.workflow-board__name { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 44px; line-height: 44px; font-weight: 700; }
/* In a dark circle, as the reference's heading icon (33px) */
.workflow-board__icon { box-sizing: border-box; width: 33px; height: 33px; padding: 7px; border-radius: 50%; background: var(--color-ink); color: var(--color-sheet); }

/* The lone Options button under a board or collection: the dots sit mid-way
   in their 24px box and the label has room below its letters, so the pair
   sat low; 4px more room under them centres what you see */
.collection-toolbar .topic-toolbar__action { padding-top: 1.5px; padding-bottom: 9.5px; }
.workflow-board__rename-popup { top: calc(100% + 11px); left: 50%; right: auto; translate: -50% 0; }
.workflow-board__add-stage-form { position: absolute; top: 22px; right: 22px; margin: 0; }
.workflow-board__add-stage { position: relative; height: 32.8px; padding: 4.62px 12.32px 4.62px 33.88px; border: 1px solid var(--color-accent); border-radius: 33px; background: transparent; color: var(--color-accent); font: 500 15.4px/21.56px var(--font); cursor: pointer; }
/* The plus drawn 14.4px, centred 19.25px in, as the reference's */
.workflow-board__add-stage-icon { position: absolute; left: 8.5px; top: 50%; width: 21.5px; height: 21.5px; translate: 0 -50%; }
.workflow-board__hint { margin: 21px 0 0; font-size: 19.8px; line-height: 27.72px; text-align: center; }
.workflow-board__stages { display: grid; grid-auto-flow: column; grid-auto-columns: 341.7px; justify-content: center; gap: 19.8px; margin: 37.5px 0 0; overflow-x: auto; }

.workflow-stage { position: relative; box-sizing: border-box; min-height: 361.5px; padding: 24.75px; border-radius: 19.8px; background: linear-gradient(135deg, rgb(224 234 249) 0%, rgb(229 223 255) 100%); transition: box-shadow 0.15s; }
.workflow-stage--over { box-shadow: inset 0 0 0 2px rgb(48 114 221 / 0.4); }
.workflow-stage__header { position: relative; min-height: 33.6px; margin: 0 0 16.4px; text-align: center; }
.workflow-stage__name { margin: 0; padding: 3.9px 0; font-size: 19.8px; line-height: 25.74px; font-weight: 700; }
.workflow-stage__rename { display: none; }
.workflow-stage__rename[open] { display: block; }
.workflow-stage__rename[open] + .workflow-stage__name { display: none; }
.workflow-stage__rename-form { margin: 0; }
.workflow-stage__name-input { box-sizing: border-box; width: 100%; padding: 3.9px 0; border: 0; border-bottom: 1px solid var(--color-ink); background: transparent; color: var(--color-ink); font: 700 19.8px/25.74px var(--font); text-align: center; }
.workflow-stage__name-input:focus { outline: none; }
.workflow-stage__menu { position: absolute; top: -14.85px; right: -14.85px; }
.workflow-stage__more { display: grid; place-items: center; width: 30.8px; height: 30.8px; color: rgb(var(--ink-rgb) / 0.66); list-style: none; cursor: pointer; }
.workflow-stage__more::-webkit-details-marker { display: none; }
.workflow-stage__more svg { width: 25px; height: 25px; } /* dots drawn 19.1px across, as the reference's */
.workflow-stage__popup { top: calc(100% + 6px); right: -40px; left: auto; width: 260px; }
.workflow-stage__items { display: flex; flex-direction: column; gap: 13.2px; min-height: 120px; }
.workflow-card.collection-card { width: 292.2px; max-width: 100%; cursor: grab; }
.workflow-card--dragging { opacity: 0.4; }

/* The More menu's picker, as the reference's: Filter and "New workflow"
   side by side, then "Pick a workflow" */
.workflow-picker__form { display: flex; gap: 5.5px; margin: 0 0 11px; }
.workflow-picker__filter, .workflow-picker__add { position: relative; flex: 1; min-width: 0; }
.workflow-picker__input { box-sizing: border-box; width: 100%; height: 38.9px; padding: 7.7px 34px 7.7px 15.4px; border: 0; border-radius: 22px; background: #fff; color: rgb(35 28 51); font: 400 15.4px/21.56px var(--font); }
.workflow-picker__input:focus { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.workflow-picker__submit { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgb(41 152 80); color: #fff; translate: 0 -50%; cursor: pointer; }
.workflow-picker__submit svg { width: 15px; height: 15px; }
.workflow-picker__first { margin: 15.4px 0; color: var(--popup-muted); font-size: 15.4px; line-height: 21.56px; text-align: center; }

/* A thread's workflow, under its title, as the reference's coral pill: the
   workflow on the left, its stage (a "Move to stage…" menu) on the right */
.workflow-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin: 11px 0 0; }
.workflow-pill { display: inline-flex; align-items: stretch; height: 41.6px; box-sizing: border-box; border: 1px solid rgb(249 92 92); border-radius: 39.6px; background: var(--color-sheet); font-size: 19.8px; line-height: 21.78px; }
.workflow-pill__link { display: flex; align-items: center; gap: 5.5px; padding: 0 15.84px; border-radius: 39.6px 0 0 39.6px; background: rgb(249 92 92); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.workflow-pill__icon { width: 18px; height: 18px; }
.workflow-pill__stage { position: relative; display: flex; }
.workflow-pill__stage > summary { display: flex; align-items: center; gap: 6.6px; padding: 0 13.2px 0 15.84px; color: rgb(249 92 92); font-weight: 500; list-style: none; cursor: pointer; white-space: nowrap; }
.workflow-pill__stage > summary::-webkit-details-marker { display: none; }
.workflow-pill__chevron { width: 16px; height: 16px; color: rgb(var(--ink-rgb) / 0.4); }
.workflow-pill__popup { top: calc(100% + 8px); left: 50%; right: auto; width: 260px; translate: -50% 0; }