/* One scroll container keeps the outline and timeline on exactly the same rows. */
.gantt-view { --gantt-label-width: 340px; --gantt-row-height: 56px; }
.gantt-view .gantt-scroll { max-height: max(260px, calc(100dvh - 270px)); overflow: auto; overscroll-behavior: contain; position: relative; }
.gantt-view .gantt-board { width: max-content; min-width: 100%; position: relative; }
.gantt-view .gantt-header, .gantt-view .gantt-row { grid-template-columns: var(--gantt-label-width) calc(var(--gantt-days) * var(--gantt-day-width)); }
.gantt-view .gantt-days { display: flex; width: calc(var(--gantt-days) * var(--gantt-day-width)); }
.gantt-view .gantt-period-header { flex: 0 0 calc(var(--period-days) * var(--gantt-day-width)); box-sizing: border-box; }
.gantt-view .gantt-period-header strong { font-size: 11px; white-space: nowrap; }
.gantt-view .gantt-period-header.today strong { width: auto; height: auto; padding: 2px 4px; }
.gantt-view .gantt-period-header small { max-width: 100%; padding: 0 3px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-view .gantt-period-header.has-holiday { box-shadow: inset 0 -3px var(--warn-fill); }
.gantt-view .gantt-period-header.has-workday { border-top: 2px solid var(--b-300); }
.gantt-view .gantt-holiday-key i { background: var(--warn-fill); }
.gantt-view .gantt-track { width: calc(var(--gantt-days) * var(--gantt-day-width)); }
.gantt-view .gantt-header { position: sticky; top: 0; z-index: 8; }
.gantt-view .gantt-label-head { position: sticky; left: 0; z-index: 9; }
.gantt-view .gantt-row { min-height: var(--gantt-row-height); }
.gantt-view .gantt-task-label, .gantt-view .gantt-track { height: var(--gantt-row-height); min-height: var(--gantt-row-height); box-sizing: border-box; }
.gantt-view .gantt-task-label { position: sticky; left: 0; z-index: 4; gap: 5px; padding: 2px 10px 2px calc(10px + var(--gantt-depth) * 16px); background: var(--claude-surface, var(--panel)); overflow: hidden; }
.gantt-view .gantt-task-open { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.gantt-view .gantt-task-copy { flex: 1; gap: 1px; }
.gantt-view .gantt-task-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; font-size: 12px; line-height: 15px; overflow-wrap: anywhere; }
.gantt-view .gantt-task-copy small { font-size: 10px; line-height: 10px; }
.gantt-view .gantt-task-number { color: var(--mut); font-variant-numeric: tabular-nums; }
.gantt-view .tree-toggle, .gantt-view .tree-toggle-space { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; margin: 0; padding: 0; }
.gantt-view .tree-toggle { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--b-600); cursor: pointer; font-size: 15px; }
.gantt-view .tree-toggle:hover { background: var(--b-100); }
.gantt-view .tree-toggle-space { color: var(--subtle); }
.gantt-view .gantt-row.is-parent .gantt-task-label { background: var(--sunken2); }
.gantt-view .gantt-row.is-context .gantt-task-label { background: var(--sunken); }
.gantt-view .gantt-row.is-context .gantt-task-copy strong { color: var(--mut); }
.gantt-view .gantt-grid-lines { display: block; background: none; }
.gantt-view .gantt-grid-lines i { position: absolute; top: 0; bottom: 0; left: calc(var(--grid-offset) * var(--gantt-day-width)); border-right: 1px solid var(--line); }
.gantt-view .gantt-bar { top: 17px; height: 22px; left: calc(var(--bar-left) * var(--gantt-day-width)); width: max(4px, calc(var(--bar-width) * var(--gantt-day-width))); }
.gantt-view .gantt-bar.is-estimated { border: 1px dashed var(--mut); opacity: .72; }
.gantt-view .gantt-actual-delay { position: absolute; z-index: 3; top: 44px; height: 4px; left: calc(var(--delay-left) * var(--gantt-day-width)); width: max(3px, calc(var(--delay-width) * var(--gantt-day-width))); min-width: 0; padding: 0; border: 0; border-radius: 3px; background: var(--err-fill); opacity: 1; cursor: pointer; }
.gantt-view .gantt-actual-delay.is-pending { background: repeating-linear-gradient(135deg, var(--err-fill) 0, var(--err-fill) 4px, var(--err-line) 4px, var(--err-line) 7px); }
.gantt-view .gantt-completion-marker { position: absolute; top: 10px; left: calc(var(--completion-left) * var(--gantt-day-width) - 5px); z-index: 3; width: 11px; height: 11px; min-width: 0; padding: 0; border: 2px solid var(--panel); background: var(--ok); transform: rotate(45deg); border-radius: 1px; box-shadow: 0 0 0 1px var(--ok); cursor: pointer; }
.gantt-view .gantt-completion-marker.is-late { background: var(--err-fill); box-shadow: 0 0 0 1px var(--err-fill); }
.gantt-view .gantt-completion-marker:focus-visible, .gantt-view .gantt-actual-delay:focus-visible, .gantt-view .tree-toggle:focus-visible { outline: 2px solid var(--b-600); outline-offset: 3px; }
.gantt-view .gantt-today-line { left: calc(var(--gantt-label-width) + var(--today-position) * var(--gantt-day-width)); }
.gantt-view .gantt-scale-switch { display: flex; gap: 4px; }
.gantt-view .gantt-scale-switch .active { background: var(--b-50); border-color: var(--b-300); color: var(--b-600); }
.gantt-view .gantt-legend { flex-wrap: wrap; }
.gantt-view .gantt-legend .gantt-legend-completed { width: 7px; height: 7px; border-radius: 0; transform: rotate(45deg); background: var(--ok); }
.gantt-view .gantt-legend .gantt-legend-delay { width: 18px; height: 5px; border-radius: 2px; background: var(--err-fill); }
.gantt-view .gantt-toolbar-actions { flex-wrap: wrap; }
@media (max-width: 700px) {
  .gantt-view { --gantt-label-width: 235px; }
  .gantt-view .gantt-task-label { padding-left: calc(7px + var(--gantt-depth) * 12px); }
  .gantt-view .gantt-scroll { max-height: 65dvh; }
}