.flow-heading, .flow-card, .flow-block-heading, .flow-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.flow-heading { margin: 1rem 0; }
.flow-heading h3 { margin: 0; }
.flow-search, .flow-metadata label, .flow-block label { display: grid; gap: .35rem; font-size: .85rem; color: var(--ink-muted); }
.flow-search { max-width: 24rem; margin: 1rem 0; }
.flow-search input, .flow-metadata input, .flow-metadata select, .flow-block textarea { width: 100%; min-width: 0; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .65rem; background: #fff; color: var(--ink); font: inherit; }
.flow-list { display: grid; gap: .65rem; margin: .75rem 0; }
.flow-card { padding: .9rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; }
.flow-card > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.flow-card small { display: block; margin-top: .3rem; color: var(--ink-muted); }
.flow-editor { padding: 1rem; margin-top: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.flow-metadata { display: grid; grid-template-columns: 2fr 1fr; gap: .65rem; margin: 1rem 0; }
.flow-blocks { list-style: none; margin: 1rem 0; padding: 0; }
.flow-block { position: relative; margin: 0 0 2rem; padding: .9rem; border: 1px solid #cec8eb; border-radius: .8rem; background: #faf9fe; }
.flow-block:not(:last-child)::after { content: '↓'; position: absolute; bottom: -1.7rem; left: calc(50% - .5rem); color: var(--brand); font-size: 1.3rem; }
.flow-block-heading { margin-bottom: .75rem; }
.flow-actions { justify-content: flex-start; flex-wrap: wrap; }
.flow-actions button { min-height: 2.1rem; padding: .4rem .55rem; font-size: .82rem; }
.flow-block textarea { min-height: 6rem; resize: vertical; color: #28223f; }
.flow-image { display: block; max-width: 100%; max-height: 22rem; margin: .8rem auto; border-radius: .5rem; object-fit: contain; }
.flow-upload { margin-top: .75rem; }
.flow-upload input { max-width: 100%; font-size: .82rem; }
.flow-help { margin-top: 1rem; font-size: .82rem; line-height: 1.5; color: var(--ink-muted); }
.flow-heading { flex-wrap: wrap; }
.flow-editor.is-horizontal .flow-blocks { display: flex; align-items: flex-start; gap: 2rem; max-width: 100%; overflow-x: auto; padding: .25rem .25rem 1rem; }
.flow-editor.is-horizontal .flow-block { flex: 0 0 min(24rem, 100%); min-width: 0; margin: 0; }
.flow-editor.is-horizontal .flow-block:not(:last-child)::after { content: '→'; top: 1rem; right: -1.55rem; bottom: auto; left: auto; }
[data-flow-horizontal][aria-pressed="true"] { background: var(--brand); color: #fff; }
@media (min-width: 48rem) { .timeline-shell.is-flow-expanded { width: 100%; max-width: none; } }
@media (max-width: 36rem) { .flow-editor { padding: .6rem; } .flow-metadata { grid-template-columns: 1fr; } .flow-card, .flow-heading { flex-wrap: wrap; } .flow-block-heading { align-items: flex-start; flex-direction: column; } }