/* V5 timeline; semantic colors and controls come from the shared UI system. */
.hub-flow {
  color: var(--ink);
  font-size: var(--ui-text, 14px);
  line-height: 1.7;
  min-width: 0;
  padding-block: var(--space-2, 8px) var(--space-6, 24px);
}
.hub-flow :is(h2, h3, h4, p, ol, ul) { margin: 0; }
.hub-flow :is(h2, h3, h4, p, span, a, code, summary) { overflow-wrap: anywhere; }
.hub-flow .hub-flow-intro { margin-bottom: calc(var(--space-6, 24px) + var(--space-2, 8px)); }
.hub-flow .hub-flow-intro h2 { color: var(--ink); font-size: 24px; font-weight: 650; line-height: 1.45; letter-spacing: -.5px; }
.hub-flow .hub-flow-intro p { margin-top: var(--space-2, 8px); color: var(--secondary); font-size: 13px; }
.hub-flow .hub-flow-source + .hub-flow-source { margin-top: calc(var(--space-6, 24px) * 1.5); padding-top: var(--space-6, 24px); border-top: 1px solid var(--line); }
.hub-flow .hub-flow-source-head { display: block; margin-bottom: var(--space-3, 12px); }
.hub-flow .hub-flow-plan-title { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.6; }
.hub-flow .hub-flow-progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-4, 16px); margin-top: var(--space-2, 8px); color: var(--secondary); font-size: 12px; }
.hub-flow .hub-flow-source-state { color: var(--ink); font-weight: 550; }
.hub-flow :is(.hub-flow-source-state,.hub-flow-step-state)[data-state="completed"] { color: var(--green); }
.hub-flow :is(.hub-flow-source-state,.hub-flow-step-state):is([data-state="running"],[data-state="planning"],[data-state="recovering"]) { color: var(--status-active, var(--blue)); }
.hub-flow :is(.hub-flow-source-state,.hub-flow-step-state):is([data-state="unknown"],[data-state="failed"],[data-state="blocked"]) { color: var(--red); }
.hub-flow :is(.hub-flow-source-state,.hub-flow-step-state):is([data-state="awaiting_plan"],[data-state="awaiting_confirmation"],[data-state="waiting_approval"],[data-state="needs_input"]) { color: var(--amber); }
.hub-flow .hub-flow-summary { color: var(--secondary); font-size: 13px; margin-block: var(--space-3, 12px) var(--space-4, 16px); max-width: 72ch; }
.hub-flow .markdown-body > :first-child { margin-top: 0; }
.hub-flow .markdown-body > :last-child { margin-bottom: 0; }
.hub-flow .hub-flow-order-note { color: var(--muted); font-size: 12px; margin-block: var(--space-4, 16px) var(--space-5, 20px); }
.hub-flow .hub-flow-track { list-style: none; padding: 0; }
.hub-flow .hub-flow-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4, 16px); padding-bottom: calc(var(--space-6, 24px) + var(--space-2, 8px)); }
.hub-flow .hub-flow-step:last-child { padding-bottom: var(--space-3, 12px); }
.hub-flow .hub-flow-step:not(:last-child)::before { content: ''; position: absolute; top: 52px; bottom: 8px; left: 21px; border-left: 1px dashed var(--line); }
.hub-flow .hub-flow-role-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ui-control-radius, 8px); color: var(--blue); background: var(--blue-soft); z-index: 1; }
.hub-flow .hub-flow-role-icon .icon { width: 21px; height: 21px; }
.hub-flow .hub-flow-role-icon[data-capability="research"] { color: var(--status-active, var(--blue)); background: var(--status-active-soft, var(--blue-soft)); }
.hub-flow .hub-flow-role-icon[data-capability="analysis"] { color: var(--status-verification, var(--green)); background: var(--status-verification-soft, var(--green-soft)); }
.hub-flow .hub-flow-role-icon[data-capability="review"] { color: var(--green); background: var(--green-soft); }
.hub-flow .hub-flow-role-icon:is([data-capability="office"],[data-capability="application"],[data-capability="local_tools"]) { color: var(--amber); background: var(--amber-soft); }
.hub-flow .hub-flow-role-icon[data-capability="diagram"] { color: var(--status-release, var(--blue)); background: var(--status-release-soft, var(--blue-soft)); }
.hub-flow .hub-flow-step-body { min-width: 0; padding-top: 0; }
.hub-flow .hub-flow-step-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1, 4px) var(--space-3, 12px); min-width: 0; margin-bottom: var(--space-1, 4px); }
.hub-flow .hub-flow-step-number { display: inline-flex; flex-wrap: wrap; gap: var(--space-2, 8px); color: var(--muted); font-size: 12px; }
.hub-flow .hub-flow-step-number > span { color: var(--secondary); }
.hub-flow .hub-flow-step-state { display: inline-flex; align-items: center; gap: var(--space-1, 4px); color: var(--secondary); font-size: 12px; }
.hub-flow .hub-flow-step-state .icon { width: 14px; height: 14px; }
.hub-flow .hub-flow-step h3 { color: var(--ink); font-size: 16px; line-height: 1.6; font-weight: 600; max-width: 64ch; }
.hub-flow .hub-flow-instructions { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: var(--space-2, 8px); color: var(--secondary); font-size: 13px; white-space: pre-wrap; max-width: 76ch; }
.hub-flow .hub-flow-step-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-3, 12px); margin-top: var(--space-3, 12px); color: var(--secondary); font-size: 12px; }
.hub-flow .hub-flow-role { display: inline-block; min-width: 0; max-width: 100%; padding: 1px var(--space-2, 8px); color: var(--secondary); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
.hub-flow :is(.hub-flow-dependencies,.hub-flow-parallel) { display: flex; align-items: flex-start; gap: var(--space-1, 4px); margin-top: var(--space-2, 8px); color: var(--secondary); font-size: 12px; }
.hub-flow :is(.hub-flow-dependencies,.hub-flow-parallel) > span { min-width: 0; }
.hub-flow :is(.hub-flow-dependencies,.hub-flow-parallel) .icon { width: 13px; height: 13px; margin-top: 4px; flex: none; }
.hub-flow .hub-flow-parallel { color: var(--status-active, var(--blue)); }
.hub-flow .hub-flow-detail { min-width: 0; padding: 0; margin-top: var(--space-2, 8px); color: var(--secondary); font-size: 12px; }
.hub-flow .hub-flow-detail > summary { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2, 8px); min-height: 40px; width: fit-content; max-width: 100%; padding-block: var(--space-1, 4px); list-style: none; cursor: pointer; }
.hub-flow .hub-flow-detail > summary::-webkit-details-marker { display: none; }
.hub-flow .hub-flow-detail > summary .icon { width: 12px; height: 12px; flex: none; }
.hub-flow .hub-flow-detail[open] > summary .icon { transform: rotate(180deg); }
.hub-flow .hub-flow-detail[open] > :not(summary) { margin-top: var(--space-2, 8px); }
.hub-flow .hub-flow-detail[open] > :last-child { margin-bottom: var(--space-3, 12px); }
.hub-flow .hub-flow-detail h4 { color: var(--ink); font-size: 12px; font-weight: 550; }
.hub-flow .hub-flow-full-instructions { white-space: pre-wrap; }
.hub-flow .hub-flow-detail .markdown-body { color: var(--ink); font-size: 13px; }
.hub-flow pre { min-width: 0; max-width: 100%; padding: var(--space-3, 12px); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; background: var(--bg); color: var(--secondary); border-radius: 4px; font-size: 12px; }
.hub-flow .hub-flow-error { white-space: pre-wrap; color: var(--red); }
.hub-flow .hub-flow-step-problem { margin-top: var(--space-3, 12px); font-size: 13px; color: var(--red); }
.hub-flow .hub-flow-step-problem > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: pre-wrap; }
.hub-flow .hub-flow-step-problem .button { margin-top: var(--space-2, 8px); }
.hub-flow .hub-flow-diagnostic { padding-top: var(--space-2, 8px); }
.hub-flow .hub-flow-child { padding-top: var(--space-3, 12px); border-top: 1px solid var(--line); }
.hub-flow .hub-flow-child h4 > span { color: var(--secondary); font-weight: 400; margin-left: var(--space-2, 8px); }
.hub-flow .hub-flow-child .button { margin-top: var(--space-3, 12px); }
.hub-flow .hub-flow-attention { margin-block: var(--space-4, 16px); padding-left: var(--space-3, 12px); border-left: 2px solid var(--amber); color: var(--secondary); font-size: 13px; }
.hub-flow .hub-flow-attention h3 { color: var(--ink); font-size: 14px; font-weight: 550; }
.hub-flow .hub-flow-attention ul { padding-left: var(--space-5, 20px); margin-top: var(--space-2, 8px); }
.hub-flow .hub-flow-empty { color: var(--secondary); font-size: 13px; padding-block: var(--space-4, 16px); }
.hub-flow .hub-flow-next-action { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3, 12px) var(--space-4, 16px); margin-block: var(--space-4, 16px); }
.hub-flow .hub-flow-next-action p { display: inline-flex; align-items: center; gap: var(--space-1, 4px); color: var(--secondary); font-size: 12px; }
.hub-flow .hub-flow-next-action p .icon { width: 14px; height: 14px; }
.hub-flow .hub-flow-actions { margin-block: var(--space-4, 16px); }
.hub-flow .hub-flow-source-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3, 12px); margin-top: var(--space-4, 16px); padding-top: var(--space-4, 16px); border-top: 1px solid var(--line); }
.hub-flow .hub-flow-source-footer small { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-4, 16px); min-width: 0; color: var(--muted); font-size: 11px; }
.hub-flow .hub-flow-source-footer code { font-family: inherit; font-size: inherit; }
.hub-flow :is(summary, button, a):focus-visible { outline: 2px solid var(--ui-ring, var(--blue)); outline-offset: 2px; }
.hub-flow .button { min-height: 40px; max-width: 100%; white-space: normal; }
@media (max-width: 767px) {
  .hub-flow .hub-flow-intro { margin-bottom: var(--space-6, 24px); }
  .hub-flow .hub-flow-intro h2 { font-size: 20px; letter-spacing: -.3px; }
  .hub-flow .hub-flow-step { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3, 12px); padding-bottom: var(--space-6, 24px); }
  .hub-flow .hub-flow-role-icon { width: 36px; height: 36px; }
  .hub-flow .hub-flow-role-icon .icon { width: 19px; height: 19px; }
  .hub-flow .hub-flow-step:not(:last-child)::before { left: 17px; top: 44px; }
  .hub-flow .hub-flow-step-heading { align-items: flex-start; }
  .hub-flow .hub-flow-step-state { max-width: 100%; }
  .hub-flow .hub-flow-step h3 { font-size: 15px; }
  .hub-flow .hub-flow-next-action { align-items: stretch; flex-direction: column; }
  .hub-flow .hub-flow-source-footer { align-items: flex-start; flex-direction: column; }
  .hub-flow :is(.button, a, summary), .hub-flow .hub-flow-detail > summary { min-height: 44px; }
  .hub-flow .markdown-body a { display: inline-flex; align-items: center; }
}