/* Task flow dock; all component rules stay inside the generated dialog. */
#task-flow {
  --tone: var(--hp-muted, #7cbfd4);
  --tf-line: rgba(120, 200, 235, .18);
  position: fixed;
  left: 34px;
  top: 118px;
  right: auto;
  bottom: auto;
  width: min(880px, calc(100vw - 420px));
  height: calc(100vh - 230px);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  transform: none;
  z-index: 35;
  border: 1px solid var(--tf-line);
  border-radius: 0;
  box-shadow: none;
  background: var(--hp-reading, #0c1b26);
  color: var(--hp-muted, #a1c2d1);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .04em;
  color-scheme: dark;
  overflow: hidden;
}

#task-flow[open] { display: flex; flex-direction: column; }
#task-flow, #task-flow * { box-sizing: border-box; }
#task-flow * { border-radius: 0; box-shadow: none; }
#task-flow [hidden] { display: none !important; }
#task-flow [data-tone=active] { --tone: var(--hud-cyan, #69d9ff); }
#task-flow [data-tone=pending] { --tone: var(--hp-muted, #7cbfd4); }
#task-flow [data-tone=blocked] { --tone: var(--hp-muted, #7cbfd4); }
#task-flow [data-tone=done] { --tone: var(--hp-done, #9be7a8); }
#task-flow [data-tone=failed] { --tone: var(--hud-amber, #e5aa63); }
#task-flow [data-tone=cancelled] { --tone: var(--hp-muted, #527e90); }
#task-flow .num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
#task-flow b { font-weight: 400; }
#task-flow i, #task-flow em { font-style: normal; }

#task-flow button {
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--tf-line);
  background: var(--hp-reading, #102532);
  color: var(--hud-ink, #c6edff);
  font: inherit;
  letter-spacing: .04em;
  cursor: pointer;
}
#task-flow button:hover:not(:disabled) { background: var(--hp-reading, #193342); border-color: var(--hud-cyan, #69d9ff); }
#task-flow button:disabled { opacity: .35; cursor: not-allowed; }
#task-flow button.primary { background: var(--hud-cyan, #69d9ff); color: var(--hp-reading, #04131c); }
#task-flow button.primary:hover:not(:disabled) { background: var(--hud-cyan, #91e4ff); }
#task-flow :focus-visible { outline: 2px solid var(--hud-ink, #ecfaff); outline-offset: 2px; }
#task-flow .picker-top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tf-line);
  color: var(--hp-muted, #7cbfd4);
  font: inherit;
  font-size: 11px;
  letter-spacing: .04em;
}
#task-flow .picker-top button {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}
#task-flow .tf-status { margin-left: auto; overflow-wrap: anywhere; color: var(--hp-muted, #527e90); }
#task-flow .tf-summary { flex: none; padding: 12px 16px; border-bottom: 1px solid var(--tf-line); }
#task-flow .tf-sum-bar { display: flex; gap: 1px; height: 8px; overflow: hidden; background: var(--hp-reading, #08151f); }
#task-flow .tf-seg { display: block; min-width: 0; height: 100%; background: var(--tone); }
#task-flow .tf-sum-legend, #task-flow .tf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 11px; }
#task-flow .tf-sum-legend { margin-top: 8px; }
#task-flow .tf-sum-total { color: var(--hud-ink, #ecfaff); }
#task-flow .tf-key { display: inline-flex; align-items: baseline; gap: 4px; color: var(--tone); white-space: nowrap; }
#task-flow .tf-key > i { border-bottom: 1px solid var(--tone); }
#task-flow .tf-key[data-tone=pending] > i { border-bottom-style: dashed; }
#task-flow .tf-key[data-tone=blocked] > i { border-bottom-style: dotted; }
#task-flow .tf-empty { margin: 0; color: var(--hp-muted, #527e90); font-size: 12px; }
#task-flow .tf-grid { display: grid; grid-template-columns: 300px 1fr; flex: 1; min-height: 0; min-width: 0; }
#task-flow .tf-compare, #task-flow .tf-detail {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hp-muted, #365361) var(--hp-reading, #0c1b26);
}
#task-flow .tf-compare { padding: 12px 0; }
#task-flow .tf-detail { padding: 12px 16px; border-left: 1px solid var(--tf-line); background: var(--hp-reading, #0f202c); }
#task-flow .tf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; margin-bottom: 10px; }
#task-flow .tf-compare > .tf-head { padding: 0 9px; }
#task-flow h3 { min-width: 0; margin: 0; color: var(--hud-ink, #ecfaff); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
#task-flow .tf-count { color: var(--hp-muted, #527e90); font-size: 11px; }
#task-flow .tf-state { color: var(--tone); font-size: 11px; border-bottom: 1px solid var(--tone); }
#task-flow .tf-state:empty { display: none; }
#task-flow .tf-state[data-tone=pending] { border-bottom-style: dashed; }
#task-flow .tf-state[data-tone=blocked] { border-bottom-style: dotted; }
#task-flow .tf-dismissed { padding: 1px 6px; border: 1px solid var(--hp-muted, #527e90); border-radius: 0; box-shadow: none; color: var(--hp-muted, #7cbfd4); font-size: 11px; }
#task-flow .tf-caption { margin: 0 0 12px; font-size: 12px; overflow-wrap: anywhere; }
/* Completion summary: Data-First surface, with the same content as the monitor. */
#task-flow .task-summary {
  margin: 0 0 12px;
  padding: 12px;
  min-width: 0;
  border: 1px solid var(--tf-line);
  border-left: 3px solid var(--hp-done, #9be7a8);
  border-radius: 0;
  box-shadow: none;
  background: var(--hp-reading, #0c1b26);
  color: var(--hud-ink, #dff5ff);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
#task-flow .task-summary[data-status=derived] { border-left-color: var(--hp-muted, #7cbfd4); border-left-style: dashed; }
#task-flow section.task-summary[hidden],
#task-flow .task-summary [hidden] { display: none !important; }
#task-flow .task-summary .ts-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#task-flow .task-summary .ts-title { font-size: 13px; font-weight: 500; }
#task-flow .task-summary .ts-source { padding: 1px 6px; border: 1px solid currentColor; color: var(--hp-done, #9be7a8); font-size: 11px; }
#task-flow .task-summary[data-status=derived] .ts-source { color: var(--hp-muted, #7cbfd4); }
#task-flow .task-summary .ts-body { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 8px 10px; margin: 12px 0; }
/* Dark label backing preserves the specified text color and 4.5:1 contrast. */
#task-flow .task-summary .ts-body dt { margin: 0; padding: 2px 4px; background: var(--hp-reading, #02080d); color: var(--hp-muted, #527e90); font-size: 11px; letter-spacing: .04em; }
#task-flow .task-summary .ts-body dd { min-width: 0; margin: 0; color: var(--hud-ink, #dff5ff); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
#task-flow .task-summary .ts-body dd.ts-missing { color: var(--hud-amber, #e5aa63); }
#task-flow .task-summary .ts-text { white-space: pre-wrap; }
#task-flow .task-summary:not(.expanded) .ts-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#task-flow .task-summary .ts-recs { margin: 0; padding-left: 1.5em; }
#task-flow .task-summary .ts-recs li { margin: 0; padding: 0; white-space: pre-wrap; }
#task-flow .task-summary .ts-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#task-flow .task-summary .ts-actions button { font-size: 12px; }
@media (max-width: 640px) {
  #task-flow .task-summary .ts-body { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #task-flow .task-summary .ts-body dt { justify-self: start; }
  #task-flow .task-summary .ts-body dd { margin-bottom: 6px; }
}
#task-flow .tf-rows { list-style: none; margin: 0; padding: 0; }
#task-flow .tf-rows li.tf-row {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr 64px 44px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid rgba(120, 200, 235, .18);
  cursor: pointer;
}
#task-flow .tf-row:hover { background: var(--hp-reading, #142b38); }
#task-flow .tf-row.selected { background: var(--hp-reading, #193342); }
#task-flow .tf-row.selected::before { content: ''; position: absolute; inset: 0 auto 0 0; border-left: 3px solid var(--tone); }
#task-flow .tf-row[data-tone=pending] { border-bottom-style: dashed; }
#task-flow .tf-row[data-tone=blocked] { border-bottom-style: dotted; }
#task-flow .tf-row.selected[data-tone=pending]::before { border-left-style: dashed; }
#task-flow .tf-row.selected[data-tone=blocked]::before { border-left-style: dotted; }
#task-flow .tf-row:focus-visible { outline-offset: -2px; }
#task-flow .tf-glyph { color: var(--tone); font-size: 14px; text-align: center; }
#task-flow .tf-row-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; }
#task-flow .tf-row-sub { grid-column: 1 / -1; }
#task-flow .tf-row-agents { color: var(--hud-cyan, #69d9ff); border: 1px solid var(--hud-cyan, #69d9ff); padding: 0 4px; font-size: 11px; white-space: nowrap; }
#task-flow .tf-row-title, #task-flow .tf-row-sub { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#task-flow .tf-row-title { color: var(--hud-ink, #ecfaff); font-size: 12px; font-weight: 500; }
#task-flow .tf-row-sub { color: var(--hp-muted, #7cbfd4); font-size: 11px; }
#task-flow .tf-row-bar { height: 4px; border: 1px solid rgba(120, 200, 235, .15); overflow: hidden; }
#task-flow .tf-row-bar[data-tone=pending] { border-style: dashed; }
#task-flow .tf-row-bar[data-tone=blocked] { border-style: dotted; }
#task-flow .tf-row-bar > i { display: block; height: 100%; background: var(--tone); }
/* JS supplies an inline width of 0% when progress is unknown. */
#task-flow .tf-row-bar.indeterminate > i { width: 30% !important; animation: tf-indeterminate 1.6s ease-in-out infinite alternate; }
#task-flow .tf-row-pct { font-size: 11px; text-align: right; color: var(--tone); }
#task-flow .tf-diagram-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 0 12px; }
#task-flow svg.tf-diagram { display: block; max-width: none; font-family: inherit; font-weight: 400; }
#task-flow .tf-diagram text { font-family: inherit; }
#task-flow .tf-edge { fill: none; stroke: var(--tone); stroke-width: 1; }
#task-flow .tf-box { fill: var(--hp-reading, #08151f); stroke: var(--tone); stroke-width: 1; }
#task-flow .tf-accent, #task-flow .tf-node-progress { fill: var(--tone); }
#task-flow .tf-edge[data-line=dashed], #task-flow .tf-node[data-line=dashed] .tf-box { stroke-dasharray: 6 4; }
#task-flow .tf-edge[data-line=dotted], #task-flow .tf-node[data-line=dotted] .tf-box { stroke-dasharray: 2 4; }
/* Missing data has a distinct pattern while retaining its data-tone stroke. */
#task-flow .tf-node.unavailable .tf-box { stroke-dasharray: 1 3; }
#task-flow .tf-node:hover { cursor: pointer; }
#task-flow .tf-node:hover .tf-box { fill: rgba(105, 217, 255, .08); }
#task-flow .tf-node.current .tf-box { stroke-width: 2; }
#task-flow .tf-node.selected .tf-box { fill: rgba(105, 217, 255, .12); }
#task-flow .tf-node.selected:hover .tf-box { fill: rgba(105, 217, 255, .16); }
#task-flow .tf-node:focus-visible { outline: none; }
#task-flow .tf-node:focus-visible .tf-box { stroke: var(--hud-ink, #ecfaff); stroke-width: 2; }
#task-flow .tf-node.pulse .tf-box { animation: tf-pulse 1.6s ease-in-out infinite; }
#task-flow .tf-rail-label { font-size: 11px; fill: var(--hp-muted, #527e90); letter-spacing: .08em; }
#task-flow .tf-node-glyph { font-size: 14px; fill: var(--tone); }
#task-flow .tf-node-label { font-size: 11px; fill: var(--hp-muted, #7cbfd4); }
#task-flow .tf-node-title { font-size: 13px; fill: var(--hud-ink, #ecfaff); font-weight: 600; }
#task-flow .tf-node-sub { font-size: 11px; fill: var(--hp-muted, #a1c2d1); }
#task-flow .tf-node.unavailable .tf-node-sub,
#task-flow .tf-node.unavailable .tf-node-glyph { fill: var(--hud-amber, #e5aa63); }
#task-flow .tf-node-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tf-line); }
#task-flow .tf-node-kind { font-size: 11px; color: var(--tone); }
#task-flow h4.tf-node-heading { margin: 4px 0 8px; font-size: 14px; font-weight: 500; color: var(--hud-ink, #ecfaff); overflow-wrap: anywhere; }
#task-flow .tf-node-text { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--hp-muted, #a1c2d1); line-height: 1.7; }
#task-flow dl.tf-node-facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px; margin: 12px 0; }
#task-flow .tf-node-facts dt { color: var(--hp-muted, #527e90); font-size: 11px; overflow-wrap: anywhere; }
#task-flow .tf-node-facts dd { min-width: 0; margin: 0; color: var(--hud-ink, #dff5ff); font-size: 12px; overflow-wrap: anywhere; }
#task-flow img.tf-node-image { display: block; max-width: 100%; height: auto; margin: 12px 0; border: 1px solid var(--tf-line); }
#task-flow .tf-node-action { margin: 4px 0; }
#task-flow .tf-attach { display: block; max-width: 100%; margin-top: 8px; color: var(--hp-muted, #527e90); font-family: ui-var(--hp-font, monospace), "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, var(--hp-font, monospace); font-size: 11px; overflow-wrap: anywhere; white-space: pre-wrap; }
#task-flow .tf-attach:empty { display: none; }
#task-flow .tf-caption.unavailable,
#task-flow .tf-attach.unavailable { color: var(--hud-amber, #e5aa63); }
/* Dismiss buttons share the standard button rules and this wrapping action row.
   The dialog-wide [hidden] rule also hides both buttons and the dismissed tag. */
#task-flow .tf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--tf-line); }
#task-flow .tf-actions .tf-attach { flex-basis: 100%; margin: 0; }
#task-flow .tf-legend { flex: none; padding: 8px 16px; border-top: 1px solid var(--tf-line); }

/* Shared worker footer: task-flow.css is loaded unconditionally by index.html. */
#task-flow .tf-agents { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tf-line); }
#task-flow .tf-agents-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
#task-flow .tf-agents-title { color: var(--hp-muted, #a1c2d1); }
#task-flow .tf-agents-count { color: var(--hud-cyan, #69d9ff); }
#task-flow .tf-agent-rows, #task-detail #task-detail-agents { list-style: none; padding: 0; }
#task-flow .tf-agent-rows { margin: 0; }
#task-flow .tf-agent, #task-detail .tf-agent {
  display: grid;
  grid-template-columns: 12px minmax(0, 108px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--hp-muted, #a1c2d1);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
}
#task-flow .tf-agent-name, #task-detail .tf-agent-name,
#task-flow .tf-agent-label, #task-detail .tf-agent-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; }
#task-flow .tf-agent-meta, #task-detail .tf-agent-meta { white-space: nowrap; text-align: right; font-style: normal; font-variant-numeric: tabular-nums; }
#task-flow .tf-agent-parent, #task-detail .tf-agent-parent { color: var(--hud-ink, #ecfaff); }
#task-flow .tf-agent[data-state=running] .tf-agent-glyph, #task-detail .tf-agent[data-state=running] .tf-agent-glyph { color: var(--hud-cyan, #69d9ff); }
#task-flow .tf-agent[data-state=done], #task-detail .tf-agent[data-state=done] { color: var(--hp-muted, #527e90); }
#task-flow .tf-agent.pulse, #task-detail .tf-agent.pulse { animation: tf-agent-pulse 1.6s ease-in-out infinite; }
#task-detail #task-detail-agents[hidden], #task-detail #task-detail-parent[hidden] { display: none !important; }
@keyframes tf-agent-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes tf-pulse { 0%, 100% { stroke-opacity: .55; } 50% { stroke-opacity: 1; } }
@keyframes tf-indeterminate { from { transform: translateX(0); } to { transform: translateX(233.333333%); } }
@media (prefers-reduced-motion: reduce) {
  #task-flow .tf-node.pulse .tf-box, #task-flow .tf-row-bar.indeterminate > i { animation: none; }
  #task-flow .tf-agent.pulse, #task-detail .tf-agent.pulse { animation: none; }
}

html[data-hud="v27"] #task-flow {
  & .tf-grid { display:block; overflow:visible; }
  & :is(.tf-compare,.tf-detail) { overflow:visible; padding:16px 8px; border:0; background:var(--hp-reading); }
  & .tf-detail { border-top:1px solid var(--hp-hairline); }
  & .tf-compare:has(.tf-empty):not(:has(.tf-row)) { padding:8px; }
  & .tf-compare:has(.tf-empty):not(:has(.tf-row)) > .tf-head { display:none; }
  & :is(.tf-row,.task-summary) { background:transparent; }
  & .tf-row { grid-template-columns:12px minmax(0,1fr) 48px 36px; gap:4px; min-height:44px; }
  & .tf-row.selected { background:var(--hp-reading); }
  & .tf-agent.pulse { animation:none; }
}

html[data-hud="v27"] #task-flow {
  & .tf-node.pulse .tf-box { animation:none; }
  & .tf-box { fill:transparent; stroke-width:1; }
}