.block-flow {
  --flow-stage-width: 268px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #111;
}

.livia-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 8px;
}

.livia-flow-title {
  min-width: 160px;
  display: block;
  margin: 0;
  padding: 3px 5px;
  border-radius: 6px;
  color: #707070;
  outline: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
}

.livia-flow-title::before { content: none; }

.livia-flow-title:focus { background: #f5f5f5; }
.livia-flow-summary { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.livia-flow-summary output { color: #777; font-size: 13px; font-weight: 500; white-space: nowrap; }

.livia-flow-people-filter {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: transparent;
}

.livia-flow-people-filter:hover, .livia-flow-people-filter:focus-within { background: #f1f1f1; }
.livia-flow-people-filter:focus-within { box-shadow: 0 0 0 1px #cdcdcd; }
.livia-flow-people-filter svg { width: 18px; height: 18px; fill: none; stroke: #575757; stroke-width: 1.45; stroke-linecap: round; }
.livia-flow-people-filter select { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }

.livia-flow-progress { display: flex; align-items: center; gap: 7px; margin: 0 2px; }
.livia-flow-progress-track { width: 70px; height: 4px; overflow: hidden; border-radius: 8px; background: #ededed; }
.livia-flow-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: #1f8438; transition: width 180ms ease; }

.livia-flow-add-stage { position: relative; width: 28px; height: 28px; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 0 2px; border: 1px solid #cdcdcd; border-radius: 50%; background: #fff; color: #555; font-size: 19px; font-weight: 400; line-height: 1; }
.livia-flow-add-stage:hover { border-color: #8d8d8d; background: #f5f5f5; color: #111; }

.livia-flow-board {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--flow-stage-width);
  grid-template-columns: none;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 5px;
  scroll-snap-type: x proximity;
  scrollbar-color: #9d9d9d #efefef;
  scrollbar-width: thin;
}

.livia-flow-board::-webkit-scrollbar { height: 8px; }
.livia-flow-board::-webkit-scrollbar-track { background: #efefef; }
.livia-flow-board::-webkit-scrollbar-thumb { border-radius: 10px; background: #9d9d9d; }
.livia-flow-stage { position: relative; min-height: 300px; overflow: hidden; border: 1px solid #dadada; border-radius: 6px; background: #fff; scroll-snap-align: start; transition: background 140ms ease, border-color 140ms ease; }
.livia-flow-stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--flow-status, #bcecff); }
.livia-flow-stage > header { height: 50px; display: flex; align-items: center; gap: 8px; padding: 8px 11px 7px; border-bottom: 1px solid #ededed; }
.livia-flow-stage-count { min-width: 22px; color: #7d7d7d; font-size: 12px; }
.livia-flow-status { display: inline-flex; align-items: center; min-height: 27px; max-width: calc(100% - 34px); overflow: hidden; padding: 4px 10px; border-radius: 8px; outline: 0; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.livia-flow-status:focus { box-shadow: 0 0 0 2px rgb(17 17 17 / 12%); }
.livia-flow-status.is-red { background: #e27474; color: #fff; }
.livia-flow-status.is-yellow { background: #ffe988; color: #111; }
.livia-flow-status.is-green { background: #8fffa1; color: #1f8438; }
.livia-flow-status.is-blue { background: #bcecff; color: #187ca7; }

.livia-flow-task-list { min-height: 218px; padding: 0 14px; }
.livia-flow-task { min-height: 94px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 8px; border-bottom: 1px solid #e8e8e8; background: #fff; transition: background 130ms ease, transform 130ms ease; }
.livia-flow-task:last-child { border-bottom: 0; }
.livia-flow-task:hover { background: #fafafa; }
.livia-flow-task.is-dragging { border-radius: 10px; background: #faf6b1; opacity: .82; }
.livia-flow-stage.is-drop-target { border-color: #8fd68d; background: #f3fff2; }
.livia-flow-stage.is-drop-target .livia-flow-task-list { background: #c0ffbf; }
.livia-flow-task-check, .livia-flow-task-more { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; }
.livia-flow-task-check img { width: 26px; height: 26px; object-fit: contain; }
.livia-flow-task-more { border-radius: 6px; color: #8b8b8b; font-size: 12px; letter-spacing: 1px; opacity: 0; }
.livia-flow-task:hover .livia-flow-task-more, .livia-flow-task-more:focus-visible { opacity: 1; }
.livia-flow-task-more:hover { background: #ededed; color: #111; }
.livia-flow-task h4 { margin: 0; outline: 0; font-size: 16px; font-weight: 500; line-height: 22px; }
.livia-flow-task p { margin: 0; color: #8a8a8a; font-size: 12px; line-height: 16px; }
.livia-flow-task-details { display: flex; align-items: center; gap: 12px; margin-top: 5px !important; }
.livia-flow-task-created { margin-top: 3px !important; color: #a0a0a0 !important; font-size: 11px !important; }
.livia-flow-task.is-complete h4 { color: #777; text-decoration: line-through; text-decoration-thickness: 1px; }
.livia-flow-due { margin-left: auto; padding: 1px 4px; border: 0; border-radius: 4px; background: transparent; color: #686868; font-size: 12px; text-decoration: underline; text-decoration-color: #c7c7c7; text-underline-offset: 2px; }
.livia-flow-due:hover { background: #f0f0f0; color: #333; }
.livia-flow-task.is-filtered { display: none; }
.livia-flow-add-task { width: calc(100% - 28px); height: 38px; margin: 4px 14px 10px; padding: 0 4px; border: 0; border-top: 1px solid #ededed; background: transparent; color: #777; font-size: 13px; font-weight: 500; text-align: left; }
.livia-flow-add-task:hover { color: #111; }
.livia-flow-date-picker { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }

body.is-structure-mode .block-flow .livia-flow-stage > header { cursor: grab; }
body.is-structure-mode .block-flow .livia-flow-stage > header:active { cursor: grabbing; }
.livia-flow-stage.is-stage-dragging { border-radius: 10px; background: #faf6b1; opacity: .72; }
.livia-flow-stage.is-stage-target { border-color: #8fd68d; box-shadow: inset 4px 0 0 #8fd68d; background: #f3fff2; }

.livia-flow-context-menu { position: fixed; z-index: 160; width: 184px; display: grid; gap: 2px; padding: 8px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 18px; background: #1e1e1e; box-shadow: 0 10px 26px rgb(0 0 0 / 16%); }
.livia-flow-context-menu[hidden], .livia-flow-context-menu button[hidden] { display: none; }
.livia-flow-context-menu button { width: 100%; min-height: 28px; display: flex; align-items: center; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: #fff; font: 500 14px/20px "Inter", Arial, sans-serif; text-align: left; white-space: nowrap; }
.livia-flow-context-menu button:hover, .livia-flow-context-menu button:focus-visible { border-radius: 6px; background: rgb(255 255 255 / 8%); outline: 0; }
.livia-flow-context-menu [data-flow-action="delete"] { color: #ffb6b6; }

body.is-structure-mode .block-flow { pointer-events: auto; }

@media (max-width: 880px) {
  .block-flow { --flow-stage-width: min(82vw, 268px); }
  .livia-flow-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .livia-flow-summary { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .livia-flow-progress-track { width: 58px; }
}