.detail-head > div:first-child { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.task-timeline { border: 1px solid var(--line); background: var(--bg-raised); margin-block: 24px; padding: 28px; min-width: 0; }
.task-timeline-head { position: relative; padding-right: 140px; }
.task-timeline-head h2 { margin: 8px 0; font-size: clamp(20px, 2.3vw, 30px); font-weight: 500; line-height: 1.25; }
.task-timeline-head > p:last-of-type { color: var(--text-secondary); margin: 0 0 24px; font-size: 14px; }
.task-timeline-status { position: absolute; right: 0; top: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--text-secondary); }
.task-phase-map { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-block: 1px solid var(--line); margin-bottom: 24px; }
.task-phase-marker { padding: 14px 8px; display: grid; gap: 7px; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid var(--line); min-width: 0; }
.task-phase-marker > span:first-child { font: 500 12px var(--mono); }
.task-phase-marker > span:nth-child(2) { font-size: 12px; color: var(--text); }
.task-phase-marker small { font-size: 10px; overflow-wrap: anywhere; }
.task-phase-marker.is-done { border-bottom-color: var(--accent-mark); }
.task-phase-marker.is-failed { border-bottom-color: var(--bad); color: var(--bad); }
.task-phase-marker.is-absent { border-bottom-style: dashed; }
.task-phase-marker:focus-visible, .task-agent-lane a:focus-visible, .task-phase summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.task-phase-marker:hover { background: var(--bg); }
.task-phase-list { list-style: none; padding: 0; margin: 0; }
.task-phase { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 20px; scroll-margin-top: 24px; }
.task-phase:not(:last-child)::before { content: ""; position: absolute; top: 32px; bottom: 0; left: 17px; border-left: 1px solid var(--line); }
.task-phase-number { display: grid; place-items: center; width: 36px; height: 32px; background: var(--bg); border: 1px solid var(--line); color: var(--text-muted); font: 500 11px var(--mono); }
.task-phase.is-done .task-phase-number { border-color: var(--accent-mark); color: var(--accent); }
.task-phase.is-failed .task-phase-number { border-color: var(--bad); color: var(--bad); }
.task-phase summary { cursor: pointer; padding: 6px 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; border-bottom: 1px solid var(--line); }
.task-phase summary strong { font-size: 15px; font-weight: 500; }
.task-phase-state { font: 500 11px var(--mono); color: var(--text-secondary); }
.task-phase.is-failed .task-phase-state { color: var(--bad); }
.task-phase time { margin-left: auto; color: var(--text-muted); font: 11px var(--mono); }
.task-phase-content { padding-top: 8px; font-size: 14px; line-height: 1.6; }
.task-phase-content p { margin: 8px 0; overflow-wrap: anywhere; }
.task-phase.is-absent .task-phase-content, .task-phase.is-skipped .task-phase-content { color: var(--text-secondary); }
.task-agent-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; margin-block: 14px; }
.task-agent-lane { border: 1px solid var(--line); border-left: 2px solid var(--accent-mark); background: var(--bg); padding: 12px; display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.task-agent-lane a { color: var(--accent); font: 500 12px var(--mono); }
.task-agent-lane span { font-size: 12px; }
.task-agent-lane small { font-size: 11px; color: var(--text-secondary); }
.task-phase-recovery { border-left: 2px solid var(--bad); padding-left: 12px; color: var(--text-secondary); }
.task-record-disclosure { margin-block: 16px; }
.task-record-disclosure > summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; padding: 10px 0; }
@media (max-width: 720px) {
    .task-timeline { padding: 18px; }
    .task-timeline-head { padding-right: 0; }
    .task-timeline-status { position: static; display: block; margin-bottom: 14px; }
    .task-phase-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .task-phase { gap: 10px; }
    .task-phase time { flex-basis: 100%; margin-left: 0; }
}
